Search completed in 1.00 seconds.
L10n Checks
l
10n checks is a python script and library similar to compare-locales.
...installation (releases) l
10n checks needs to be installed.
...once python is installed, the easiest way to install l
10n checks (on mac or linux) is to just run: $ sudo easy_install -u l
10n-checks or, if you're on windows: $ easy_install -u l
10n-checks installation (development versions) l
10n checks needs to be installed, and it requires that you have python and mercurial installed on your machine.
...And 15 more matches
NSS_3.11.10_release_notes.html
nss 3.11.
10 release notes 2008-12-
10 newsgroup: <ahref="news: mozilla.dev.tech.crypto"="" news.mozilla.org="">mozilla.dev.tech.crypto</ahref="news:> contents introduction distribution information bugs fixed documentation compatibility feedback introduction network security services (nss) 3.11.
10 is a patch release for nss 3.11.
... the bug fixes in nss 3.11.
10 are described in the "bugs fixed" section below.
... distribution information the cvs tag for the nss 3.11.
10 release is nss_3_11_
10_rtm.
...And 7 more matches
Math.log10() - JavaScript
the math.log
10() function returns the base
10 logarithm of a number, that is ∀x>0,math.log
10(x)=log
10(x)=the uniqueysuch that
10y=x\forall x > 0, \mathtt{\operatorname{math.log
10}(x)} = \log_
10(x) = \text{the unique} \; y \; \text{such that} \;
10^y = x the source for this interactive example is stored in a github repository.
... syntax math.log
10(x) parameters x a number.
... return value the base
10 logarithm of the given number.
...And 4 more matches
l10n - Archive of obsolete content
for compatibility with tools that expect this syntax, you can assign this function to "_": var _ = require("sdk/l
10n").get; given a .properties file for the current locale containing an entry like: hello_string= hello!
... and the following code: var _ = require("sdk/l
10n").get; console.log(_("hello_string")); the following output will be logged: info: hello!
...this enables you to write functional, localizable code without localizing any strings - just make the identifiers the default language: var _ = require("sdk/l
10n").get; console.log(_("hello!")); however, this will make it more difficult to maintain your code if you have many localizations, because any changes to the identifier values break all your .properties files.
...And 2 more matches
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.l
10n - october 6, 2006 announcements english united states dictionary english united states dictionary for firefox 2.
... ffx 2 rc2 testing today l
10n builds were completed was completed and ready for test.
... l
10n locked down - ff2 rc2 code freeze 9/29/2006 at 9am pdt the l
10n repository is locked down.
... authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers
101) ...
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.l
10n - october 13, 2006 announcements seamonkey 1.0.5 he-il seamonkey 1.0.5 in hebrew was released a while ago firefox 2 rc2 is out firefox 2 rc2 is out, to download click here sunbird_0_3_release tag being created sunbird_0_3_release tag being created seamonkey 1.1 localization freeze and beta upcoming there are no open blockers left.
... l
10n freeze on seamonkey 1.1 code is imminent in the next days, as well as beta release.
... authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers
101) ...
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
/ /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits
1024 /* header file constants */ #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_h...
...*slot, secupwdata *pwdata, certname *subject, char *certreqfilename, prbool ascii) { secstatus rv; seckeyprivatekey *privkey = null; seckeypublickey *pubkey = null; keytype keytype = rsakey; int keysize = default_key_bits; int publicexponent = 0x0
10001; secoidtag hashalgtag = sec_oid_unknown; privkey = generateprivatekey(keytype, slot, keysize, publicexponent, null, &pubkey, null, pwdata); if (privkey == null) { pr_fprintf(pr_stderr, "unable to generate key(s)\n"); rv = secfailure; goto cleanup; } privkey->w...
...as in sample 5, output is a pkcs#
10 csr * 2.
100 Continue - HTTP
the http
100 continue informational status response code indicates that everything so far is ok and that the client should continue with the request or ignore it if it is already finished.
... to have a server check the request's headers, a client must send expect:
100-continue as a header in its initial request and receive a
100 continue status code in response before sending the body.
... status
100 continue specifications specification title rfc 7231, section 6.2.1:
100 continue hypertext transfer protocol (http/1.1): semantics and content ...
101 Switching Protocols - HTTP
the http
101 switching protocols response code indicates the protocol the server is switching to as requested by a client which sent the message including the upgrade request header.
... status
101 switching protocols examples switching protocols might be used with websockets.
... http/1.1
101 switching protocols upgrade: websocket connection: upgrade specifications specification title rfc 7231, section 6.2.2:
101 switching protocol hypertext transfer protocol (http/1.1): semantics and content ...
103 Early Hints - HTTP
the http
103 early hints information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response.
... syntax
103 early hints specifications specification status comments rfc 8297:
103 early hints ietf rfc initial definition browser compatibility the compatibility table in this page is generated from structured data.
...please contribute data for "http.status.
103" (depth: 1) to the mdn compatibility data repository.
410 Gone - HTTP
the hypertext transfer protocol (http) 4
10 gone client error response code indicates that access to the target resource is no longer available at the origin server and that this condition is likely to be permanent.
... note: a 4
10 response is cacheable by default.
... status 4
10 gone specifications specification title rfc 7231, section 6.5.9: 4
10 gone hypertext transfer protocol (http/1.1): semantics and content ...
510 Not Extended - HTTP
the hypertext transfer protocol (http) 5
10 not extended response status code is sent in the context of the http extension framework, defined in rfc 2774.
...if the server receives such a request, but any described extensions are not supported for the request, then the server responds with the 5
10 status code.
... status 5
10 not extended specifications specification title rfc 2774, section 7: 5
10 not extended an http extension framework ...
Math.LN10 - JavaScript
the math.ln
10 property represents the natural logarithm of
10, approximately 2.302: math.ln
10=ln(
10)≈2.302\mathtt{\mi{math.ln
10}} = \ln(
10) \approx 2.302 the source for this interactive example is stored in a github repository.
... property attributes of math.ln
10 writable no enumerable no configurable no description because ln
10 is a static property of math, you always use it as math.ln
10, rather than as a property of a math object you created (math is not a constructor).
... examples using math.ln
10 the following function returns the natural log of
10: function getnatlog
10() { return math.ln
10; } getnatlog
10(); // 2.302585092994046 specifications specification ecmascript (ecma-262)the definition of 'math.ln
10' in that specification.
Math.LOG10E - JavaScript
the math.log
10e property represents the base
10 logarithm of e, approximately 0.434: math.log
10e=log
10(e)≈0.434\mathtt{\mi{math.log
10e}} = \log_
10(e) \approx 0.434 the source for this interactive example is stored in a github repository.
... property attributes of math.log
10e writable no enumerable no configurable no description because log
10e is a static property of math, you always use it as math.log
10e, rather than as a property of a math object you created (math is not a constructor).
... examples using math.log
10e the following function returns the base
10 logarithm of e: function getlog
10e() { return math.log
10e; } getlog
10e(); // 0.4342944819032518 specifications specification ecmascript (ecma-262)the definition of 'math.log
10e' in that specification.
Index - Archive of obsolete content
10 add-on sdk add-on sdk, jetpack no summary!
... 47 l
10n add-on sdk localize strings appearing in the add-on's javascript code.
...
100 preferences/event-target add-on sdk listen to changes to the preferences system in firefox.
...And 224 more matches
Index - Web APIs
10 abortsignal api, abortsignal, dom, experimental, interface, reference the abortsignal interface represents a signal object that allows you to communicate with a dom request (such as a fetch) and abort it if required via an abortcontroller object.
...
100 attr.localname api, dom, property, reference the attr.localname read-only property returns the local part of the qualified name of an element.
...
101 attr.namespaceuri api, dom, property, reference the attr.namespaceuri read-only property returns the namespace uri of the attribute, or null if the element is not in a namespace.
...And 216 more matches
Key Values - Web APIs
vk_menu (0x12) vk_lmenu (0xa4) vk_rmenu (0xa5) kvk_option (0x3a) kvk_rightoption (0x3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x0
1000023) 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 (0xfe05) gdk_key_iso_level5_shift (0xfe11) gdk_key_iso_level5_latch (0xfe12) gdk_key_iso_level5_lock (0xfe13) qt::key_altgr (0x0
1001
103 qt::key_mode_switch (0x0
100117e) "capslock" the caps lock key.
... vk_capital (0x14) kvk_capslock (0x39) gdk_key_caps_lock (0xffe5) qt::key_capslock (0x0
1000024) keycode_caps_lock (115) "control" the control, ctrl, or ctl key.
...And 179 more matches
Index - Archive of obsolete content
10 accesskey reference, xul, xul attributes, xul reference, accesskey no summary!
...
100 disableglobalhistory no summary!
...
101 disablehistory no summary!
...And 125 more matches
Index
here is the interface, and a description of its use.</t>
10 how to pass an xpcom object to a new window needsexample, needshelp if you want to be able to call functions within an xpcom object from a xul window's code, you can do so if you pass the xpcom object as one of the arguments to the window creation method.
...
100 creating xpcom components deprecated, guide, needsmarkupwork, xpcom this guide is about gecko, and about creating xpcom components for gecko-based applications.
...
101 an overview of xpcom xpcom this is a book about xpcom.
...And 119 more matches
filter - CSS: Cascading Style Sheets
<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.jpg" id="img1" class="internal default" src="/files/37
10/test_form_2.jpg" style="width:
100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/37
10/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="1
10%" height="1...
...
10%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/37
10/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" style="width:
100%;" /></td> </tr> </tbody> </table> html { height:
100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:
100%; overflow:hidden; } #img2 { width:
100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.standard-table { border: 1px solid rgb(187, 187, 187)...
...; border-collapse: collapse; border-spacing: 0; margin: 0 0 1.286em; height:
100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:
100%; } <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgblur" x="-5%" y="-5%" width="1
10%" height="1
10%"> <fegaussianblur in="sourcegraphic" stddeviation="5"/> </filter> </svg> brightness() the brightness() function applies a linear multiplier to the input image, making...
...And 49 more matches
Index
10 encrypt and decrypt mac using token example, intermediate, mozilla, nss generates encryption/mac keys and uses token for storing.
... 28 nss 3.12.4 release notes <center> 29 nss 3.12.5 release_notes this document was generated by genma teruaki on november 28, 20
10 using texi2html 1.82.
... 31 nss 3.12.9 release notes nss <center> 20
10-09-23</center> <center> newsgroup: mozilla.dev.tech.crypto</center> 32 nss 3.14 release notes the nss team has released network security services (nss) 3.14, which is a minor release with the following new features: 33 nss 3.14.1 release notes network security services (nss) 3.14.1 is a patch release for nss 3.14.
...And 48 more matches
ARIA Test Cases - Accessibility
introduction the information on this page is out of date: it was last updated november 20
10.
... tested ua/at combinations: dragon
10 with firefox 3 and ie 8 beta 2 jaws 9 &
10 with firefox 3 jaws 9 &
10 with ie beta 2 nvda 0.6p2 with firefox 3 orca with firefox 3 window-eyes 7 with ie 8 beta 2 and firefox 3 voiceover (leopard) with safari 4.0.2 zoom (leopard) with safari 4.0.2, firefox 3.x and opera 9.x zoomtext 9.1 with firefox 3 and ie 8 beta 2 test case structure test cases are organized as follows: test case ...
...links test details expected at behavior markup notes results table at firefox ie opera safari jaws 9 - - - - jaws
10 - 1.
...And 48 more matches
Index - Learn web development
10 wai-aria basics aria, accessibility, article, beginner, codingscripting, guide, html, javascript, learn, wai-aria, semantics this article has by no means covered all that's available in wai-aria, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.
... 36 getting started with the web beginner, css, design, guide, html, index, l
10n:priority, publishing, theory it's a lot of work to create a professional website, so if you're new to web development, we encourage you to start small.
... 37 css basics beginner, css, codingscripting, learn, styling, web, l
10n:priority like html, css is not a programming language.
...And 46 more matches
Color picker tool - CSS: Cascading Style Sheets
id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="
10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px 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(255, 255, 255, 0)
100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0)
100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0)
100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0)
100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0)
100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0)
100%), -...
...o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0)
100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%,
100%) 0%, hsla(0, 0%,
100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%)
100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0)
100%); background: -webkit-linear-gradient(top, hsl(0, 0%,
100%) 0%, hsla(0, 0%,
100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%)
100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0)
100%); background: -ms-linear-gradient(top, hsl(0, 0%,
100%) 0%, hsla(0, 0%,
100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%)
100%), -ms-linear-gradient(left, hs...
...And 38 more matches
BluetoothCharacteristicProperties - Web APIs
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).
... full support 70notes notes windows
10.edge full support ≤79notes full support ≤79notes notes edgeos and macos only.
... full support ≤79notes disabled notes linux and versions of windows earlier than
10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
...And 37 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
tent <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-
1000" data-value="0" data-max="
1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> <div class="property"> ...
... .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(255, 255, 255, 0)
100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0)
100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0)
100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0)
100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0)
100%); background: -o-linear-gradient...
...(bottom, #000 0%, rgba(0, 0, 0, 0)
100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0)
100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%,
100%) 0%, hsla(0, 0%,
100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%)
100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0)
100%); background: -webkit-linear-gradient(top, hsl(0, 0%,
100%) 0%, hsla(0, 0%,
100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%)
100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0)
100%); background: -ms-linear-gradient(top, hsl(0, 0%,
100%) 0%, hsla(0, 0%,
100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, ...
...And 36 more matches
BluetoothRemoteGATTDescriptor - Web APIs
bluetoothremotegattdescriptor.uuidread only returns the uuid of the characteristic descriptor, for example '00002902-0000-
1000-8000-00805f9b34fb' for theclient characteristic configuration descriptor.
... 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 70notes notes windows
10.edge full support ≤79notes full support ≤79notes notes macos only.
...And 34 more matches
Box-shadow generator - CSS: Cascading Style Sheets
i-slider-input" data-topic="blur" data-unit="px"></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="catego...
...'border-state' data-state="true"></div> </div> <div id="z-index" class="slidergroup"> <div class="ui-slider-name"> z-index </div> <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> <div class="ui-slider" data-topic="z-index" data-min="-
10" data-max="
10" data-step="1"></div> <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div> <div class="ui-slider-input" data-topic="z-index"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> top </div> <div class="ui-slider-...
...ut" data-topic="rotate" data-unit="deg"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> width </div> <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> <div class="ui-slider" data-topic="width" data-min="0" data-max="
1000" data-step="1" data-value="200"> </div> <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> <div class="ui-slider-input" data-topic="width" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> height </div> ...
...And 30 more matches
Border-image generator - CSS: Cascading Style Sheets
class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="
10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> <div class="ui-input-sl...
...ider" data-topic="preview-area-height" data-min="400" data-max="
1000"> </div> </div> </div> <div id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <div class="guideline" data-axis="y" data-topic="slice-bottom"></div> <div class="guideline" data-axis="x" data-topic="slice-left"></div> </div> <div id="preview"> </div> </div> <!-- controls --> <div id="controls" class="group section"> <!-- border-image-slice --> <div id="border-slice-con...
... <div class="ui-input-slider" data-topic="font-size" data-info="em size" data-unit="px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="
10" data-max="
10000" data-sensivity="3"></div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-height" data-info="height" data-unit=" px" data-min="
10" data-max="
10000" data-sensivity="3"> </div> </div> </div> <div id="output" class=...
...And 29 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
10 abstraction abstraction, coding, codingscripting, glossary, programming language abstraction in computer programming is a way to reduce complexity and allow efficient design and implementation in complex software systems.
... 14 ajax ajax, codingscripting, glossary, infrastructure, l
10n:priority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest.
... 55 css css, codingscripting, glossary, web, l
10n:priority css (cascading style sheets) is a declarative language that controls how webpages look in the browser.
...And 25 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
value) 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 // 20
100526 - modification autoconfig jehan.
...please see //(german) http://interop.blog.de/20
10/02/13/kapitel-1-ldap-anfragen-linux-ad-8001564/ //or search the net how to do it.
... if it is not possible to give access to anonymous, //you have to enable this function first, please see //http://technet.microsoft.com/de-de/library/cc816788(ws.
10).aspx // // //put everything in a try/catch try { var userinfo = new object(); // this will hold ldap results userinfo.envuser = getenv("username"); // username userinfo.envhome = getenv("home"); // user home directory var ldaphost = "example.com"; var ldapbase = "dc=company,dc=local"; if( userinfo.envuser ) { var ldapfilter = "samaccountname=" + userinfo.envuser; } else { throw("couldn't get uid from the environment"); } // ldap attributes to retrieve from the server var ldapattrs = new array( "cn", "mail", "samaccountname" ); // add more attributes here, if needed) // define how to process ldap results before...
...And 21 more matches
The "codecs" parameter in common media types - Web media technologies
av1 codec parameter string components component details p the one-digit profile number: av1 profile numbers profile number description 0 "main" profile; supports yuv 4:2:0 or monochrome bitstreams with bit depth of 8 or
10 bits per component.
...this value must be one of 8,
10, or 12; which values are valid varies depending on the profile and other properties.
... the default value is 1
10 (4:2:0 chroma subsampling).
...And 21 more matches
Using CSS gradients - CSS: Cascading Style Sheets
<div class="diagonal-gradient"></div> div { width: 200px; height:
100px; } .diagonal-gradient { background: linear-gradient(to bottom right, blue, pink); } using angles if you want more control over its direction, you can give the gradient a specific angle.
...if you specify the location as a percentage, 0% represents the starting point, while
100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.
... if you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at 0% and the last color stop being at
100%, and any other color stops being half way between their adjacent color stops.
...And 20 more matches
Translation phase
each group of projects employs a different type of l
10n tool for, you guessed it, localizing the projects.
... the l
10n tools are meant to help you maintain your localized content from release to release and leverage already localized materials when localizing new content.
... here we'll identify those groups of projects and the l
10n tools associated with them.
...And 19 more matches
Creating localizable web applications
good: body.de foo, body.fr foo, body.pl foo { /* locale-specific rules for the foo element */ width:
10em; /* originally 8em */ } adapt the interaction to rtl locales right-to-left locales not only require good images handling (see images), but also should be taken into account when designing the interaction on the website.
...bad: <?= _("<a href=\"https://addons.mozilla.org/firefox/downloads/latest/
10900\" class=\"get-personas\" id=\"download\"><span>get personas for firefox - free</span>");?><span class="arrow"></span></a> snippet 2.
... good: <a href="https://addons.mozilla.org/firefox/downloads/latest/
10900" class="get-personas" id="download"> <span><?= _("get personas for firefox - free");?></span><span class="arrow"></span> </a> snippet 3.
...And 19 more matches
Index - Firefox Developer Tools
found 158 pages: # page tags and summary 1 firefox developer tools developing mozilla, guide, tools, web development, web development:tools, l
10n:priority firefox developer tools is a set of web developer tools built into firefox.
...
10 all keyboard shortcuts tools, l
10n:priority this page lists all keyboard shortcuts used by the developer tools built into firefox.
... 46 network monitor debugging, dev tools, firefox, guide, networking, tools, l
10n:priority the network monitor shows you all the network requests firefox makes (for example, when it loads a page, or due to xmlhttprequests), how long each request takes, and details of each request.
...And 19 more matches
HTTP Index - HTTP
found 277 pages: # page tags and summary 1 http http, hypertext, reference, tcp/ip, web, web development, l
10n:priority hypertext transfer protocol (http) is an application-layer protocol for transmitting hypermedia documents, such as html.
... 2 a typical http session http in client-server protocols, like http, sessions consist of three phases: 3 an overview of http html, http, overview, webmechanics, l
10n:priority http isthe foundation of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web browser.
...
10 incomplete list of mime types audio, file types, files, http, mime, mime types, php, reference, text, types, video here is a list of mime types, associated by type of documents, ordered by their common extensions.
...And 18 more matches
requiredFeatures - SVG: Scalable Vector Graphics
twentynine elements are using 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 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="
10" y="
10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="
10" y="
10" height="25" width="230" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </...
... 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="450" 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="25" width="430" /> <rect class="ok" x="
10" y="
10" height="25" 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/tr/svg11/feature#svgdom --> <rect class="ko" x="
10" y="35" height="25" width="430" /> <rect class="ok" x="
10" y="35" height="25" 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="25" width="430" /> <rect class="ok" x="
10" y="60" height="25" 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="85" height="25" width="430" /> <rect class="ok" x="
10" y="85" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svgdom-static" /> <text x="20" y="
102">http://www.w3.org/tr/svg11/feature#sv...
...And 18 more matches
Drawing graphics - Learn web development
this became webgl, which gained traction among browser vendors, and was standardized around 2009–20
10.
... next, add the following lines to the bottom of your javascript: ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.fillrect(50, 50,
100, 150); 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 150 pixels tall (as defined by the third and fourth parameters).
...And 17 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, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 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 (hebrew), romanic (i...
...talian, portuguese, spanish, catalan), vietnamese is 1: 1 everything else: 0, 2, 3, 4, 5, 6, 7, 8, 9,
10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 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, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 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, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261,...
... 271, 281, 291, … everything else: 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15, 16, 17, 18, 19, 22, 23, 24, 25, 26, 27, 28, 29, 32, 33, 34, 35, 36, 37, 38, 39, 42, 43, 44, 45, 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, 15, 16, 17, 18, 19 everything else: 0, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 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, 15, 16, 17, 18, 19,
101,
102,
103,
104,
105,
106,
107,
108,
109, 1
10, 111, 112, 113, 114, 115, 116, 117, 118, 119, 201, 202...
...And 17 more matches
IDBObjectStore - Web APIs
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 15safari full support 7webview android full support yes full support yes no ...
... 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 15safari full support 7webview android full support yes full support yes no ...
... 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 15safari full support 7webview android full support yes full support yes no ...
...And 17 more matches
Web video codec guide - Web media technologies
imagine the amount of data needed to store uncompressed video: a single frame of high definition (1920x
1080) video in full color (4 bytes per pixel) is 8,294,400 bytes.
...additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 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.
...if a
1080p video is reduced to 720p prior to encoding, the resulting video can be much smaller while having much higher visual quality; even after scaling back up during playback, the result may be better than encoding the original video at full size and accepting the quality hit needed to meet your size requirements.
...And 17 more matches
Index
found 42 pages: # page tags and summary 1 localization at mozilla landing, localization, mozilla, translation, l
10n localization (l
10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture.
... 5 index localization found 42 pages: 6 l
10n checks internationalization, localization, localization:tools, tools l
10n checks is a python script and library similar to compare-locales.
... 7 l
10n testing with xcode firefox for ios, localization once you have your l
10n testing environment set up in xcode, testing your firefox on ios localization is a breeze.
...And 16 more matches
CloseEvent - Web APIs
the only permitted codes to be specified in firefox are
1000 and 3000 to 4999 [source, bug].
...
1000 normal closure normal closure; the connection successfully completed whatever purpose for which it was created.
...
1001 going away the endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection.
...And 16 more matches
height - SVG: Scalable Vector Graphics
using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:
100% } <svg viewbox="0 0 300
100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="
100" width="90" height="60"/> <rect y="0" x="200" width="90" height="
100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primitive.
... value <length> | <percentage> default value
100% animatable yes fecolormatrix for <fecolormatrix>, height defines the vertical length for the rendering area of the primitive.
... value <length> | <percentage> default value
100% animatable yes fecomponenttransfer for <fecomponenttransfer>, height defines the vertical length for the rendering area of the primitive.
...And 16 more matches
width - SVG: Scalable Vector Graphics
using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:
100% } <svg viewbox="0 0
100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="
100" width="60" height="90"/> <rect x="0" y="200" width="
100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primitive.
... value <length> | <percentage> default value
100% animatable yes fecolormatrix for <fecolormatrix>, width defines the horizontal length for the rendering area of the primitive.
... value <length> | <percentage> default value
100% animatable yes fecomponenttransfer for <fecomponenttransfer>, width defines the horizontal length for the rendering area of the primitive.
...And 16 more matches
Index
10 how to embed the javascript engine embedding mozilla, javascript, spidermonkey, tutorial see also jsapi user guide.
...
100 jsexntype jsapi reference, reference, référence(2), spidermonkey these types are part of a jserrorformatstring structure.
...
101 jsextendedclass jsapi reference, obsolete, spidermonkey to implement a custom class that uses any of the jsextendedclass callbacks:
102 jsextendedclass.outerobject jsapi reference, obsolete, spidermonkey see split objects.
...And 15 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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
... 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 15safari full support 7webview android full support yes full support yes no ...
...And 15 more matches
Looping code - Learn web development
let's say he needs
10 portions of food to feed his family.
...if he has reached
10 portions (the point where the condition is no longer true, so the loop exits), he can stop collecting and go home.
... in pseudocode, this would look something like the following: loop(food = 0; foodneeded =
10) { if (food >= foodneeded) { exit loop; // we have enough food; let's go home } else { food += 2; // spend an hour collecting 2 more food // loop will then run again } } so the amount of food needed is set at
10, and the amount the farmer currently has is set at 0.
...And 14 more matches
Release phase
you've setup up your local and remote environments, you've selected your l
10n tools and projects, done some localization and even some testing!
... now you're ready for the final phase: becoming an official l
10n release.
...for more information on the release part of the l
10n process, visit the mozilla wiki here.
...And 14 more matches
NSS functions
umentation 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_certlistfromcert mxr 3.2 and later cert_certtimesvalid mxr 3.2 and later cert_changecerttrust mxr 3.2 and later cert_checkcertvalidtimes mxr 3.2 and later cert_checknamespace mxr 3.12 and later ...
... 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_decodedercrlwithflags mxr 3.6 and later cert_decodegeneralname mxr 3.4 and later cert_decodenameconstraintsextension mxr 3.
10 and later cert_decodeocspresponse mxr 3.6 and later cert_decodeoidsequence mxr 3.2 and later cert_decodeprivkeyusageperiodextension mxr 3.
10 and later cert_decodetruststring mxr 3.4 and later cert_decodeusernotice mxr 3.2 and later cert_dernametoascii mxr 3.4 and later cert_destroycertarray mxr 3.2 and later cert_destroycertificate mxr 3.2 and ...
...And 14 more matches
Applying styles and colors - Web APIs
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(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ')'; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25,
10, 0, math.pi * 2, true); ctx.stroke(); } } } <canvas id="canvas" width="150" height="150"></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.
... '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw semi transparent circles for (var i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75,
10 +
10 * i, 0, math.pi * 2, true); ctx.fill(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample an example using rgba() in this second example, we do something similar to the one above, but instead of drawing circles on top of each other, i've drawn small rectangles with increasing opacity.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = 'rgb(255, 221, 0)'; ctx.fillrect(0, 0, 150, 37.5); ctx.fillstyle = 'rgb(
102, 204, 0)'; ctx.fillrect(0, 37.5, 150, 37.5); ctx.fillstyle = 'rgb(0, 153, 255)'; ctx.fillrect(0, 75, 150, 37.5); ctx.fillstyle = 'rgb(255, 51, 0)'; ctx.fillrect(0, 112.5, 150, 37.5); // draw semi transparent rectangles for (var i = 0; i <
10; i++) { ctx.fillstyle = 'rgba(255, 255, 255, ' + (i + 1) /
10 + ')'; for (var j = 0; j < 4; j++) { ctx.fillrect(5 + i * 14, 5 + j * 37.5, 14, 27.5); } } } <canvas id="canvas" width="150" height="150"...
...And 14 more matches
SVG documentation index - SVG: Scalable Vector Graphics
found 383 pages: # page tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l
10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content.
...
10 replaced element svg this page was auto-generated because a user created a sub-page to this page.
...
100 height svg, svg attribute the height attribute defines the vertical length of an element in the user coordinate system.
...And 14 more matches
Paths - SVG: Scalable Vector Graphics
for instance, let's move to the x and y coordinates (
10,
10).
...so, to move to (
10,
10) the command to use would be m
10 10.
...an uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates (e.g., move
10px up and 7px to the left from the last point).
...And 14 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
a number representing the time interval in milliseconds (
1000 miliseconds equals 1 second) to wait before executing the code.
...if you execute code like settimeout(fn, 0) but then immediately after run a loop that counts from 1 to
10 billion, your callback will be executed after a few seconds.
...it then runs the function once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source): function displaytime() { let date = new date(); let time = date.tolocaletimestring(); document.getelementbyid('demo').textcontent = time; } const createclock = setinterval(displaytime,
1000); just like settimeout(), setinterval() returns an identifying value you can use later when you need to clear the interval.
...And 13 more matches
QA phase
manual & automated builds with the click of a button, some l
10n tools (like narro and koala) automatically create language pack builds for you.
... preliminary instructions we will be using the following file directories for this example: your working directory (root)/ mozilla-aurora (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-aurora )/ l
10n-central (directory for l
10n directories, one per l
10n; often referred to as "l
10n base")/ your-locale-code (a directory with your l
10n files, in this example we'll use x-testing) example: root/mozilla-aurora & root/l
10n-central/x-testing additionally, you will need to copy and translate the toolkit/defines.inc file directly from en-us before you can build.
... enter the following commands: mkdir -p l
10n-central/x-testing/toolkit/ cp mozilla-aurora/toolkit/locales/defines.inc l
10n-central/x-testing/toolkit/defines.inc tah-dah!
...And 13 more matches
Bootstrapping a new locale
l
10n documentation has moved to https://mozilla-l
10n.github.io/localizer-documentation/ .
...refer to l
10n:branches for the list of all branches.
... (read more about tools at l
10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l
10n-drivers.
...And 12 more matches
Localizing with Koala
l
10n.kpf).
...c:\mozilla\l
10n on windows, /home/user/mozilla/l
10n on linux or /users/user/mozilla/l
10n on mac os x).
... note that you don't have to edit the location field, it automatically fills in when you check the "mercurial" checkbox: "c:\mozilla\l
10n\application\firefox\3.6".
...And 12 more matches
WebGL constants - Web APIs
constant name value description depth_buffer_bit 0x00000
100 passed to clear to clear the current depth buffer.
... scissor_box 0x0c
10 returns an int32array with four elements for the current scissor box dimensions.
...iption cw 0x0900 passed to frontface to specify the front face of a polygon is drawn in the clockwise direction ccw 0x0901 passed to frontface to specify the front face of a polygon is drawn in the counter clockwise direction hints constants passed to webglrenderingcontext.hint() constant name value description dont_care 0x1
100 there is no preference for this behavior.
...And 12 more matches
HTML documentation index - HTML: Hypertext Markup Language
found 237 pages: # page tags and summary 1 html: hypertext markup language html, html5, landing, web, l
10n:priority html (hypertext markup language) is the most basic building block of the web.
...
10 class global attributes, html, reference the class global attribute is a space-separated list of the case-sensitive classes of the element.
... 54 html elements reference basic, element, html, reference, web, l
10n:priority this page lists all the html elements, which are created using tags.
...And 12 more matches
A first splash into JavaScript - Learn web development
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.
... see if you can guess it in
10 turns or fewer.
...el for="guessfield">enter a guess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> </div> <div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </div> <script> // your javascript goes here let randomnumber = math.floor(math.random() *
100) + 1; const guesses = document.queryselector('.guesses'); const lastresult = document.queryselector('.lastresult'); const loworhi = document.queryselector('.loworhi'); const guesssubmit = document.queryselector('.guesssubmit'); const guessfield = document.queryselector('.guessfield'); let guesscount = 1; let resetbutton; function checkguess() { let usergues...
...And 11 more matches
NSS_3.12_release_notes.html
ct confusing and erroneous comments in der_asciitotime bug 422866: vfychain -pp command crashes in nss_shutdown bug 345779: useless assignment statements in ec_gf2m_pt_mul_mont bug 349011: please stop exporting these crmf_ symbols bug 397178: crash when entering chrome://pippki/content/resetpassword.xul in url bar bug 403822: pkix_pl_ocsprequest_create can leave some members uninitialized bug 4039
10: cert_findusercertbyusage() returns wrong certificate if multiple certs with same subject available bug 404919: memory leak in sftkdb_readsecmoddb() (sftkmod.c) bug 406120: allow application to specify ocsp timeout bug 36
1025: support for camellia cipher suites to tls rfc4132 bug 376417: pk11_generatekeypair needs to get the key usage from the caller.
...bug 4016
10: shared db fails on iopr tests bug 388120: build error due to sec_begin_protos / sec_end_protos are undefined bug 415264: make security use of new nspr rotate macros bug 317052: lib/base/whatnspr.c is obsolete bug 317323: set nspr31_lib_prefix to empty explicitly for win95 and wince builds bug 320336: secitem_allocitem returns a non-null pointer if the allocation of its 'data' buffer fails bug 327529: can't pass 0 as a...
...bug 357015: on windows, readsystemfiles reads 21 files as opposed to
10 files in c:\windows\system32.
...And 11 more matches
IDBIndex - Web APIs
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 15safari full support 7webview android full support yes full support yes no ...
... full support 24 no support 23 — 24prefixed 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 15safari full support 7webview android full support yes full support yes no ...
... full support 24 no support 23 — 24prefixed 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 15safari full support 7webview android full support yes full support yes no ...
...And 11 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
html <p>live example</p> <button onclick="delayedalert();">show an alert box after two seconds</button> <p></p> <button onclick="clearalert();">cancel alert before it happens</button> javascript var timeoutid; function delayedalert() { timeoutid = window.settimeout(window.alert, 2*
1000, 'that was really slow!'); } function clearalert() { window.cleartimeout(timeoutid); } result see also cleartimeout() example.
...example: var intervalid = settimeout(function() { myfunc('one', 'two', 'three'); },
1000); the above example can also be written with the help of an arrow function: var intervalid = settimeout(() => { myfunc('one', 'two', 'three'); },
1000); yet another possibility is to use function's bind.
... example: settimeout(function(arg1){}.bind(undefined,
10),
1000); the "this" problem when you pass a method to settimeout() (or any other function, for that matter), it will be invoked with a this value that may differ from your expectation.
...And 11 more matches
Grids - Learn web development
simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-radius: 5px; padding:
10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using length...
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-radius: 5px; padding:
10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the fr unit distributes available space, not all space.
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } .container > div { border-radius: 5px; padding:
10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is to make them usable in ...
...And 10 more matches
Choosing the right approach - Learn web development
universe!'); }, 2000) pitfalls you can use recursive settimeout() calls to run a function repeatedly in a similar fashion to setinterval(), using code like this: let i = 1; settimeout(function run() { console.log(i); i++; settimeout(run,
100); },
100); there is a difference between recursive settimeout() and setinterval(): recursive settimeout() guarantees at least the specified amount of time (
100ms in this example) will elapse between the executions; the code will run and then wait
100 milliseconds before it runs again.
... 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
10opera full support yessafari ?
...And 10 more matches
Mozilla’s UAAG evaluation report
2.
10 toggle placeholders.
...(p1) na 4.
10 independent volume control.
...(p2) p dom inspector provides some capability, but not really intended for end users (tasks, tools, dom inspector) 9.
10 configure important elements.
...And 10 more matches
NSS tools : ssltab
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 (0x
10) cipher-suites = { (0x0
10080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64...
...type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e
10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho.
... session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57
10 a7 32 | ...¨*1.)..@7w.§2
10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È.
...And 10 more matches
NSS tools : ssltap
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 (0x
10) cipher-suites = { (0x0
10080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64...
...type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e
10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho.
... session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57
10 a7 32 | ...¨*1.)..@7w.§2
10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È.
...And 10 more matches
NSS tools : ssltap
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 (0x
10) cipher-suites = { (0x0
10080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 ...
... type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e
10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho.
... session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57
10 a7 32 | ...¨*1.)..@7w.§2
10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È.
...And 10 more matches
Drawing shapes with canvas - Web APIs
rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillrect(25, 25,
100,
100); ctx.clearrect(45, 45, 60, 60); ctx.strokerect(50, 50, 50, 50); } } this example's output is shown below.
... screenshotlive sample the fillrect() function draws a large black square
100 pixels on each side.
... drawing a triangle for example, the code for drawing a triangle would look something like this: <html> <body onload="draw();"> <canvas id="canvas" width="
100" height="
100"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(75, 50); ctx.lineto(
100, 75); ctx.lineto(
100, 25); ctx.fill(); } } the result looks like this: screenshotlive sample moving the pen one very useful function, which ...
...And 10 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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
... 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 15safari full support 7webview android full support yes full support yes no ...
... full support 24 full support 23prefixed 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 15safari full support 7webview android full support yeschrome android full support yesfire...
...And 10 more matches
MSGestureEvent - Web APIs
efoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmsgestureevent non-standardchrome no support noedge no support 12 — 79firefox no support noie full support
10opera no support nosafari no support nowebview android no support nochrome android no support nofirefox android no support noopera android no support ...
...t nosamsung internet android no support nomsgestureevent() constructor non-standardchrome no support noedge no support 12 — 79firefox no support noie full support
10opera no support nosafari no support nowebview android no support nochrome android no support nofirefox android no support noopera android no support ...
... no support nosamsung internet android no support noexpansion non-standardchrome no support noedge no support 12 — 79firefox no support noie full support
10opera no support nosafari no support nowebview android no support nochrome android no support nofirefox android no support noopera android no support ...
...And 10 more matches
Border-radius generator - CSS: Cascading Style Sheets
'bottom-right'></div> <div class="ui-checkbox" data-topic='bottom-left'></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: 15.32%; } .span_1 { width: 6.86%; } /* sections * ==========================================================...
...lear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 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-inpu...
...t-slider-info { width: 90px; padding: 0px
10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0
10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* check...
...And 10 more matches
Using CSS transitions - CSS: Cascading Style Sheets
transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width:
100px; height:
100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size le...
...ocument.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width:
100px; height:
100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top tran...
...ocument.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: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width:
100px; height:
100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size lef...
...And 10 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.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,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 pr...
... <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="
109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div 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.25,0.25,1,1,1,0.5,0.3 a 0.25,0.25,1,1,...
..."> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="
109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z') </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg2"> i love<br><em>clipping</em> ...
...And 10 more matches
SVG and CSS - SVG: Scalable Vector Graphics
<text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">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="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(18)"> <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(36)"> <path class="segment-fill" d="m0,0 v-2...
...00 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 class="quadrant"> <g class="segment" transform="rotate(90)"> <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(
108)"> <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(126)"> <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(144)"> <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(162)"> <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...
...And 10 more matches
Localization - Archive of obsolete content
to reference localized strings from html, add a data-l
10n-id attribute to the html tag where you want the localized string to appear, and assign the identifier to it: <html> <body> <h1 data-l
10n-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...
...tion() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 75, width: 150, 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-l
10n-id attribute set.
...hello_id= <blink>hello!</blink> localizing element attributes this feature is new in firefox 39 you can localize certain attributes of elements with an l
10n-id by setting its value with l
10n-id.attributename in the properties file like: hello_id.accesskey= h the following attributes are supported: accesskey alt label title placeholder further the localization of the aria attributes aria-label, aria-valuetext and aria-moz-hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamozhint using localized strings in javascript to reference localized strings from yo...
...And 9 more matches
StringView - Archive of obsolete content
awhole.subarray(nstartidx, nendidx) : awhole; } this.buffer = awhole.buffer; this.bufferview = awhole; this.rawdata = araw; object.freeze(this); } /* constructor's methods */ stringview.loadutf8charcode = function (achars, nidx) { /* the iso
10646 view of utf-8 considers valid codepoints encoded by 1-6 bytes, * while the unicode view of utf-8 in 2003 has limited them to 1-4 bytes in order to * match utf-16's codepoints.
...so...: */ /* six bytes */ (npart - 252) *
1073741824 + (achars[nidx + 1] - 128 << 24) + (achars[nidx + 2] - 128 << 18) + (achars[nidx + 3] - 128 << 12) + (achars[nidx + 4] - 128 << 6) + achars[nidx + 5] - 128 : npart > 247 && npart < 252 && nidx + 4 < nlen ?
... /* one byte */ npart; }; stringview.pututf8charcode = function (atarget, nchar, nputat) { var nidx = nputat; if (nchar < 0x80 /* 128 */) { /* one byte */ atarget[nidx++] = nchar; } else if (nchar < 0x800 /* 2048 */) { /* two bytes */ atarget[nidx++] = 0xc0 /* 192 */ + (nchar >>> 6); atarget[nidx++] = 0x80 /* 128 */ + (nchar & 0x3f /* 63 */); } else if (nchar < 0x
10000 /* 65536 */) { /* three bytes */ atarget[nidx++] = 0xe0 /* 224 */ + (nchar >>> 12); atarget[nidx++] = 0x80 /* 128 */ + ((nchar >>> 6) & 0x3f /* 63 */); atarget[nidx++] = 0x80 /* 128 */ + (nchar & 0x3f /* 63 */); } else if (nchar < 0x200000 /* 2097152 */) { /* four bytes */ atarget[nidx++] = 0xf0 /* 240 */ + (nchar >>> 18); atarget[nidx++] = 0x80 /* 128 */ + ((ncha...
...And 9 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: 150px; height:
100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow.
... to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height:
100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
... .special { background-color: rgb(79,185,227); padding:
10px; color: #fff; } to make the effect easier to see, change the margin-right on your float to margin, so you get space all around the float.
...And 9 more matches
Positioning - Learn web development
my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we span
100% of the width of our parent element, and we are as tall as our child content.
...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?
...my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we span
100% of the width of our parent element, and we are as tall as our child content.
...And 9 more matches
Localizing without a specialized tool
folder structure throughout this document, we will be using the following folder structure in all examples: your working directory (root) mozilla-1.9.2 (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-1.9.2) l
10n-mozilla-1.9.2 (a directory containing localization directories, one dir per localization; often referred to as "l
10n base") x-testing (a directory with your localization files) please either follow this structure closely or adjust all commands in the documentation as needed by your custom set-up.
...next, again in your working dir, create a directory that will serve as localization base: $ mkdir l
10n-mozilla-1.9.2 $ cd l
10n-mozilla-1.9.2 inside this directory you will put all the localization files in a folder named after your locale, e.g.
...this will automatically create an "x-testing" directory in your current directory (you should be in l
10n-mozilla-1.9.2).
...And 9 more matches
Uplifting a localization from Central to Aurora
localizers who are working on l
10n-central are responsible for getting their work onto the aurora repository.
... here some tips and tricks for syncing up both l
10n-central and releases/l
10n/mozilla-aurora at the same time en-us goes from central to aurora.
...let's pretend it's at l
10n-central/ab-cd.
...And 9 more matches
sslerr.html
ssl_error_pub_key_size_limit_exceeded -122
10 "ssl server attempted to use domestic-grade public key with export cipher suite." on a client socket, this error reports that the remote server has failed to perform an "ssl step down" for an export cipher.
... sec_error_pkcs12_corrupt_pfx_structure -81
10 unable to import.
... sec_error_pkcs12_unsupported_pbe_algorithm -8
109 unable to import.
...And 9 more matches
NSS Tools ssltap
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 (0x
10) cipher-suites = { (0x0
10080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (...
... type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 |wn&l.ì..xog.-.e
10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f |\.uc§l.Ç.d<paho.
... session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57
10 a7 32 | ...¨*1.)..@7w.§2
10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È.
...And 9 more matches
nsIAccessibleRole
role_internal_frame
10 a sub-document or iframe.
... role_autocomplete
100 a text entry having dialog or list containing items for insertion into an entry widget, for instance a list of words for completion of a text entry.
... role_editbar
101 an editable text object in a toolbar.
...And 9 more matches
Basic animations - Web APIs
t('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds()); ctx.translate(
105, 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(150, 150,
105, 0, math.pi * 2, false); // earth orbit ctx.s...
...nt.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 150, 150); ctx.translate(75, 75); 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.beginpath(); ctx.moveto(117, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.rotate(math.pi / 30); } ctx.restore(); var sec = now.getseconds(); var min = now.getminutes(); var hr = n...
...hr - 12 : hr; ctx.fillstyle = 'black'; // write hours ctx.save(); ctx.rotate(hr * (math.pi / 6) + (math.pi / 360) * min + (math.pi / 21600) *sec); ctx.linewidth = 14; ctx.beginpath(); ctx.moveto(-20, 0); ctx.lineto(80, 0); ctx.stroke(); ctx.restore(); // write minutes ctx.save(); ctx.rotate((math.pi / 30) * min + (math.pi / 1800) * sec); ctx.linewidth =
10; ctx.beginpath(); ctx.moveto(-28, 0); ctx.lineto(112, 0); ctx.stroke(); ctx.restore(); // write seconds ctx.save(); ctx.rotate(sec * math.pi / 30); ctx.strokestyle = '#d40000'; ctx.fillstyle = '#d40000'; ctx.linewidth = 6; ctx.beginpath(); ctx.moveto(-30, 0); ctx.lineto(83, 0); ctx.stroke(); ctx.beginpath(); ctx.arc(0, 0,
10, 0, math.pi * 2, true); ctx.fill();...
...And 9 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
style ::cue(b) { color: peachpuff; } 00:00:00.000 --> 00:00:
10.000 - hello <b>world</b>.
... crédit de transcription 00:04.000 --> 00:05.000 transcrit par célestes™ ::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; } positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see cue settings for more information): webvtt 00:00:00.000 --> 00:00:04.000 position:
10%,line-left align:left size:35% where did he go?
... example 7 - example of a cue 1 - title crawl 00:00:05.000 --> 00:00:
10.000 line:0 position:20% size:60% align:start some time ago in a place rather distant....
...And 9 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:
10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell.
...to cause all created rows to be
100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> ...
... <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:
10px; grid-auto-rows:
100px; } you can use minmax() in your value for grid-auto-rows enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.
...And 9 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
svg source one specified dimension and proportionless this image specifies a width of
100 pixels but no height or intrinsic ratio.
... svg source one specified dimension with intrinsic ratio this image specifies a
100 pixel height but no width.
... source: no dimensions or intrinsic ratio given this css: background: url(no-dimensions-or-ratio.svg); background-size: 125px 175px; 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: 250px 150px; 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: 275px 125px; the rendered output would look like this: source: no specified width or height with intrinsic ratio given this css: background: url(no-d...
...And 9 more matches
<color> - CSS: Cascading Style Sheets
functional notation: rgb[a](r, g, b[, a]) r (red), g (green), and b (blue) can be either <number>s or <percentage>s, where the number 255 corresponds to
100%.
... a (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to
100% (full opacity).
...
100% saturation is completely saturated, while 0% is completely unsaturated (gray).
...And 9 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.
... <number> a <number> value between 1 and
1000, inclusive.
... 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.
...And 9 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
for datetime-local inputs, the value of step is given in seconds, with a scaling factor of
1000 (since the underlying numeric value is in milliseconds).
...and, 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="span5"> <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.
...And 9 more matches
<input type="number"> - HTML: Hypertext Markup Language
here, we have an number input with the placeholder "multiple of
10".
... <input type="number" placeholder="multiple of
10"> controlling step size by default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1.
...our above example contains a placeholder saying that the value should be a multiple of
10, so it makes sense to add a step value of
10: <input type="number" placeholder="multiple of
10" step="
10"> in this example, you should find that the up and down step arrows will increase and decrease the value by
10 each time, not 1.
...And 9 more matches
Index - HTTP
10 access-control-allow-origin access control, access-control-allow-origin, cors, dealing with cors, http, http header, how to fix cors, reference, security, cross-origin issue, header, origin the access-control-allow-origin response header indicates whether the response can be shared with requesting code from the given origin.
...
100 set-cookie cookies, http, reference, response, header the set-cookie http response header is used to send cookies from the server to the user agent.
...
101 set-cookie2 cookies, http, obsolete, reference, header the obsolete set-cookie2 http response header used to send cookies from the server to the user agent, but has been deprecated by the specification.
...And 9 more matches
parseInt() - JavaScript
be careful—this does not default to
10!
...(for example, a radix of
10 converts from a decimal number, 8 converts from octal, 16 from hexadecimal, and so on.) for radices above
10, letters of the english alphabet indicate numerals greater than 9.
...6.022e23 for 6.022 ×
1023), using parseint to truncate numbers will produce unexpected results when used on very large or very small numbers.
...And 9 more matches
<feComposite> - SVG: Scalable Vector Graphics
example svg <svg width="330" height="195" viewbox="0 0 1
100 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> <defs> <desc>d...
... 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="1
10%" height="1
10%"> <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="1
10%" height="1
10%"> <feflood flood-colo...
...r="#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="1
10%" height="1
10%"> <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="1
10%" height="1
10%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2...
...And 9 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="15" ry="15" width="
100" height="
100"/> <rect x="
10" y="120" rx="15" ry="15" width="
100" height="
100" fill="url(#gradient2)"/> </svg> screenshotlive sample above is an example of a linear gradient being applied to a <rect> element.
...you can insert as many stop colors as you like to create a blend that's as beautiful or hideous as you need, but the offsets should always increase from 0% (or 0 if you want to drop the % sign) to
100% (or 1).
...And 9 more matches
Implementation Status - Archive of obsolete content
mozilla xforms is not actively maintained any more since about 20
10!
... 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 4.3.
10 xforms-submit-serialize supported 4.4 notification events supported 4.4.1 xforms-insert supported 4.4.2 xforms-delete supported 4.4.3 xforms-value-changed supported 4.4.4 xf...
... 4.4.5 xforms-invalid supported 4.4.6 xforms-readonly supported 4.4.7 xforms-readwrite supported 4.4.8 xforms-required supported 4.4.9 xforms-optional supported 4.4.
10 xforms-enabled supported 4.4.11 xforms-disabled supported 4.4.12 domactivate supported 4.4.13 domfocusin supported 4.4.14 domfocusout supported 4.4.15 xforms-select xforms-d...
...And 8 more matches
Legacy layout methods - Learn web development
by default, its children (the <h1> and the two <div>s) will span
100% of the width of the body.
... if we want the two <div>s to be floated alongside one another, we need to set their widths to total
100% of the width of their parent element or smaller so they can fit alongside one another.
... <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">15</div> <div class="col span2">16</div> </div> </div> the aim is to turn this into a demonstration grid of two rows on a twelve column grid — the top row demonstrating the size of the individual ...
...And 8 more matches
Localizing with Mercurial
if the documentation is incomplete or you have questions, please drop by the #l
10n or #hg channels on irc.mozilla.org.
... l
10n-central contains all of the l
10n repos for firefox nightly.
...for example, to clone your firefox nightly l
10n repo, run the following command, replacing ab-cd with your locale code: hg clone https://hg.mozilla.org/l
10n-central/ab-cd/ updating your local repos to update your working copy of mozilla-central, go to your local mozilla-central directory and run: hg pull -u this will both get new changesets from mozilla-central and apply those changes in your working copy.
...And 8 more matches
Index
pizzarro <rhp@netscape.com>
10 autoconfiguration in thunderbird administration, enterprise author: ben bucksch please do not change this document without consulting the author 11 autoconfig file format no summary!
...
100 add toolbar button example xul overlay file:
101 create custom column thunderbird the article "creating a custom column" will get you well on the road to creating your own columns and populating them with custom data.
...
102 detect opening folder thunderbird some actions require execution every time you open a folder (for example, registering a custom column handler.
...And 8 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,
100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,
100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-r...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,
100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-column: 1 / 2; grid-row: 1 / 4; } .box2 { grid-column: 3 / 4; ...
...And 8 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
legal values for each of these parameters are: red, green, and blue each must be an <integer> value between 0 and 255 (inclusive), or a <percentage> from 0% to
100%.
...you can also specify a percentage where 0% is the same as 0.0 and
100% is the same as 1.0.
... for example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5) or rgb(
100%, 0, 0, 50%).
...And 8 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="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="
100" begin="0s" dur="8s" fill="freeze" /> </rect> <rect x="35" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" begin="2s" dur="6s" fill="freeze" /> </rect> <rect x="60" y...
...="85" height="15" 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="25" x2="
10" y2="
105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="
105" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="
105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="
105" stroke="grey" stroke-width=".5" /> <text x="1
10" y="20" text-anchor="middle">8s</text> <line x1="11...
...0" y1="25" x2="1
10" y2="
105" stroke="grey" stroke-width=".5" /> <line x1="
10" y1="30" x2="1
10" y2="30" stroke="grey" stroke-width=".5" /> <line x1="
10" y1="
105" x2="1
10" y2="
105" 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="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" id="first" begin="0s;third.end" dur="4s" /> </rect> <rect x="60" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="25" id="second" begin="fi...
...And 8 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 ...
... 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 1
10,
10 l 80,80 v -80 h -40" /> </svg>...
...And 8 more matches
Index of archived content - Archive of obsolete content
nd xul comparison testing the add-on sdk two types of scripts working with events xul migration guide high-level apis addon-page base64 clipboard context-menu hotkeys indexed-db l
10n notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs simple-storage system tabs timers ui url ...
...formance with html firefox block and line layout cheat sheet content states and the style system disabling interruptible reflow document loading - from load start to finding a handler documentation for bidi mozilla downloading nightly or trunk builds jss build instructions for osx
10.6 layout faq layout system overview multiple firefox profiles repackaging firefox style system overview using microformats firefox sync code snippets javascript client api syncing custom preferences fo...
...e directories overview using xml data islands in mozilla using content preferences visualizing an audio spectrum working with bfcache cert_override.txt mozilla release faq newsgroup summaries format mozilla.dev.apps.firefox-2006-09-29 mozilla.dev.apps.firefox-2006-
10-06 mozilla-dev-accessibility 2006-
10-06 2006-11-
10 2006-11-22 mozilla-dev-apps-calendar 2006-09-29 2006-
10-06 mozilla-dev-apps-firefox 2006-09-29 2006-
10-06 ...
...And 7 more matches
jspage - Archive of obsolete content
var mootools={version:"1.2.4",build:"0d9113241a90b9cd5643b926795852a20267
10d4"};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"){retu...
...sxml2.xmlhttp"); },function(){return new activexobject("microsoft.xmlhttp");});};browser.features.xhr=!!(browser.request());browser.plugins.flash=(function(){var a=($try(function(){return navigator.plugins["shockwave flash"].description; },function(){return new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],
10)||0,build:parseint(a[2],
10)||0}; })();function $exec(b){if(!b){return b;}if(window.execscript){window.execscript(b);}else{var a=document.createelement("script");a.setattribute("type","text/javascript"); a[(browser.engine.webkit&&browser.engine.version<420)?"innertext":"text"]=b;document.head.appendchild(a);document.head.removechild(a);}return b;}native.uid=1; var $uid=(browser.engine.trident)?fun...
...urn this.create({bind:b,arguments:a,event:true});},attempt:function(a,b){return this.create({bind:b,arguments:a,attempt:true})(); },delay:function(b,c,a){return this.create({bind:c,arguments:a,delay:b})();},periodical:function(c,b,a){return this.create({bind:b,arguments:a,periodical:c})(); }});number.implement({limit:function(b,a){return math.min(a,math.max(b,this));},round:function(a){a=math.pow(
10,a||0);return math.round(this*a)/a;},times:function(b,c){for(var a=0; a<this;a++){b.call(c,a,this);}},tofloat:function(){return parsefloat(this);},toint:function(a){return parseint(this,a||
10);}});number.alias("times","each"); (function(b){var a={};b.each(function(c){if(!number[c]){a[c]=function(){return math[c].apply(null,[this].concat($a(arguments)));};}});number.implement(a); })(["abs","acos","...
...And 7 more matches
reftest opportunities files - Archive of obsolete content
tests from dbaron 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/sec0
10303 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/parsing5 http://dbaron.org/css/test/parsing6 http://dbaron.org/css/test/sec040
102 http://dbaron.org/css/test/casesens http://dbaron.org/css/test/xmltypesel http://dbaron.org/css/test/unitl...
...ess http://dbaron.org/css/test/exunit http://dbaron.org/css/test/emunit http://dbaron.org/css/test/sec0403
10 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/univsel 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/sec051
103 http://dbaron.org/css/test/sec051
103b 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 htt...
...ss1 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://dbaron.org/css/test/margtest http://dbaron.org/css/test/shortborder http://dbaron.org/css/test/shortborder2 http://dbaron.org/css/test/sec0805 http://dbaron.org/css/test/dborder http://dbaron.org/css/test/sec090
102 http://dbaron.org/css/test/sec090201 http://dbaron.org/css/test/sec090203 http://dbaron.org/css/test/sec090204 http://dbaron.org/css/test/sec090205 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/sec0905 http://dbaron.org/css/test...
...And 7 more matches
Sizing items in CSS - Learn web development
with no percentage applied our <div> would take up
100% of the available space, as it is a block level element.
...we have given the inner box a margin of
10% and a padding of
10%.
...in our example, all of the margins and padding are
10% of the width.
...And 7 more matches
Introduction to CSS layout - Learn web development
we've defined three columns each of 1fr and two rows of
100px.
... grid example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows:
100px
100px; grid-gap:
10px; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> <div class="box6">six</div> </div> once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above.
... grid example 2 * {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; } .box1 { grid-column: 2 / 4; grid-row: 1; } .box2 { grid-column: 1; grid-row: 1 / 3; } .box3 { grid-row: 2; grid-column: 3; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: these two examples are just a small part of the power of grid layout; to f...
...And 7 more matches
Fundamental text and font styling - Learn web development
a simple sizing example when sizing your text, it is usually a good idea to set the base font-size of the document to
10 px, so that then the maths is a lot easier to work out — required (r)em values are then the pixel font size divided by
10, not 16.
...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.
...
100–900: numeric boldness values that provide finer grained control than the above keywords, if needed.
...And 7 more matches
IME handling guide
e
10s support even when a remote process has focus, native ime handler in chrome process does its job.
... how do mozilla::textcomposition and mozilla::imestatemanager work in e
10s mode?
... in remote process, they work as non-e
10s mode.
...And 7 more matches
What every Mozilla translator should know
l
10n stands for localization = l + another
10 letters + n mailing lists and other resources there are several mailing lists to keep the track of what's going on, which are available as newsgroups, as well, both on news.mozilla.org and google groups: the main l
10n list also available as mozilla.dev.l
10n, .l
10n in short.
... discussion about localization take part here just as well as l
10n-focused announcements.
... translate the mozilla web or mozilla.dev.l
10n.web, we moved announcements and discussions about the translation of the mozilla web pages to this group.
...And 7 more matches
powermetrics
this document describes the version of powermetrics that comes with mac os
10.
10.
... the one that comes with
10.9 is less powerful.
... the following is example output from such an invocation: *** sampled system activity (fri sep 4 17:15:14 2015 +
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.35 221.74 firefox 84627 77.59 55.55 15.37 2.59 91.42 42.12 ...
...And 7 more matches
nsIAccessibleStates
state_checked 0x000000
10 the object is checked.
... state_default 0x00000
100 this state represents the default button in a window.
... state_floating 0x0000
1000 children "owned" not "contained" by parent.
...And 7 more matches
nsIDOMWindowUtils
modifier_altgraph 0x00
10 getmodifierstate("altgraph") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event().
... modifier_numlock 0x0
100 getmodifierstate("numlock") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event().
... modifier_scroll 0x0
100 getmodifierstate("scroll") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event().
...And 7 more matches
CanvasRenderingContext2D.filter - Web APIs
a value under
100% darkens the image, while a value over
100% brightens it.
... a value of 0% will create an image that is completely black, while a value of
100% leaves the input unchanged.
...a value of
100% leaves the drawing unchanged.
...And 7 more matches
IDBKeyRange - Web APIs
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 15safari full support 7webview android full support yeschrome android full support yesfire...
... full support 24 no support 23 — 24prefixed 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 15safari full support 7webview android full support yeschrome android full support yesfire...
... 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 androi...
...And 7 more matches
SubtleCrypto.unwrapKey() - Web APIs
*/ const wrappedkeybytes = [171,223,14,36,201,233,233,120,164,68,217,192,226,80, 224,39,199,235,239,60,212,169,
100,23,61,54,244,197,160,80,
109,230,207, 225,57,197,175,71,80,209]; /* convert an array of byte values to an arraybuffer.
... const saltbuffer = bytestoarraybuffer(saltbytes); // 3 derive the key from key material and salt return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: saltbuffer, "iterations":
100000, "hash": "sha-256" }, keymaterial, { "name": "aes-kw", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* unwrap an aes secret key from an arraybuffer containing the raw bytes.
...*/ const saltbytes = [180,253,62,216,47,35,90,55,218,233,
103,
10,172,143,161,177]; /* iv that is to be used in decrypting the key to unwrap.
...And 7 more matches
Using CSS animations - CSS: Cascading Style Sheets
0% indicates the first moment of the animation sequence, while
100% indicates the final state of the animation.
...if from/0% or to/
100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.
... p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left:
100%; width: 300%; } to { margin-left: 0%; width:
100%; } } in this example the style for the <p> element specifies that the animation should take 3 seconds to execute from start to finish, using the animation-duration property, and that the name of the @keyframes at-rule defining the keyframes for the animation sequence is named “slidein”.
...And 7 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
in this next example, my grid will consist of
10 tracks, a 1fr track, and then followed by a 2fr track.
...for example, i may want my rows to never collapse smaller than
100 pixels, but if my content stretches to 300 pixels in height, then i would like the row to stretch to that height.
...this means automatically created rows will be a minimum of
100 pixels tall, and a maximum of auto.
...And 7 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
baseline first baseline last baseline * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap:
10px; grid-auto-rows:
100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; } .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap:
10px; grid-auto-rows:
100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; align-self: start; } .item3 { grid-area: c; align-self: end; } .item4 { grid-area: d; align-self: center; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</...
...ple demonstrates this default alignment: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap:
10px; grid-auto-rows:
100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; justify-self: start; } .item3 { grid-area: c; justify-self: end; } .item4 { grid-area: d; justify-self: center; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">it...
...And 7 more matches
cross-fade() - CSS: Cascading Style Sheets
the percent value must be coded without quotes, must contain the “%” symbol, and its value must be between 0% and
100%.
...this means a value of 0% means the image is fully transparent while a value of
100% makes the image fully opaque.
... cross-fade( url(white.png) 0%, url(black.png)
100%); /* fully black */ cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */ cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */ cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */ cross-fade( url(white.png)
100%, url(black.png) 0%); /* fully white */ cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */ if any percentages are omitted, all the specified percentages are summed together and subtracted from
100%.
...And 7 more matches
linear-gradient() - CSS: Cascading Style Sheets
tom 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(.25turn, red,
10%, blue); /* multi-position color stop: a gradient tilted 45 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(45deg, red 0 50%, blue 50%
100%); values ...
...you'll have to set the html height property to
100% or
100vh to render as depicted.
... linear-gradient(red, orange, yellow, green, blue); linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, 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 7 more matches
Date and time formats used in HTML - HTML: Hypertext Markup Language
for the purposes of html dates, years are always at least four digits long; years prior to the year
1000 are padded with leading zeroes ("0"), so the year 72 is written as 0072.
... leap years a leap year is any year which is divisible by 400 or the year is divisible by 4 but not by
100.
... the adjustments to the algorithm (taking a leap year when the year can be divided by 400, and skipping leap years when the year is divisible by
100) help to bring the average even closer to the correct number of days (365.2425 days).
...And 7 more matches
JavaScript modules - JavaScript
to change preferences in firefox, visit about:config.ie no support noopera full support 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):...
...to change preferences in firefox, visit about:config.opera android full support 45safari 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".
...to change preferences in firefox, visit about:config.ie no support noopera full support 48safari full support
10.1webview android no support nochrome android full support 61firefox android full support 60 full support 60 no support 54 — 60disabled disabled from version 54 until version 60 (exclusive): t...
...And 7 more matches
Numbers and dates - JavaScript
numbers in javascript, numbers are implemented in double-precision 64-bit binary format ieee 754 (i.e., a number between ±2−
1022 and ±2+
1023, or about ±
10−308 to ±
10+308, with a numeric precision of 53 bits).
... var flt_signbit = 0b
10000000000000000000000000000000; // 2147483648 var flt_exponent = 0b01111111
100000000000000000000000; // 2139095040 var flt_mantissa = 0b00000000011111111111111111111111; // 8388607 octal numbers octal number syntax uses a leading zero.
...in ecmascript 2015, octal numbers are supported if they are prefixed with 0o, e.g.: var a = 0o
10; // es2015: 8 hexadecimal numbers hexadecimal number syntax uses a leading zero followed by a lowercase or uppercase latin letter "x" (0x or 0x).
...And 7 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.
... that.age++; },
1000); } alternatively, a bound function could be created so that a preassigned this value would be passed to the bound target function (the growup() function in the example above).
... thus, in the following code, the this within the function that is passed to setinterval has the same value as the this in the lexically enclosing function: function person(){ this.age = 0; setinterval(() => { this.age++; // |this| properly refers to the person object },
1000); } var p = new person(); relation with strict mode given that this comes from the surrounding lexical context, strict mode rules with regard to this are ignored.
...And 7 more matches
Table Layout Regression Tests - Archive of obsolete content
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 left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0" /> <list data="
100
100 " /> <position data="left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto " /> <text data="0 0 0 normal normal 0[0x0]tw normal " /> <textreset data="0
10[0xa]enum " /> <display data="0 1 0 0 0 0 0 0 0 0 0 0 " /> <visibility data="0 1 1.000000" /> <table data="0 0 4 -1 1 " /> <tableborder data="1 null null 0 2 "...
...0,26437,4872,600 node 1: tableouter(table)(144) 0x
10004 0,26437,4824,600, |null attr|-16777216|left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0|1 1 [none]|left: auto top: auto right: auto bottom: a...
...uto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto |0 0 0 normal normal 0[0x0]tw normal |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 null node 2: tableouter(table)(144) 0x
10004 0,26437,4872,600, |null attr|-16777216|left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0|1 1 [none]|left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto |0 0 0 normal normal 0[0x0]tw normal |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 null frame bbox mismatch: 0,0,4824,600 vs.
...And 6 more matches
How to build custom form controls - Learn web development
*/ .select .optlist { /* this will make sure our list of options will be displayed below the value and out of the html flow */ position : absolute; top :
100%; left : 0; } we need an extra class to handle when the list of options is hidden.
... if you are lost with px to em conversion, try http://riddle.pl/emcalc/ */ font-size : 0.625em; /* 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,.45); /* the first declaration is fo...
...if the content overflows, we display an ellipsis */ display : inline-block; width :
100%; overflow : hidden; white-space : nowrap; text-overflow: ellipsis; vertical-align: top; } we don't need an extra element to design the down arrow; instead, we're using the :after pseudo-element.
...And 6 more matches
Basic math in JavaScript — numbers and operators - Learn web development
10, 400, or -5.
...decimal is base
10 (meaning it uses 0–9 in each column), but we also have things like: binary — the lowest level language of computers; 0s and 1s.
...
10 / 5 % remainder (sometimes called modulo) returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number.
...And 6 more matches
Debugging on Mac OS X
debugging firefox on macos
10.14+ macos
10.14 introduced notarization and hardened runtime features for improved application security.
... macos
10.15 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.
...as a result, it is not possible to attach a debugger to these official firefox releases on macos
10.14+ without disabling system integrity protection (sip).
...And 6 more matches
Simple Thunderbird build
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=12905 are installed because the mapi header files (except mapi.h) are not bundled with visual studio 2017 (windows sdk
10).
... you should copy 17 of the 18 header files to a windows sdk include directory so that the build process will find the files, that is c:\program files (x86)\windows kits\
10\include\
10.0.nnnnn.0\shared, where nnnnn is the highest number present on the system.
... note that the downloaded outlook 20
10 mapi header files contain 18 fies, of which only 17 are needed.
...And 6 more matches
Localization sign-off reviews
we use this review process to perform quality assurance (qa) testing on your l
10n efforts.
...each qa review helps us in these ways: ensures that your l
10n work is visible and functional within the mozilla application.
... allows us to understand how each l
10n team is performing their localization work.
...And 6 more matches
Localization technical reviews
we use this review process to perform quality assurance (qa) testing on your l
10n efforts.
...each qa review helps us in these ways: ensures that your l
10n work is visible and functional within the mozilla application.
... allows us to understand how each l
10n team is performing their localization work.
...And 6 more matches
gettext
1 : 2; if n equals
10, the expression n==1 ?
...urn pgettext($context, $message); } else { return _($message); } } // new gettext keyword for plural strings with optional context argument function n___($message, $message_plural, $num, $context ="") { if($context != "") { return npgettext($context, $message, $message_plural, $num); } else { return ngettext($message, $message_plural, $num); } } // l
10n: this is a block comment one line directly above the gettext function call.
...echo ___('a simple string.'); echo /* l
10n: this is an inline comment.
...And 6 more matches
MathML Torture Test
ath display="block"> <mrow> <mo>(</mo> <mfrac linethickness="0px"> <mi>n</mi> <mrow> <mi>k</mi> <mo>/</mo> <mn>2</mn> </mrow> </mfrac> <mo>)</mo> </mrow> </math> </td></tr> <tr> <td>9</td> <td><img src="https://udn.realityripple.com/samples/52/1839
10d0f1.png" width="237" height="50" alt="texbook, 17.7" /></td> <td> <math display="block"> <mrow> <mrow> <mo>(</mo> <mfrac linethickness="0px"> <mi>p</mi> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <m...
...1</mn> <mo>-</mo> <mi>x</mi> </mrow> </mfrac> <mfrac> <mn>1</mn> <mrow> <mn>1</mn> <mo>-</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> </mrow> </mfrac> </mrow> </math> </td></tr> <tr> <td>
10</td> <td><img src="https://udn.realityripple.com/samples/e4/0fe420309f.png" width="116" height="63" alt="texbook, 17.7-17.8" /></td> <td> <math display="block"> <mrow> <munder> <mo>∑</mo> <mrow> <mfrac linethickness="0px"> <mrow> <mn>0</mn> <mo>≤</mo> ...
...ow> <mi>j</mi> <mi>k</mi> </mrow> </msub> <msub> <mi>c</mi> <mrow> <mi>k</mi> <mi>i</mi> </mrow> </msub> </mrow> </math> </td></tr> <tr> <td>13</td> <td><img src="https://udn.realityripple.com/samples/12/befe77af13.png" width="405" height="
100" alt="texbook, 17.9-17.
10" /></td> <td> <math display="block"> <mrow> <msqrt> <mn>1</mn> <mo>+</mo> <msqrt> <mn>1</mn> <mo>+</mo> <msqrt> <mn>1</mn> <mo>+</mo> <msqrt> <mn>1</mn> <mo>+</mo> ...
...And 6 more matches
Certificate functions
umentation 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_certlistfromcert mxr 3.2 and later cert_certtimesvalid mxr 3.2 and later cert_changecerttrust mxr 3.2 and later cert_checkcertvalidtimes mxr 3.2 and later cert_checknamespace mxr 3.12 and later ...
... 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_decodedercrlwithflags mxr 3.6 and later cert_decodegeneralname mxr 3.4 and later cert_decodenameconstraintsextension mxr 3.
10 and later cert_decodeocspresponse mxr 3.6 and later cert_decodeoidsequence mxr 3.2 and later cert_decodeprivkeyusageperiodextension mxr 3.
10 and later cert_decodetruststring mxr 3.4 and later cert_decodeusernotice mxr 3.2 and later cert_dernametoascii mxr 3.4 and later cert_destroycertarray mxr 3.2 and later cert_destroycertificate mxr 3.2 and ...
...And 6 more matches
sslfnc.html
(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_export
1024_with_rc4_56_sha tls_rsa_export
1024_with_des_cbc_sha ssl_rsa_export_with_rc4_40_md5 ssl_rsa_export_with_rc2_cbc_40_md5 ssl_fortezza_dms_with_null_sha ssl_rsa_with_null_sha (not enabled by default) ssl_rsa_with_null_md5 (not enabled by default) enabled if nonzero, the specified cipher is enabled.
... the tls_rsa_export
1024_with_des_cbc_sha and tls_rsa_export
1024_with_rc4_56_sha cipher suites are defined in rfc 2246.
...it is located in ram (not on disk), and has the following characteristics: maximum number of entries: unlimited ssl 2.0 timeout value:
100 seconds ssl 3.0 timeout value: 24 hours note: if an ssl client application does not call ssl_clearsessioncache before shutdown, nss_shutdown fails with the error code sec_error_busy.
...And 6 more matches
Secure Development Guidelines
ed char 0 - +255 16 signed short -32768 - +32767 unsigned short 0 - +65535 32 signed int -2147483648 - +2147483647 unsigned int 0 - +4294967295 64 signed long long -9223372036854775808 - +9223372036854775807 unsigned long long 0 - +18446744073709551615 int vuln_funct(int size) { char buf[
1024]; if (size > sizeof(buf) - 1) return -1; } signedness issues: don’t mix signed and unsigned integers use unsigned integers for sizes, offsets, and indexes casting and truncation example: void vuln_funct() { u_int32_t size1 = 0xffffffff; u_int16_t size2 = size1; void *ptr = malloc(size2); if (!ptr) exit(exit_failure); memcpy(ptr, user_data, size1); ...
... most memory allocators use a linked list or binary tree bbv: off-by-one the array index starts at 0 not at 1 char array[
1024]; array[0] = first element!
... array[
1023] = last element!
...And 6 more matches
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x0000
1001 xulbutton 0x0000
1002 xulcheckbox 0x0000
1003 xulcolorpicker 0x0000
1004 xulcolorpickertile 0x0000
1005 xulcombobox 0x0000
1006 xuldropmarker 0x0000
1007 xulgroupbox 0x0000
1008 xulimage 0x0000
1009 xullink 0x0000
100a xullistbox 0x0000
100b xullistcell 0x0000
1026 xullisthead 0x0000
1024 xullistheader 0x0000
1025 xullistitem 0x0000
100c xulmenubar ...
...0x0000
100d xulmenuitem 0x0000
100e xulmenupopup 0x0000
100f xulmenuseparator 0x0000
1010 xulpane 0x0000
1011 xulprogressmeter 0x0000
1012 xulscale 0x0000
1013 xulstatusbar 0x0000
1014 xulradiobutton 0x0000
1015 xulradiogroup 0x0000
1016 xultab 0x0000
1017 the single tab in a dialog or tabbrowser/editor interface.
... xultabbox 0x0000
1018 a combination of a tabs object and a tabpanels object.
...And 6 more matches
KeyboardEvent: code values - Web APIs
0x0006 "digit4" "digit4" 0x0007 "digit5" "digit5" 0x0008 "digit6" "digit6" 0x0009 "digit7" "digit7" 0x000a "digit8" "digit8" 0x000b "digit9" "digit9" 0x000c "minus" "minus" 0x000d "equal" "equal" 0x000e "backspace" "backspace" 0x000f "tab" "tab" 0x00
10 "keyq" "keyq" 0x0011 "keyw" "keyw" 0x0012 "keye" "keye" 0x0013 "keyr" "keyr" 0x0014 "keyt" "keyt" 0x0015 "keyy" "keyy" 0x0016 "keyu" "keyu" 0x0017 "keyi" "keyi" 0x0018 "keyo" "keyo" 0x0019 "keyp" "keyp" 0x001a "bracketleft" "bracketleft" ...
...altleft" 0x0039 "space" "space" 0x003a "capslock" "capslock" 0x003b "f1" "f1" 0x003c "f2" "f2" 0x003d "f3" "f3" 0x003e "f4" "f4" 0x003f "f5" "f5" 0x0040 "f6" "f6" 0x0041 "f7" "f7" 0x0042 "f8" "f8" 0x0043 "f9" "f9" 0x0044 "f
10" "f
10" 0x0045 "pause" "pause" 0x0046 "scrolllock" "scrolllock" 0x0047 "numpad7" "numpad7" 0x0048 "numpad8" "numpad8" 0x0049 "numpad9" "numpad9" 0x004a "numpadsubtract" "numpadsubtract" 0x004b "numpad4" "numpad4" 0x004c "numpad5" "numpad5" 0x004d "numpad6" "nump...
...nidentified" "" 0x007d "intlyen" "intlyen" 0x007e "numpadcomma" "" 0x007f "unidentified" "" 0xe000 ～ 0xe007 "unidentified" "" 0xe008 "unidentified" "undo" 0xe009 "unidentified" "" 0xe00a "" "paste" 0xe00b ～ 0xe00f "" "" 0xe0
10 "mediatrackprevious" "mediatrackprevious" 0xe011 ～ 0xe016 "" "" 0xe017 "unidentified" "cut" 0xe018 "unidentified" "copy" 0xe019 "mediatracknext" "mediatracknext" 0xe01a, 0xe01b "unidentified" "" 0xe01c "numpadenter" "numpadenter" 0xe01d "controlright" "contro...
...And 6 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".
... this lets us provide a set of common values and special strings which the browser may optionally choose to display in some fashion; we provide names for the values 0.0 ("mute") and 1.0 ("
100%").
...rm: </span> <select name="waveform"> <option value="sine">sine</option> <option value="square" selected>square</option> <option value="sawtooth">sawtooth</option> <option value="triangle">triangle</option> <option value="custom">custom</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660px; height: 1
10px; 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; use...
...And 6 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 15 safari 4+ safari 5 support is much improved.
... internet explorer 8+ works with jaws
10+ and nvda.
...some of them include: assistive technology minimum version for basic aria minimum version for live region and alert support nvda 20
10.2 (nvda is always a free upgrade) 2011.1 for firefox, no live region support in ie as of 2011.2.
...And 6 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; ...
...rder-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(
100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" ".
...rder-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(
100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "sd sd sd ft ft ft ft ft ft"; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> the value of grid-template-areas mu...
...And 6 more matches
<input type="range"> - HTML: Hypertext Markup Language
the default is
100.
... 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,...
... specifying the minimum and maximum by default, the minimum is 0 and the maximum is
100.
...And 6 more matches
Firefox user agent string reference - HTTP
on desktop, geckotrail is the fixed string "20
100
101" firefox/firefoxversion indicates the browser is firefox, and provides the version (such as "17.0").
... from firefox
10 on mobile, geckotrail is the same as firefoxversion.
... windows version gecko user agent string windows nt on x86 cpu mozilla/5.0 (windows nt x.y; rv:
10.0) gecko/20
100
101 firefox/
10.0 windows nt on x64 cpu mozilla/5.0 (windows nt x.y; win64; x64; rv:
10.0) gecko/20
100
101 firefox/
10.0 macintosh here, x.y is the version of mac os x (for instance, mac os x
10.6).
...And 6 more matches
Expressions and operators - JavaScript
10 ** -1 returns 0.1.
...for example, the decimal number nine has a binary representation of
1001.
...for example, the following integer with more than 32 bits will be converted to a 32 bit integer: before: 11
10 01
10 1111
1010 0000 0000 0000 01
10 0000 0000 0001 after:
1010 0000 0000 0000 01
10 0000 0000 0001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
...And 6 more matches
Web audio codec guide - Web media technologies
supported bit rates half rate (hr) and full rate (fr): 1.8 kbps, 4.75 kbps, 5.15 kbpz, 5.9 kbps, 6.7 kbps, 7.4 kbps, 7.95 kbps full rate (fr) only:
10.2 kbps and 12.2 kbps variable bit rate (vbr) support no supported sample formats 13-bit integer supported sample rates 8 khz recommended minimum bit rate for stereo sound n/a compression lossy maximum audio channels 1 audio frequency bandwidth 200 hz to 3,400 hz latency 25 ms browser compatib...
... supported bit rates — variable bit rate (vbr) support no supported sample formats 4-bit to 24-bit integers supported sample rates 1 hz to 65,535 hz (in 1 hz increments) or
10 hz to 655,350 hz in
10 hz increments recommended minimum bit rate for stereo sound — compression lossless; up to 40-50% size reduction maximum audio channels 8 audio frequency bandwidth full-spectrum latency 4.3 ms to 92 ms with 46.4 ms being the typical average browser compatibility feature ...
...s, 80 kbps, 96 kbps, 112 kbps, 128 kbps, 160 kbps, 192 kbps, 224 kbps, 256 kbps, 320 kbps mpeg-2 mode: 8 kbps, 16 kbps, 24 kbps, 32 kbps, 40 kbps, 48 kbps, 56 kbps, 64 kbps, 80 kbps, 96 kbps, 112 kbps, 128 kbps, 144 kbps, 160 kbps variable bit rate (vbr) support yes supported sample formats 16-bit integer supported sample rates mpeg-1 mode: 32000 hz, 44
100 hz, 48000 hz mpeg-2 mode: 16000 hz, 22050 hz, 24000 hz (half the frequency of the mpeg-1 supported modes) recommended minimum bit rate for stereo sound 128 kbps at 48 khz sample rate compression lossy maximum audio channels mpeg-1 mode: 2 [2.0] mpeg-2 mode: 5 (plus 1 optional low frequency enhancement channel) [5.1] audio frequency b...
...And 6 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
to get these sitting side-by-side we have used the following rules: x-card { width:
100%; } x-card:nth-child(1), x-card:nth-child(2) { width: 30%; float: left; padding: 2rem; } x-card:nth-child(3) { width: 40%; float: left; height:
100%; overflow: auto; padding: 2rem; } so we're giving the first two columns a width of 30%, and the third a width of 40%, floating the columns all left.
...this is pretty horrible, but generally this kind of problem is easily fixed with some simple css: img, video { max-width:
100%; } this tells the replaced elements to remain constrained inside their container's widths, no matter what.
...in the snapshot example, we ended up with slightly different code: x-card:nth-child(1) video, x-card:nth-child(2) img { width:
100%; … } this is because in our case, we do in fact want the video and image to stretch to always fill their containers no matter what — a subtle but important difference from max-width — and therefore always be the same size.
...And 6 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.
... $ 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.
... the work for that fix also included some changes to the configure.py default behavior to decouple the --target switch from sdk choice: there is a new switch, --mac-sdk, that selects the
10.4u,
10.5 or
10.6 sdk.
...And 5 more matches
Accessibility/XUL Accessibility Reference - Archive of obsolete content
el> </button> <button id='butwrap2'> <label control="butwrap2" value="<!--this-->" /> <label control="butwrap2" value="is" /> <label control="butwrap2" value="a" /> <label control="butwrap2" value="button" /> </button> <button image="images/img.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read browser jaws 7.
10 issues to use a browser element with html, the type="content" attribute should be specified.
... however, this attribute causes any xul loaded in the browser to have issues with jaws 7.
10.
...therefore, with jaws 7.
10, to use xul inside of a browser, the type attribute cannot not be used.
...And 5 more matches
Move the ball - Game development
« previousnext » this is the 2nd step out of
10 of the gamedev canvas tutorial.
...the draw() function will be executed within setinterval every
10 miliseconds: function draw() { // drawing code } setinterval(draw,
10); thanks to the infinite nature of setinterval the draw() function will be called every
10 milliseconds forever, or until we stop it.
... 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 = "#0095dd"; ctx.fill(); ctx.closepath(); try your updated code now — the ball should be repainted on every frame.
...And 5 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.
... <dimension> a <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or
10px.
... lengths the numeric type you will come across most frequently is <length>, for example
10px (pixels) or 30em.
...And 5 more matches
Supporting older browsers - Learn web development
* {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,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 cleared item becomes...
... flexbox as a fallback for grid flexbox has greater browser support than grid due to being supported by ie
10 and 11, although do check out the information later in this lesson explaining the rather patchy and confusing support for flexbox in older browsers.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,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 have a way to detect ...
...And 5 more matches
create fancy boxes - Learn web development
if it's not a square, we'll get an ellipsis rather than a circle ;) */ width : 4em; height : 4em; /* and let's turn the square into a circle */ border-radius:
100%; } yes, we get a circle: backgrounds when we talk about a fancy box, the core properties to handle that are background-* properties.
...i want to be fancy.</div> okay, let's have fun with backgrounds: .fancy { padding : 1em; width:
100%; height: 200px; box-sizing: border-box; /* at the bottom of our background stack, let's have a misty grey solid color */ background-color: #e4e4d9; /* we stack linear gradients on top of each other to create our color strip effect.
...i want to be fancy.</div> let's have an example by turning our box into a cloud: .fancy { text-align: center; /* same trick as previsouly used to make circles */ box-sizing: border-box; width : 150px; height : 150px; padding : 80px 1em 0 1em; /* we make room for the "ears" of our cloud */ margin : 0
100px; position: relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat.
...And 5 more matches
Styling links - Learn web development
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 #0095dd;"><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 #0095dd;">a { } a:link { } a:visited { } a:focus { } a:ho...
...ver { } a:active { }</textarea> <h2>output</h2> <div class="output" style="width: 90%;height:
10em;padding:
10px;border: 1px solid #0095dd;"></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.append...
...00px; margin: 0 auto; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: blue; } a:visited { color: purple; } a:focus, a:hover { border-bottom: 1px solid; } a:active { color: red; } a[href*="http"] { background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat
100% 0; background-size: 16px 16px; padding-right: 19px; } so what's going on here?
...And 5 more matches
Example 1 - Learn web development
i> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top :
100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /*
10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width :
10em; /*
100px */ border ...
... : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width :
100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height :
100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; ...
...list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width :
100%; max-height:
10em; /*
100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required...
...And 5 more matches
HTML text fundamentals - 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: 95%">my short story i am a statistician and my name is trish.
... my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = c...
... 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: 95%">milk eggs bread hummus</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } v...
...And 5 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 5 more matches
Patching a Localization
the steps below are fairly generic; for the most part they apply to creating l
10n patches for firefox, thunderbird, seamonkey, or calendar.
... i'll use firefox in the example below to help you understand the general steps to creating a l
10n patch.
... prerequisites if you are to the point that you are patching existing localizations, we assume that you have the basic set of tools listed on the l
10n prerequisites wiki page.
...And 5 more matches
Activity Monitor, Battery Status Menu and top
this can exceed
100% if multiple cores are being used.
... idle wake ups: in mac os
10.9 this measured "package idle exit" wakeups.
...task_power_info::task_platform_idle_wakeups obtained from the task_info function.) in mac os
10.
10 it appears to have been changed to measure interrupt-level wakeups (a superset of idle wakeups), which are less interesting.
...And 5 more matches
DMD
dmd[5222] } in an e
10s-enabled build, you'll see separate output for each process.
... this step can take
10 or more seconds and may make firefox freeze temporarily.
...this can take
10s of seconds or more to complete.
...And 5 more matches
about:memory
for example: 585 (
100.0%) -- preference-service └──585 (
100.0%) -- referent ├──493 (84.27%) ── strong └───92 (15.73%) -- weak ├──92 (15.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.15 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 (05.51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01...
...this is typically
10--20% of "explicit".
...And 5 more matches
Python binding for NSS
release 0.16.0 release date 2014-
10-29 scm tag pynss_release_0_16_0 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_0_16_0/src/ change log the primary enhancements in this version is adding support for the setting trust attributes on a certificate, the ssl version range api, information on the ssl cipher suites and information on the ssl con...
... certificaterequest.attributes certattribute.type_oid certattribute.type_tag certattribute.type_str certattribute.values the following module functions were added: base64_to_binary the following files were added: test_cert_request release 0.14.1 release date 2013-
10-28 scm tag pynss_release_0_14_1 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_0_14_1/src/ change log release 0.14.1 contains only modifications to tests and examples, otherwise functionally it is the same as release 0.14.0 fix bug in ssl_example.py and test_client_server.py where comple...
...the example and test ssl code sent short messages and then did a sock.recv(
1024).
...And 5 more matches
SpiderMonkey 38
if you are compiling with microsoft's visual studio, note that the minimum supported version is msvc
10/20
10.
... js::clonefunctionobject (bug
1088228) interned_string_to_jsid (bug
1045900) js::construct (bug
1017
109) js::createerror (bug 984048) js::falsehandlevalue (bug 959787) js::handlesymbol (bug 645416) js::identifystandardconstructor (bug 976148) js::iscallable (bug
1065811) js::isconstructor (bug
1065811) js::mutablehandlesymbol (bug 645416) js::ordinarytoprimitive (bug 1
103152) js::propertyspecnameequalsid (bug
1082672)...
... js::propertyspecnameissymbol (bug
1082672) js::propertyspecnametopermanentid (bug
1082672) js::protokeytoid (bug 987669) js::rootedsymbol (bug 645416) js::truehandlevalue (bug 959787) jsconstintegerspec (bug
1066020) jsid_is_symbol (bug 645416) jsid_to_symbol (bug 645416) jsprop_define_late (bug 825199) jsprop_ignore_enumerate (bug
1037770) jsprop_ignore_permanent (bug
1037770) jsprop_ignore_readonly (bug
1037770) jsprop_ignore_value (bug
1037770) jsprop_propop_accessors (bug
1088002) jsprop_redefine_nonconfigurable (bug 1
101123) js_addfinalizecallback (bug 996785) js_defineconstintegers (bug
1066020) js_getflatstringcharat (bug
1034627) js_getfunctionscript (bug
1069694) js_getlatin1flatstringchars (bug
1037869) js_getlatin1internedstringchars (bug
1037869) js_getlati...
...And 5 more matches
nsIWebSocketChannel
1000 close_normal normal closure; the connection successfully completed whatever purpose for which it was created.
...
1001 close_going_away the endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection.
...
1002 close_protocol_error the endpoint is terminating the connection due to a protocol error.
...And 5 more matches
Type conversion
var buffer = ctypes.char.array(
10)(); var somecfunction = library.declare("somecfunction", ctypes.default_abi, ctypes.void_t, ctypes.char.ptr); somecfunction(buffer); // here ctypes.char.array(
10)() is converted to ctypes.char.ptr type implicit conversion can be tested in the following way: var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' boolean type target type source converted value ctypes.bool js boolean src js number (0 or 1) if src == 0: false if src ==...
... 1: true var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = true; console.log(mystruct.v.tostring()); // 'true' mystruct.v = false; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' mystruct.v = 0; console.log(mystruct.v.tostring()); // 'false' mystruct.v =
10; // throws error mystruct.v = "a"; // throws error integer types target type source converted value ctypes.char16_t js string (only if its length == 1) src.charcodeat(0) any integer types js number (only if fits to the size) src js boolean if src == true: 1 if src == false: 0 var mystruct = ctypes.structtype("mystructtype", [ { "v": ...
... ctypes.unsigned_int ctypes.float32_t ctypes.char ctypes.int8_t ctypes.signed_char ctypes.int8_t ctypes.unsigned_char ctypes.uint8_t ctypes.char16_t ctypes.uint8_t ctypes.uint16_t ctypes.unsigned_short var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t } ])(); mystruct.v = ctypes.int8_t(
10); console.log(mystruct.v.tostring()); //
10 mystruct.v = ctypes.int32_t(
10); // throws error float types target type source converted value any float types js number (only if fits to the size) src pointer types target type source converted value any pointer types null nullptr ctypes.voidptr_t any pointer ty...
...And 5 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>setinterval/clearinterval example</title> <script> var nintervid; function changecolor() { nintervid = setinterval(flashtext,
1000); } function flashtext() { var oelem = document.getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ?
...{ return; } this.parts = array.prototype.slice.call(onode.childnodes); for (var nchild = 0; nchild < this.parts.length; nchild++) { onode.removechild(this.parts[nchild]); this.parts[nchild] = new sheet(this.parts[nchild]); } } var nintervid, ocurrent = null, btyping = false, bstart = true, nidx = 0, spart = "", asheets = [], amap = []; this.rate = nrate ||
100; this.play = function () { if (btyping) { return; } if (bstart) { var aitems = document.queryselectorall(sselector); if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* uncomment the following line if you have previously hidden your elements via css: */ // aitem...
...tion () { 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): */ 15); /* 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 = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; ...
...And 5 more matches
Accessibility documentation index - Accessibility
found
105 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.
...
10 basic form hints aria, accessibility, forms when implementing forms using traditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
...
100 use of color accessibility, wcag, color, perceivable while color contrast is often primarily an aesthetic choice, the use of color on a website pertains to using color to communicate information.
...And 5 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
the internet explorer and edge situation it should be remembered that the original implementation of css grid layout happened in internet explorer
10.
...there are also substantial differences between what shipped in ie
10 and the current specification, even where the properties and values appear the same.
...some simple grid layouts could be implemented for ie
10, through to edge 15, using the -ms properties.
...And 5 more matches
position - CSS: Cascading Style Sheets
html <div class="box" id="one">one</div> <div class="box" id="two">two</div> <div class="box" id="three">three</div> <div class="box" id="four">four</div> css .box { display: inline-block; width:
100px; height:
100px; background: red; color: white; } #two { position: relative; top: 20px; left: 20px; background: blue; } absolute positioning elements that are relatively positioned remain in the normal flow of the document.
...my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we span
100% of the width of our parent element, and we are as tall as our child content.
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> css body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding:
10px; margin:
10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform,...
...And 5 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
r.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/20
100
101 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/20
100
101 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 01:15:39 gmt server: apache/2 a...
...And 5 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).
... the below status codes are defined by section
10 of rfc 2616.
... information responses
100 continue this interim response indicates that everything so far is ok and that the client should continue the request, or ignore the response if the request is already finished.
...And 5 more matches
Lexical grammar - JavaScript
page about parseint() exponential the decimal exponential literal is specified by the following format: ben; where b is a base number (integer or floating), followed by e char (which serves as separator or exponent indicator) and n, which is exponent or power number – a signed integer (as per 2019 ecma-262 specs): 0e-5 // => 0 0e+5 // => 0 5e1 // => 50 175e-2 // => 1.75 1e3 // =>
1000 1e-3 // => 0.001 binary binary number syntax uses a leading zero followed by a lowercase or uppercase latin letter "b" (0b or 0b).
... var flt_signbit = 0b
10000000000000000000000000000000; // 2147483648 var flt_exponent = 0b01111111
100000000000000000000000; // 2139095040 var flt_mantissa = 0b00000000011111111111111111111111; // 8388607 octal octal number syntax uses a leading zero followed by a lowercase or uppercase latin letter "o" (0o or 0o).
... 0xfffffffffffffffff // 295147905179352830000 0x123456789abcdef // 81985529216486900 0xa //
10 bigint literal the bigint type is a numeric primitive in javascript that can represent integers with arbitrary precision.
...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="m50,
10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,
10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0
100
100" width="20" height="
10"><use href="#smiley" /></svg> <svg preserveaspectratio="xminymid meet" x="25" y="0" viewbox="0 0
100
100" width="20" height="
10"><us...
...e 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="15" viewbox="0 0
100
100" width="20" height="
10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="25" y="15" viewbox="0 0
100
100" width="20" height="
10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax slice" x="50" y="15" viewbox="0 0
100
100" width="20" height="
10"><use href="#smiley" /></svg> <!-- (width<height) meet --> <svg preserveaspectratio="xmidymin meet" x="75" y="0" viewbox="0 0
100
100" width="
10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid meet...
..." x="90" y="0" viewbox="0 0
100
100" width="
10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax meet" x="
105" y="0" viewbox="0 0
100
100" width="
10" height="25"><use href="#smiley" /></svg> <!-- (width<height) slice --> <svg preserveaspectratio="xminymid slice" x="120" y="0" viewbox="0 0
100
100" width="
10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="135" y="0" viewbox="0 0
100
100" width="
10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid slice" x="150" y="0" viewbox="0 0
100
100" width="
10" height="25"><use href="#smiley" /></svg> <!-- none --> <svg preserveaspectratio="none" x="0" y="30" viewbox="0 0
100
100" width="160" height="60"><use href="#smiley...
...And 5 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-line...
... example html,body,svg { height:
100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="...
... example html,body,svg { height:
100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "bevel" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05"...
...And 5 more matches
transform - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="-40 0 150
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 45.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.
..._{\mathrm{newcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + f \\ 1 \end{pmatrix} example html,body,svg { height:
100% } <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 = 1
10 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 right corner: oldx=40 oldy=30 newx = a * oldx + c * oldy + e = 3 * 40 - 1 * 30 + 30 = 120 newy = b * oldx + d * oldy + f = 1 * 40 + 3 * 30 + 40 = 170 --> <rect x="
10" y="
10" width="30" height="20" fill="red" transform="matrix(3 1 -1 3 30 40)" /> </svg> translate the translate(<x> [<y>]) transform function moves the object by x and y.
...And 5 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
<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="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="
100" y2="
100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg> the stroke-width property defines the width of this stroke.
... <?xml version="1.0" standalone="no"?> <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> <polyline points="40 140 80
100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> </svg> each of these polylines has two segments.
...And 5 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<button label="button" width="200" height="
100"/> listing 6: setting the size of a button also, as shown in listing 7, you can embed css inline into elements via the style attribute, which allows you to set sizes using units other than pixels.
... <button label="button" style="min-width:
10em;"/> listing 7: setting the size of a button using css markup hidden and collapsed the hidden and collapsed attributes act as switches to turn off the display of elements.
...listing
10 shows an example of the oncommand event handler in use.
...And 4 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
there.is.only.xul" title="clock" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js"/> <hbox align="center"> <label value="current time:" /> <textbox id="currenttime" /> </hbox> </dialog> listing 6: content for clock.js function initclock() { showcurrenttime(); window.setinterval(showcurrenttime,
1000); } function showcurrenttime() { var textbox = document.getelementbyid("currenttime"); textbox.value = new date().tolocaletimestring(); textbox.select(); } operations check perform an operations check to make sure that your changes to the source file are correct.
... first, add the skin directory and its subordinate files to your helloworld directory as shown in figure
10.
... fixme: figure
10: directory structure with skin package added add the skin package update chrome.manifest with the contents of listing
10.
...And 4 more matches
Creating regular expressions for a microsummary generator - Archive of obsolete content
urls
101 urls for auction item pages on ebay, like those on many other sites, usually start with the string "http://" and contain a domain name, a file path, and some query parameters.
... here's a url for an auction item page on ebay: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=280018439
106 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?viewitem&item=280018439
106".
... here's a regular expression that matches our example url: http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item=280018439
106 it looks almost the same as the url.
...And 4 more matches
Introduction to SSL - Archive of obsolete content
because the key size is so large, there are more possible keys than for any other cipher-approximately 3.7 *
1050.
...rc4 and rc2 128-bit encryption permits approximately 3.4 *
1038 possible keys, making them very difficult to crack.
...rc4 and rc2 128-bit encryption permits approximately 3.4 *
1038 possible keys, making them very difficult to crack.
...And 4 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
4, is_opera5, is_opera5up javascript version number is_js (float indicating full javascript version number: 1, 1.1, 1.2 ...) os platform and version is_win, is_win16, is_win32, is_win31, is_win95, is_winnt, is_win98, is_winme, is_win2k, is_os2, is_mac, is_mac68k, is_macppc, is_unix, is_sun, is_sun4, is_sun5, is_suni86, is_irix, is_irix5, is_irix6, is_hpux, is_hpux9, is_hpux
10, is_aix, is_aix1, is_aix2, is_aix3, is_aix4, is_linux, is_sco, is_unixware, is_mpras, is_reliant, is_dec, is_sinix, is_freebsd, is_bsd, is_vms detecting browsers using this level of detail is unworkable, unmaintainable and violates the basic principles of web authoring!
...(see mozilla user-agent strings and gecko user agent strings) mozilla/5.0 (...) gecko/20001
108 netscape6/6.0 the first vendor/version (mozilla/5.0) indicates that netscape 6 is a fifth generation browser and is not identical to earlier browsers.
... the second vendor/version (gecko/20001
108) identifies netscape 6 as a particular release of gecko which was built on november 8, 2000.
...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.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original b...
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding:
10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised ...
... first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius:
10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset...
...And 4 more matches
Responsive design - Learn web development
responsive design the term responsive design was coined by ethan marcotte in 20
10 and described the use of three techniques in combination.
...using a very simple technique of setting the max-width property to
100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger.
...in marcotte's original exploration this meant flexible grids (using floats) and media queries, however in the almost
10 years since that article was written, working responsively has become the default.
...And 4 more matches
UI pseudo-classes - Learn web development
for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width:
10px; height:
10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } this is really useful — screenreaders already let their users k...
...rk more like replaced elements and therefore don't have one), we will add an empty <span> to hang the generated content on: <div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> the immediate problem with this was that the span was dropping onto a new line below the input because the input and label are both set with width:
100%.
... to fix this we style the parent <div> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long: fieldset > div { margin-bottom: 20px; display: flex; flex-flow: row wrap; } the effect this has is that the label and input sit on separate lines because they are both width:
100%, but the <span> has a width of 0 so can sit on the same line as the input.
...And 4 more matches
Setting up your own test automation environment - Learn web development
w file inside your project directory called google_test.js: give it the following contents, then save it: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; const driver = new webdriver.builder() .forbrowser('firefox') .build(); driver.get('http://www.google.com'); driver.findelement(by.name('q')).sendkeys('webdriver'); driver.sleep(
1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); driver.findelement(by.name('btnk')).click(); driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); } else { console.log('test failed'); } driver.quit(); }); }); in terminal, m...
... webdriver.by, until = webdriver.until; let driver_fx = new webdriver.builder() .forbrowser('firefox') .build(); let driver_chr = new webdriver.builder() .forbrowser('chrome') .build(); searchtest(driver_fx); searchtest(driver_chr); function searchtest(driver) { driver.get('http://www.google.com'); driver.findelement(by.name('q')).sendkeys('webdriver'); driver.sleep(
1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); driver.findelement(by.name('btnk')).click(); driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); } else { console.log('test failed'); } driver.quit(); });...
...for example, above we used this construct to tab out of the form input before submitting it: driver.sleep(
1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); waiting for something to complete there are times where you'll want to make webdriver wait for something to complete before carrying on.
...And 4 more matches
Linux compatibility matrix
fedora 17 3.3 2.15 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 2015 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 2015 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 2015 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 2015 jul 2016 fedora 23 4.2 2.22 2.46 2.24 3.18 0.33 5.1 5.1 3.7 n/a ...
... fedora 32 5.6 2.31 2.64 2.24 3.24.18 0.34
10.0.1
10.0.1
10.0 3.8 apr 2020 ?
... rhel 6 2.6.32 2.12 2.28 2.24 n/a 0.32 4.4 4.4 3.4 n/a nov 20
10 nov 2020 rhel 7 3.
10 2.17 2.42 2.24 3.14 0.32 4.8.5 4.8 3.4 n/a jun 2014 jun 2024 rhel 8 4.18 2.28 2.56 2.24 3.22.30 0.36 8.3.1 8.3.1 8.0 3.6 may 2019 may 2031 opensuse 11.4 2.6.37 2.11 2.28 2.22 3.0 0.20 4.5 4.5 n/a n/a mar 2011 jul 2015 opensuse 12.1 3.1 2.14 2.30 2.24 3.2 0.22 4.6 4.6 2.9 n/a nov 2011 may 2013 opensuse 12.2 3.4 2.15 2.32 2.24 3.4 0.24 4.7 4.7 3.1 n/a jul 2012 jan 2014 opensuse 12.3 3.7 2.17 2.34 2.24 3.6 0.28 4.7 ...
...And 4 more matches
Frame script loading and lifetime
to define the mapping between a chrome:// url and a frame script packaged with an extension, use a "chrome.manifest" file to register a chrome url: // chrome.manifest content my-e
10s-extension chrome/content/ // chrome script mm.loadframescript("chrome://my-e
10s-extension/content/content.js", true); allowdelayedload if the message manager is a global frame message manager or a window message manager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call.
... for example: var mm = window.messagemanager; mm.loadframescript("chrome://my-e
10s-extension/content/frame-script.js", true); the script will be loaded into all tabs currently open in this window, and all new tabs opened afterwards.
... if you use allowdelayedload, you can cancel it by using removedelayedframescript: var mm = window.messagemanager; mm.removedelayedframescript("chrome://my-e
10s-extension/content/frame-script.js"); this means we will stop loading the script into new tabs.
...And 4 more matches
Localization quick start guide
welcome to mozilla localization (l
10n for short)!
...this guide is filled with all of the basic, technical information you need to get involved in the mozilla l
10n program.
... remember, this guide will instruct you on the technical aspects of mozilla l
10n only.
...And 4 more matches
TimerFirings logging
-991946880[7f46c365ba00]: [6775] fn timer (slack
100 ms): layeractivitytracker -991946880[7f46c365ba00]: [6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -991946880[7f46c365ba00]: [6775] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -991946880[7f46c365ba00]: [6775] iface timer (one_shot 200 ms): 7f46964d7f80 -1340643584[7f46c365ec00]: [6775] obs timer (slack
1000 ms): 7f46a95a0200 each...
... -991946880[7f46c365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0 711637568[7f3219c48000]: [6835] fn timer (one_shot
100 ms): [content] http://edition.cnn.com/:5:7231 711637568[7f3219c48000]: [6835] 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 source location where they were created.
... 2082435840[
100445640]: [81190] fn timer (one_shot 8000 ms): [from dladdr] gfxfontinfoloader::delayedstartcallback(nsitimer*, void*) second, on linux the code uses dladdr to get the symbol library and address, which can be post-processed by tools/rb/fix_stacks.py.
...And 4 more matches
Hacking Tips
$ gdb --args out/dist/bin/js ./foo.js […] spidermonkey unwinder is disabled by default, to enable it type: enable unwinder .* spidermonkey (gdb) b js::math_cos (gdb) run […] #0 js::math_cos (cx=0x14f2640, argc=1, vp=0x7fffffff6a88) at js/src/jsmath.cpp:338 338 callargs args = callargsfromvp(argc, vp); (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:235 #2 0x0000000000c87625 in js::invoke(jscontext*, js::call...
...0x1798838, argc=1, vp=0x7fffffff6a88, res=jsval_void) at js/src/jit/baselineic.cpp:6113 #4 0x00007ffff7f41395 in <<jitframe_exit>> () #5 0x00007ffff7f42223 in <<jitframe_baselinestub>> () #6 0x00007ffff7f4423d in <<jitframe_baselinejs>> () #7 0x00007ffff7f4222e in <<jitframe_baselinestub>> () #8 0x00007ffff7f4326a in <<jitframe_baselinejs>> () #9 0x00007ffff7f38d5f in <<jitframe_entry>> () #
10 0x00000000006a86de in enterbaseline(jscontext*, js::jit::enterjitdata&) (cx=0x14f2640, data=...) at js/src/jit/baselinejit.cpp:150 note, when you enable the unwinder, the current version of gdb (7.
10.1) does not flush the backtrace.
... $ gdb --args js […] (gdb) b js::ion::codegenerator::visitstart (gdb) command >call masm.breakpoint() >continue >end (gdb) r js> function f(a, b) { return a + b; } js> for (var i = 0; i <
100000; i++) f(i, i + 1); breakpoint 1, js::ion::codegenerator::visitstart (this=0x
101ed20, lir=0x
10234e0) at /home/nicolas/mozilla/ionmonkey/js/src/ion/codegenerator.cpp:609 609 } program received signal sigtrap, trace/breakpoint trap.
...And 4 more matches
Autoconfiguration in Thunderbird
how to add support for your domain classification if you are a big isp (>
100,000 users) providing email addresses solely under a few domains like "example.com" and "example.de", you may either submit the configuration to the ispdb or set up a configuration server.
...dns records): autoconfig in a
10.2.3.4 or autoconfig in cname autoconfig.hoster.com.
...where
10.2.3.4 and autoconfig.hoster.com are ip addresses / hostnames you own.
...And 4 more matches
uuid - Web APIs
the bluetoothremotegattdescriptor.uuid read-only property returns the uuid of the characteristic descriptor, for example '00002902-0000-
1000-8000-00805f9b34fb' for theclient characteristic configuration descriptor.
... 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 70notes notes windows
10.edge full support ≤79notes full support ≤79notes notes macos only.
...And 4 more matches
Fullscreen API - Web APIs
14alternate name alternate name uses the non-standard name: webkitisfullscreensafari ios full support 6alternate name full support 6alternate name alternate name uses the non-standard name: webkitisfullscreensamsung internet android full support
10.0 full support
10.0 full support 1.0alternate name alternate name uses the non-standard name: webkitisfullscreenlegend full support full support no support no supportdepre...
... no support
10 — 65alternate name alternate name uses the non-standard name: mozfullscreenenabledie full support 11alternate name full support 11alternate name alternate name uses the non-standard name: msfullscreenenabledopera full support yessafari ?
... no support
10 — 65alternate name alternate name uses the non-standard name: mozfullscreenenabledopera android full support yessafari ios ?
...And 4 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.
...x = document.queryselector("main"); document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.75] }; 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.
...dow.requestanimationframe(function(time) { redrawlist.foreach(function(adbox) { drawadtimer(adbox); }); }); } } the array redrawlist will be used to keep a list of all the ads which need to be redrawn during this refresh cycle, since it may not be exactly the same as the elapsed time due to system activity or because you've set the interval to something other than every
1000 milliseconds.
...And 4 more matches
Intersection Observer API - Web APIs
ing an intersection observer create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other: let options = { root: document.queryselector('#scrollarea'), rootmargin: '0px', threshold: 1.0 } let observer = new intersectionobserver(callback, options); a threshold of 1.0 means that when
100% of the target is visible within the element specified by the root option, the callback is invoked.
..."
10px 20px 30px 40px" (top, right, bottom, left).
... the third box has thresholds every
10% of visibility (0%,
10%, 20%, etc.).
...And 4 more matches
Capabilities, constraints, and settings - Web APIs
for example: let constraints = { width: 1920, height:
1080, aspectratio: 1.777777778 }; mytrack.applyconstraints(constraints); in this case, the constraints indicate that any values are fine for nearly all properties, but that a standard high definition (hd) video size is desired, with the standard 16:9 aspect ratio.
...as an example, if the browser running the code above couldn't provide a 1920x
1080 track but could do 1920x900, then that's what would be provided.
...} else { let constraints = { width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal:
1080 }, aspectratio: 1.777777778, framerate: { max: 30 }, facingmode: { exact: "user" } }; mytrack.applyconstraints(constraints).then(function() => { /* do stuff if constraints applied successfully */ }).catch(function(reason) { /* failed to apply constraints; reason is why */ }); } here, after ensuring that the constrainable properties for which matches must be found ...
...And 4 more matches
Matrix math for the web - Web APIs
tiplymatrixandpoint(): // 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[15]; // 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 add together let resultx = (x * c0r0) + (y * c0r1) + (z * c0r2) + (w * c0r3); // multiply the poin...
...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[15]]; // multiply each row by matrixa let result0 = multiplymatrixandpoint(matrixa, row0); let result1 = multiplymatrixandpoint(matrixa, row1); let result2 = multiplymatrixandpoint(matrixa, row2); let result3 = multiplymatrixandpoint(matrixa, row3); // turn the result rows back into a single matrix return...
... let x = 50; let y =
100; let z = 0; let translationmatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1 ]; place the distances along the three axes in the corresponding positions in the translation matrix, then multiply it by the point or matrix you need to move through 3d space.
...And 4 more matches
Basic concepts behind Web Audio API - Web APIs
let's look at a mono and a stereo audio buffer, each is one second long, and playing at 44
100hz: the mono buffer will have 44
100 samples, and 44
100 frames.
... the length property will be 44
100.
... the stereo buffer will have 88200 samples, but still 44
100 frames.
...And 4 more matches
Functions and classes available to Web Workers - Web APIs
across the network.) 39 (39) (mostly in 34 (34) behind pref, although a few features are later.) no support 42 41 behind pref
10.1 filereader this api allows asynchronous read of blob and file objects.
...
10.0 (yes)
10.1 network information api provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.).
... 3.5 (1.9.1)
10.0 enabled since chrome 69 no support workerglobalscope the global scope of workers.
...And 4 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start]
100px [content-start]
100px [content-end]
100px [main-end]; } once the lines have names, we can use the name to place the item rather than the line number.
... .wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start]
100px [content-start]
100px [content-end]
100px [main-end]; } .thing { grid-area: content; } <div class="wrapper"> <div class="thing">i am placed in an area named content.</div> </div> we don’t need to define where our areas are with grid-template-areas as our named lines have created an area for us.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(
100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } .wrapper > div.overlay { z-index:
10; grid-column: main-start / main-end; grid-row: hd-start / ft-en...
...And 4 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> ...
... .wrapper { max-width:
1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding:
10px; } .wrapper { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; } to demonstrate how this grid system works i have four child elements inside my wrapper.
... * {box-sizing: border-box;} .wrapper { max-width:
1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding:
10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> ...
...And 4 more matches
animation-timing-function - CSS: Cascading Style Sheets
ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-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; anima...
...as a result, an animation-timing-function specified on the
100% or to keyframe will never be used.
...whether the animation holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and
100%, or makes 5 stops between the 0% and
100% along the animation, or makes 5 stops including the 0% and
100% marks (on the 0%, 25%, 50%, 75%, and
100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the animation begins; jump-end denotes a right-continuous function, so that the last jump happens whe...
...And 4 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: 25% 75%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position:
10ch 8em; /* multiple images */ background-position: 0 0, center; /* edge offsets values */ background-position: bottom
10px right 20px; background-position: right 3em bottom
10px; background-position: bottom
10px right; background-position: top right
10px; /* global values */ background-position: inherit; background-position: initial; background-position: unset; the background-position propert...
...a value of
100% means that the right (or bottom) edge of the background image is aligned with the right (or bottom) edge of the container, or the
100% mark of the image will be on the
100% mark of the container.
... (container width - image width) * (position x%) = (x offset value) (container height - image height) * (position y%) = (y offset value) using the x axis for an example, let's say we have an image that is 300px wide and we are using it in a container that is
100px wide, with background-size set to auto:
100px - 300px = -200px (container & image difference) so that with position percentages of -25%, 0%, 50%,
100%, 125%, we get these image-to-container edge offset values: -200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -
100px -200px *
100% = -200px -200px * 125% = -250px so with these resultant values for our example, the ...
...And 4 more matches
background-size - CSS: Cascading Style Sheets
.gradient-example { width: 50px; height:
100px; background-image: linear-gradient(blue, red); /* not safe to use */ background-size: 25px; background-size: 50%; background-size: auto 50px; background-size: auto 50%; /* safe to use */ background-size: 25px 50px; background-size: 50% 50%; } note that it's particularly not recommended to use a pixel dimension and an auto dimension with a <gradient>, because it's impossib...
... full support 4 full support 49prefixed prefixed implemented with the vendor prefix: -webkit- no support 3.6 — 4prefixed prefixed implemented with the vendor prefix: -moz-ie full support 9opera full support
10 full support
10 full support 15prefixed notes prefixed implemented with the vendor prefix: -webkit-notes webkit-based browsers originally implemented an older draft of css3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or c...
...this has been fixed in opera
10.safari full support 5 full support 5 full support 3prefixed notes prefixed implemented with the vendor prefix: -webkit-notes webkit-based browsers originally implemented an older draft of css3 background-size in which an omitted second value is treated as duplicating the first v...
...And 4 more matches
break-before - CSS: Cascading Style Sheets
erasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie 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 50firefo...
...ios no support nosamsung internet android no support noavoid-columnchrome no support noedge no support 12 — 79firefox no support noie full support
10opera no support nosafari no support nowebview android no support nochrome android no support nofirefox android no support noopera android no support ...
... no support nosamsung internet android no support nocolumnchrome full support 51edge full support 12firefox no support noie full support
10opera full support 38safari no support nowebview android full support 51chrome android full support 51firefox android no support noopera android full support ...
...And 4 more matches
Video player styling basics - Developer guides
basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:
100%; max-height:30.875rem; height:
100%; margin:1.25rem auto; padding:1.051%; background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:
100%; height:8.0971659919028340080971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precis...
...ier, 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.90625%; height:
100%; margin-left:0.1953125%; 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%.
... progress bar the <progress> element has the following basic style set up: .controls progress { display:block; width:
100%; height:81%; margin-top:0.125rem; border:none; color:#0095dd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } like the <button> elements, <progress> also has a default border, which is removed here.
...And 4 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, 125,
1000].
... var x = 0; while (x <
10) { // "x <
10" is the loop condition // do stuff x++; } ...can be converted into a recursive function declaration, followed by a call to that function: function loop(x) { if (x >=
10) // "x >=
10" is the exit condition (equivalent to "!(x <
10)") return; // do stuff loop(x + 1); // the recursive call } loop(0); however, some algorithms cannot be simple iterative loops.
...consider the following: function outside() { var x = 5; function inside(x) { return x * 2; } return inside; } outside()(
10); // returns 20 instead of
10 the name conflict happens at the statement return x and is between inside's parameter x and outside's variable x.
...And 4 more matches
Warning: JavaScript 1.6's for-each-in loops are deprecated - JavaScript
deprecated syntax var object = { a:
10, b: 20 }; for each (var x 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 (es2015) 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 (es2015) loops as well.
...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="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="
100" begin="0s" end="8s" fill="freeze" /> </rect> <rect x="
10" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" begin="0s" end="6s" fill="freeze" /> </rect> <rect x="
10" y...
...="85" height="15" 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="25" x2="
10" y2="
105" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="
105" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="
105" stroke="grey" stroke-width=".5" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="
105" stroke="grey" stroke-width=".5" /> <text x="1
10" y="20" text-anchor="middle">8s</text> <line x1="11...
...0" y1="25" x2="1
10" y2="
105" stroke="grey" stroke-width=".5" /> <line x1="
10" y1="30" x2="1
10" y2="30" stroke="grey" stroke-width=".5" /> <line x1="
10" y1="
105" x2="1
10" y2="
105" 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="35" height="15" 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" heig...
...And 4 more matches
x - SVG: Scalable Vector Graphics
>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:
100% } <svg viewbox="0 0 300
100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value <length> | <percentage> default value -
10% animatable yes foreignobject for <foreignobject>, x defines the x coordinate of the uper left corner of its viewport.
... value <length> | <percentage> default value -
10% animatable yes pattern for <pattern>, x defines the x coordinate of the uper left corner of the tile pattern.
...And 4 more matches
y - SVG: Scalable Vector Graphics
>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:
100% } <svg viewbox="0 0
100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value <length> | <percentage> default value -
10% animatable yes foreignobject for <foreignobject>, y defines the y coordinate of the uper left corner of its viewport.
... value <length> | <percentage> default value -
10% animatable yes pattern for <pattern>, y defines the y coordinate of the uper left corner of the tile pattern.
...And 4 more matches
panel - Archive of obsolete content
self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin:
10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png to learn much more about content scripts, see the working with content scripts gu...
...addon.port.on("show", function onshow() { textarea.focus(); }); finally, the html file now references "get-text.js" inside a <script> tag: <html> <head> <style type="text/css" media="all"> textarea { margin:
10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> <script src="get-text.js"></script> </body> </html> styling panel content the panel's default style is different for each operating system: this helps to ensure that the panel's style is consistent with the dialogs displayed by firef...
... security warning pages (the "this connection is untrusted" warning) does not work, so panels which trigger it will be broken (bug
1031554).
...And 3 more matches
Bootstrapped extensions - Archive of obsolete content
in firefox
10 and later the chrome.manifest file located in the root of the add-on's xpi (i.e.
... localization (l
10n) localizing bootstrapped add-ons is very much the same since firefox 7, as that is when chrome.manifest compatibility landed.
...for example if you had a subfolder of en-us in locale folder your chrome.manifest file will have to contain: locale name_of_your_addon en-us locale/ here is an example: github :: l
10n-properties - on startup of this add-on it will show a prompt saying usa or great britain, which ever it deems closest to your locale.
...And 3 more matches
Forms related code snippets - Archive of obsolete content
"getmonth" : "getfullyear"]() + ndelta); othiscal.writedays(); return false; } function ondayclick () { const othiscal = ainstances[this.id.replace(rbgnandend, "")]; othiscal.target.value = (this.innerhtml /
100).tofixed(2).substr(-2) + "\/" + (othiscal.current.getmonth() + 1) + "\/" + othiscal.current.getfullyear(); othiscal.container.parentnode.removechild(othiscal.container); return false; } function buildcalendars () { const afields = document.getelementsbyclassname(sdpclass), nlen = afields.length; for (var nitem = 0; nitem < nlen; new datepicker(afields[nitem++])); } cons...
..."may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex =
1000; window.addeventlistener ?
...it is not supported in internet explorer 6-9, or in the preview of internet explorer
10.
...And 3 more matches
Scroll Bars - Archive of obsolete content
the syntax of a scroll bar is as follows: <scrollbar id="identifier" orient="horizontal" curpos="20" maxpos="
100" increment="1" pageincrement="
10"/> the attributes are as follows: id the unique identifer of the scroll bar orient this specifies the direction of the scroll bar.
...the default value is
100.
...the default value is
10.
...And 3 more matches
XULRunner Hall of Fame - Archive of obsolete content
inactive projects these projects appear to be less actively developed, with no updates since 20
10.
...latest release: 0.0.2 november 20
10 - source clines a clone of color lines (game).
...latest release 0.5 febuary 20
10 - source daim (fr) / daim (english) superb tool for image analysis build on top of a professional imagelib.
...And 3 more matches
SSL and TLS - Archive of obsolete content
though many web servers continue to use
1024-bit keys, web servers should migrate to at least 2048 bits.
...there are 3.4 x
1038 possible 128-bit keys and 1.1 x
1077 possible 256-bit keys.
...because the key size is so large, there are approximately 3.7 *
1050 possible keys.
...And 3 more matches
GLSL Shaders - Game development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: shaders demo</title> <style> body { margin: 0; padding: 0; font-size: 0; } canvas { width:
100%; height:
100%; } </style> <script src="three.min.js"></script> </head> <body> <script id="vertexshader" type="x-shader/x-vertex"> // vertex shader's code goes here </script> <script id="fragmentshader" type="x-shader/x-fragment"> // fragment shader's code goes here </script> <script> // scene setup goes here </script> </body> </html> it contains some basic information like th...
... 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.
...And 3 more matches
Practical positioning examples - Learn web development
add the following css: .info-box li { float: left; list-style-type: none; width: 150px; } .info-box li a { display: inline-block; text-decoration: none; width:
100%; line-height: 3; background-color: red; color: black; text-align: center; } finally for this section we'll set some styles on the link states.
... .info-box article { position: absolute; top: 0; left: 0; height: 352px; padding:
10px; color: white; background-color: #a60000; } .info-box .active-panel { z-index: 1; } adding our javascript the final step to getting this feature working is to add some javascript.
...add the following rule underneath the rest of your css: .fake-content { background-color: #a60000; color: white; padding:
10px; height: 2000px; margin-left: 470px; } to start with, we give the content the same background-color, color, and padding as the info-box panels.
...And 3 more matches
The HTML5 input types - Learn web development
the below screenshots show a non-empty search field in firefox 71, safari 13, and chrome 79 on macos, and edge 18 and chrome 79 on windows
10.
...the first one below creates a number control whose value is restricted to any value between 1 and
10, and whose increase and decrease buttons change its value by 2.
... <input type="number" name="age" id="age" min="1" max="
10" step="2"> the second one creates a number control whose value is restricted to any value between 0 and 1 inclusive, and whose increase and decrease buttons change its value by 0.01.
...And 3 more matches
Handling text — strings in JavaScript - Learn web development
so, taking a simple example: let song = 'fight the youth'; would be turned into a template literal like so: song = `fight the youth`; if we want to concatenate strings, or include expression results inside them, traditional strings can be fiddly to write: let score = 9; let highestscore =
10; let output = 'i like the song "' + song + '".
... i gave it a score of ' + (score/highestscore *
100) + '%.'; template literals simplify this enormously: output = `i like the song "${ song }".
... i gave it a score of ${ score/highestscore *
100 }%.`; there is no more need to open and close multiple string pieces — the whole lot can just be wrapped in a single pair of backticks.
...And 3 more matches
Gecko info for Windows accessibility vendors
enum { navrelation_label_for = 0x
1002 }; enum { navrelation_description_for = 0x
100f }; these two relations can be used on object to determine what form control is being labelled or desribed.
... enum { navrelation_labelled_by = 0x
1003 }; enum { navrelation_described_by = 0x
100e }; these two relations are they inverse; they can be used on form controls.
... enum { navrelation_default_button = 0x
100d }; when used within an html form or a xul dialog, the navrelation_default_button relation will return the iaccessible for the default button.
...And 3 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-8859-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=856 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=857 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=858 canvas 00b97c6c r=0 a=9180,uc c=9180,4470 cnt=859 area 02d7afe4 r=0 a=9180,uc c=9180,uc cnt=860 text 02d7b150 r=0 a=...
...9180,uc c=uc,uc cnt=861 text 02d7b150 d=0,0 block 02d7b2
10 r=0 a=9180,uc c=8940,uc cnt=862 block 02d7b2
10 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=865 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 02d7b2
10 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 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 tbl 02d7b7ec r=0 a=8940,uc c=1500,uc cnt=871 rowg 00b984a4 r=0 a=uc,uc c=uc,uc cnt=872 ...
... 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=1500,uc cnt=878 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 row 02d7baf8 r=2 a=1500,uc c=1500,uc cnt=880 cell 02d7bc98 r=2 a=1440,uc c=14
10,uc cnt=881 block 02d7bcf8 r=2 a=14
10,uc c=14
10,uc cnt=882 block 02d7bcf8 d=14
10,300 cell 02d7bc98 d=1440,330 row 02d7baf8 d=1500,330 rowg 00b984a4 d=1500,330 colg 02d7bfb0 r=2 a=1500,uc c=1500,uc cnt=883 col 02d7c0d8 r=0 a=0,0 c=1500,uc cnt=884 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 tbl 02d7b7ec d=1500,390 tblo 0...
...And 3 more matches
Debugging on Windows
firefox, in general, and even in non-e
10s mode, does not start the main process directly, it starts it via a launcher process.
...turns the value of stdout, which can be used with various debugging methods (such as nsgenericelement::list) that take a file* param: debug.evaluatestatement {,,msvcr80d}(&__iob_func()[1]) (alternatively you can evaluate {,,msvcr80d}(&__iob_func()[1]) in the quickwatch window) similarly, you can open a file on the disk using fopen: >debug.evaluatestatement {,,msvcr80d}fopen("c:\\123", "w") 0x
10311dc0 { ..snip..
... } >debug.evaluatestatement ((nsgenericelement*)0x03f0e7
10)->list((file*)0x
10311dc0, 1) <void> >debug.evaluatestatement {,,msvcr80d}fclose((file*)0x
10311dc0) 0x00000000 note that you may not see the debugging output until you flush or close the file handle.
...And 3 more matches
Error codes returned by Mozilla APIs
ns_error_no_aggregation (0x800401
10) ns_error_not_available (0x80040111) an operation could not be completed because some other necessary component or resource was not available.
... ns_error_factory_not_loaded (0x800401f8) ns_error_factory_exists (0xc1f30
100) ns_error_factory_no_signature_support (0xc1f30
101) ns_error_proxy_invalid_in_parameter (0x800
100
10) ns_error_proxy_invalid_out_parameter (0x800
10011) ns_error_cannot_convert_data (0x80460001) ns_error_object_is_immutable (0x80460002) ns_error_loss_of_significant_data (0x80460003) ns_error_illegal_during_shutdown (0x8046001e) many operations cannot be performed once the application is being shutdown.
... ns_error_file_no_device_space (0x805200
10) ns_error_file_name_too_long (0x80520011) indicates that a file name or path is larger than the platform can handle.
...And 3 more matches
Communicating with frame scripts
asynchronous messaging to send an asynchronous message the frame script uses the global sendasyncmessage() function: // frame script sendasyncmessage("my-addon@me.org:my-e
10s-extension-message"); sendasyncmessage() takes one mandatory parameter, which is the name of the message.
... the example below sends a message named "my-e
10s-extension-message", with a data payload containing details and tag properties, and exposes the event.target object as a cpow: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-addon@me.org:my-e
10s-extension-message", { details : "they clicked", tag : event.target.tagname }, { target : event.target }); }, false); to receive messages from cont...
... objects an object whose properties are any cpows exposed by the sender as the third argument to sendasyncmessage() in the example below the listener just logs all the messages details: // chrome script messagemanager.addmessagelistener("my-addon@me.org:my-e
10s-extension-message", listener); function listener(message) { console.log(message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give console output somewhat like this, when the user clicks a <div>: "my-addon@me.org:my-e
10s-extension-message" false...
...And 3 more matches
Localization content best practices
bugzilla and l
10n do i need l
10n feedback?
... feedback from l
10n-drivers is not necessary for each landing involving strings, as long as you're following the basic rules described in this document.
... keywords: l12y, late-l
10n two keywords are generally used on bugzilla: l12y: it's used to track "localizability" bugs.
...And 3 more matches
Mozilla Quirks Mode Behavior
miscellaneous & style all of the style rules in layout/style/res/quirk.css apply only in quirks mode: orphaned li has an inside bullet (bug
1049).
... the scrollleft, scrolltop, scrollwidth, and scrollheight properties are relative to body in quirks mode (instead of html) (bug 21
1030).
... obsolete since gecko
10.0 however, html5 requires this behavior, and starting in gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7), this also works in standards mode (bug 80784, bug 93077).
...And 3 more matches
A guide to searching crash reports
specifically, crash-stats offers two basic functions: searching you can search the crash reports database by over
100 criteria: crash signature, date, platform, product, version, etc.
...the first group has over
100,000 crash reports, which accounts for 7.77% of all matching crashes.
...crash reports always include a platform field (though it may be empty if something has gone wrong) and so the percentages add up to
100.
...And 3 more matches
L20n HTML Bindings
download l20n with html bindings we maintain a repository with l20n optimized for production use: one file (~1
10kb) one file, minified (~35kb) it's recommended to include the l20n.js file as the last script in the head element.
... <link rel="localization" href="../locales/manifest.json"> an example of the manifest file (all keys are required): { "locales": [ "en-us", "pl"], "default_locale": "en-us", "resources": [ "../locales/{{locale}}/strings.l20n", "/shared/{{locale}}/date.l20n"¨ ] } make html elements localizable use the data-l
10n-id attribute on an html element to mark it as localizable.
... <p data-l
10n-id="about"></p> notice that you don't have to put the text content in the html anymore (you still can if you want to).
...And 3 more matches
NSS 3.16.3 release notes
nss 3.16.3 requires nspr 4.
10.6 or newer.
... 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:15: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 finger...
...print: e5: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:f5: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:35: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:05: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 沃通根证�...
...And 3 more matches
compare-locales
the easiest way is to just run $ pip install -u compare-locales running it compare-locales gathers the directories to compare from a toml file, usually found in $app/locales/l
10n.toml.
... the details of the configuration file are described in the l
10n-config docs.
...if you want to test the localization for de, run $ compare-locales browser/locales/l
10n.toml ./l
10n/ de to check mobile, replace the previous line with: $ compare-locales mobile/android/locales/l
10n.toml ./l
10n/ zh-tw to check mail, suite, calendar that lives on comm-central, you can either rely on the check-out of mozilla within comm-central repository that the regular comm-central build instructions generate: $ compare-locales ./comm-central/mail/locales/l
10n.toml ./l
10n/ zh-tw if you don't want to use a copy of mozilla-central in comm-central, you can run them separately: $ compare-locales -dmozilla=$pwd/mozilla-central...
...And 3 more matches
nsMsgFolderFlagType
*/ const nsmsgfolderflagtype elided = 0x000000
10; /// whether this is a virtual search folder const nsmsgfolderflagtype virtual = 0x00000020; /** @name news folder flags * these flags only occur in folders which have * the nsmsgfolderflags::newsgroup bit set, and do * not have the nsmsgfolderflags::directory or * nsmsgfolderflags::elided bits set.
... const nsmsgfolderflagtype trash = 0x00000
100; /// whether this is a folder that sent mail gets delivered to.
... const nsmsgfolderflagtype inbox = 0x0000
1000; /// whether this folder on online imap const nsmsgfolderflagtype imapbox = 0x00002000; /// whether this is an archive folder const nsmsgfolderflagtype archive = 0x00004000; /// this used to be used for virtual newsgroups const nsmsgfolderflagtype unused1 = 0x00008000; /// used to be for categories const nsmsgfolderflagtype unused4 = 0x0001...
...And 3 more matches
nsMsgMessageFlags
marked 0x00000004 indicates whether or not the message has been flagged/starred expunged 0x00000008 indicates whether or not the message is deleted (but not compacted) hasre 0x000000
10 indicates whether or not 're: ' should be added to the head of the subject to get the proper subject.
... watched 0x00000
100 indicates whether or not this thread is being watched.
... forwarded 0x0000
1000 indicates whether or not the message has been forwarded.
...And 3 more matches
characteristic - Web APIs
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 70notes notes windows
10.edge full support ≤79notes full support ≤79notes notes macos only.
... full support ≤79notes disabled notes linux and versions of windows earlier than
10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
...And 3 more matches
readValue() - Web APIs
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 70notes notes windows
10.edge full support ≤79notes full support ≤79notes notes macos only.
... full support ≤79notes disabled notes linux and versions of windows earlier than
10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
...And 3 more matches
value - Web APIs
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 70notes notes windows
10.edge full support ≤79notes full support ≤79notes notes macos only.
... full support ≤79notes disabled notes linux and versions of windows earlier than
10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
...And 3 more matches
writeValue() - Web APIs
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 70notes notes windows
10.edge full support ≤79notes full support ≤79notes notes macos only.
... full support ≤79notes disabled notes linux and versions of windows earlier than
10.disabled from version ≤79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
...And 3 more matches
Using the CSS Painting API - Web APIs
<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 15</li> <li>item 16</li> <li>item 17</li> <li>item</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/boxbg.js'); li { background-image: paint(boxbg); --boxcolor: hsla(55, 90%, 60%, 1.0); } li:nth-of-type(3n) { --boxcolor...
...r'); ctx.fillstyle = color; ctx.beginpath(); ctx.moveto( x, y ); ctx.lineto( blockwidth, y ); ctx.lineto( blockwidth + highlightheight, highlightheight ); ctx.lineto( x, highlightheight ); ctx.lineto( x, y ); ctx.closepath(); ctx.fill(); /* create the dashes */ for (let i = 0; i < 4; i++) { let start = i * 2; ctx.beginpath(); ctx.moveto( (blockwidth) + (start *
10) +
10, y ); ctx.lineto( (blockwidth) + (start *
10) + 20, y ); ctx.lineto( (blockwidth) + (start *
10) + 20 + (highlightheight), highlightheight ); ctx.lineto( (blockwidth) + (start *
10) +
10 + (highlightheight), highlightheight ); ctx.lineto( (blockwidth) + (start *
10) +
10, y ); ctx.closepath(); ctx.fill(); } } // paint }); we can then create a little html that will ac...
... li { background-image: paint(hollowhighlights, stroke,
10px); } we can also specify that we want a particular type of argument.
...And 3 more matches
Advanced animations - Web APIs
var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var ball = { x:
100, y:
100, radius: 25, 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: 25, 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.requestanimati...
... <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: 25, 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 > can...
...And 3 more matches
Writing a WebSocket server in C# - Web APIs
this server conforms to rfc 6455 so it will only handle connections from chrome version 16, firefox 11, ie
10 and over.
...al guid specified by rfc 6455) compute sha-1 and base64 hash of the new value write the hash back as the value of "sec-websocket-accept" response header in an http response if (new system.text.regularexpressions.regex("^get").ismatch(data)) { const string eol = "\r\n"; // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = encoding.utf8.getbytes("http/1.1
101 switching protocols" + eol + "connection: upgrade" + eol + "upgrade: websocket" + eol + "sec-websocket-accept: " + convert.tobase64string( system.security.cryptography.sha1.create().computehash( encoding.utf8.getbytes( new system.text.regularexpressions.regex("sec-websocket-key: (.*)").match(data).groups[1].value.trim() + "2...
... if we send "mdn", we get these bytes: 129 131 61 84 35 6 112 16
109 let's take a look at what these bytes mean.
...And 3 more matches
font-weight - CSS: Cascading Style Sheets
<number> a <number> value between 1 and
1000, inclusive.
... 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.
... css fonts level 4 extends the syntax to accept any number between 1 and
1000, inclusive, and introduces variable fonts, which can make use of this much finer-grained range of font weights.
...And 3 more matches
@keyframes - CSS: Cascading Style Sheets
syntax @keyframes slidein { from { transform: translatex(0%); } to { transform: translatex(
100%); } } values <custom-ident> a name identifying the keyframe list.
... to an ending offset of
100%.
... valid keyframe lists if a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and
100%/to), browsers will use the element's existing styles for the start/end states.
...And 3 more matches
Variable fonts guide - CSS: Cascading Style Sheets
for example linux oses need the latest linux freetype version, and macos prior to
10.13 does not support variable fonts.
...for comparison, it is typical in a typographic system for a magazine to use
10–15 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 a long time in css there has existed the ability to specify this via the font-weight property, which takes numeric values ranging from
100 to 900 in increments of
100, and keywords like normal or bold, which are simply aliases for their corresponding numeric values (400 and 700 in this case).
...And 3 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 150 pixels on the x-axis.
... <img style="transform: skewx(
10deg) translatex(150px); 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.
... /* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width:
100%; height:
100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width:
100px; height:
100px; border: none; line-height:
100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0...
...And 3 more matches
animation - CSS: Cascading Style Sheets
: 3s linear 1s slidein;</div> <div class="animation a2"></div> </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...
...c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width:
100%; height:
100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left;...
...ff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width:
100%; height: calc(
100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.add(type); btn.title = type.tou...
...And 3 more matches
break-after - CSS: Cascading Style Sheets
operasafariandroid 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 support nowebview android full support 50chrome android full support 50firefo...
... no support nosamsung internet android no support nocolumnchrome full support 50edge full support 12firefox no support noie full support
10opera no support 11.1 — 15 no support 11.1 — 15 full support 37safari no support nowebview android full support 50chrome android full support 50firefox android ...
...ploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in paged mediachrome full support 50edge full support 12firefox full support 65ie full support
10opera full support 37 full support 37 no support 11.1 — 12.1safari full support
10webview android full support 50chrome android full support 50fire...
...And 3 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.
... 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 75% semi-condensed 87.5% normal
100% semi-expanded 112.5% expanded 125% extra-expanded 150% 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 normal face (expanded faces).
...if the font does not provide a face that exactly matches the given value, then values less than
100% map to a narrower face, and values greater than or equal to
100% map to a wider face.
...And 3 more matches
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.
... img { width: 300px; height: 250px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position:
10px; } #object-position-2 { object-position:
100%
10%; } the first image is positioned with its left edge inset
10 pixels from the left edge of the element's box.
... the second image is positioned with its right edge flush against the right edge of the element's box and is located
10% of the way down the height of the element's box.
...And 3 more matches
transform-origin - CSS: Cascading Style Sheets
this means, this definition transform-origin: -
100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-
100%, 50%) rotate(45deg) translate(
100%, -50%); by default, the origin of a transform is center.
...x /* one-value syntax */ transform-origin: 2px; transform-origin: bottom; /* 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 b...
... 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 value50% 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 | bottom ] | [ [ <length-...
...And 3 more matches
Setting up adaptive streaming media sources - Developer guides
5" lang="en" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="64000"> <baseurl>elephantsdream_aac48k_064.mp4.dash</baseurl> </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_0
100.264.dash</baseurl> </representation> <representation id="3" bandwidth="175000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0175.264.dash</baseurl> </representation> <representation id="4" bandwidth="250000" width="480" height="360"> <baseurl>elephantsdream_h264bpl3...
... once encoded your file structure may look something like this: play list -> /segments/news.mp4.mpd main segment folder -> /segments/main/
100 kbps segment folder -> /segments/main/news
100 contains (1.m4s, 2.m4s, 3.m4s ...
...:2011" type="static" mediapresentationduration="pt0h9m56.46s"> <baseurl> http://example.com/segments </baseurl> <period start="pt0s"> <adaptationset bitstreamswitching="true"> <representation id="0" codecs="avc1" mimetype="video/mp4" width="320" height="240" startwithsap="1" bandwidth="46986"> <segmentbase> <initialization sourceurl="main/news
100/1.m4s" range="0-862"/> </segmentbase> <segmentlist duration="1"> <segmenturl media="main/news
100/2.m4s" mediarange="863-7113"/> <segmenturl media="main/news
100/3.m4s" mediarange="7114-14
104"/> <segmenturl media="main/news
100/4.m4s" mediarange="14
105-17990"/> </segmentlist> </representation> <representation id="1" ...
...And 3 more matches
<input type="time"> - HTML: Hypertext Markup Language
for time inputs, the value of step is given in seconds, with a scaling factor of
1000 (since the underlying numeric value is in milliseconds).
... using the step attribute you can use the step attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by
10 minutes at a time when clicking the little arrow widgets).
... 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 ran...
...And 3 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
there is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from
10 pm to 4 am.
... there is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from
10 pm to 4 am.
... for example, if you have <input type="number" min="
10" step="2">, then any even integer,
10 or greater, is valid.
...And 3 more matches
Standard metadata names - HTML: Hypertext Markup Language
initial-scale a positive number between 0.0 and
10.0 defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.
... maximum-scale a positive number between 0.0 and
10.0 defines the maximum amount to zoom in.
...browser settings can ignore this rule and ios
10+ ignores it by default.
...And 3 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
for example, when displaying money values for currencies that use hundredths of a unit (such as the dollar, which is divided into
100 cents), you would typically specify a value of 2, so that in tandem with char being set to ".", the values in a column would be cleanly aligned on the decimal points, with the number of cents properly displayed to the right of the decimal point.
... <table> <tr> <th>name</th> <th>id</th> <th>member since</th> <th>balance</th> </tr> <tr> <td>margaret nguyen</td> <td>427311</td> <td><time datetime="20
10-06-03">june 3, 20
10</time></td> <td>0.00</td> </tr> <tr> <td>edvard galinski</td> <td>533175</td> <td><time datetime="2011-01-13">january 13, 2011</time></td> <td>37.00</td> </tr> <tr> <td>hoshi nakamura</td> <td>601942</td> <td><time datetime="2012-07-23">july 23, 2012</time></td> <td>15.00</td> </tr> </table> css this simple css just adds a solid ...
...those changes make the html look like this: <table> <tr> <th rowspan="2">name</th> <th rowspan="2">id</th> <th colspan="2">membership dates</th> <th rowspan="2">balance</th> </tr> <tr> <th>joined</th> <th>canceled</th> </tr> <tr> <th>margaret nguyen</td> <td>427311</td> <td><time datetime="20
10-06-03">june 3, 20
10</time></td> <td>n/a</td> <td>0.00</td> </tr> <tr> <th>edvard galinski</td> <td>533175</td> <td><time datetime="2011-0
1013">january 13, 2011</time></td> <td><time datetime="2017-04008">april 8, 2017</time></td> <td>37.00</td> </tr> <tr> <th>hoshi nakamura</td> <td>601942</td> <td><time datetime="2012-07-23">july 23, 2012</time></t...
...And 3 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
this takes the base for the conversion as an optional second argument, which you should always provide: parseint('123',
10); // 123 parseint('0
10',
10); //
10 in older browsers, strings beginning with a "0" are assumed to be in octal (radix 8), but this hasn't been the case since 2013 or so.
... unless you're certain of your string format, you can get surprising results on those older browsers: parseint('0
10'); // 8 parseint('0x
10'); // 16 here, we see the parseint() function treat the first string as octal due to the leading 0, and the second string as hexadecimal due to the leading "0x".
...unlike its parseint() cousin, parsefloat() always uses base
10.
...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,35 2,35 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="150,0 121,90 198,35
102,35 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,35 2,35 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="m1
10,0 h90 v90 h...
...And 3 more matches
Basic Transformations - SVG: Scalable Vector Graphics
an example: <svg width="30" height="
10"> <g fill="red"> <rect x="0" y="0" width="
10" height="
10" /> <rect x="20" y="0" width="
10" height="
10" /> </g> </svg> all following transformations are summed up in an element's transform attribute.
... <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(45)" /> </svg> this example shows a square that is rotated by 45 degrees.
...And 3 more matches
lang/type - Archive of obsolete content
let { isstring } = require('sdk/lang/type'); isstring('my string'); // true isstring(
100); // false isstring('
100'); // true parameters value : mixed the variable to check.
... let { isnumber } = require('sdk/lang/type'); isnumber(3.1415); // true isnumber(
100); // true isnumber('
100'); // false parameters value : mixed the variable to check.
... let { isregexp } = require('sdk/lang/type'); isregexp(/[^\.]*\.js$/); // true isregexp(new regexp('substring')); // true isregexp(
1000); // false parameters value : mixed the variable to check.
...And 2 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
browser sniffing is usually done through the useragent, such as: mozilla/5.0 (x11; u; linux i686; en-us; rv:1.5) gecko/2003
1016 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.
... node 2 attribute node 3 text node 4 cdata section node 5 entity reference node 6 entity node 7 processing instruction node 8 comment node 9 document node
10 document type node 11 document fragment node 12 notation node nodevalue returns the value of the current node.
...as per the ecmascript specification (which is the specification javascript follows), running new date().getyear() in 2004 will return "
104".
...And 2 more matches
New Skin Notes - Archive of obsolete content
--nickolay
10:38, 31 aug 2005 (pdt) existing fixes should be on test/docs/ now.
...==dria you've got to be kidding me, the colors are clearly different (rgb(0,51,153) vs rgb(51,
102,187)).
...--mmondor 11:54, 26 aug 2005 (pdt) for all that it is worth, i am against setting the 'base' font-size to anything other than
100%, let the user figure out which font-setting is best for him/her on his/her computer, rather than tweak it to what the designer feels is the right size for the designers eye(s).
...And 2 more matches
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
performance testsuite time metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700) as well as current against the vm in flash player
10.
... osdefault-jitinterpretedaggressive jit mac (os/x
10.4 intel, 2ghz dual core)tc-703 vs tc-700: 0.0%tc-703 vs flash
10: 1.1% slowertc-703 vs tc-700: 17.4% fastertc-703 vs flash
10: 165.3% fastertc-703 vs tc-700: 0.1% fastertc-703 vs flash
10: 0.8% slower windows (xp pro, 2.13ghz dual core)tc-703 vs tc-700: 0.6% fastertc-703 vs flash
10: 0.8% fastertc-703 vs tc-700: 16.4% fastertc-703 vs flash
10: 148.7% fastertc-703 vs tc-700: 0.1% slowertc-703 vs flash
10: 5.2% faster linux (ubuntu linux, 2.13 ghz dual core)tc-703 vs tc-700: 6.0% fastertc-703 vs flash
10: 1.7% fastertc-703 vs tc-700: 89.5% fastertc-703 vs flash
10: 182.0% fastertc-703 vs tc-700: 6.1% fastertc-703 vs flash
10: 1.4% faster ...
... osdefault-jitinterpretedaggressive jit mac (os/x
10.4 intel, 2ghz dual core)tc-703 vs tc-700: 2.0% smallertc-703 vs tc-663: 7.8% smallertc-703 vs tc-700: 7.1% largertc-703 vs tc-663: 14.6% largertc-703 vs tc-700: 16.4% largertc-703 vs tc-663: 2.1% larger windows (xp pro, 2.13ghz dual core)tc-703 vs tc-700: 3.2% largertc-703 vs tc-663: 7.6% largertc-703 vs tc-700: 3.9% largertc-703 vs tc-663: 12.4% largertc-703 vs tc-700: 3.3% largertc-703 vs tc-663: 21.4% larger lin...
...And 2 more matches
Adding more elements - Archive of obsolete content
<hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width:
10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width:
10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog.
...these spacers have been given an explicit width of
10 pixels each.
...<spacer style="height:
10px"/> <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width:
10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width:
10px;"/> <te...
...And 2 more matches
Box Model Details - Archive of obsolete content
example 1 : source view <hbox flex="1"> <button label="left" style="min-width:
100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width:
100px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible.
... the two buttons indicate a minimum width of
100 pixels.
...example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width:
100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width:
100px;" flex="1"/> </hbox> summary of the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible.
...And 2 more matches
Element Positioning - Archive of obsolete content
an example is shown below: example 1: source view <button label="ok" width="
100" height="40"/> however, it is not recommended that you do this.
... 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
10...
... example 2 the second button will be displayed with a height of ten pixels and a width of
100 ems (an em is the size of a character in the current font).
...And 2 more matches
-ms-content-zoom-snap-points - Archive of obsolete content
initial valuesnapinterval(0%,
100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values snapinterval( <percentage>, <percentage> ) specifies where the snap-points will be placed.
...in the first selector, the first snap-point is at 0%, and the interval is set to
100%.
... in the second selector, each snap-point is listed separately—
100%, 200%, 300%, and so on.
...And 2 more matches
Reference - Archive of obsolete content
--maian 05:
10, 22 september 2005 (pdt) if the examples are there specifically to show the differences between two versions of js, and if we have a section in the reference that is dedicated to discussing these differences, i would think that those samples should be included in that section of the reference.
...brendan just mentioned one obscure one here: https://bugzilla.mozilla.org/show_bu...?id=3
10993#c20 --maian 22:46, 5 october 2005 (pdt) section title capitalization there's an inconsistency in the capitalization of section titles.
...cstevens
10:23, 20 december 2006 (pst) we do plan to move the pages around, see core javascript 1.5 reference/reorg, but it's not clear when that will happen.
...And 2 more matches
Backgrounds and borders - Learn web development
.box { background: linear-gradient(
105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties.
... you can use keywords such as top and right (look up the others on the background-position page): .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; } and lengths, and percentages: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px
10%; } you can also mix keyword values with lengths or percentages, for example: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; } finally, you can also use a 4-value syntax in order to indicate a distance from certain edges of the box — the length unit, in this case, is an offset from the value that precedes it.
... so in the css below we are positioning the background 20px from the top and
10px from the right: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right
10px; } use the example below to play around with these values and move the star around inside the box.
...And 2 more matches
Images, media, and form elements - Learn web development
as we learned in our previous lesson, a common technique is to make the max-width of an image
100%.
... try adding max-width:
100% to the <img> element in the example above.
... to force the image to stretch to fill the grid cell it is in, you'd have to do something like following: img { width:
100%; height:
100%; } this would however stretch the image, so probably isn't what you'd want to do.
...And 2 more matches
Basic native form controls - Learn web development
the following screenshot shows default, focused and disabled text input types in firefox 71 and safari on macos and in chrome 79 and edge 18 on windows
10.
... <input type="hidden" id="timestamp" name="timestamp" value="12867054
10"> if you create such an element, it's required to set its name and value attributes.
... the following screenshots show default, focused and disabled checkboxes in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows
10: note: any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class, even if they are no longer checked.
...And 2 more matches
Client-side form validation - Learn web development
delete the contents of the <body> element, and replace it with the following: <form> <div> <label for="choose">would you prefer a banana or a cherry?</label> <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"> </div> <div> <label for="number">how many would you like?</label> <input type="number" id="number" name="amount" value="1" min="1" max="
10"> </div> <div> <button>submit</button> </div> </form> here you'll see that we've given the text field a minlength and maxlength of six, which is the same length as banana and cherry.
... input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } div { margin-bottom:
10px; } here is the example running live: note: you can find this example live on github as fruit-length.html (see also the source code.) note: <input type="number"> (and other types, such as range and date) can also take a step attribute, which specifies what increment the value will go up or down by when the input controls are used (such as the up and down number buttons).
... <p> <label for="t3">leave a short message</label> <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> </p> <p> <button>submit</button> </p> </form> and now some css to style the html: form { font: 1em sans-serif; max-width: 320px; } p > label { display: block; } input[type="text"], input[type="email"], input[type="number"], textarea, fieldset { width :
100%; border: 1px solid #333; box-sizing: border-box; } input:invalid { box-shadow: 0 0 5px 1px red; } input:focus:invalid { box-shadow: none; } this renders as follows: see validation-related attributes for a complete list of attributes that can be used to constrain input values and the input types that support them.
...And 2 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: 95%"> 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: #f5f9fa; } 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...
...ive self talk (as mentioned in affirmations for positive thinking.)</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } 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...
...And 2 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: 95%"> 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: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textare...
... playable code2 <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: 95%"> <p>a link to my favorite website.</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10p...
...And 2 more matches
Adding vector graphics to the Web - Learn web development
ced svg features include <fecolormatrix> (transform 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="150" 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.
... <img src="equilateral.svg" alt="triangle with all three sides equal" height="87" width="
100" /> pros quick, familiar image syntax with built-in text equivalent available in the alt attribute.
...make sure your svg code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) here's a very simple example of what you might paste into your document: <svg width="300" height="200"> <rect width="
100%" height="
100%" fill="green" /> </svg> pros putting your svg inline saves an http request, and therefore can reduce a bit your loading time.
...And 2 more matches
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.9...
...7 12,756 5514 9.8 24.0 149.6 15 1 our world mars 0.642 6,792 3933 3.7 24.7 227.9 -65 2 the red planet jovian planets gas giants jupiter 1898 142,984 1326 23.1 9.9 778.6 -1
10 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 -195 27 neptune
102 49,528 1638 11.0 16.1 4495.1 -200 14 dwarf planets pluto 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 declassified as a planet in 2006, but this remains controversial.
... tables are not automatically responsive: when you use proper layout containers (such as <header>, <section>, <article>, or <div>), their width defaults to
100% of their parent element.
...And 2 more matches
Styling Vue components with CSS - Learn web development
} button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size:
100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width:
100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen ...
... background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0
100%; text-align: center; } [class*="__lg"] { display: inline-block; width:
100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen 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,...
... } } /* 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(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width:
100%; } #app h1 { display: block; min-width:
100%; width:
100%; text-align: center; margin: 0; margin-bottom: 1rem; } </style> if you check the app, you'll see that our todo list is now in a card, and we have some better formatting of our to-do items.
...And 2 more matches
Handling common JavaScript problems - Learn web development
incorrectly using functions inside loops — for example, in bad-for-loop.html (see source code), we loop through
10 iterations, each time creating a paragraph and adding an onclick event handler to it.
... note: buggy javascript code: the
10 most common mistakes javascript developers make has some nice discussions of these common mistakes and more.
...these are available in ie
10 and above, and all modern browsers.
...And 2 more matches
Creating a Language Pack
pre-build steps in the .mozconfig, you want to have mk_add_options moz_objdir=@topsrcdir@/obj-firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l
10n-base=../l
10n-central # path relative to moz_objdir ac_add_options --enable-application=[browser or mail] the given path should have your localization directory as child (i.e., a subdirectory ab-cd where ab-cd is your locale code).
... l
10n binary repack for apps currently in development, you need to get the right strings for the build you use.
...issue the following command: $ make merge-x-testing locale_mergedir=$(pwd)/mergedir rm -f -rf mergedir macosx_deployment_target= compare-locales -m mergedir /users/your_id/mozilla/vc/mozilla-aurora/browser/locales/l
10n.ini /users/your_id/mozilla/vc/l
10n-central x-testing x-testing: browser chrome browser aboutcerterror.dtd // add and localize this file ...
...And 2 more matches
Gecko Logging
example usage code sample #include "mozilla/logging.h" using mozilla::loglevel; static mozilla::lazylogmodule slogger("example_logger"); static void dostuff() { moz_log(slogger, loglevel::info, ("doing stuff.")); int i = 0; int start = time::nowms(); moz_log(slogger, loglevel::debug, ("starting loop.")); while (i++ <
10) { moz_log(slogger, loglevel::verbose, ("i = %d", i)); } // only calculate the elapsed time if the warning level is enabled.
... if (moz_log_test(slogger, loglevel::warning)) { int elapsed = time::nowms() - start; if (elapsed >
1000) { moz_log(slogger, loglevel::warning, ("loop took %dms!", elapsed)); } } if (i !=
10) { moz_log(slogger, loglevel::error, ("i should be
10!")); } } enabling logging the log level for a module is controlled by setting an environment variable before launching the application.
... for example, if you want to specify "sync", "timestamp" and "rotate": set moz_log="example_logger:3,timestamp,sync,rotate:
10" to adjust the logging after firefox has started, you can set prefs under the logging.
...And 2 more matches
Obsolete Build Caveats and Tips
obsolete caveats and tips from simple_firefox_build install a version of visual studio that supports c++ development: vs 2012 for windows desktop pro or express (free), or vc++ 20
10 pro or express (free), or vc++ 2008 pro or express with sp1 (free) (warning !
... from firefox
10, the compilator is visual studio 20
10; if you want to use it, you must use a previous version of it !), or 2005 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.
... this note below seems redundant as this is true by default https://msdn.microsoft.com/en-us/library/dh8che7s%28v=vs.1
10%29.aspx note: starting with gecko 7.0, you should no longer include "-zc:wchar_t-" in the command line when building on windows.
...And 2 more matches
Initial setup
as a pre-requisite to contributing to the l
10n program, you need to have access to code, tools, and a properly configured local environment (i.e., your personal computer).
...the svn for localizers guide will help you learn the most important svn commands for l
10n.
... web-based l
10n tools we'll talk about these in a little bit.
...And 2 more matches
Writing localizable code
if you want to add build processing to localized files, be sure to request feedback from l
10n@.
... in most cases, you can just as well put the processing into the content code and reference different key-value pairs in l
10n.
... l
10n impact on frozen trees, there is the rule to not check in l
10n-impact changes.
...And 2 more matches
Extras
</mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <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(255,255,255); stop-opacity:1;"/> <stop offset="
100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15...
...)"> <path fill="url(#radgrad1)" d="m 15 0 l 20
10 l 30 15 l 20 20 l 15 30 l
10 20 l 0 15 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="15px" height="15px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="
100%" style="stop-color:rgb(0,0,255); stop-opacity:.9;"/> </radialgradient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,5 l5,5 l0,4 l5,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="250px"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="
100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> <stop offset="
100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> </lineargradient> <lineargradient id="grad2" x1="0%" y1="0%" x2="0%" y2="
100%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> <stop offset="
100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255)...
...And 2 more matches
Profiling with the Firefox Profiler
this defaults to
1000000, which is 9mb.
... if you want 90mb use
10000000, and 20000000 for 180mb, which are good values to debug long startups.
...
10 ms.
...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[805ef
10]: c_initialize
1024[805ef
10]: rv = 0x0
1024[805ef
10]: c_getinfo
1024[805ef
10]: rv = 0x0
1024[805ef
10]: c_getslotlist
1024[805ef
10]: rv = 0x0 2.
...osthreadid[nsprthreadid]: argn = 0xaaaaaaaa osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example,
1024[805ef
10]: c_initialize
1024[805ef
10]: pinitargs = 0x40
10c938
1024[805ef
10]: rv = 0x0
1024[805ef
10]: c_getinfo
1024[805ef
10]: pinfo = 0xbffff340
1024[805ef
10]: rv = 0x0
1024[805ef
10]: c_getslotlist
1024[805ef
10]: tokenpresent = 0x0
1024[805ef
10]: pslotlist = 0x0
1024[805ef
10]: pulcount = 0xbffff33c
1024[805ef
10]: *pulcount = 0x2
1024[805ef
10]: rv = 0x0 note that when a pkcs #11 function takes a pointer argument...
...for example,
1024[805ef
10]: c_findobjectsinit
1024[805ef
10]: hsession = 0x
1000001
1024[805ef
10]: ptemplate = 0xbffff4
10 1024[805ef
10]: ulcount = 3
1024[805ef
10]: cka_label = localhost.nyc.rr.com [20]
1024[805ef
10]: cka_token = ck_true [1]
1024[805ef
10]: cka_class = cko_certificate [4]
1024[805ef
10]: rv = 0x0
1024[805ef
10]: c_findobjects
1024[805ef
10]: hsession = 0x
1000001
1024[805ef
10]: phobject = 0x806d8
10 1024[805ef
10]: ulmaxobjectcount = 16 1...
...And 2 more matches
How to embed the JavaScript engine
*/ static jsclass global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, }; int main(int argc, const char *argv[]) { jsruntime *rt = js_newruntime(8l *
1024 *
1024, js_use_helper_threads); if (!rt) return 1; jscontext *cx = js_newcontext(rt, 8192); if (!cx) return 1; { // scope for our various stack objects (jsautorequest, rootedobject), so they all go // out of scope before we js_destroycontext.
...ass global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, nullptr, nullptr, nullptr, nullptr, js_globalobjecttracehook }; int main(int argc, const char *argv[]) { js_init(); jsruntime *rt = js_newruntime(8l *
1024 *
1024, js_use_helper_threads); if (!rt) return 1; jscontext *cx = js_newcontext(rt, 8192); if (!cx) return 1; { // scope for our various stack objects (jsautorequest, rootedobject), so they all go // out of scope before we js_destroycontext.
...*/ static jsclass global_class = { "global", jsclass_global_flags, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, js_globalobjecttracehook }; int main(int argc, const char *argv[]) { js_init(); jsruntime *rt = js_newruntime(8l *
1024 *
1024); if (!rt) return 1; jscontext *cx = js_newcontext(rt, 8192); if (!cx) return 1; { // scope for our various stack objects (jsautorequest, rootedobject), so they all go // out of scope before we js_destroycontext.
...And 2 more matches
Frecency algorithm
the frecency calculation process for the
10 most recent visits (where
10 is determined by places.frecency.numvisits): ..
...
100 (places.frecency.firstbucketweight, 4 days bucket size, in places.frecency.firstbucketcutoff) ....
...
10 (places.frecency.defaultbucketweight, bucket size in places.frecency.defaultbucketcutoff) ..
...And 2 more matches
Places Developer Guide
getservice(ci.nsinavhistoryservice); var oururi = uri("http://www.mozilla.com"); var visitdate = date.now() *
1000; // in microseconds var referreruri = null; // or a uri var isredirect = false; var visittype = history.transition_link; // the visit is from a link that was clicked var sessionid = 0; // can link the visit with a specific browsing session history.addvisit(oururi, visitdate, referreruri, visittype, isredirect, sessionid); // add a visit to a url, with a page title and visited ...
...var browserhistory = histsvc.queryinterface(ci.nsibrowserhistory); var oururi = uri("http://www.mozilla.com"); var pagetitle = "mozilla"; var visitdate = date.now() *
1000; // in microseconds browserhistory.addpagewithdetails(oururi, "mozilla", visitdate); // add a visit to a url, with extended behavior information // via nsiglobalhistory3.
...all visits for a single url from history browserhistory.removepage(oururi); // remove all visits for multiple urls from history var uristodelete = [oururi]; // will call nsinavhistoryobserver.onbeginupdatebatch/onendupdatebatch var donotify = false; browserhistory.removepages(uristodelete, uristodelete.length, donotify); // remove all visits within a given time period var enddate = date.now() *
1000; // now, in microseconds var startdate = enddate - (7 * 86400 *
1000 *
1000); // one week ago, in microseconds browserhistory.removepagesbytimeframe(startdate, enddate); // remove all pages for a given host var entiredomain = true; // will delete from all hosts from the given domain browserhistory.removepagesfromhost("mozilla.com", true); // remove all history visits browserhistory.removeallpa...
...And 2 more matches
nsIContentViewer
inherits from: nsisupports last changed in gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7) implemented by: ?????????????????????????????????????.
... note: prior to gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7), this attribute was part of nsidocumentviewer.
... note: prior to gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7), this attribute was part of nsidocumentviewer.
...And 2 more matches
nsIWebProgressListener
state_stop 0x000000
10 this flag indicates the completion of a request.
... constant value description state_is_request 0x000
10000 this flag indicates that the state transition is for a request, which includes but is not limited to document requests.
... constant value description state_restoring 0x0
1000000 this flag indicates that the state transition corresponds to the start or stop of activity for restoring a previously-rendered presentation.
...And 2 more matches
nsIZipReader
inherits from: nsisupports last changed in gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7) implemented by: @mozilla.org/libjar/zip-reader;1.
... starting in gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7), the nsizipreader api supports a limited 8 bit code page usage.
... method overview void close(); void extract(in autf8string zipentry, in nsifile outfile); void extract(in string zipentry, in nsifile outfile); obsolete since gecko
10 nsiutf8stringenumerator findentries(in autf8string apattern); nsiutf8stringenumerator findentries(in string apattern); obsolete since gecko
10 nsiprincipal getcertificateprincipal(in autf8string aentryname); nsiprincipal getcertificateprincipal(in string aentryname); obsolete since gecko
10 nsizipentry getentry(in autf8string zipentry); nsizipentry gete...
...And 2 more matches
Working with data
ar mycarray_ofstrings = ctypes.jschar.ptr.array(2)([cstr1, cstr2]); // specifying length of 2 is optional, can omit it, so can just do `ctypes.jschar.ptr.array()([cstr1, cstr2])` mycarray_ofstrings.addressofelement(0).contents.readstring(); // outputs: "rawr" mycarray_ofstrings.addressofelement(1).contents.readstring(); // outputs: "boo" example: creating an array of integers var jsarr = [4,
10]; var mycarr = ctypes.int.array(jsarr.length)(jsarr); // specifying length is optional, can omit.
... this will also work: `ctypes.int.array()(jsarr)` mycarr.addressofelement(0).contents; // outputs: 4 mycarr.addressofelement(1).contents; // outputs:
10 type casting you can type cast data from one type to another by using the ctypes.cast() function: var newobj = ctypes.cast(origobj, newtype); this will return a new object whose data block is shared with the original object, but whose type is newtype.
... for example: const point = new ctypes.structtype("point", [{x: ctypes.int32_t}, {y: ctypes.int32_t}]); const rect = new ctypes.structtype("rect", [{topleft: point}, {bottomright: point}]); var r = rect(); var p = r.topleft; r.topleft.x =
100; at this point, p is a reference to the topleft field in the rect named r.
...And 2 more matches
Background Tasks API - Web APIs
auto; overflow-y: scroll; width: 388px; height: 460px; } .container { width: 400px; padding: 6px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; display: block; overflow: auto; } .label { display: inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width:
100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; margin-top: 0; color: white; background-color: darkgreen; } #progress { width:
100%; padding-top: 6px; } javascript content now that the document structure is defined, construct the javascript code that will do the work.
...that function, enqueuetask(), looks like this: function enqueuetask(taskhandler, taskdata) { tasklist.push({ handler: taskhandler, data: taskdata }); totaltaskcount++; if (!taskhandle) { taskhandle = requestidlecallback(runtaskqueue, { timeout:
1000 }); } schedulestatusrefresh(); } enqueuetask() accepts as input two parameters: taskhandler is a function which will be called to handle the task.
... function runtaskqueue(deadline) { while ((deadline.timeremaining() > 0 || deadline.didtimeout) && tasklist.length) { let task = tasklist.shift(); currenttasknumber++; task.handler(task.data); schedulestatusrefresh(); } if (tasklist.length) { taskhandle = requestidlecallback(runtaskqueue, { timeout:
1000} ); } else { taskhandle = 0; } } runtaskqueue()'s core is a loop which continues as long as there's time left (as determined by checking deadline.timeremaining) to be sure it's more than 0 or if the timeout limit was reached (deadline.didtimeout is true), and as long as there are tasks in the task list.
...And 2 more matches
Pixel manipulation with canvas - Web APIs
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]; } var colorindices = getcolorindicesforcoord(xcoord, ycoord, canvaswidth); var redindex = colorindices[0]; var greenindex = colorindices[1]; var blueindex = colorindices[2]; var alphaindex = colorindices[3]; var redforcoord = imagedata.data[...
...redindex]; var greenforcoord = imagedata.data[greenindex]; var blueforcoord = imagedata.data[blueindex]; var alphaforcoord = imagedata.data[alphaindex]; or, if es2015 is appropriate: const xcoord = 50; const ycoord =
100; const canvaswidth =
1024; const getcolorindicesforcoord = (x, y, width) => { const red = y * (width * 4) + x * 4; return [red, red + 1, red + 2, red + 3]; }; const colorindices = getcolorindicesforcoord(xcoord, ycoord, canvaswidth); const [redindex, greenindex, blueindex, alphaindex] = colorindices; you may also access the size of the pixel array in bytes by reading the uint8clampedarray.length attribute: var numbytes = imagedata.data.length; creating an imagedata object to create a new, blank imagedata object, you should use the createimagedata() method.
...in the zoom canvas we resize a
10×
10 pixel crop of the original canvas to 200×200.
...And 2 more matches
Transformations - Web APIs
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) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(
10 + j * 50,
10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample rotating the second transformation method is rotate().
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30,
100,
100); ctx.rotate((math.pi / 180) * 25); // grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(30, 30,
100,
100); ctx.restore(); // right rectangles, rotate from rectangle center // draw blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(150, 30,
100,
100); ctx.translate(200, 80); // translate to rectangle center // x = x + 0.5 * width ...
... // y = y + 0.5 * height ctx.rotate((math.pi / 180) * 25); // rotate ctx.translate(-200, -80); // translate back // draw grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(150, 30,
100,
100); } to rotate the rectangle around its own center, we translate the canvas to the center of the rectangle, then rotate the canvas, then translate the canvas back to 0,0, and then draw the rectangle.
...And 2 more matches
Guide to the Fullscreen API - Web APIs
presentation differences it's worth noting a key difference here between the gecko and webkit implementations at this time: gecko automatically adds css rules to the element to stretch it to fill the screen: "width:
100%; height:
100%".
...to get the same fullscreen behavior in webkit, you need to add your own "width:
100%; height:
100%;" css rules to the element yourself: #myvideo:-webkit-full-screen { width:
100%; height:
100%; } on the other hand, if you're trying to emulate webkit's behavior on gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use css rules to adjust the inner element to match the appearance you want.
... 14alternate name alternate name uses the non-standard name: webkitisfullscreensafari ios full support 6alternate name full support 6alternate name alternate name uses the non-standard name: webkitisfullscreensamsung internet android full support
10.0 full support
10.0 full support 1.0alternate name alternate name uses the non-standard name: webkitisfullscreenlegend full support full support no support no supportdepre...
...And 2 more matches
GamepadEvent - Web APIs
ferences in firefox, visit about:config.ie no support noopera full support 22 full support 22 no support 15 — 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 support 22 full 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 35edge 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).
... to change preferences in firefox, visit about:config.ie no support noopera full support 22safari full support
10.1webview android no support nochrome android full support yesfirefox android full support 32opera android full support 22safari ios full support
10.3samsung internet android full support yesgamepadchrome full support 35 fu...
...And 2 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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
... examples autogrowing textarea example make a textarea autogrow while typing: javascript function autogrow (ofield) { if (ofield.scrollheight > ofield.clientheight) { ofield.style.height = ofield.scrollheight + "px"; } } css textarea.noscrollbars { overflow: hidden; width: 300px; height:
100px; } html <form> <fieldset> <legend>your comments</legend> <p><textarea class="noscrollbars" onkeyup="autogrow(this);"></textarea></p> <p><input type="submit" value="send" /></p> </fieldset> </form> insert html tags example insert some html tags or smiles or any custom text in a textarea.
...And 2 more matches
Ajax navigation example - Web APIs
ng>third_page.php</strong>.</p> <div id="ajax-content"> <?php echo $page_content; ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width:
100%; height:
100%; } #ajax-loader > div { display: table-cell; width:
100%; height:
100%; vertical-align: middle; text-align: center; background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer.
...ocument.getelementbyid(stargetid).innerhtml = vmsg.content; if (bupdateurl) { history.pushstate(opageinfo, opageinfo.title, opageinfo.url); bupdateurl = false; } break; default: vmsg = nstatus + ": " + (ohttpstatus[nstatus] || "unknown"); switch (math.floor(nstatus /
100)) { /* case 1: // informational 1xx console.log("information code " + vmsg); break; case 2: // successful 2xx console.log("successful code " + vmsg); break; case 3: ...
...*&*/, rview = new regexp("&" + sviewkey + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox = document.createelement("div"), ocover = document.createelement("div"), oloadingimg = new image(), opageinfo = { title: null, 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", 205: "reset content", 206: "partial content", 207: "multi-status", 208: "already reported", 2...
...And 2 more matches
IDBFactory - Web APIs
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 15safari full support 7webview android full support yes full support yes no ...
... full support 24 no support 23 — 24prefixed 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 15safari full support 7webview android full support yes full support yes no ...
... 71firefox android no support nonotes no support nonotes notes see bug 934640.opera android full support yessafari ios no support nosamsung internet android full support
10.0deletedatabasechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 ...
...And 2 more matches
TextEncoder.prototype.encodeInto() - Web APIs
u8array.subarray(position|0) : u8array); } var u8array = new uint8array(8); encodeintoatposition("hello", u8array, 2); console.log( "" + u8array.join() ); // 0,0,
104,
101,
108,
108,111,0 buffer sizing to convert a javascript string s, the output space needed for full conversion is never less than s.length bytes and never greater than s.length * 3 bytes.
...hars){ // make the utf string into a binary utf-8 encoded string var point = 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 + 0x
10000|0; point = (point<<
10) + nextcode - 0x35fdc00|0; if (point > 0xffff) return fromcharcode( (0x1e/*0b111
10*/<<3) | (point>>>18), (0x2/*0b
10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/), (0x2/*0b
10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/), ...
... (0x2/*0b
10*/<<6) | (point&0x3f/*0b00111111*/) ); } else point = 65533/*0b1111111111111
101*/;//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/*0b11
10*/<<4) | (point>>>12), (0x2/*0b
10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/), (0x2/*0b
10*/<<6) | (point&0x3f/*0b00111111*/) ); } function textencoder(){}; textencoderprototype["encode"] = function(inputstring) { // 0xc0 => 0b1
1000000; 0xff => 0b11111111; 0xc0-0xff => 0b11xxxxxx // 0x80 => 0b
10000000; 0xbf =>...
...And 2 more matches
WebGL best practices - Web APIs
max_cube_map_texture_size: 4096 max_renderbuffer_size: 4096 max_texture_size: 4096 max_viewport_dims: [4096,4096] max_vertex_texture_image_units: 4 max_texture_image_units: 8 max_combined_texture_image_units: 8 max_vertex_attribs: 16 max_varying_vectors: 8 max_vertex_uniform_vectors: 128 max_fragment_uniform_vectors: 64 aliased_point_size_range: [1,
100] your desktop may support 16k textures, or maybe 16 texture units in the vertex shader, but most other systems don't, and content that works for you will not work for them!
...if you have
1000 sprites to paint, try to do it as a single drawarrays() or drawelements() call.
... a good pattern for "always give me the highest precision": #ifdef gl_fragment_precision_high precision highp float; #else precision mediump float; #endif essl
100 minimum requirements (webgl 1) float think range min above zero precision highp float24* (-2^62, 2^62) 2^-62 2^-16 relative mediump ieee float16 (-2^14, 2^14) 2^-14 2^-
10 relative lowp
10-bit signed fixed (-2, 2) 2^-8 2^-8 absolute int think range highp int17 (-2^16, ...
...And 2 more matches
Writing a WebSocket server in Java - Web APIs
this server conforms to rfc 6455, so it only handles connections from chrome version 16, firefox 11, ie
10 and higher.
... 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) + "258eafa5-e914-47da-95ca-c5ab0dc85b11").getbytes("utf-8"))) + "\r\n\r\n").getbytes("utf-8"); out.write(response, 0, response.length); decoding messages afte...
... if we send "abcdef", we get these bytes: 129 134 167 225 225 2
10 198 131 130 182 194 135 - 129: fin (is this the whole message?) rsv1 rsv2 rsv3 opcode 1 0 0 0 0x1=0001 fin: you can send your message in frames, but now keep things simple.
...And 2 more matches
Window.open() - Web APIs
for now
10/01/2017 the differencies of behavior found recently have not still been tested for others browsers.
...the minimum required value is
100.
...the minimum required value is
100.
...And 2 more matches
ARIA: grid role - Accessibility
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"> 15 </td> </tr> <tr role="row"> <th scope="row" role="rowheader...
...h.call(document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } } document.queryselector('table').addeventlistener("keydown", function(event) { switch (event.key) { case "arrowright": moveto(parseint(event.target.dataset.row,
10), parseint(event.target.dataset.col,
10) + 1); break; case "arrowleft": moveto(parseint(event.target.dataset.row,
10), parseint(event.target.dataset.col,
10) - 1); break; case "arrowdown": moveto(parseint(event.target.dataset.row,
10) + 1, parseint(event.target.dataset.col,
10)); break; case "arrowup": moveto(parseint(event.target.dataset.row,
10) -...
... 1, parseint(event.target.dataset.col,
10)); break; case "home": if (event.ctrlkey) { var i = 0; var result; do { var j = 0; var result; do { result = moveto(i, j); j++; } while (result == false); i++; } while (result == false); } else { moveto(parseint(event.target.dataset.row,
10), 0); } break; case "end": if (event.ctrlkey) { var i = maxrow; var result; do { var j = maxcol; do { result = moveto(i, j); j--; } while (result == false); i--; } while (result == false); } else { moveto(parseint(event.target.dataset.row,
10), docume...
...And 2 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
t 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="item5">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 differ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3,
100px); grid-template-rows: repeat(2,
100px); grid-gap:
10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> <div class="item5">item 5</div> </div> logical values for alignment with the block and inline axis able to change direction, the logical values for the alignment pr...
...x-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,
100px); grid-gap:
10px; } .item1 { grid-column: 1 / 4; align-self: start; } .item2 { grid-column: 1 / 3; grid-row: 2 / 4; align-self: start; } .item3 { grid-column: 3; grid-row: 2 / 4; align-self: end; justify-self: end; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> </div> ...
...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.
... dimensions a <dimension> is a <number> with a unit attached to it, for example 45deg,
100ms, or
10px.
...for example, mm is a physical millimeter, 1/
10th of a centimeter.
...And 2 more matches
Cubic Bezier Generator - CSS: Cascading Style Sheets
.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...
... "black"; // draw the y axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i *
10) /
10, -3 * basic_scale_size + cx(0), cy(i) + 4); // limitation the constant 4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.filltext...
... ctx.restore(); // draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "center"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.filltext(math.round(i *
10) /
10, cx(i), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size } ctx.lineto(lx(i), cy(0)); } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependa...
...And 2 more matches
box-sizing - CSS: Cascading Style Sheets
if you set an element's width to
100 pixels, then the element's content box will be
100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than
100px.
...if you set an element's width to
100 pixels, that
100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
...for example, .box {width: 350px; border:
10px solid black;} renders a box that is 370px wide.
...And 2 more matches
conic-gradient() - CSS: Cascading Style Sheets
c gradient rotated 45 degrees, starting blue and finishing red */ conic-gradient(from 45deg, blue, red); /* a a bluish purple box: the gradient goes from blue to red, but as only the bottom right quadrant is visible, as the center of the conic gradient is in at the top left corner */ conic-gradient(from 90deg at 0 0, blue, red); /* colorwheel */ background: conic-gradient( hsl(360,
100%, 50%), hsl(315,
100%, 50%), hsl(270,
100%, 50%), hsl(225,
100%, 50%), hsl(180,
100%, 50%), hsl(135,
100%, 50%), hsl(90,
100%, 50%), hsl(45,
100%, 50%), hsl(0,
100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
...browsers supporting conic gradients also accept percent values, with
100% equaling 360 degrees, but this is not in the specification.
...the following is solid red from the start to the
10% mark, transitions from red to blue over 80% of the turn, with the final
10% being solid blue.
...And 2 more matches
flex-basis - CSS: Cascading Style Sheets
syntax /* specify <'width'> */ flex-basis:
10em; flex-basis: 3px; flex-basis: auto; /* intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically size based on the flex item’s content */ flex-basis: content; /* global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the keyword content or...
...it was implemented in bug
1032922.
... then, that change was reverted in bug
1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing.
...And 2 more matches
transition-duration - CSS: Cascading Style Sheets
syntax /* <time> values */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; 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: 250px; height:125px;} .box { width:
100px; height:
100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size lef...
...r el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width:
100px; height:
100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transf...
...And 2 more matches
transition-timing-function - CSS: Cascading Style Sheets
nsition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: 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: i...
...whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and
100%, or makes 5 stops between the 0% and
100% along the transition, or makes 5 stops including the 0% and
100% marks (on the 0%, 25%, 50%, 75%, and
100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the transition begins; jump-end denotes a right-continuous function, so that the last jump happ...
...instead, holding at both the 0% mark and the
100% mark, each for 1/n of the duration jump-both includes pauses at both the 0% and
100% marks, effectively adding a step during the transition time.
...And 2 more matches
Creating a cross-browser video player - Developer guides
src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash 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 alt="tears of steel poster image" src="img/poster.jpg" width="
1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>© blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with javascript.
...a user defined function, altervolume(direction) has been created that deals with this: var altervolume = function(dir) { var currentvolume = math.floor(video.volume *
10) /
10; if (dir === '+') { if (currentvolume < 1) video.volume += 0.1; } else if (dir === '-') { if (currentvolume > 0) video.volume -= 0.1; } } this function makes use of the media api's volume attribute, which holds the current volume value of the video.
...And 2 more matches
<textarea> - HTML: Hypertext Markup Language
<textarea name="textarea" rows="
10" cols="50">write something here</textarea> min and max length this example has a minimum and maximum number of characters — of
10 and 20 respectively.
... <textarea name="textarea" rows="5" cols="30" minlength="
10" maxlength="20">write something here</textarea> note that minlength doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the <textarea> invalid.
... no support nosamsung internet android no support noautofocuschrome full support yesedge full support 12firefox full support 4ie full support
10opera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support 4opera android ?
...And 2 more matches
Browser detection using the user agent - HTTP
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 15+ (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).
...this is of course not the case for internet explorer (which puts the version number right after the msie token), and for opera after version
10, which has added a version/versionnumber token.
... mozilla/5.0 (linux; android 4.4.2); nexus 5 build/kot49h) applewebkit/537.36 (khtml, like gecko) chrome/33.0.1750.117 mobile safari/537.36 opr/20.0.1396.72047 presto-based (opera 12-) opera mobi/xyz token in the comment (opera 12-) opera/9.80 (android 2.3.3; linux; opera mobi/adr-1111
101157; u; es-es) presto/2.9.201 version/11.50 internet explorer iemobile/xyz token in the comment.
...And 2 more matches
Closures - JavaScript
here's a slightly more interesting example—a makeadder function: function makeadder(x) { return function(y) { return x + y; }; } var add5 = makeadder(5); var add
10 = makeadder(
10); console.log(add5(2)); // 7 console.log(add
10(2)); // 12 in this example, we have defined a function makeadder(x), that takes a single argument x, and returns a new function.
...in the above example, the function factory creates two new functions—one that adds five to its argument, and one that adds
10.
... add5 and add
10 are both closures.
...And 2 more matches
Grammar and types - JavaScript
parseint('
101', 2) // 5 an alternative method of retrieving a number from a string is with the + (unary plus) operator: '1.1' + '1.1' // '1.11.1' (+'1.1') + (+'1.1') // 2.2 // note: the parentheses are added for clarity, not required.
... numeric literals number and bigint types can be written in decimal (base
10), hexadecimal (base 16), octal (base 8) and binary (base 2).
...therefore: 0xa = 0xa =
10 and 0xf = 0xf = 15.) a leading 0b (or 0b) indicates a binary numeric literal.
...And 2 more matches
Array - JavaScript
let years = [1950, 1960, 1970, 1980, 1990, 2000, 20
10] 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).
... 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.
... examples creating an array the following example creates an array, msgarray, with a length of 0, then assigns values to msgarray[0] and msgarray[99], changing the length of the array to
100.
...And 2 more matches
Date.prototype.getYear() - JavaScript
description for years greater than or equal to 2000, the value returned by getyear() is
100 or greater.
...for example, if the year is 1800, getyear() returns -
100.
... var xmas = new date('december 25, 1995 23:15:00'); var year = xmas.getyear(); // returns 95 years above 1999 the second statement assigns the value
100 to the variable year.
...And 2 more matches
Math - JavaScript
math.ln
10 natural logarithm of
10; approximately 2.303.
... math.log
10e base-
10 logarithm of e; approximately 0.434.
... math.log
10(x) returns the base-
10 logarithm of x.
...And 2 more matches
Image file type and format guide - Web media technologies
for instance, this example defines an drawing area with initial size
100 by
100 units, containing a line drawn diagonally through the box: <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="
100" y2="20" stroke="black" /> </svg> svg can be used in web content in two ways: you can directly write the <svg> element within the html, containing svg elements to draw the image.
... mime type image/svg+xml file extension(s) .svg specification w3.org/tr/svg2 browser compatibility feature chrome edge firefox internet explorer opera safari svg support 4 12 3 9
10 (presto) 15 (blink) 3.2 svg as image (<img> etc) 28 12 4 9
10 (presto) 15 (blink) 9 maximum dimensions unlimited supported color modes colors in svg are specified using css color syntax.
...for example, the width of an image, imagewidth, is stored using tag 0x0
100, and is a one-entry array.
...And 2 more matches
<metadata> - SVG: Scalable Vector Graphics
used by hub symbol --> <symbol id="hubplug"> <desc>a
10baset/
100basetx socket</desc> <path d="m0,
10 h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical
10baset/
100basetx network hub</desc> <text x="0" y="15">hub</text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="
10"/> <circle fill="red" cx=...
...ocket 5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" transform="translate(40 121)"> <title>monitor stand</title> <desc>one of those cool swivelling monitor stands that sit under the monitor</desc> <path d="m0,0 s
10 10 40 12"/> <path d="m80,0 s 70
10 40 12"/> <path d="m0,20 l
10 10 s 40 12 70
10 l 80 20z"/> </g> <g id="monitor"> <title>monitor</title> <desc>a very fancy monitor</desc> <rect width="160" height="120"/> <rect fill="lightgrey" width="138" height="95" x="11" y="12"/> </g> <g id="processor" transform="translate(0 142)"> ...
...--> <g id="cablea" transform="translate(
107 88)"> <title>cable a</title> <desc>
10baset twisted pair cable</desc> <path d="m0,0c
100,140 50,140 -8,160"/> </g> <!-- draw cable b.
...And 2 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="250" 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="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> <line x1="
10" x2="50...
..." y1="1
10" y2="150" stroke="orange" stroke-width="5"/> <polyline points="60 1
10 65 120 70 115 75 130 80 125 85 140 90 135 95 150
100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="m20,230 q40,205 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.
... <rect x="
10" y="
10" width="30" height="30"/> <rect x="60" y="
10" rx="
10" ry="
10" width="30" height="30"/> x the x position of the top left corner of the rectangle.
...And 2 more matches
Positions - SVG: Scalable Vector Graphics
example: the element <rect x="0" y="0" width="
100" height="
100" /> defines a rectangle from the upper left corner, that spans from there
100px to the right and to the bottom.
...we start with the svg root element: <svg width="
100" height="
100"> the above element defines a simple svg canvas with
100x
100px.
... <svg width="200" height="200" viewbox="0 0
100
100"> the whole svg canvas here is 200px by 200px in size.
...And 2 more matches
lang/functional - Archive of obsolete content
let { method } = require("sdk/lang/functional"); let mynumber = { times: method(times), add: method(add), number: 0 }; function times (target, x) { return target.number *= x; } function add (target, x) { return target.number += x; } console.log(mynumber.number); // 0 mynumber.add(
10); //
10 mynumber.times(2); // 20 mynumber.add(3); // 23 parameters lambda : function the function to be wrapped and returned.
... 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 { memoize } = require("sdk/lang/functional"); let memoizedfn = memoize(primefactorization); memoizedfn(50); // returns [2, 5, 5], had to compute memoizedfn(
100); // returns [2, 2, 5, 5], had to compute memoizedfn(50); // returns [2, 5, 5] again, but pulled from cache function primefactorization (x) { // some tricky stuff } // we can also use a hash function to compute a different // hash value.
... let { delay } = require("sdk/lang/functional"); delay(printadd, 2000, 5,
10); // prints "5+
10=15" in two seconds (2000ms) function printadd (a, b) { console.log(a + "+" + b + "=" + (a+b)); } parameters fn : function a function to be delayed.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
settimeout("dosomething();",
100); addeventlistener("load", "myaddon.init(); myaddon.onload();", true); setinterval(am_i_a_string_or_function_reference_qmark,
100); that in itself is certainly not elegant, but it may also become a security issue if you pass code that was externally retrieved (or at least contains bits of externally retrieved data): // do not use!
... settimeout("alert('" + xhr.responsetext + "');",
100); // attacker manipulated responsetext to contain "attack!'); format_computer(); alert('done" settimeout("alert('attack!'); format_computer(); alert('done');",
100); as a general rule of thumb, just don't pass code around as strings and execute it by calling eval, settimeout and friends.
... var response = xhr.responsetext; settimeout(function() { alert(response); },
100); } alternative: use function.bind() introduced in javascript 1.8.5 function.bind is a new utility function that you may use to (partially) bind parameters to functions.
... addeventlistener("load", myaddon.init.bind(myaddon), true); settimeout(alert.bind(null, xhr.responsetext),
100); function.bind() returns a new function.
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% - 3015 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 15675 items, avg
104b 65.6% -
1051 kb - 14397 items - stringobject.cpp:46 avmcore.cpp:2300 … 20.4% - 326 kb -
10439 items - avmcore.cpp:2300 abcparser.cpp:
1077 … 6.5% -
103 kb - 3311 items - avmcore.cpp:2300 abcparser.cpp:
1077 … other profiling tools the gcstats flag on the gc object controls verbose output.
... 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 2596 (
10.1m) 44% [mem] free 3081 (12.0m) 52% [mem] jit 0 (0k) 0% [mem] other 85 (340k) 1% [mem] bytes (interal fragmentation) 2527 (9.9m) 96% [mem] managed bytes 2520 (9.8m) 97% [mem] unmanaged bytes 7 (28k) 53% [mem] -------- gross stats end ----- numbers are in pages (with m and k in parens).
... they are logged like this: [mem] sweep(21) reclaimed 9
10 whole pages (3640 kb) in 22.66 millis (2.4975 s) [mem] mark(1) 0 objects (180866 kb 205162 mb/s) in 0.88 millis (2.5195 s) [mem] drc reaped 114040 objects (3563 kb) freeing 903 pages (7800 kb) in 17.41 millis (2.0015 s) how mmgc works mark/sweep the mmgc garbage collector uses a mark/sweep algorithm.
Introducing the Audio API extension - Archive of obsolete content
audiooutput.mozsetup(2, 44
100); once this is done, the samples need to be created.
...rray var samples = new float32array([0.242, 0.127, 0.0, -0.058, -0.242, ...]); var numbersampleswritten = audiooutput.mozwriteaudio(samples); in the following example, we create an audio pulse: <!doctype html> <html> <head> <title>generating audio in real time</title> <script type="text/javascript"> function playtone() { var output = new audio(); output.mozsetup(1, 44
100); var samples = new float32array(22050); for (var i = 0; i < samples.length ; i++) { samples[i] = math.sin( i / 20 ); } output.mozwriteaudio(samples); } </script> </head> <body> <p>this demo plays a one second tone when you click the button below.</p> <button onclick="playtone();">play</button> </body> </html> the mozcurrentsampleo...
...for example, if working with two channels at 44
100 samples per second, a writing interval of
100 ms, and a pre-buffer equal to 500 ms, one would write an array of (2 * 44
100 /
10) = 8820 samples, and a total of (currentsampleoffset + 2 * 44
100 / 2).
...// auto latency detection if (autolatency) { prebuffersize = math.floor(samplerate * (new date().valueof() - started) /
1000); if (audio.mozcurrentsampleoffset()) { // play position moved?
JavaScript crypto - Archive of obsolete content
if (typeof(crypto.version) != "undefined") { crmfobject = crypto.generatecrmfrequest( "cn=" + form.name.value, form.password.value, authenticator, keytransportcert, "setcrmfrequest();",
1024, null, "rsa-dual-use"); } return false; } function setcrmfrequest() { form.cert_request.value = crmfobject.request; form.submit(); } form.onsubmit = validate; </script> on completion of the request, the ca may submit a page that looks something like this: <!doctype html> <h2>certificate request successful</h2> <p>hit 'load' to load your certificate</p> <form name="reqfo...
...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_wrapkey, c_unwrapkey pkcs11_mech_rc4_flag: must support ckm_rc4_cbc and ckm_rc4_ecb and the following functions: c_generatekey, c_encrypt, c_dec...
...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_rc5_flag = 0x1<<7; pkcs11_mech_sha1_flag = 0x1<<8; pkcs11_mech_md5_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 can be read off the token w/o logging in pkcs11_disable_flag = 0x1<<30; //tell mozilla to disable this slot by default cipher flags reserved important for cryptomechanismflags 0x1<<11, 0x1<<12, ...
...rrors other than the following js_err_user_cancel_action = -2 // user aborted an action js_err_incorrect_num_of_arguments = -3 // calling a method w/ incorrect # of // arguments js_err_add_module = -5 // error adding a module js_err_bad_module_name = -6 // the module name is invalid js_err_add_module_duplicate = -
10 // the module being installed has the // same name as one of the modules that // has already been installed miscellaneous domstring random(in long numbytes); unimplementedyou can use window.crypto.getrandomvalues instead.
Table Layout Strategy - Archive of obsolete content
due to this there are
10 width informations for every column.
... min_con des_con fix min_adj des_adj fix_adj pct pct_adj min_pro final the width parameter have the following meaning: #define width_not_set -1 #define num_widths
10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc.
...poor mans choice is leave the first cell auto and specify
100%on the second one (this works cross-browser) <tbody></tbody>foobar <table width="200px" border> <tbody> <tr><td>foo</td><td width="
100%">bar</td></tr> </tbody> </table> the conflict free solution, the column should have the minimum width.
...the second table has <col width="33%"><col> lets return to the first case but now but with more than
100%: <col width="40%"><col width="80%"><tbody></tbody>foobar <col width="40%"><col><tbody></tbody>foobar <table border width="200px"> <col width="40%"><col width="80%"> <tbody> <tr><td>foo</td><td>bar</td></tr> </tbody> </table> the algorithm tries to satisfy the requirements on a first come first serve base.
Installer Script - Archive of obsolete content
spaceavailable = parseint(spaceavailable /
1024); 9.
... // do the verification
10.
...var err = initinstall("netscape seamonkey", "browser", "6.0.0.20001
10807"); 21.
... "6.0.0.20001
10807", 28.
Learn XPI Installer Scripting by Example - Archive of obsolete content
in the browser.xpi installation, this function appears at line 20: var err = initinstall("netscape seamonkey", "browser", "6.0.0.20001
10807"); if you call a method on the install object before initinstall(), you will get an error.
...in the example above, "netscape seamonkey" is the display name, "browser" is the registry name, and the version is "6.0.0.20001
10807." see initinstall in the xpinstall api reference for more information on the initialization process.
... // this function verifies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable /
1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } in the verifydiskspace block, filegetdiskspaceavailable is called with dirpath as its expected input.
...in the browser.xpi install script, the files are added in lines 26-41: err = adddirectory("program", "6.0.0.20001
10807", "bin", // jar source folder communicatorfolder, // target folder "", // target subdir true ); // force flag logcomment("adddirectory() returned: " + err); // create the plugins folder next to mozilla var pluginsfolder = getfolder("plugins"); if (!fileexists(p...
Writing to Files - Archive of obsolete content
in this example, the write16 method is used to write the value
1000 in two bytes.
... the write32 method performs a similar operation except that the value
1000 is written using four bytes, padding the unused bits with zeroes.
... stream.write16(
1000); stream.write32(
1000); all values are read in big endian form, which means that integers are stored in the file with their higher bits first.
...if you want to write a negative value, use the following calculation first to convert the value: function writenegative(val) { if (val > 0x7fff) val = ~(0x
10000 - val - 1); stream.write16(val); } one last method that is useful for writing to binary streams is the writebytearray method, used to write an array of bytes.
OpenClose - Archive of obsolete content
on windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f
10.
... in the following example, the popup is anchored below an element, yet is offset by
10 pixels to the right and 2 pixels upwards.
... somepopup.openpopup(anchor, "after_start",
10, -2, false, false); note that the anchor and positioning only specifies the position when the popup is opened.
...in the following example, the popup is opened at horizontal positon
100 and vertical position 200: popup.openpopupatscreen(
100, 200, false); note that if the supplied coordinates would cause the popup to be partially or completely off screen, the popup will be moved such that it is fully visible, and may be resized if necessary.
Custom Tree Views - Archive of obsolete content
here is an example of defining such as object, which can be called whatever you want: //moz 1.8 var treeview = { rowcount :
10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: fun...
... this example can be used for a tree with
10,000 rows.
... example custom tree source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window title="tree example" id="tree-window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="setview();"> <script> //moz 1.8 var treeview = { rowcount :
10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: fun...
...in the
10,000 row example above, getcelltext() is only called for the cells that are currently displayed.
textbox - Archive of obsolete content
the default value is
100 for scales and infinity for number boxes.
...as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.
10), the script code only runs in the context of the <textbox> element, matching the behavior of all other event handlers.
...as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.
10), the script code only runs in the context of the <textbox> element, matching the behavior of all other event handlers.
... the xul script: <textbox id="pnnote" multiline="true" rows="2" cols="70" onkeypress="return pncountnotechars(event);"/> the javascript: function pncountnotechars(evt) { //allow non character keys (delete, backspace and and etc.) if ((evt.charcode == 0) && (evt.keycode != 13)) return true; if (evt.target.value.length <
10) { return true; } else { return false; } } related interfaces nsiaccessibleprovider, nsidomxultextboxelement ...
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.l
10n - november 17, 2006 announcements seamonkey 1.1b in russian (ru-ru) seamonkey 1.1b in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in russian (ru-ru) seamonkey 1.0.6 in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in czech (cs-cz) seamonkey 1.0.6 in czech (cs-cz) is uploaded to ftp.mozilla.org seamonkey 1.0.6 he-il seamonkey 1.0.6 he-il is released.
... how to start a localization how to start a localization po format usage discussion on how to make l
10n easier due to expansion to
100 locales.
... quick builds for localisers (full or partial) discussion on moz-l
10n-builder, which automates many of the functions required in localization process.
... authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers
101) ...
2006-11-3 - Archive of obsolete content
summary: mozilla.dev.l
10n - november 3, 2006 announcements mozip.net 1.2.0 released: the should have been 1.0 release mozip.net 1.2.0, a gui (graphic) version of piaip's mozip command line utility, is available here.
... opening l
10n repository on mozilla_1_8_branch for approved check-ins mozilla_1_8_branch is opened for approved check-ins.
... discussions last check-ins on sun-calendar-event-dialog.* files last check-ins on sun-calendar-event-dialog.* files from 50 to
100 locales how to get from the 50 locales and releasing 40 to a hundred.
... authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers
101) ...
2006-12-01 - Archive of obsolete content
summary: mozilla.dev.l
10n - december 1, 2006 announcements langpacks for sunbird nightly builds available for testing langpacks for sunbird nightly builds available for testing seamonkey 1.1 late string changes for mail content policy the fix to bug 360288 has landed.
... from 50 to
100 locales discussion continues on finding a better tool for localization.
... feedback on l
10n:ownership draft feedback on the l
10n:ownership draft at mozilla wiki site detailed here continues.
... authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers
101) ...
Using workers in extensions - Archive of obsolete content
every
10 minutes, it calls xmlhttprequest, and, when the results are received, sends an event back to the main thread with the received data.
...f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var output = httprequest.responsetext; if (output) { postmessage(output.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); },
10*60*
1000); onmessage = function(event) { if (event.data) { symbol = event.data.touppercase(); } refreshinformation(); } when the worker thread is started, the main body of this code (in lines 26-35) is executed.
... it starts by setting up an interval handler (in lines 26-28) that calls refreshinformation() every
10 minutes.
... observe: function(subject, topic, data) { if (topic != "nspref:changed") { return; } switch(data) { case "symbol": this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.worker.postmessage(this.tickersymbol); break; } }, the key here is line
10, which sends the new ticker symbol to monitor to the ticker thread by calling its postmessage() method.
-ms-scroll-snap-points-x - Archive of obsolete content
initial valuesnapinterval(0px,
100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
...in the first selector, the first snap-point is at 0%, and the interval is set to
100%.
... in the second selector, each snap-point is listed separately —
100%, 200%, 300%, and so on.
... (the -ms-scroll-snap-points-x property behaves identically to the -ms-scroll-snap-points-y property, but along the x-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapinterval(0%,
100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-x-min:
100%; -ms-scroll-limit-x-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(
100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
-ms-scroll-snap-points-y - Archive of obsolete content
initial valuesnapinterval(0px,
100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
...in the first selector, the first snap-point is at 0%, and the interval is set to
100%.
... in the second selector, each snap-point is listed separately —
100%, 200%, 300%, and so on.
... (the -ms-scroll-snap-points-y property behaves identically to the -ms-scroll-snap-points-x property, but along the y-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: snapinterval(0%,
100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-y-min:
100%; -ms-scroll-limit-y-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-y: snaplist(
100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
<script type="text/javascript"> var i = 0; while (++i <
10) { // ...
... <style type="text/css"> <!-- body {background-color: blue; color: yellow;} --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i <
10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> this example illustrates that a conformant browser can ignore content inside of comments.
... <script type="text/javascript"> <!-- var i; var sum = 0; for (i =
10; i > 0; --i) { sum += i; } // --> </script> using cdata instead of comments properly enclosing script contents inside of cdata sections can cause problems in downlevel browsers which do not understand xml.
... <script type="text/javascript"> //<![cdata[ var i = 0; while (++i <
10) { // ...
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!
... this.color = "green"; } else { // no collision this.color = "blue"; } }); var circle1 = {radius: 20, x: 5, y: 5}; var circle2 = {radius: 12, x:
10, y: 5}; var dx = circle1.x - circle2.x; var dy = circle1.y - circle2.y; var distance = math.sqrt(dx * dx + dy * dy); if (distance < circle1.radius + circle2.radius) { // collision detected!
Building up a basic demo with the PlayCanvas engine - Game development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: playcanvas demo</title> <style> body { margin: 0; padding: 0; } canvas { width:
100%; height:
100%; } </style> </head> <body> <script src="playcanvas-latest.js"></script> <canvas id="application-canvas"></canvas> <script> var canvas = document.getelementbyid("application-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> e...
...lement that playcanvas will use to
100% so that it will fill the entire available viewport space.
...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, 15, 0); it will create an entity with the box model component and add it to the root of the application, our scene.
...add this line of code inside the app.on("update") callback function, right after the addition of the deltatime to the timer variable: box.rotate(deltatime*
10, deltatime*20, deltatime*30); it will rotate the box by deltatime*
10 on the x axis, deltatime*20 on the y axis and deltatime*30 on the z axis, on very frame — giving us a smooth animation.
Finishing up - Game development
« previous this is the
10th and final step of the gamedev canvas tutorial.
... you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson
10.html.
...replace the following line: var interval = setinterval(draw,
10); with simply: draw(); and remove each instance of: clearinterval(interval); // needed for chrome to end game then, at the very bottom of the draw() function (just before the closing curly brace), add in the following line, which causes the draw() function to call itself over and over again: requestanimationframe(draw); the draw() function is now getting executed again and again within a ...
...requestanimationframe() loop, but instead of the fixed
10 milliseconds frame rate, we are giving control of the framerate back to the browser.
Cascade and inheritance - Learn web development
such declarations don't have selectors, so their specificity is always simply
1000.
... selector thousands hundreds tens ones total specificity h1 0 0 0 1 0001 h1 + p::first-letter 0 0 0 3 0003 li > a[href*="en-us"] > .inline-warning 0 0 2 2 0022 #identifier 0 1 0 0 0
100 no selector, with a rule inside an element's style attribute 1 0 0 0
1000 before we move on, let's look at an example in action.
...
101.
...
104.
Test your skills: sizing - Learn web development
the first should be sized so that the height will be at least
100 pixels tall, even if there is less content than would cause it to grow to that height, however, the content should not overflow if there is more content than fits in
100 pixels.
... test this box by removing the content from the html to make sure you still get a
100 pixel tall box even with no content.
... the second box should be fixed at
100 pixels tall, so that content will overflow if there is too much.
...you should also give the inner box padding of
10% using the width (or inline size) as the size from which that percentage is calculated.
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.
... <div class="box"></div> .box { margin: 30px; width:
100px; height:
100px; background-color: rebeccapurple; transform: rotate(0.8turn) } the output from the above code looks like this: look up different values of properties listed below.
...there are also other shorthand types, for example 2-value shorthands, which set padding/margin for top/bottom, then left/right */ padding:
10px 15px 15px 5px; is equivalent to these four lines of code: padding-top:
10px; padding-right: 15px; padding-bottom: 15px; 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-attach...
... for example, these declarations are valid css: margin: 0 auto; padding-left:
10px; but these declarations are invalid: margin: 0auto; padding- left:
10px; do you see the spacing errors?
How can we design for all types of users? - Learn web development
modern browsers get around this rule by pretending that you're asking for "16 pixels when the user sets a zoom factor of
100%".
... em-based sizes: em this unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of
100.
... here is the html we're using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </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...
...the css can be rewritten thus: 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:2rem; } /* twice the size of the body, thus 32 pixels */ span.subheading { font-size:1rem; } /* original size */ easier, isn't it?
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 rad...
..." form features in action: this example has the following css applied to it: body { font-family: 'josefin sans', sans-serif; margin: 20px auto; max-width: 400px; } form > div { margin-bottom: 20px; } select { -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...
... 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 ...
...): <div class="select-wrapper"><select id="select" name="select"> <option>banana</option> <option>cherry</option> <option>lemon</option> </select></div> we then use generated content to generate a little down arrow, and put it in the right place using positioning: .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right:
10px; position: absolute; } the second, slightly more major issue is that you don't have control over the box that appears containing the options when you click on the <select> box to open it.
Other form controls - Learn web development
the following screenshots show default, focused, and disabled <textarea> elements in firefox 71 and safari 13 on macos, and edge 18, yandex 14, firefox 71 and chrome 79 on windows
10.
...> <datalist id="mysuggestion"> <option>apple</option> <option>banana</option> <option>blackberry</option> <option>blueberry</option> <option>lemon</option> <option>lychee</option> <option>peach</option> <option>pear</option> </datalist> datalist support and fallbacks almost all browsers support datalist, but if you are still supporting older browsers such as ie versions below
10, there is a trick to provide a fallback: <label for="myfruit">what is your favorite fruit?
... <progress max="
100" value="75">75/
100</progress> this is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.
... <meter min="0" max="
100" value="75" low="33" high="66" optimum="50">75</meter> the content inside the <meter> element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.
Styling web forms - Learn web development
to make your forms' appearance consistent with the rest of your content, you can add the following rules to your stylesheet: button, input, select, textarea { font-family: inherit; font-size:
100%; } the inherit property value causes the property value to match the computed value of the property of its parent element; inheriting the value of the parent.
... } body { font : 1.3rem sans-serif; padding : 0.5em; margin : 0; background : #222; } form { position : relative; width : 740px; height : 498px; margin : 0 auto; padding: 1em; box-sizing: border-box; background : #fff url(background.jpg); /* we create our grid */ display : grid; grid-gap : 20px; grid-template-columns : repeat(2, 1fr); grid-template-rows :
10em 1em 1em 1em; } notice that we've used some css grid and flexbox to lay out the form.
...simply put, we remove their borders and backgrounds, and redefine their padding and margin: input, textarea { font : 1.4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0
10px; margin : 0; width : 80%; background : none; } when one of these fields gains focus, we highlight them with a light grey, transparent, background (it is always important to have focus style, for usability and keyboard accessibility): input:focus, textarea:focus { background : rgba(0,0,0,.1); border-radius: 5px; } now that our text fields are complete, we need to adjust the di...
...in our case, it's better to be sure every one will use auto: textarea { display : block; padding :
10px; margin :
10px 0 0 -
10px; width :
100%; height : 90%; border-right: 1px solid; /* resize : none; */ overflow: auto; } styling the submit button the <button> element is really convenient to style with css; you can do whatever you want, even using pseudo-elements: button { padding : 5px; font : bold .6em sans-serif; border : 2px solid #333; border-...
From object to iframe — other embedding technologies - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 250px;"> </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: 95%;min-height:
100px;"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } const textarea = document.getelem...
...ion.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="315" 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!1d37995.65748333395!2d-2.273568166412784!3d53.4733
10471916975!2m3!1f0!2f0!3f0!3m2!1i
1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of texta...
...say you wanted to include the mdn glossary on one of your web pages — you could try something like this: <iframe src="https://udn.realityripple.com/docs/glossary" width="
100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://udn.realityripple.com/docs/glossary"> fallback link for browsers that don't support iframes </a> </p> </iframe> this example includes the basic essentials needed to use an <iframe>: allowfullscreen if set, the <iframe> is able to be placed in fullscreen mode using the full screen api (som...
...ie
10 and above) requests heightened security settings; we'll say more about this in the next section.
General asynchronous programming concepts - Learn web development
in our simple-sync.html example (see it running live), we add a click event listener to a button so that when clicked, it runs a time-consuming operation (calculates
10 million dates then logs the final one to the console) and then adds a paragraph to the dom: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { let mydate; for(let i = 0; i <
10000000; i++) { let date = new date(); mydate = date } console.log(mydate); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragrap...
...you would never calculate
10 million dates on a real web app!
... function expensiveoperation() { for(let i = 0; i <
1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height),
10, degtorad(0), degtorad(360), false); ctx.fill() } } fillbtn.addeventlistener('click', expensiveoperation); alertbtn.addeventlistener('click', () => alert('you clicked me!') ); if you click the first button and then quickly click the second one, y...
...this is a rewrite of our previous example that calculates the
10 million dates in a separate worker thread.
Introduction to events - Learn web development
in the following example, we have a single <button>, which when pressed, makes the background change to a random color: <button>change color</button> button { margin:
10px }; the javascript looks like so: const btn = document.queryselector('button'); function random(number) { return math.floor(math.random() * (number+1)); } btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } in this code, we store a reference to the button inside a constant called...
...one button is ok, but what if you had
100 buttons?
... you'd have to add
100 attributes to the file; it would quickly turn into a maintenance nightmare.
... first, a simple html form that requires you to enter your first and last name: <form> <div> <label for="fname">first name: </label> <input id="fname" type="text"> </div> <div> <label for="lname">last name: </label> <input id="lname" type="text"> </div> <div> <input id="submit" type="submit"> </div> </form> <p></p> div { margin-bottom:
10px; } now some javascript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty.
Third-party APIs - Learn web development
function displayresults(json) { while (section.firstchild) { section.removechild(section.firstchild); } const articles = json.response.docs; if(articles.length ===
10) { nav.style.display = 'block'; } else { nav.style.display = 'none'; } if(articles.length === 0) { const para = document.createelement('p'); para.textcontent = 'no results returned.' section.appendchild(para); } else { for(var i = 0; i < articles.length; i++) { const article = document.createelement('article'); const heading = document.createelement('h...
... the first if() block checks to see if
10 articles are returned (the api returns up to
10 articles at a time.) if so, we display the <nav> that contains the previous
10/next
10 pagination buttons.
... if less than
10 articles are returned, they will all fit on one page, so we don't need to show the pagination buttons.
...this works because the nytimes api only returns
10 results at a time — if more than
10 results are available, it will return the first
10 (0-9) if the page url parameter is set to 0 (or not included at all — 0 is the default value), the next
10 (
10-19) if it is set to 1, and so on.
Video and Audio APIs - Learn web development
first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width: 400px; border-radius:
10px; position: absolute; bottom: 20px; left: 50%; margin-left: -200px; background-color: black; box-shadow: 3px 3px 5px black; transition: 1s all; display: flex; } .player:hover .controls, player:focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden.
... last but not least, let's look at the css for the timer: .timer { line-height: 38px; font-size:
10px; font-family: monospace; text-shadow: 1px 1px 0px black; color: white; flex: 5; position: relative; } .timer div { position: absolute; background-color: rgba(255,255,255,0.2); left: 0; top: 0; width: 0; height: 38px; z-index: 2; } .timer span { position: absolute; z-index: 3; left: 19px; } we set the outer .timer <div> to have flex: 5, so it takes up most of t...
...add the following at the bottom of your file: function settime() { let minutes = math.floor(media.currenttime / 60); let seconds = math.floor(media.currenttime - minutes * 60); let minutevalue; let secondvalue; if (minutes <
10) { minutevalue = '0' + minutes; } else { minutevalue = minutes; } if (seconds <
10) { secondvalue = '0' + seconds; } else { secondvalue = seconds; } let mediatime = minutevalue + ':' + secondvalue; timer.textcontent = mediatime; let barlength = timerwrapper.clientwidth * (media.currenttime/media.duration); timerbar.style.width = barlength + 'px'; } this is a...
... the two if statements work out whether the number of minutes and seconds are less than
10.
Arrays - Learn web development
if we had
10 items to add to the invoice it would already be annoying, but what about
100 items, or
1000?
... playable code <h2>live output</h2> <div class="output" style="min-height: 150px;"> <ul> </ul> <p></p> </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: 4
10px;width: 95%"> const list = document.queryselector('.output ul'); const totalbox = document.queryselector('.output p'); let total = 0; list.innerhtml = ''; totalbox.textcontent = ''; // number 1 'underpants:6.99' 'socks:5.99' 't-shirt:14.99' 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 ...
... being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background-color: #f5f9fa; } active learning: top 5 searches a good use for array methods like push() and pop() is when you are maintaining a record of currently active items in a web app.
...o be entered searchinput.value = ''; searchinput.focus(); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solut...
Beginning our React todo list - Learn web development
} button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size:
100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width:
100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global st...
...er-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0
100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-w...
....2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width:
100%; } .todoapp > h1 { display: block; max-width:
100%; text-align: center; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { dis...
...play: inline-block; width:
100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width:
100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0
100%; } .todo-text { width:
100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-le...
Starting our Svelte Todo list app - Learn web development
} button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size:
100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width:
100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global s...
...3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn__primary:disabled { color: darkgrey; background-color:#565656; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0
100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-w...
...2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width:
100%; } .todoapp > h1 { display: block; max-width:
100%; text-align: center; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { dis...
...play: inline-block; width:
100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width:
100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0
100%; } .todo-text { width:
100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-le...
Working with Svelte stores - Learn web development
lertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 1.4rem; font-size: 1.5rem; z-index:
100; opacity: 95%; } div p { color: #fff; } div svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right: 0.5rem; } </style> let's walk through this piece of code in detail.
...hange ondestroy(()=> cleartimeout(timeout)) // make sure we clean-up the timeout </script> and update the alert.svelte markup section like so: {#if visible} <div on:click={() => visible = false}> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="m12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99c9.789 1.436
10.67 0 12.432 0zm8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.
106 1.271.317 0 1.357-.392 2.379-1.207l.6.814c12.098 19.02 9.365 20 8.309 20z"/></svg> <p>{ $alert }</p> </div> {/if} here we first create the prop ms with a d...
... put the following import statement below the existing ones: import { fly } from 'svelte/transition' to use it, update your opening <div> tag like so: <div role="alert" on:click={() => visible = false} transition:fly > transitions can also receive parameters, like this: <div role="alert" on:click={() => visible = false} transition:fly="{{delay: 250, duration: 300, x: 0, y: -
100, opacity: 0.5}}" > note: the double curly braces are not special svelte syntax.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/378dd79e0dfe4486a8f
10823f3813190?version=3.23.2 summary in this article we added two new features: an alert component and persisting todos to web storage.
Old Thunderbird build
for example, a mac user may get an object directory name of obj-x86_64-apple-darwin
10.7.3/.
... on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=12905 are installed because the mapi header files are not bundled with visual studio 2013/2015 (windows sdk 8.1/
10).
... you should copy the header files to a windows sdk include directory so that the build process will find the files, for example to c:\program files (x86)\windows kits\8.1\include\shared and/or c:\program files (x86)\windows kits\
10\include\
10.0.nnnnn.0\shared respectively, where nnnnn is the highest number present on the system.
... if on windows you get link errors like "lnk1
102: out of memory" or "lnk1318: unexpected pdb error; ok (0)", try deleting the largest .pdb files before rushing out the door to buy more ram.
Eclipse CDT Manual Setup
select "c/c++ > build > console" and set "limit console output (number of lines)" to something large, like "
1000000".
... select "c/c++ > editor > scalability" and set "enable scalability mode when the number of lines in the file is more than:" to something larger, like
100000.
...it should take about 5-
10 minutes for eclipse to finish processing the output.
...it will take
10 minutes or so on a decent developer machine for a full rebuild of the index.
Application Translation with Mercurial
c:\mozilla\coding\buildtools\mozillabuild\start-shell-msvc20
10.bat you can autocomplete the file path after typing a few characters and then pressing the tabulator key.
... if you launch the start-shell-l
10n.bat, compiling features will be disabled.
...for aurora and german (language code 'de'), it is http://hg.mozilla.org/releases/l
10n/mozilla-aurora/de/ copy that url to the clipboard.
... copy the repository to your computer by running the following command: hg clone http://hg.mozilla.org/releases/l
10n/mozilla-aurora/de/ de-mozilla-aurora this should proceed pretty fast.
Localizing with Mozilla Translator
now, you want to start working directly on mozilla-central (and l
10n-central).
... a bit of history on mt mt has been evolving from long ago, when l
10n were done always on shipped en-us jars and when mozilla suite had five l
10n jars: ab-cd.jar, ab-win.jar, ab-mac.jar, ab-unix.jar, and cd.jar.
... when mozilla l
10n switched to ''source l
10n'', one of the many problems that mt had to solve was how to fit a directory structure in what had been designed for five jars, and the ''patch'' consisted of providing a ''read from dir instead of jar'' and ''put everything inside platform neutral''.
... that has worked well (ok, more or less) :-) as long as you could instruct mt to use just one ''root'' l
10n directory, but this is no longer the case with mercurial.
Localizing with Pontoon
pontoon is a web-based, what-you-see-is-what-you-get (wysiwyg), localization (l
10n) tool.
...pontoon is a very simple and intuitive tool that requires little to no technical skill to use in the l
10n workflow.
...along the way, we'll point out some sweet features that will make you more efficient and make your l
10n contributions easier.
... publishing your localization suppose you now want to publish your l
10n work by committing it to a repo.
Updates
october 21, 20
10 mathml 3.0 is now a w3c recommendation!
... june 11, 20
10 stix fonts version 1.0 are now compatible with trunk.
... may 28, 20
10 stix fonts version 1.0 released.
... april 20
10 new web pages for the mozilla mathml project!
BloatView
== bloatview: all (cumulative) leak and bloat statistics, tab process 1862 |<----------------class--------------->|<-----bytes------>|<----objects---->| | | per-inst leaked| total rem| 0 |total | 17 2484|253953338 38| 17 |asynctransactiontrackersholder | 40 40|
10594 1| 78 |compositorchild | 472 472| 1 1| 79 |condvar | 24 48| 3086 2| 279 |messagepump | 8 8| 30 1| 285 |mutex | 20 60| 89987 3| 302 |pcompositorchild | 412 ...
... netscape total blank mozilla yahoo netscape total total 1754408 432556 179828 404184 2770976 nsstr 20 6261600 3781900 1120920 1791340 12955760 222760 48760 13280 76160 360960 nshashkey 8 6
10568 1842400 2457872 1134592 6045432 32000 536 568 1216 34320 nstexttransformer 548 8220 469088 1414936 1532756 3425000 0 0 0 0 0 nsstylecontextdata 736 259808 325312 489440 338560 1413120 141312 220800 -1
1040 94944 446016 nslinelayout 1
100 2200 ...
... 225500 402600 562
100 1192400 0 0 0 0 0 nslocalfile 424 558832 19928 1696 1272 581728 72080 1272 424 -424 73352 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 log file.
... perl tools/bloatview/bloatdiff.pl <previous-log> <current-log> this will give you output of the form: bloat/leak delta report current file: dist/win32_d.obj/bin/bloatlogs/all-1999-
10-22-133450.txt previous file: dist/win32_d.obj/bin/bloatlogs/all-1999-
10-16-0
10302.txt -------------------------------------------------------------------------- class leaks delta bloat delta -------------------------------------------------------------------------- total 6113530 2.79% 67064808 9.18% stylecontextimpl ...
tools/power/rapl
output the following is
10 seconds of output from a default invocation of 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.15 ( 2.62 + 0.43 + 3.
10) + 3.86 w #05 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.85 w std dev = 3.50 w 0th percentile = 5.17 w (min) 5th percentile = 5.17 w 25th percentile = 5.17 w 50th percentile = 8.13 w 75th percentile = 11.16 w 95th percentile = 14.63 w
100th percentile = 14.63 w (max) the distribution data is omitted if there was zero or one sample...
...defaults to
1000.
Localization Use Cases
first, there is devicestoragehelper.showformatedsize (sic): function showformatedsize(element, l
10nid, size) { if (size === undefined || isnan(size)) { element.textcontent = ''; return; } // kb - 3 kb (nearest ones), mb, gb - 1.2 mb (nearest tenth) var fixeddigits = (size <
1024 *
1024) ?
... 0 : 1; var sizeinfo = filesizeformatter.getreadablefilesize(size, fixeddigits); var _ = navigator.mozl
10n.get; element.textcontent = _(l
10nid, { size: sizeinfo.size, unit: _('byteunit-' + sizeinfo.unit) }); } the function is used like so: // application storage updateappfreespace: function storage_updateappfreespace() { var self = this; this.getfreespace(this.appstorage, function(freespace) { devicestoragehelper.showformatedsize(self.appstoragedesc, 'availablesize', freespace); }); }, problem definition for all values of freespace, the following string is enough to construct a grammatically-correct sentence in english: availablesize = {{$size}} {{$unit}} available however, other languages might need to pluralize this string with different forms of t...
... you'll notice that devicestoragehelper.showformatedsize passes a localized name of the unit to availablesize: function showformatedsize(element, l
10nid, size) { // … var _ = navigator.mozl
10n.get; element.textcontent = _(l
10nid, { size: sizeinfo.size, unit: _('byteunit-' + sizeinfo.unit) }); } problem definition even though there's no need to localize the units in english at all, we still need to do it, because in other languages we might need to use localized names.
... in the javascript code, the developer needs to pass sizeinfo.unit instead of a localized value: function showformatedsize(element, l
10nid, size) { // … element.textcontent = document.l
10n.get(l
10nid, { size: sizeinfo.size, unit: sizeinfo.unit }); } and then use the $unit variable verbatim in the english message: <availablesize "{{ $size }} {{ $unit }} available"> in french, the localizer can then use the value of $unit to match it against a translated abbreviation, like so: <_unitedemesure { b: "o", kb:...
NSS 3.16.4 release notes
nss 3.16.4 requires nspr 4.
10.6 or newer.
...notable changes in nss 3.16.4 the following
1024-bit root ca certificate was restored to allow more time to develop a better transition strategy for affected sites.
... 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 in nss 3.16.3, the
1024-bit "entrust.net secure server certification authority" root ca certificate (sha1 fingerprint: 99:a6:9b:e6:1a:fe:88:6b:4d:2b:82:00:7c:b8:54:fc:31:7e:15:39) was removed.
...the intention is to mitigate the effects of the previous removal of the
1024-bit entrust.net root certificate, because many public internet sites still use the "usertrust legacy secure server ca" intermediate certificate that is signed by the
1024-bit entrust.net root certificate.
NSS 3.17.2 release notes
nss 3.17.2 requires nspr 4.
10.7 or newer.
...notable changes in nss 3.17.2 bug
1049435: change rsa_privatekeycheck to not require p > q.
... bug
1057161: check that an imported elliptic curve public key is valid.
... bug
1078669: certutil crashes when an argument is passed to the --certversion option.
NSS 3.19.2.1 release notes
nss 3.19.2.1 requires nspr 4.
10.
10 or newer.
... nss 3.19.2.1 and nspr 4.
10.
10 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_2_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.
10.
10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.19.2.1.
... the following security-relevant bugs have been resolved in nspr 4.
10.
10, which affect nss.
... because nss includes portions of the affected nspr code at build time, it is necessary to use nspr 4.
10.
10 when building nss.
NSS 3.19.4 release notes
nss 3.19.4 requires nspr 4.
10.
10 or newer.
... nss 3.19.4 and nspr 4.
10.
10 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_4_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.
10.
10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.19.4.
... the following security-relevant bugs have been resolved in nspr 4.
10.
10, which affect nss.
... because nss includes portions of the affected nspr code at build time, it is necessary to use nspr 4.
10.
10 when building nss.
NSS 3.20.1 release notes
nss 3.20.1 requires nspr 4.
10.
10 or newer.
... nss 3.20.1 and nspr 4.
10.
10 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_20_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.
10.
10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.20.1.
... the following security-relevant bugs have been resolved in nspr 4.
10.
10, which affect nss.
... because nss includes portions of the affected nspr code at build time, it is necessary to use nspr 4.
10.
10 when building nss.
NSS 3.21.3 release notes
nss 3.21.3 requires nspr 4.
10.
10 or newer.
... security fixes in nss 3.21.3 bug 1306
103 / cve-2016-5285 - fixed a possible dos on nss servers due to a missing null check.
... bug 124
1034 - fixed an out-of-bounds write when parsing invalid utf-16.
... bug 124
1037 - fixed bogus surrogate detection when parsing invalid utf-16.
Utility functions
mxr 3.2 and later dsau_decodedersig mxr 3.2 and later dsau_decodedersigtolen mxr 3.9 and later dsau_encodedersig mxr 3.2 and later dsau_encodedersigwithlen mxr 3.9 and later hash_begin mxr 3.4 and later hash_clone mxr 3.
10 and later hash_create mxr 3.4 and later hash_destroy mxr 3.4 and later hash_end mxr 3.4 and later hash_gethashobject mxr 3.2 and later hash_gethashobjectbyoidtag mxr 3.8 and later hash_gethashtypebyoidtag mxr 3.8 and later ...
... hash_gettype mxr 3.12 and later hash_hashbuf mxr 3.
10 and later hash_resultlen mxr 3.4 and later hash_resultlenbyoidtag mxr 3.
10 and later hash_resultlencontext mxr 3.
10 and later hash_update mxr 3.4 and later nss_init mxr 3.2 and later nss_initialize mxr 3.2 and later nss_initreadwrite mxr 3.2 and later nss_initwithmerge mxr 3.12 and later nss_isinitialized mxr 3.9.2 and later nss_nodb_init mxr 3.2 and later nss_putenv mxr 3.2 and later ...
... sec_asn1encoderstart mxr 3.2 and later sec_asn1encoderupdate mxr 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_pkcs5getcryptoalgorithm mxr 3.2 and later sec_pkcs5getkeylength mxr 3.2 and later sec_pkcs5getpbealgorithm mxr 3.2 and later sec_pkcs5isalgorithmpbealg mxr 3.2 and later sec_pkcs5isa...
... secmod_pubmechflagstointernal mxr 3.4 and later secmod_unloadusermodule mxr 3.4 and later secmod_updatemodule mxr 3.4 and later secmod_updateslotlist mxr 3.9.3 and later secmod_waitforanytokenevent mxr 3.9.3 and later secoid_addentry mxr 3.
10 and later secoid_comparealgorithmid mxr 3.2 and later secoid_copyalgorithmid mxr 3.2 and later secoid_destroyalgorithmid mxr 3.2 and later secoid_findoid mxr 3.2 and later secoid_findoidbytag mxr 3.2 and later secoid_findoidtag mxr ...
NSS Tools crlutil
n-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.
...rl listing crls in a database deleting crl from a database importing crl into a database modifiying crl in a database creating a new crl this example creates a new crl and importing it in to a database in the specified directory: crlutil -g -d certdir -n cert-nickname -c crl-script-file or crlutil -g -d certdir -n cert-nickname <<eof update=20050204153000z addcert 34-40 20050
104153000z eof where cert-nickname is the name the new crl will be signed with.
... crlutil -l -d certdir -n nickname crl info: : version: 2 (0x1) signature algorithm: pkcs #1 md5 with rsa encryption issuer: "cn=nss test ca,o=bogus nss,l=mountain view,st=california,c=us" this update: wed feb 23 12:08:38 2005 entry (1): serial number: 40 (0x28) revocation date: wed feb 23 12:08:
10 2005 entry (2): serial number: 42 (0x2a) revocation date: wed feb 23 12:08:40 2005 deleting crl from a database this example deletes crl from a database in the specified directory: crlutil -d -n nickname -d certdir importing crl into a database this example imports crl into a database: crlutil -i -i crl-file -d certdir file should has binary format o...
... modifying crl in a database this example modifies a new crl and importing it in to a database in the specified directory: crlutil -g -d certdir -n cert-nickname -c crl-script-file or crlutil -m -d certdir -n cert-nickname <<eof update=20050204153000z addcert 40-60 20050
105153000z eof the crl management tool extracts existing crl from a database, will modify and sign with certificate cert-nickname and will store it in database.
certutil
the default is
1024 bits.
... certutil -c -c issuer -i cert-request-file -o output-file [-m serial-number] [-v valid-months] [-w offset-months] -d [sql:]directory [-1] [-2] [-3] [-4] [-5 keyword] [-6 keyword] [-7 emailaddress] [-8 dns-names] for example: $ certutil -c -c "my-ca-cert" -i /home/certs/cert.req -o cert.cer -m 0
10 -v 12 -w 1 -d sql:/home/my/sharednssdb -1 nonrepudiation,dataencipherment -5 sslclient -6 clientauth -7 jsmith@example.com generating key pairs key pairs are generated automatically with a certificate request or certificate, but they can also be generated independently using the -g command option.
...id < 1> rsa 40defeeb522ade1
1090eacebaaf1196a172127df example domain administrator cert < 2> rsa 1d0b06f44f6c03842f7d4f4a1dc78b3bcd1b85a5 john smith user cert there are ways to narrow the keys listed in the search results: o to return a specific key, use the -n name argument with the name of the key.
... copyright (c) 20
10, red hat, inc.
NSS tools : modutil
certprefix= keyprefix= secmod=secmod.db flags=readonly " nss="trustorder=75 cipherorder=
100 slotparams={0x00000001=[slotflags=rsa,rc4,rc2,des,dh,sha1,md5,md2,ssl,tls,aes,random askpw=any timeout=30 ] } flags=internal,critical" setting a default provider for security mechanisms multiple security modules may provide support for the same security mechanisms.
... rsa: 0x00000001 dsa: 0x00000002 rc2: 0x00000004 rc4: 0x00000008 des: 0x000000
10 dh: 0x00000020 fortezza: 0x00000040 rc5: 0x00000080 sha1: 0x00000
100 md5: 0x00000200 md2: 0x00000400 random: 0x08000000 friendly: 0x
10000000 own_pw_defaults: 0x20000000 disable: 0x40000000 cipherenableflags specifies ciphers that this...
... user read: 0400 user write: 0200 user execute: 0
100 group read: 0040 group write: 0020 group execute: 00
10 other read: 0004 other write: 0002 other execute: 0001 some platforms may not understand these permissions.
... copyright (c) 20
10, red hat, inc.
Scripting Java
function can use it to distinguish on behalf of which method it was called: js> var frame = new packages.javax.swing.jframe(); js> frame.addwindowlistener(function(event, methodname) { if (methodname == "windowclosing") { print("calling system.exit()..."); java.lang.system.exit(0); } }); js> frame.setsize(
100,
100); js> frame.visible = true; true js> calling system.exit()...
... js> a[0] =
104
104 js> a[1] =
105
105 js> new java.lang.string(a) hi java strings and javascript strings it's important to keep in mind that java strings and javascript strings are not the same.
...the most common stumbling block is length, which is a method of java strings and a dynamic property of javascript strings: js> javastring = new java.lang.string("java") java js> jsstring = "javascript" javascript js> javastring.length() 4 js> jsstring.length
10 rhino provides some help in reducing the differences between the two types.
... with (swinggui) { var mybutton = new jbutton(test); var mypoint = new point(
10,
10); var myframe = new jframe(); ...
Rhino shell
the string versionnumber must be one of
100, 1
10, 120, 130, 140, 150, 160 or 170.
...if an argument is supplied, it is expected to be one of
100, 1
10, 120, 130, 140, 150, 160 or 170 to indicate javascript version 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 or 1.7 respectively.
... 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.
... js> runcommand("bad_command", "--bad-arg", opt) js: "<stdin>", line 18: uncaught javascript exception: java.io.ioexception: bad_command: not found js> // passing 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.2005 0 js> // run sort collectiong the output js> var opt={input: "c\na\nb", output: 'sort output:\n'} js> runcomm...
Bytecode Descriptions
implements: classdefinitionevaluation for classtail, steps
10.b.
...implements: classdefinitionevaluation for classtail, steps
10.a.
... implements: await, steps
10-12.
...implements: globaldeclarationinstantiation steps 5, 6,
10 and 12, and evaldeclarationinstantiation steps 5 and 8.
JIT Optimization Strategies
for example, in the following code: var constants = {}; constants.n =
100; function testarray(array) { for (var i = 0; i < array.length; i++) { if (array[i] > constants.n) return true; } return false; } will have the loop compiled into the following when testarray gets hot.
... for (var i = 0; i < array.length; i++) { if (array[i] >
100) return true; } when this optimization is successful, property access is eliminated entirely and replaced with an inline constant.
... function someconstructor() { this.x =
10; // x is a definite slot property this.y =
10; // y is a definite slot property somecomplicatedfunctioncall(); this.z = 20; // z is not a definite slot property.
... function someconstructor() { this.x =
10; // x is a definite slot property this.y =
10; // y is a definite slot property somecomplicatedfunctioncall(); this.z = 20; // z is not a definite slot property.
SpiderMonkey 24
(this change was motivated by garbage collector improvements, which lean quite heavily on c++'s support for raii through constructors and destructors.) if you are compiling with microsoft's visual studio, note that the minimum supported version is msvc
10/20
10: msvc8/9 support has been dropped.
... typedef changes the fixed-size integer types introduced in spidermonkey 17 are defined in one of the following ways (xxx update for msvc<
10 deprecation): if the environment variable moz_custom_stdint_h is set, that file will be included to provide definitions for these types.
... currently only versions of visual studio prior to 20
10 (also known as version
10) are known to be deficient in this manner, so the custom implementation (which is compatible with the one shipped in visual studio 20
10 and later) is only invoked for those compilers.
... in the long run we anticipate removing the environment variable-based overriding when we drop support for versions of visual studio prior to 20
10.
A Web PKI x509 certificate primer
generate csr using this command: openssl req -new -key key.pem -days
1096 -extensions v3_ca -batch -out example.csr -utf8 -subj '/cn=www.example.com' this creates a new certificate signing request (csr) that will be valid for 3 years.
... generate csr "openssl req -new -key key.pem -days
1096 -extensions v3_ca -batch -out example.csr - utf8 -subj '/cn=www.example.com' make a new certificate signing request (csr) that will be valid for 3 years.
... write extensions file (make a new file with name openssl.ss.cnf with the following contents) basicconstraints = ca:false subjectaltname =dns:www.example.com extendedkeyusage =serverauth authorityinfoaccess = ocsp;uri:http://ocsp.example.com:80/ intermediate signs the csr (using sha256) and appends the extensions described in the file "openssl x509 -req -sha256 -days
1096 -in example.csr -cakey intkey.pem -ca int.pem -set_serial $some_large_integer -out www.example.com.pem -extfile openssl.int.cnf" security notes there are several organizations that provide recommendations regarding the security parameters for key/hash sizes given current computational power.
...these are the recomendations of bit sizes (from http://www.keylength.com/): asymmetric ecc(key) hash linestra(2004) 1902 172 172 ecrypt 2012 2432 224 224 nist 2012 2048 224 224 anssi 20
10 4096 200 256 rfc 3766 2358 200 --- bsi 1976 256 256 in other words, sha1 is now deprecated for new uses.
nsIAccessibleEvent
event_action_change 0x00
10 0x000d an object's action has changed.
... event_selection_add 0x8007 0x0013 0x00
10 an item within a container object has been added to the selection.
... event_create 0x8000 event_destroy 0x8001 event_descriptionchange 0x800d event_parentchange 0x800f event_helpchange 0x80
10 event_defactionchange 0x8011 event_acceleratorchange 0x8012 event_menustart 0x0004 event_menuend 0x0005 event_menupopupstart 0x0006 event_menupopupend 0x0007 event_capturestart 0x0008 event_captureend 0x0009 event_movesizestart 0x000a event_movesizeend 0x000b event_contexthelpstart 0x000c event_contexthelpend 0x000d eve...
...nt_dragdropstart 0x000e event_dragdropend 0x000f event_dialogstart 0x00
10 event_dialogend 0x0011 event_scrollingstart 0x0012 event_scrollingend 0x0013 event_minimizestart 0x0016 event_minimizeend 0x0017 event_atk_property_change 0x0
100 event_atk_selection_change 0x0
101 event_atk_text_change 0x0
102 event_atk_text_selection_change 0x0
103 event_atk_text_caret_move 0x0
104 event_atk_visible_data_change 0x0
105 event_atk_table_model_change 0x01
10 event_atk_table_row_insert 0x0111 event_atk_table_row_delete 0x0112 event_atk_table_row_reorder 0x0113 event_atk_table_column_insert 0x0114 event_atk_table_column_delete 0x0115 event_atk_table_column_reorder 0x0116 event_atk_link_se...
nsIScriptableIO
by default, the buffer size is
1024 bytes; however, the size may be changed by specifying the abuffersize parameter.
...by default, the buffer is
1024 bytes long.
...by default, the buffer size is
1024 bytes; however, the size may be changed by specifying the abuffersize parameter.
...by default, the buffer is
1024 bytes long.
nsIWebBrowserChrome
chrome_titlebar
1024 value for the chromeflags attribute.
... chrome_window_lowered 67
108864 represent special cases.
... chrome_openas_dialog
1073741824 represent special cases.
... chrome_remote_window
1048576 whether this window should use remote (out-of-process) tabs.
Plug-in Basics - Plugins
var plugin = mimetype.enabledplugin; if (plugin) { // yes, so show the data in-line document.writeln("here\'s a movie: <object data='mymovie.swf' height='
100' width='
100'></object>"); } else { // no, so provide a link to the data document.writeln("<a href='mymovie.swf'>click here</a> to see a movie."); } } else { // no, so tell them so document.writeln("sorry, can't show you this movie."); } overview of plug-in structure this section is an overview of basic information you will need as you develop plug-ins.
... for example, a plug-in that displays video could have private attributes that determine whether to start the plug-in automatically or loop the video automatically on playback, as in the following embed element: <embed src="myavi.avi" width="
100" height="125" autostart="true" loop="true"> with this embed element, gecko passes the values to the plug-in, using the arg parameters of the npp_new call that creates the plug-in instance.
... argc = 5 argn = {"src", "width", "height", "autostart", "loop"} argv = {"movie.avi", "
100", "125", "true", "true"} gecko interprets the attributes as follows: src: load the data file and determine the mime type of the data.
... width and height: set the area of the page handled by the plug-in to
100 by 125 pixels.
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 85 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 85 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.
... step over (f
10): steps to the next line of javascript code.
... note: if you click step over (f
10) after changing the selected line in the source pane, the debugger executes until reaching the line following the newly-selected line (disregarding whatever line the debugger originally stopped at).
Debugger.Script - Firefox Developer Tools
for example, suppose we have a script for the following source code: a=[] for (i=1; i <
10; i++) // it's hip to be square.
... 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.
..., each of which describes a single entry point, and contains the following properties: linenumber: the line number for which offset is an entry point columnnumber: the column number for which offset is an entry point offset: the bytecode instruction offset of the entry point for example, suppose we have a script for the following source code: a=[] for (i=1; i <
10; i++) // it's hip to be square.
... 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.
Migrating from Firebug - Firefox Developer Tools
only the live preview of changes is currently missing, which is tracked in bug
1067318 and bug 815464.
...unfortunately, the devtools do not have this feature yet (see bug
1004678).
...xhr, dom, cookie and error breakpoints are not supported yet (see bug 8216
10, bug
1004678, bug 895893 and bug 11650
10).
... step through code once the script execution is stopped, you can step through the code using the continue (f8), step over (f
10), step into (f11) and step out (shift+f11) options.
Network request list - Firefox Developer Tools
remote-ip:63.245.215.53 remote-ip:[2400:cb00:2048:1::68
10:2802] cause shows resources matching a specific cause type.
...the value 1k is equivalent to
1024.
...the value 1k is equivalent to
1024.
...the value 1k is equivalent to
1024.
Edit fonts - Firefox Developer Tools
example: if 1rem is equivalent to
10 pixels, when you change the unit of measurement from rem to px, 2rem becomes 20px.
...for non-variable fonts the slider ranges from
100 to 900 in increments of
100.
...for example, font-weight can be set to any value between 1 and
1000 in variable fonts (although it is not guaranteed that a variable font will support this entire range).
...for example linux oses need the latest linux freetype version, and macos prior to
10.13 does not support variable fonts.
Web Console remoting - Firefox Developer Tools
actor preferences to allow the web console to configure logging options while it is running, we have added the setpreferences packet: { "to": "conn0.console9", "type": "setpreferences", "preferences": { "networkmonitor.saverequestandresponsebodies": false } } reply: { "updated": [ "networkmonitor.saverequestandresponsebodies" ], "from": "conn0.console
10" } for convenience you can use webconsoleclient.setpreferences(prefs, onresponse).
... the pageerror packet is: { "from": "conn0.console9", "type": "pageerror", "pageerror": { "errormessage": "referenceerror: foo is not defined", "sourcename": "http://localhost/~mihai/mozilla/test.js", "linetext": "", "linenumber": 6, "columnnumber": 0, "category": "content javascript", "timestamp": 13472945082
10, "error": false, "warning": false, "exception": true, "strict": false, "private": false, } } the packet is similar to nsiscripterror - for simplicity.
... network logging the networkevent packet whenever a new network request starts being logged the networkevent packet is sent: { "from": "conn0.console
10", "type": "networkevent", "eventactor": { "actor": "conn0.netevent14", "starteddatetime": "2012-09-17t19:50:03.699z", "url": "http://localhost/~mihai/mozilla/test2.css", "method": "get" "isxhr": false, "private": false } } this packet is used to inform the web console of a new network event.
...examples: { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "requestheaders", "headers":
10, "headerssize": 425 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "requestcookies", "cookies": 0 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "requestpostdata", "datasize":
1024, "discardrequestbody": false }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsestart", "respon...
AnalyserNode.minDecibels - Web APIs
syntax var curvalue = analysernode.mindecibels; analysernode.mindecibels = newvalue; value a double, representing the minimum decibel value for scaling the fft analysis data, where 0 db is the loudest possible sound, -
10 db is a
10th of that, etc.
... the default value is -
100 db.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -
10; ...
... 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 of 'mindecibels' in that specification.
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.
... examples the most simple example just starts the audio buffer playing from the beginning — you don't need to specify any parameters in this case: source.start(); the following more complex example will, 1 second from now, start playing
10 seconds worth of sound starting 3 seconds into the audio buffer.
... source.start(audioctx.currenttime + 1,3,
10); for a more complete example showing start() in use, check out our audiocontext.decodeaudiodata() example, you can also run the code example live, or view the source.
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.
...the default font is
10px sans-serif.
... a textbaseline example edit the code below and see your changes update live in the canvas: ctx.font = '48px serif'; ctx.textbaseline = 'hanging'; ctx.stroketext('hello world', 0,
100); 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"> ctx.font = "48px serif"; ctx.textbaseline = "hanging"; ctx.stroketext("hello world", 0,
100);</textarea> var canvas ...
Examples of web and XML development using the DOM - Web APIs
"> </p> <div id="output"> </div> </body> </html> 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 st...
... var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size:
10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way.
...ocument.getelementbyid("t2"); var w_style = document.defaultview.getcomputedstyle(refdiv, null).getpropertyvalue("width"); txtwidth.value = w_style; var txtbackgroundcolor = document.getelementbyid("t3"); var b_style = document.defaultview.getcomputedstyle(refdiv, null).getpropertyvalue("background-color"); txtbackgroundcolor.value = b_style; } </script> <style> #d1 { margin-left:
10px; background-color: rgb(173, 216, 230); height: 20px; max-width: 20px; } </style> </head> <body> <div id="d1"> </div> <form action=""> <p> <button type="button" onclick="cstyles();">getcomputedstyle</button> height<input id="t1" type="text" value="1" /> max-width<input id="t2" type="text" value="2" /> bg-color<input id="t3" type="text" value="3" /> </p> </form>...
... <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>show event properties</title> <style> table { border-collapse: collapse; } thead { font-weight: bold; } td { padding: 2px
10px 2px
10px; } .odd { background-color: #efdfef; } .even { background-color: #ffffff; } </style> <script> function showeventproperties(e) { function addcell(row, text) { var cell = row.insertcell(-1); cell.appendchild(document.createtextnode(text)); } var e = e || window.event; document.getelementbyid('eventtype').innerhtml = e.type; var table = document.createelement('table...
EffectTiming.fill - Web APIs
</div> css content .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; padding:
10px; position: relative; text-align: center; align-self: center; color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other css involved in this example, the part that really matters for our purposes is the css that styles the "box" element that we'll be animating.
...var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(
100%)' } ], { duration: 3000, fill: 'forwards' } ); // set up the rabbit's animation to play on command by calling rabbitdownanimation.play() later var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); alternatives to fill modes fill modes are primarily provided as a means of representing the animation-fill-mode feature of css animations.
... rather than using fill modes to persist an animation, it is often simpler to set the final value of the animation effect directly in specified style: elem.animate({ transform: 'translatey(
100px)' }, 200).finished.then(() => { elem.style.transform = 'translatey(
100px)'; }); alternatively, it may be simpler still to set the final value in specified style before triggering the animation and then animate from the start value.
... elem.style.transform = 'translatey(
100px)'; elem.animate({ transform: 'none', offset: 0 }, 200); for some complex effects where animations layer on top of one another, it may be necessary to use a fill mode temporarily to capture the final value of an animation before canceling it.
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="1
10" 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="#4d4e53" text-anchor...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
...this number is a total for all channels, and by default is set to be the number of channels *
1024 (e.g., 2 channels *
1024 samples = 2048 total).
...for example, 44
100 samples per second is the sample rate used by cd audio.
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" f...
...ont-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25
101,20
101,30 91,25" stroke="#d4dde4" fill="none"/><line x1="
101" y1="25" x2="131" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
... 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 15safari full support 7webview android full support yes full support yes no ...
... full support 24 no support 23 — 24prefixed 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 15safari full support 7webview android full support yeschrome android full support yesfire...
ImageData() - Web APIs
examples creating a blank imagedata object this example creates an imagedata object that is 200 pixels wide and
100 pixels tall, containing a total of 20,000 pixels.
... let imagedata = new imagedata(200,
100); // imagedata { width: 200, height:
100, data: uint8clampedarray[80000] } initializing imagedata with an array this example instantiates an imagedata object with pixel colors defined by an array.
... html <canvas id="canvas"></canvas> javascript the array (arr) has a length of 40000: it consists of
10,000 pixels, each of which is defined by 4 values.
... 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.
ImageData.data - Web APIs
syntax imagedata.data examples getting an imagedata object's pixel data this example creates an imagedata object that is
100 pixels wide and
100 pixels tall, making
10,000 pixels in all.
... the data array stores four values for each pixel, making 4 x
10,000, or 40,000 values in all.
... let imagedata = new imagedata(
100,
100); console.log(imagedata.data); // uint8clampedarray[40000] console.log(imagedata.data.length); // 40000 filling a blank imagedata object this example creates and fills a new imagedata object with colorful 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) { // percentage in the x direction, times 255 let x = (i % 400) / 400 * 255; // percentage in the y direction, times 255 let y = math.ceil(i / 400) /
100 * 255; // modify pixel data imagedata.data[i + 0] = x; // r value imagedata.data[i + 1] = y; // g value imagedata.data[i + 2] = 255 - x...
Using the MediaStream Recording API - Web APIs
instead, the problem was solved by making the third container's height equal to
100% of the parent height, minus the heights and padding of the other two: .sound-clips { box-shadow: inset 0 3px 4px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.1); height: calc(
100% - 240px - 0.7rem); overflow: scroll; } note: calc() has good support across modern browsers too, even going back to internet explorer 9.
...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().
...we register an event handler to do this using mediarecorder.ondataavailable: let chunks = []; mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } note: the browser will fire dataavailable events as needed, but if you want to intervene you can also include a timeslice when invoking the start() method — for example start(
10000) — to control this interval, or call mediarecorder.requestdata() to trigger an event when you need it.
PannerNode.maxDistance - Web APIs
the maxdistance property's default value is
10000.
... syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.maxdistance =
10000; value a double.
... the default is
10000, and non-positive values are not allowed.
...dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" ...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
... example svg content <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 250 250" width="250" height="250"> <circle cx="
100" cy="
100" r="50" fill="gold" id="circle" onclick="clickcircle();"/> </svg> javascript content this function clickcircle() is called when the circle is clicked.
...
10 : -
10; // clamp the circle radius to a minimum of
10 and a maximum of 250, // so it won't disappear or get bigger than the viewport var newvalue = math.min(math.max(circle.r.baseval.value + change,
10), 250); circle.setattribute("r", newvalue); } click on the circle.
Slottable - Web APIs
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):...
...to change preferences in firefox, visit about:config.opera android full support 41safari ios full support
10.3samsung internet android full support 6.0assignedslot experimentalchrome full support 53edge full support 79firefox full support 63 full support 63 no support ...
...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):...
...to change preferences in firefox, visit about:config.opera android full support 41safari ios full support
10.3samsung internet android full support 6.0legend full support full support no support no supportexperimental.
SubtleCrypto.wrapKey() - Web APIs
*/ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations":
100000, "hash": "sha-256" }, keymaterial, { "name": "aes-kw", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key.
...*/ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations":
100000, "hash": "sha-256" }, keymaterial, { "name": "aes-gcm", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key.
...*/ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations":
100000, "hash": "sha-256" }, keymaterial, { "name": "aes-cbc", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key.
...*/ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations":
100000, "hash": "sha-256" }, keymaterial, { "name": "aes-gcm", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key.
WebGLRenderingContext.texImage2D() - Web APIs
● ● rgb8_snorm rgb s8 s8 s8 ● rgb565 rgb 5 6 5 ● ● rgba4 rgba 4 4 4 4 ● ● rgb5_a1 rgba 5 5 5 1 ● ● rgba8 rgba 8 8 8 8 ● ● rgba8_snorm rgba s8 s8 s8 s8 ● rgb
10_a2 rgba
10 10 10 2 ● ● rgb
10_a2ui rgba ui
10 ui
10 ui
10 ui2 ● srgb8 rgb 8 8 8 ● srgb8_alpha8 rgba 8 8 8 8 ● ● r16f red f16 ● rg16f rg f16 f16 ● rgb16f rgb f16 f16...
... f16 ● 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_b
10f rgb f11 f11 f
10 ● rgb9_e5 rgb 9 9 9 5 ● r8i red i8 ● r8ui red ui8 ● r16i red i16 ● r16ui red ui16 ● r32i red i32 ● r32ui red ui32 ● rg8i...
...l.depth_component gl.depth_stencil when using the ext_srgb extension: ext.srgb_ext ext.srgb_alpha_ext when using a webgl 2 context, the following values are available additionally: gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rg8ui gl.rg16ui gl.rg32ui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b
10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_alpha8 gl.rgb5_a1 gl.rgb
10_a2 gl.rgba4 gl.rgba16f gl.rgba32f gl.rgba8ui width a glsizei specifying the width of the texture.
...sing the oes_texture_float extension: gl.float when using the oes_texture_half_float extension: ext.half_float_oes (constant provided by the extension) 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.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
thus a matrix that looks like this: [a1a5a9a13a2a6a
10a14a3a7a11a15a4a8a12a16]\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_{15} \\ a_{4} & a_{8} & a_{12} & a_{16} \end{matrix} \right ] is represented in array form like this: let matrixarray = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a
10, a11, a12, a13, a14, a15, a16]; in this array, the leftmost column contain...
... to zoom using a scaling factor or percentage, you can map 1x (
100% of normal size) to the largest value of fov you allow (which leads to the most content being visible), then map your maximum magnification to the maximum value of fov you support and map corresponding values in between.
...for example: const transform = createperspectivematrix(viewport, 130, 1,
100); const translatevec = vec3.fromvalues(-trackdistance, -cranedistance, pushdistance); mat4.translate(transform, transform, translatevec); this starts with the perspective matrix representing a 130° vertical field of view, then applies a translation that moves the camera in a manner that includes track, crane, and push movements.
...since this value is in microseconds, we convert it to seconds by multiplying by 0.001 (or diiding by
1000)..
Accessibility: What users can do to browse more safely - Accessibility
examples include: transitionrun transitionstart transitionend transitioncancel edge 75 and above (desktop, in windows
10) according to eric bailey, in his april 30, 2019 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari
10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari
10.3 and above (mobile and tablet) select the "reduce motion ...
...there is a github repository for it at https://github.com/0ui/gif-scrubber beeline reader beeline reader has a browser extension that allows you to set up for grayscale and dyslexi font, among other things take advantage operating system accessibility features most operating systems such as windows
10, have accessibility options that are surprisingly powerful.
... turn off animations in the operating system in the windows
10 operating system, the user has an ability to turn off animations.
...in the screenshot below, you can see an example of windows
10 accessibility settings allowing for color filters to be selected.
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.
...in the example above, all of the items have a width of
100 pixels and so this is used as the flex-basis.
...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).
...however you could use flex:
10 1 200px and flex: 20 1 200px if you wanted.
Stacking context example 2 - CSS: Cascading Style Sheets
what can be considered strange is that div #2 (z-index: 2) is above div #4 (z-index:
10), despite their z-index values.
... to better understand the situation, this is the stacking context hierarchy: root stacking context div #2 (z-index 2) div #3 (z-index 1) div #4 (z-index
10) note: it is worth remembering that in general the html hierarchy is different from the stacking context hierarchy.
... example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index:
10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; widt...
...h: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left:
10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold">div #1</span><br /> position: relative; <div id="div2"><br /> <span class="bold">div #2</span><br /> position: absolute;<br /> z-index: 2; </div> </div> <br /> <div id="div3"><br /> <span class="bold">div #3</span><br /> position: relative;<br /> z-index: 1; <div id="div4"><br /> <span class="bold">div #4</span><br /> position: absolute;<br /> z-index:
10; </div> </div> </body> </html> ...
Basic Shapes - CSS: Cascading Style Sheets
the below css creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and
10 pixels from the left and right, with a border-radius value of
10 pixels.
... .shape { float: left; shape-outside: inset(20px
10px 20px
10px round
10px); } using the same rules as we use for the margin shorthand, you can set more than one offset at once.
...so, the above rules could also be described as: .shape { float: left; shape-outside: inset(20px
10px round
10px); } in the example below we have an inset() shape used to pull content over the floated element.
... in the below example i have created a circle on an item with a width of
100 pixels, plus a margin of 20 pixels.
border-image-slice - CSS: Cascading Style Sheets
syntax /* all sides */ border-image-slice: 30%; /* vertical | horizontal */ border-image-slice:
10% 30%; /* top | horizontal | bottom */ border-image-slice: 30 30% 45; /* 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> v...
...negative values are invalid; values greater than their corresponding dimension are clamped to
100%.
... formal definition initial value
100%applies toall elements, except internal table elements when border-collapse is collapse.
... 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="45" 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="45" 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-...
break-inside - CSS: Cascading Style Sheets
erasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie full support
10opera full support 37 full support 37 no support 11.1 — 12.1safari full support
10webview android full support 50chrome android full support 50fire...
...fox android full support 65opera android full support 37 full support 37 no support 11.1 — 12.1safari ios full support
10samsung internet android full support 5.0multicol_context: column and avoid-columnchrome full support 50edge full support 12firefox no support noie full support
10opera full support 37safari ...
... full support
10webview android full support 50chrome android full support 50firefox android no support noopera android full support 37safari ios full support
10samsung internet android full support 5.0supported in paged mediachrome full support 50edge full support 12firefox full support 65ie full support
10opera ...
... full support 37 full support 37 no support 11.1 — 12.1safari full support
10webview android full support 50chrome android full support 50firefox android full support 65opera android full support 37 full support 37 no support 11.1 — 12.1safari ios full support
10samsung internet android full support 5...
calc() - CSS: Cascading Style Sheets
syntax /* property: calc(expression) */ width: calc(
100% - 80px); the calc() function takes a single expression as its parameter, with the expression's result used as the value.
...in this example, the css creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(
100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their contai...
... let's look at some css: input { padding: 2px; display: block; width: calc(
100% - 1em); } #formbox { width: calc(
100% / 6); border: 1px solid black; padding: 4px; } here, the form itself is established to use 1/6 of the available window width.
...consider the following code: .foo { --widtha:
100px; --widthb: calc(var(--widtha) / 2); --widthc: calc(var(--widthb) / 2); width: var(--widthc); } after all variables are expanded, widthc's value will be calc( calc(
100px / 2) / 2), then when it's assigned to .foo's width property, all inner calc()s (no matter how deeply nested) will be flattened to just parentheses, so the width property's value will be eventually calc( (
100px / 2) / 2...
clear - CSS: Cascading Style Sheets
suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div> css .wrapper{ border:1px solid black; padding:
10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="right">this paragraph clears right.</p> </div> css .wrapper{ border:1px solid black; padding:
10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: both html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="both">this paragraph clears both.</p> </div> css .wrapper{ border:1px solid black; padding:
10px; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 45%; } specifications specification status comment css logical properties and values level 1the definition of 'float and clear' in that specification.
...port 3.5safari full support 1webview android full support 1chrome android full support 18firefox android full support 4opera android full support
10.1safari ios full support 1samsung internet android full support 1.0flow-relative values inline-start and inline-endchrome no support noedge no support nofirefox full support ...
mix-blend-mode - CSS: Cascading Style Sheets
e">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> <stop offset="0" stop-color="hsl(0,
100%,50%)" /> <stop offset="
100%" stop-color="hsl(0,0%,
100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,
100%,50%)" /> <stop offset="
100%" stop-color="hsl(120,0%,
100%)" /> </lineargradient> <lineargradient id="blue"> <st...
...op offset="0" stop-color="hsl(240,
100%,50%)" /> <stop offset="
100%" stop-color="hsl(240,0%,
100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> multiply <div class="container multiply"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" ...
...v> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> </div> </div> html,body { height:
100%; box-sizing: border-box; background: #eee; } .grid { width:
100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; height: auto; } .col { display: flex; flex: 1 auto; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-a...
...lign: center; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff
100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff
100%); width: 150px; height: 150px; margin: 0 auto; } .r { transform-origin: center; transform: rotate(-30deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill: url(#green); } .b { transform-origin: center; transform: rotate(2
10deg); fill: url(#blue); } .isolate .group { isolation: isolate; } .normal .item { mix-blend-mode: normal; } .multiply .item { m...
offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); 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 segment starting from the position of the box and pr...
... <svg xmlns="http://www.w3.org/2000/svg" width="700" height="450" viewbox="350 0 1400 900"> <title>house and scissors</title> <rect x="595" y="423" width="6
10" height="377" fill="blue" /> <polygon points="506,423 900,190 1294,423" fill="yellow" /> <polygon points="993,245 993,190
1086,190
1086,300" fill="red" /> <path id="house" d="m900,190 l993,245 v201 a11,11 0 0,1
1004,190 h
1075 a11,11 0 0,1
1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,789 v434 a11,11...
... 0 0,0 584,423 h506 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 a
10,
10 0 0,0 -20,
10 a20,20 0 1,1 -40,-
10 h20 a
10,
10 0 0,1 30,0 m-40,20 a
10,
10 1 0,0 -40,0 a
10,
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 a
10,
10 0 0,1 -20,-
10 a20,20 0 1,0 -40,
10 h20 a
10,
10 0 0,0 30,0 m-40,-20 a
10,
10 1 0,0 -40,0 a
10,
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,245 v201 a11,11 0 0,1
1004,190 h
1075 a11,11 0 0,1
1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 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 1the definition of 'offset-path' in that specification.
perspective-origin - CSS: Cascading Style Sheets
right, a keyword being a shortcut for the
100% percentage value.
... bottom, a keyword being a shortcut for the
100% percentage value.
... perspective-origin: right; } .pobl { perspective-origin: bottom left; } .pobm { perspective-origin: bottom; } .pobr { perspective-origin: bottom right; } .po200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { width:
100px; height:
100px; margin: 24px; border: none; } .cube { width:
100%; height:
100%; backface-visibility: visible; perspective: 300px; 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...
...atey(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 layout a little nicer */ section { background-color: #eee; padding:
10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification.
radial-gradient() - CSS: Cascading Style Sheets
syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at center, red 0, blue, green
100%) values <position> the position of the gradient, interpreted in the same way as background-position or transform-origin.
...a percentage of 0%, or a length of 0, represents the center of the gradient; the value
100% represents the intersection of the ending shape with the virtual gradient ray.
...percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents
100%.
...l-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); } non-centered gradient <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e
100%); } more radial-gradient examples please see using css gradients for more examples.
repeat() - CSS: Cascading Style Sheets
/* <track-repeat> values */ repeat(4, 1fr) repeat(4, [col-start] 250px [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 [col-end]) /* <auto-repeat> values */ repeat(auto-fill, 250px) repeat(auto-fit, 250px) repeat(auto-fill, [col-start] 250px [col-end]) repeat(auto-fit, [col-start] 250px [col-end]) repeat(auto-fill, [col-star...
...t] minmax(
100px, 1fr) [col-end]) repeat(auto-fill,
10px [col-start] 30% [col-middle] 400px [col-end]) /* <fixed-repeat> values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-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.
... </div> <div> inflexible item of
100 pixels width.
... </div> </div> css #container { display: grid; grid-template-columns: repeat(2, 50px 1fr)
100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width:
100%; background-color: #8cffa0; padding:
10px; } #container > div { background-color: #8ca0ff; padding: 5px; } result specifications specification status comment css grid layoutthe definition of 'repeat()' in that specification.
repeating-conic-gradient() - CSS: Cascading Style Sheets
syntax /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */ background: repeating-conic-gradient( from 3deg at 25% 25%, hsl(200,
100%, 50%) 0deg 15deg, hsl(200,
100%, 60%)
10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
...like in non-repeating gradients, the first and last color stops are assumed to be 0 and either
100% or 360deg if not explicitly declared.
...browsers supporting repeating conic gradients also accept percent values, with
100% equaling 360 degrees, but this is not in the specification.
...for example, if you don't declare an angle for the first color, and declare
10% on the last color stop, the arc will repeat
10 times.
repeating-linear-gradient() - CSS: Cascading Style Sheets
this gradient doesn't repeat because the last color stop defaults to
100% */ repeating-linear-gradient(0deg, blue, green 40%, red); /* a gradient repeating five times, going from the left to right, starting red, turning green, and back to red */ repeating-linear-gradient(to right, red 0%, green
10%, red 20%); values <side-or-corner> the position of the gradient line's starting point.
...a percentage of 0%, or a length of 0, represents the start of the gradient; the value
100% is
100% of the image size, meaning the gradient will not repeat.
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples zebra stripes body { width:
100vw; height:
100vh; } body { background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, black 20px, black 40px); /* with multiple color stop lengths */ background-image: repeating-linear-gradient(-45deg, transparent 0 20px, black 20px 40px); } ten repeating horizontal bars body { width:
100vw; height:
100vh; } body {...
... background-image: repeating-linear-gradient(to bottom, rgb(26,198,204), rgb(26,198,204) 7%, rgb(
100,
100,
100)
10%); } because the last color stop is
10% and the gradient is vertical, each gradient in the repeated gradient is
10% of the height, fitting
10 horizontal bars.
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%; positio...
...n: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,2
10,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(2
10,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,2
10,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(2
10,2
10,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(2
10,0,2
10,.7); transform: rotatex(-90deg) translatez(50px); } result matrix translation and scale example another transform3d() example, which implements an animated combined translate and scale.
...</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 bas...
... 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.
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width:
100px; height:
100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size lef...
... var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width:
100px; height:
100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left...
... 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: 2s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width:
100px; height:
100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:2s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left ...
... 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: 4s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width:
100px; height:
100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size ...
<input type="file"> - HTML: Hypertext Markup Language
ncluding both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>submit</button> </div> </form> div { margin-bottom:
10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live.
... let's look at a more complete example: <form method="post" enctype="multipart/form-data"> <div> <label for="profile_pic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </div> <div> <button>submit</button> </div> </form> div { margin-bottom:
10px; } this produces a similar-looking output to the previous example: note: you can find this example on github too — see the source code, and also see it running live.
...> <p>no files currently selected for upload</p> </div> <div> <button>submit</button> </div> </form> html { font-family: sans-serif; } form { width: 580px; background: #ccc; margin: 0 auto; padding: 20px; border: 1px solid black; } form ol { padding-left: 0; } form li, div > p { background: #eee; display: flex; justify-content: space-between; margin-bottom:
10px; list-style-type: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left:
10px; } form label, form button { background-color: #7f9ccb; padding: 5px
10px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto; } form label:hover, form button:hover { background-color: #2d5ba3; color: whi...
... function returnfilesize(number) { if(number <
1024) { return number + 'bytes'; } else if(number >=
1024 && number <
1048576) { return (number/
1024).tofixed(1) + 'kb'; } else if(number >=
1048576) { return (number/
1048576).tofixed(1) + 'mb'; } } the example looks like this; have a play: specifications specification status comment html living standardthe definition of '<input type="file">' in tha...
<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...
... 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 suppo...
... 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 year...
...llback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the years dynamically // (the months are always the same, therefore hardcoded) populateyears(); } function 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)!
<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.
... making input required you can use the required attribute as an easy way of making entering a value required before form submission 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.
... <form> <div> <label for="uname">choose a username: </label> <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: ...
... <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}"> <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: examples you can see good examples of text inputs used in context in our your first...
Evolution of HTTP - HTTP
a typical flow of requests, all through one single connection is now looking like this: get /docs/glossary/simple_header http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x
10.9; rv:50.0) gecko/20
100
101 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, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: wed, 20 jul 2016
10:55:30 gmt etag: "547fa7e369ef56031...
...dd3bff2ace9fc0832eb251a" keep-alive: timeout=5, max=
1000 last-modified: tue, 19 jul 2016 00:59:33 gmt server: apache transfer-encoding: chunked vary: cookie, accept-encoding (content) get /static/img/header-background.png http/1.1 host: developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x
10.9; rv:50.0) gecko/20
100
101 firefox/50.0 accept: */* accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok age: 9578461 cache-control: public, max-age=315360000 connection: keep-alive content-length: 3077 content-type: image/png date: thu, 31 mar 2016 13:34:46 gmt last-modified: wed, 21 oct 2015 18:27:50 gmt server: apache (image content of 3077 bytes) http/1.1 was first published as rfc 20...
...restful apis became very common in the 20
10s.
... in the first half of the 20
10s, google demonstrated an alternative way of exchanging data between client and server, by implementing an experimental protocol spdy.
Expect - HTTP
the only expectation defined in the specification is expect:
100-continue, to which the server shall respond with:
100 if the information contained in the header is sufficient to cause an immediate success, 417 (expectation failed) if it cannot meet the expectation; or any other 4xx status otherwise.
... header type request header forbidden header name yes syntax no other expectations except "
100-continue" are specified currently.
... expect:
100-continue directives
100-continue informs recipients that the client is about to send a (presumably large) message body in this request and wishes to receive a
100 (continue) interim response.
... put /somewhere/fun http/1.1 host: origin.example.com content-type: video/h264 content-length: 1234567890987 expect:
100-continue the server now checks the request headers and may respond with a
100 (continue) response to instruct the client to go ahead and send the message body, or it will send a 417 (expectation failed) status if any of the expectations cannot be met.
User-Agent - HTTP
(on desktop, geckotrail is always the fixed string 20
100
101.) firefox/firefoxversion indicates the browser is firefox, and provides the version (such as "17.0").
... examples mozilla/5.0 (windows nt 6.1; win64; x64; rv:47.0) gecko/20
100
101 firefox/47.0 mozilla/5.0 (macintosh; intel mac os x x.y; rv:42.0) gecko/20
100
101 firefox/42.0 chrome ua string the chrome (or chromium/blink-based engines) user agent string is similar to firefox’s.
... examples mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) chrome/51.0.2704.
103 safari/537.36 opera ua string the opera browser is also based on the blink engine, which is why it almost looks the same, but adds "opr/<version>".
... examples mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) chrome/51.0.2704.
106 safari/537.36 opr/38.0.2220.41 older, presto-based opera releases used: opera/9.80 (macintosh; intel mac os x; u; en) presto/2.2.15 version/
10.00 opera/9.60 (windows nt 6.0; u; en) presto/2.1.1 safari ua string in this example, the user agent string is mobile safari’s version.
Proxy Auto-Configuration (PAC) file - HTTP
(in the first example above, netscape will ask user confirmation about making direct connections; in this case, there is no user intervention.) proxy w3proxy.netscape.com:8080; socks socks:
1080 use socks if the primary proxy goes down.
... example dnsresolve("www.mozilla.org"); // returns the string "
104.16.41.2" convert_addr() syntax convert_addr(ipaddr) parameters ipaddr any dotted address such as an ip address or mask.
... example convert_addr("
104.16.41.2"); // returns the decimal number 1745889538 myipaddress() syntax myipaddress() parameters (none) returns the server ip address of the machine firefox is running on, as a string in the dot-separated integer format.
... 1|2|3|4|5|6|7|8|9|
10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31 month is one of the ordered month strings below.
HTTP range requests - HTTP
the "-h" option will append a header line to the request, which in this case is the range header requesting the first
1024 bytes.
... 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/146515 content-length:
1024 ...
... curl http://www.example.com -i -h "range: bytes=0-50,
100-150" the server responses with the 206 partial content status and a content-type: multipart/byteranges; boundary=3d6b6a416f9b5 header, indicating that a multipart byterange follows.
... http/1.1 206 partial content content-type: multipart/byteranges; boundary=3d6b6a416f9b5 content-length: 282 --3d6b6a416f9b5 content-type: text/html content-range: bytes 0-50/1270 <!doctype html> <html> <head> <title>example do --3d6b6a416f9b5 content-type: text/html content-range: bytes
100-150/1270 eta http-equiv="content-type" content="text/html; c --3d6b6a416f9b5-- conditional range requests when resuming to request more parts of a resource, you need to guarantee that the stored resource has not been modified since the last fragment has been received.
Details of the object model - JavaScript
it adds the quota property (whose value defaults to
100).
... javascript function salesperson() { workerbee.call(this); this.dept = 'sales'; this.quota =
100; } salesperson.prototype = object.create(workerbee.prototype); salesperson.prototype.constructor = salesperson; function engineer() { workerbee.call(this); this.dept = 'engineering'; this.machine = ''; } engineer.prototype = object.create(workerbee.prototype) engineer.prototype.constructor = engineer; java public class salesperson extends workerbee { public string dept = "sales";...
... public double quota =
100.0; } public class engineer extends workerbee { public string dept = "engineering"; public string machine = ""; } using these definitions, you can create instances of these objects that get the default values for their properties.
...// jim.name is '' // jim.dept is 'general' var sally = new manager; // sally.name is '' // sally.dept is 'general' // sally.reports is [] var mark = new workerbee; // mark.name is '' // mark.dept is 'general' // mark.projects is [] var fred = new salesperson; // fred.name is '' // fred.dept is 'sales' // fred.projects is [] // fred.quota is
100 var jane = new engineer; // jane.name is '' // jane.dept is 'engineering' // jane.projects is [] // jane.machine is '' object properties this section discusses how objects inherit properties from other objects in the prototype chain and what happens when you add a property at run time.
RangeError: radix must be an integer - JavaScript
for example, the decimal (base
10) number 169 is represented in hexadecimal (base 16) as a9.
...a radix that is larger than
10 uses alphabetical characters as digits; therefore, the radix can't be larger than 36, since the latin alphabet (used by english and many other languages) only has 26 characters.
... the most common radixes: 2 for binary numbers, 8 for octal numbers,
10 for decimal numbers, 16 for hexadecimal numbers.
... examples invalid cases (42).tostring(0); (42).tostring(1); (42).tostring(37); (42).tostring(150); // you cannot use a string like this for formatting: (12071989).tostring('mm-dd-yyyy'); valid cases (42).tostring(2); // "
101010" (binary) (13).tostring(8); // "15" (octal) (0x42).tostring(
10); // "66" (decimal) (
100000).tostring(16) // "186a0" (hexadecimal) ...
Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
%b %y'); console.log(date); // in german locale // "freitag,
10.
... märz 2017" alternative standard syntax using the ecmascript intl api the ecma-402 (ecmascript intl api) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in chrome 24+, firefox 29+, ie11+, safari
10+).
... var today = new date(); var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; var date = today.tolocaledatestring('de-de', options); console.log(date); // "freitag,
10.
... (new date()).tolocaleformat("%y%m%d"); // "201703
10" can be converted to: let now = new date(); let date = now.getfullyear() *
10000 + (now.getmonth() + 1) *
100 + now.getdate(); console.log(date); // "201703
10" ...
Array.prototype.reduce() - JavaScript
arguments and return values in each call being as follows: callback iteration accumulator currentvalue currentindex array return value first call 0 1 1 [0, 1, 2, 3, 4] 1 second call 1 2 2 [0, 1, 2, 3, 4] 3 third call 3 3 3 [0, 1, 2, 3, 4] 6 fourth call 6 4 4 [0, 1, 2, 3, 4]
10 the value returned by reduce() would be that of the last callback invocation (
10).
...low will produce the same output as the code in the block above: [0, 1, 2, 3, 4].reduce( (accumulator, currentvalue, currentindex, array) => accumulator + currentvalue ) if you were to provide an initialvalue as the second argument to reduce(), the result would look like this: [0, 1, 2, 3, 4].reduce((accumulator, currentvalue, currentindex, array) => { return accumulator + currentvalue },
10) callback iteration accumulator currentvalue currentindex array return value first call
10 0 0 [0, 1, 2, 3, 4]
10 second call
10 1 1 [0, 1, 2, 3, 4] 11 third call 11 2 2 [0, 1, 2, 3, 4] 13 fourth call 13 3 3 [0, 1, 2, 3, 4] 16 fifth call 16 4 4 [0, 1, ...
...5) }) } // promise function 2 function p2(a) { return new promise((resolve, reject) => { resolve(a * 2) }) } // function 3 - will be wrapped in a resolved promise by .then() function f3(a) { return a * 3 } // promise function 4 function p4(a) { return new promise((resolve, reject) => { resolve(a * 4) }) } const promisearr = [p1, p2, f3, p4] runpromiseinsequence(promisearr,
10) .then(console.log) // 1200 function composition enabling piping // building-blocks to use for composition const double = x => x + x const triple = x => 3 * x const quadruple = x => 4 * x // function composition enabling pipe functionality const pipe = (...functions) => input => functions.reduce( (acc, fn) => fn(acc), input ) // composed functions for multiplication of specific v...
...alues const multiply6 = pipe(double, triple) const multiply9 = pipe(triple, triple) const multiply16 = pipe(quadruple, quadruple) const multiply24 = pipe(double, triple, quadruple) // usage multiply6(6) // 36 multiply9(9) // 81 multiply16(16) // 256 multiply24(
10) // 240 write map using reduce if (!array.prototype.mapusingreduce) { array.prototype.mapusingreduce = function(callback, thisarg) { return this.reduce(function(mappedarray, currentvalue, index, array) { mappedarray[index] = callback.call(thisarg, currentvalue, index, array) return mappedarray }, []) } } [1, 2, , 3].mapusingreduce( (currentvalue, index, array) => currentvalue + index + array.length ) // [5, 7, ,
10] specifications specification ecmascript (ecma-262)the de...
Array.prototype.reduceRight() - JavaScript
tor + currentvalue; }); the callback would be invoked four times, with the arguments and return values in each call being as follows: callback accumulator currentvalue index array return value first call 4 3 3 [0, 1, 2, 3, 4] 7 second call 7 2 2 [0, 1, 2, 3, 4] 9 third call 9 1 1 [0, 1, 2, 3, 4]
10 fourth call
10 0 0 [0, 1, 2, 3, 4]
10 the value returned by reduceright would be that of the last callback invocation (
10).
... and if you were to provide an initialvalue, the result would look like this: [0, 1, 2, 3, 4].reduceright(function(accumulator, currentvalue, index, array) { return accumulator + currentvalue; },
10); callback accumulator currentvalue index array return value first call
10 4 4 [0, 1, 2, 3, 4] 14 second call 14 3 3 [0, 1, 2, 3, 4] 17 third call 17 2 2 [0, 1, 2, 3, 4] 19 fourth call 19 1 1 [0, 1, 2, 3, 4] 20 fifth call 20 0 0 [0, 1, 2, 3, 4] 20 the value returned by reduceright this time would be, of course, 20.
... a list of asynchronous functions with callbacks in series each passing their results to the next const waterfall = (...functions) => (callback, ...args) => functions.reduceright( (composition, fn) => (...results) => fn(composition, ...results), callback )(...args); const randint = max => math.floor(math.random() * max) const add5 = (callback, x) => { settimeout(callback, randint(
1000), x + 5); }; const mult3 = (callback, x) => { settimeout(callback, randint(
1000), x * 3); }; const sub2 = (callback, x) => { settimeout(callback, randint(
1000), x - 2); }; const split = (callback, x) => { settimeout(callback, randint(
1000), x, x); }; const add = (callback, x, y) => { settimeout(callback, randint(
1000), x + y); }; const div4 = (callback, x) => { settimeout(callback, ra...
...ndint(
1000), x / 4); }; const computation = waterfall(add5, mult3, sub2, split, add, div4); computation(console.log, 5) // -> 14 // same as: const computation2 = (input, callback) => { const f6 = x=> div4(callback, x); const f5 = (x, y) => add(f6, x, y); const f4 = x => split(f5, x); const f3 = x => sub2(f4, x); const f2 = x => mult3(f3, x); add5(f2, input); } difference between reduce and reduceright var a = ['1', '2', '3', '4', '5']; var left = a.reduce(function(prev, cur) { return prev + cur; }); var right = a.reduceright(function(prev, cur) { return prev + cur; }); console.log(left); // "12345" console.log(right); // "54321" defining composible function the concept of compose function is simple it combines n functions.
Array.prototype.map() - JavaScript
let kvarray = [{key: 1, value:
10}, {key: 2, value: 20}, {key: 3, value: 30}] let reformattedarray = kvarray.map(obj => { let robj = {} robj[obj.key] = obj.value return robj }) // reformattedarray is now [{1:
10}, {2: 20}, {3: 30}], // kvarray is still: // [{key: 1, value:
10}, // {key: 2, value: 20}, // {key: 3, value: 30}] mapping an array of numbers using a function containing an ar...
... doubles = numbers.map(function(num) { return num * 2 }) // doubles is now [2, 8, 18] // numbers is still [1, 4, 9] using map generically this example shows how to use map on a string to get an array of bytes in the ascii encoding representing the character values: let map = array.prototype.map let a = map.call('hello world', function(x) { return x.charcodeat(0) }) // a now equals [72,
101,
108,
108, 111, 32, 87, 111, 114,
108,
100] using map generically queryselectorall this example shows how to iterate through a collection of objects collected by queryselectorall.
... function returnint(element) { return parseint(element,
10) } ['1', '2', '3'].map(returnint); // [1, 2, 3] // actual result is an array of numbers (as expected) // same as above, but using the concise arrow function syntax ['1', '2', '3'].map( str => parseint(str) ) // a simpler way to achieve the above, while avoiding the "gotcha": ['1', '2', '3'].map(number) // [1, 2, 3] // but unlike parseint(), number() will also return a float or (resolved) exp...
...onential notation: ['1.1', '2.2e2', '3e300'].map(number) // [1.1, 220, 3e+300] // for comparison, if we use parseint() on the array above: ['1.1', '2.2e2', '3e300'].map( str => parseint(str) ) // [1, 2, 3] one alternative output of the map method being called with parseint as a parameter runs as follows: let xs = ['
10', '
10', '
10'] xs = xs.map(parseint) console.log(xs) // actual result of
10,nan,2 may be unexpected based on the above description.
BigInt - JavaScript
description a bigint is created by appending n to the end of an integer literal —
10n — or by calling the function bigint().
... const multi = previousmaxsafe * 2n // ↪ 18014398509481982n const subtr = multi –
10n // ↪ 18014398509481972n const mod = multi %
10n // ↪ 2n const bign = 2n ** 54n // ↪ 18014398509481984n bign * -1n // ↪ –18014398509481984n the / operator also works as expected with whole numbers.
... ↪ 2n const rounded = 5n / 2n // ↪ 2n, not 2.5n comparisons a bigint is not strictly equal to a number, but it is loosely so: 0n === 0 // ↪ false 0n == 0 // ↪ true a number and a bigint may be compared as usual: 1n < 2 // ↪ true 2n > 1 // ↪ true 2 > 2 // ↪ false 2n > 2 // ↪ false 2n >= 2 // ↪ true they may be mixed in arrays and sorted: const mixed = [4n, 6, -12n,
10, 4, 0, 0n] // ↪ [4n, 6, -12n,
10, 4, 0, 0n] mixed.sort() // default sorting behavior // ↪ [ -12n, 0, 0n,
10, 4n, 4, 6 ] mixed.sort((a, b) => a - b) // won't work since subtraction will not work with mixed types // typeerror: can't convert bigint to number // sort with an appropriate numeric comparator mixed.sort((a, b) => (a < b) ?
...1 : 0)) // ↪ [ -12n, 0, 0n, 4n, 4, 6,
10 ] note that comparisons with object-wrapped bigints act as with other objects, only indicating equality when the same object instance is compared: 0n === object(0n) // false object(0n) === object(0n) // false const o = object(0n) o === o // true conditionals a bigint behaves like a number in cases where: it is converted to a boolean: via the boolean function; when used with logical operators ||, &&, and !; or within a conditional test like an if statement.
Date.prototype.getTime() - JavaScript
// reduced time precision (2ms) in firefox 60 new date().gettime(); // 1519211809934 // 15192118
10362 // 1519211811670 // ...
... in firefox, you can also enable privacy.resistfingerprinting, the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
... // since month is zero based, birthday will be january
10, 1995 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.
... var end, start; start = new date(); for (var i = 0; i <
1000; i++) { math.sqrt(i); } end = new date(); console.log('operation took ' + (end.gettime() - start.gettime()) + ' msec'); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.gettime' in that specification.
Date.parse() - JavaScript
description the parse() method takes a date string (such as "2011-
10-
10t14:48:00") and returns the number of milliseconds since january 1, 1970, 00:00:00 utc.
...(see the section date time string format in the ecmascript specification for more details.) for example, "2011-
10-
10" (date-only form), "2011-
10-
10t14:48:00" (date-time form), or "2011-
10-
10t14:48:00.000+09:00" (date-time form with milliseconds and time zone) can be passed and will be parsed.
...the string "
10 06 2014" is an example of a non-conforming iso format and thus falls back to a custom routine.
... new date('
10 06 2014'); will be treated as a local date of 6 october, 2014, and not
10 june, 2014.
JSON.stringify() - JavaScript
if this is a number, it indicates the number of space characters to use as white space; this number is capped at
10 (if it is greater, the value is just
10).
... if this is a string, the string (or the first
10 characters of the string, if it's longer than that) is used as white space.
...6-01-02t15:04:05.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', 1: 'bar', baz: 'quux' ] json.stringify(a); // '["foo","bar"]' json.stringify({ x: [
10, undefined, function(){}, symbol('')] }); // '{"x":[
10,null,null,null]}' // standard data structures json.stringify([new set([1]), new map([[1, 2]]), new weakset([{a: 1}]), new weakmap([[{a: 1}, 2]])]); // '[{},{},{},{}]' // typedarray json.stringify([new int8array([1]), new int16array([1]), new int32array([1])]); // '[{"0":1},{"0":1},{"0":1}]' json.stringify([new uint8array([1]), new uint8clam...
... if it is a number, successive levels in the stringification will each be indented by this many space characters (up to
10).
Math.log() - JavaScript
if you need the natural log of 2 or
10, use the constants math.ln2 or math.ln
10 .
... if you need a logarithm to base 2 or
10, use math.log2() or math.log
10() .
... examples using math.log() math.log(-1); // nan, out of range math.log(0); // -infinity math.log(1); // 0 math.log(
10); // 2.302585092994046 using math.log() with a different base the following function returns the logarithm of y with base x (ie.
... logxy\log_x y): function getbaselog(x, y) { return math.log(y) / math.log(x); } if you run getbaselog(
10,
1000) it returns 2.9999999999999996 due to floating-point rounding, which is very close to the actual answer of 3.
WebAssembly.Global - JavaScript
69chrome android full support 69firefox android full support 62opera android no support nosafari ios no support nosamsung internet android full support
10.0nodejs no support noglobal() constructorchrome full support 69edge no support nofirefox full support 62ie no support noopera no support ...
... 69chrome android full support 69firefox android full support 62opera android no support nosafari ios no support nosamsung internet android full support
10.0nodejs no support novaluechrome full support 69edge no support nofirefox full support 62ie no support noopera no support nosafar...
... 69chrome android full support 69firefox android full support 62opera android no support nosafari ios no support nosamsung internet android full support
10.0nodejs no support novalueofchrome full support 69edge no support nofirefox full support 62ie no support noopera no support nosaf...
... 69chrome android full support 69firefox android full support 62opera android no support nosafari ios no support nosamsung internet android full support
10.0nodejs no support nolegend full support full support no support no support ...
WebAssembly.Memory() constructor - JavaScript
the following example creates a new webassembly memory instance with an initial size of
10 pages (640kib), and a maximum size of
100 pages (6.4mib).
... var memory = new webassembly.memory({initial:
10, maximum:
100}); the second way to get a webassembly.memory object is to have it exported by a webassembly module.
... webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(obj => { var i32 = new uint32array(memory.buffer); for (var i = 0; i <
10; i++) { i32[i] = i; } var sum = obj.instance.exports.accumulate(0,
10); console.log(sum); }); creating a shared memory by default, webassembly memories are unshared.
... you can create a shared memory by passing shared: true in the constructor's initialization object: let memory = new webassembly.memory({initial:
10, maximum:
100, shared:true}); this memory's buffer property will return a sharedarraybuffer.
WebAssembly.Memory - JavaScript
the following example creates a new webassembly memory instance with an initial size of
10 pages (640kib), and a maximum size of
100 pages (6.4mib).
... var memory = new webassembly.memory({initial:
10, maximum:
100}); the second way to get a webassembly.memory object is to have it exported by a webassembly module.
... webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(obj => { var i32 = new uint32array(memory.buffer); for (var i = 0; i <
10; i++) { i32[i] = i; } var sum = obj.instance.exports.accumulate(0,
10); console.log(sum); }); creating a shared memory by default, webassembly memories are unshared.
... you can create a shared memory by passing shared: true in the constructor's initialization object: let memory = new webassembly.memory({initial:
10, maximum:
100, shared: true}); this memory's buffer property will return a sharedarraybuffer.
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: 3...
... const {a =
10, b = 5} = {a: 3}; console.log(a); // 3 console.log(b); // 5 assigning to new variables names and providing default values a property can be both 1) unpacked from an object and assigned to a variable with a different name and 2) assigned a default value in case the unpacked value is undefined.
... const {a: aa =
10, b: bb = 5} = {a: 3}; console.log(aa); // 3 console.log(bb); // 5 unpacking fields from objects passed as function parameter const user = { id: 42, displayname: 'jdoe', fullname: { firstname: 'john', lastname: 'doe' } }; function userid({id}) { return id; } function whois({displayname, fullname: {firstname: name}}) { return `${displayname} is ${name}`; } console.log(userid(user)); // 42 console.log(whois(user)); // "jdoe is john" this unpacks the id, displayname and firstname from the user object and prints them.
... let {a, b, ...rest} = {a:
10, b: 20, c: 30, d: 40} a; //
10 b; // 20 rest; // { c: 30, d: 40 } invalid javascript identifier as a property name destructuring can be used with property names that are not valid javascript identifiers by providing an alternative identifier that is valid.
Strict mode - JavaScript
duplicate property names are a syntax error in strict mode: this is no longer the case in ecmascript 2015 (bug
1041128).
... var a = 0o
10; // es2015: octal novice developers sometimes believe a leading zero prefix has no semantic meaning, so they use it as an alignment device — but this changes the number's meaning!
...syntax error 197 + 142; var sumwithoctal = 0o
10 + 8; console.log(sumwithoctal); // 16 seventh, strict mode in ecmascript 2015 forbids setting properties on primitive values.
...internet explorer below version
10!).
Media container formats (file types) - Web media technologies
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 older versions of safari, plus other browsers that supported apple's quicktime plugin webm web media chrome 6, edge 173 (desktop only), firefox 4, opera
10.6, safari (webrtc only) [1] unless otherwise specified, both mobile and desktop browser compatibility is implied if a browser is listed here.
...in addition, the quicktime framework has been deprecated on the mac for some time, and is no longer available at all starting in macos
10.15 catalina.
... audio codecs supported by wave codec browser support chrome edge firefox safari adpcm (adaptive differential pulse code modulation) no gsm 06.
10 no lpcm (linear pulse code modulation) yes mpeg-1 audio layer iii (mp3) no µ-law (u-law) no webm webm (web media) is a format based on matroska which is designed specifically for use in modern web environments.
... webm was first introduced in 20
10 and is now widely supported.
Performance fundamentals - Web Performance
users prefer, say, a responsive, smooth app that only processes 1,000 database transactions per second, over a choppy, unresponsive app that processes
100,000,000 per second.
...this is a familiar concept: everyone prefers, say, games that display 60 frames per second over ones that display
10 frames per second, even if they can't explain why.
...an ideal system would maintain
100% of user state at all times: all applications in the system would run simultaneously, and all applications would retain the state created by the user the last time the user interacted with the application (application state is stored in computer memory, which is why the approximation is close).
...that doesn’t mean you can't use straight html as the source; just read it once and then scroll
10 elements, changing the content of the first and last accordingly to your position in the results list, instead of moving
100 elements that aren’t visible.
Recommended Web Performance Timings: How long is too long? - Web Performance
realize a document takes about 6ms to render a frame, leaving about
10ms for the rest.
... responsiveness goal when the user interacts with content, it is important to provide feedback and acknowledge the user's response or interaction and to do so within
100ms, preferably within 50ms.
...while a slower than
100ms reaction may create a disconnect between the user interaction and the response, a
100 to 200ms transition for a response may help the user notice the response their interaction initiated, such as a menu opening.
... if a response takes longer than
100ms to complete, provide some form of feedback to inform the user the interaction has occurred.
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.35" fy="0.35" 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.75" fy="0.35" 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" ...
...r="
100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cx for the element whether the value for cx was inherited or not.
... 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.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="
100%" stop-color="blue"/> </radialgradient> </defs> <rect x="
10" y="
10" rx="15" ry="15" 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="35" cy="35" 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.35" fy="0.35" 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.35" fy="0.75" 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" ...
...r="
100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cy for the element whether the value for cy was inherited or not.
... 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.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="
100%" stop-color="blue"/> </radialgradient> </defs> <rect x="
10" y="
10" rx="15" ry="15" 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="35" cy="35" 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.
patternContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:
100% } <svg viewbox="0 0 200
100" xmlns="http://www.w3.org/2000/svg"> <!-- a pattern tile that content coordinates and values are computed against the current coordinate user space.
... note that the size of the tile is computed against the bounding box of the target element --> <pattern id="p1" width="20%" height="20%" patterncontentunits="userspaceonuse"> <circle cx="
10" cy="
10" r="
10" /> </pattern> <!-- a pattern tile that content coordinates and values are computed against the bounding box of the target element.
... note that the size of the tile is also computed against the bounding box of the target element --> <pattern id="p2" width="20%" height="20%" patterncontentunits="objectboundingbox"> <circle cx=".1" cy=".1" r=".1" /> </pattern> <!-- left square with user space tiles --> <rect x="
10" y="
10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="1
10" y="
10" width="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patterncontentunits defines the coordinate system in use for the content of the element.
...a bounding box could be considered the same as if the content of the <pattern> were bound to a "0 0 1 1" viewbox for a pattern tile of width and height of
100%.
spreadMethod - SVG: Scalable Vector Graphics
examples of spreadmethod with linear gradients svg <svg width="220" height="150" 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"/> <stop offset="
100%" stop-color="orange"/> </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="75%" cy="25%" 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="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="
100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialrepeatgradient" ...
... spreadmethod="repeat" cx="75%" cy="25%" 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-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="...
... example html,body,svg { height:
100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.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 --> ...
... example html,body,svg { height:
100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "round" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="round" /> <!-- effect of the "round" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="round" /> <!-- the following pink lines highlight the position of the path for each stroke -...
... example html,body,svg { height:
100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "square" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="square" /> <!-- effect of the "square" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke...
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.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:
100% } <svg viewbox="0 0 20
10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="
100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0" stop-color="black"...
... /> <stop offset="
100%" stop-color="red" /> </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 'x1' in that specification.
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.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value
100% animatable yes example html,body,svg { height:
100% } <svg viewbox="0 0 20
10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="
100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="
100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset="0" stop-color="bla...
...ck" /> <stop offset="
100%" stop-color="red" /> </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 'x2' in that specification.
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.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:
100% } <svg viewbox="0 0 20
10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top 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="95%" 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.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:
100% } <svg viewbox="0 0 20
10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top 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="95%" 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.
<feComponentTransfer> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 300"> <defs> <lineargradient id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="
100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset="1" stop-color="#800080"></stop> </lineargradient> <filter id="identity" x="0" y="0" width="1...
...00%" height="
100%"> <fecomponenttransfer> <fefuncr type="identity"></fefuncr> <fefuncg type="identity"></fefuncg> <fefuncb type="identity"></fefuncb> <fefunca type="identity"></fefunca> </fecomponenttransfer> </filter> <filter id="table" x="0" y="0" width="
100%" height="
100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 0 1 1"></fefuncr> <fefuncg type="table" tablevalues="1 1 0 0"></fefuncg> <fefuncb type="table" tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="discrete" x="0" y="0" width="
100%" height="
100%"> <fecomponenttransfer> <fefuncr type="discrete" tablevalues="0 0 1 1"></fefuncr> <fefuncg type="discrete" tablevalues="1 1 0 ...
...0"></fefuncg> <fefuncb type="discrete" tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="linear" x="0" y="0" width="
100%" height="
100%"> <fecomponenttransfer> <fefuncr type="linear" slope="0.5" intercept="0"></fefuncr> <fefuncg type="linear" slope="0.5" intercept="0.25"></fefuncg> <fefuncb type="linear" slope="0.5" intercept="0.5"></fefuncb> </fecomponenttransfer> </filter> <filter id="gamma" x="0" y="0" width="
100%" height="
100%"> <fecomponenttransfer> <fefuncr type="gamma" amplitude="4" exponent="7" offset="0"></fefuncr> <fefuncg type="gamma" amplitude="4" exponent="4" offset="0"></fefuncg> <fefuncb type="gamma" amplitude="4" exponent="1" offset="0"></fefuncb> <...
.../fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <text x="0" y="20">default</text> <rect x="0" y="30" width="
100%" height="20"></rect> <text x="0" y="70">identity</text> <rect x="0" y="80" width="
100%" height="20" style="filter:url(#identity)"></rect> <text x="0" y="120">table lookup</text> <rect x="0" y="130" width="
100%" height="20" style="filter:url(#table)"></rect> <text x="0" y="170">discrete table lookup</text> <rect x="0" y="180" width="
100%" height="20" style="filter:url(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="230" width="
100%" height="20" style="filter:url(#linear)"></rect> <text x="0" y="270">gamma function</text> <rect x="0" y="280" width="
100%" height="20" style="filter:url...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
int implementation status unknown members of svgstylable and svglangspace available in svgelement implementation status unknown svggraphicselement instead of svglocatable and svgtransformable implementation status unknown svggeometryelement with svggeometryelement.ispointinfill() and svggeometryelement.ispointinstroke() methods partially implemented (bug 1239
100).
...), svgelement.blur() not implemented (bug 778654) svgelement.tabindex implemented (bug 778654) document.activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 999964, bug
1019326) allow leading and trailing whitespace in <length>, <angle>, <number> and <integer> implementation status unknown form feed (u+000c) in whitespace implementation status unknown svgelement.xmlbase, svgelement.xmllang and svgelement.xmlspace removed implementation status unknown svgviewspec removed implementation status unknown svgelemen...
... svggraphicselement.getctm() on the outermost element implementation status unknown animval attribute alias of baseval implementation status unknown dataset attribute for svgelement implementation status unknown moved pathlength attribute and gettotallength() and getpointatlength() methods from svgpathelement to svggeometryelement implemented (bug 1239
100) document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown ref...
...status unknown !important user agent style rules controlling never-rendered elements implementation status unknown :focus and ::selection styles implementation status unknown geometry change notes x and y attributes removed from <pattern> and <filter> implementation status unknown auto value of width and height computes to 0 but
100% on <svg> not implemented coordinate systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation status unknown bounding box for element with no position at (0, 0) implementation status unknown defer keyword removed from preserveaspectratio attribute removed (bug ...
SVG animation with SMIL - SVG: Scalable Vector Graphics
<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="15" 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 le...
... <svg width="300" height="
100"> <title>svg smil animate with transform</title> <rect x="0" y="0" width="300" height="
100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> <animatetransform attributename="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360
100 60" repeatcount="indefinite" /> </re...
... <svg xmlns="http://www.w3.org/2000/svg" width="300" height="
100"> <title>svg smil animate with path</title> <rect x="0" y="0" width="300" height="
100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="3s" repeatcount="indefinite" /> </circle> </svg> view live sample example 2: curved motion same example as before with a curved ...
... <svg width="300" height="
100"> <title>svg smil animate with path</title> <rect x="0" y="0" width="300" height="
100" stroke="black" stroke-width="1" /> <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 250,80 h 50 q 30,80 30,50 q 30,20 50,20 h 250 q 280,20,280,50 q 280,80,250,80z" dur="3s" repeatcount="indefinite" rotate="auto" /> </rect> </svg> ...
Using templates and slots - Web Components
this has more limited support than <template>, available since chrome 53, opera 40, safari
10, firefox 59, and edge 79.
... creating a template with some slots first of all, we use the <slot> element within a <template> element to create a new "element-details-template" document fragment containing some named slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin:
10px 0 -8px 0; } h4 span { background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need name</slot>><...
... adding a final bit of style as a finishing touch, we'll add a tiny bit more css for the <dl>, <dt>, and <dd> elements in our doc: dl { margin-left: 6px; } dt { font-weight: bold; color: #217ac0; font-size: 1
10% } dt { font-family: consolas, "liberation mono", courier } dd { margin-left: 16px } body { margin-top: 47px } result finally let’s put all the snippets together and see what the rendered result looks like.
... full example <!doctype html> <html> <head> <title>slot example</title> <style> dl { margin-left: 6px; } dt { font-weight: bold; color: #217ac0; font-size: 1
10% } dt { font-family: consolas, "liberation mono", courier } dd { margin-left: 16px } </style> </head> <body> <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin:
10px 0 -8px 0; } h4 span { background: #217ac0; padding: ...
timers - Archive of obsolete content
example var { settimeout, cleartimeout } = require("sdk/timers"); var id = settimeout(function() { // do something in 1 sec },
1000); // to stop/cancel this timeout cleartimeout(id); setinterval(callback, ms) schedules callback to be called repeatedly every ms milliseconds.
... example var { setinterval } = require("sdk/timers"); setinterval(function() { // do something every 1 sec },
1000) clearinterval(id) given an id returned from setinterval(), prevents the callback with the id from being called again.
... example var { setinterval, clearinterval } = require("sdk/timers"); var id = setinterval(function() { // do something every 1 sec // to stop/cancel this interval clearinterval(id); },
1000); ...
util/array - Archive of obsolete content
let { has } = require('sdk/util/array'); let a = ['rock', 'roll',
100]; has(a, 'rock'); // true has(a, 'rush'); // false has(a,
100); // true parameters array : array the array to search.
... let { hasany } = require('sdk/util/array'); let a = ['rock', 'roll',
100]; hasany(a, ['rock', 'bright', 'light']); // true hasany(a, ['rush', 'coil', 'jet']); // false parameters array : array the array to search for elements.
... let { unique } = require('sdk/util/array'); let a = [1, 1, 1, 1, 3, 4, 7, 7,
10,
10,
10,
10]; let b = unique(a); console.log(a); // [1, 1, 1, 1, 3, 4, 7, 7,
10,
10,
10,
10]; console.log(b); // [1, 3, 4, 7,
10]; parameters array : array source array.
Canvas code snippets - Archive of obsolete content
s); }; } for (let p of props) { 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, 1
10, 2
10)') .transform(
10, 3, 4, 5, 1, 0) .strokerect(2,
10, 15, 20) .context; // use property name as a function (but without arguments) to get the value var strokestyle = canvas2dcontext(canvas) .strokestyle('rgb(50, 1
10, 2
10)') .strokestyle(); code usable only from privileged code these snippets are only useful from privileged code, such as extensions or privileged apps.
...if you try running the code as a plain webpage, you will get a 'security error" code: "
1000' error.
... remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; 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...
How to convert an overlay extension to restartless - Archive of obsolete content
prior to firefox
10, the chrome.manifest file you rely on wasn't loaded automatically for restartless add-ons.
...the next is example of the code: var overlay = toolbarbutton(toolbarbuttonattrs, panel({'id': 'thepanel', 'type': 'arrow'}, hbox({'align': 'start'}, vbox( hbox({'class': 'pixel-hbox'}, description({'value': this.stringbundle.getstringfromname('firexpixel.opacity')}), htmlinput({'id': 'opacity-range', 'type': 'range', 'min': '0', 'max': '
10'}) ), hbox({'id': 'pixel-coords', 'class': 'pixel-hbox'}, label({'control': 'coord-x', 'value': 'x:'}), textbox({'id': 'coord-x', 'class': 'coord-box', 'placeholder' : '0'}), label({'control': 'coord-y', 'value': 'y:'}), textbox({'id': 'coord-y', 'class': 'coord-box', 'placeholder': '0'}) ...
... step
10: bypass cache when loading properties files the above will get you a working add-on that will install without a firefox restart.
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
- #include "nsastring.h"- #include "nsstring.h"- #include "nsreadableutils.h"- #include "nsescape.h" + #include "nsstringapi.h" on windows, if you see the following error, you are including a header you shouldn't be: nsstringfwd.h(60) : fatal error c
1001: internal compiler error to debug this error, make in the failing directory, adding the /showincludes directive to figure out what is being included incorrectly: make -c directory/that/failed os_cppflags=-showincludes the frozen string api is similar but not identical to the nonfrozen string api.
... #include <string.h> const char *str = "foo"; - pruint32 len = nscrt::strlen(str); + pruint32 len = strlen(str); - #include "nscrt.h" + #include "nscrtglue.h" const prunichar str[] = {'f','o','o','\0'}; - pruint32 len = nscrt::strlen(str); + pruint32 len = ns_strlen(str); - #include "nscrt.h" + #include "nsmemory.h" + #include "nscrtglue.h" prunichar* anotherstr = (prunichar*) ns_alloc(
100 * sizeof(prunichar)); - prunichar *str = nscrt::strdup(anotherstr); - nscrt::free(str); + prunichar *str = ns_strdup(anotherstr); + ns_free(str); linking for information about the correct libraries to link to when using frozen linkage, see xpcom glue.
...note that you must pass the radix (normally
10).
Signing an XPI - Archive of obsolete content
this article is a mirror of the original, with minor reformatting, some new info and all links updated in march 20
10.
...for windows, you'll want the nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc6.0/winnt5.0_opt.obj/ folder - it is by 20
10 the only one with the right binaries.
...you can get a free certificate for open-source developers from unizeto certum, in 20
10 it is a certum level iii ca.
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
so the following piece of html defines an iframe element which is not visible to the user: <div style="visibility:hidden; position:absolute; top:-
1000px; left:-
1000px"> <iframe id="bridgeframe" src=""></iframe> </div> the javascript code located in the data loader component will be interacting with this iframe element, requesting data from the server.
...the following xml datasources are used in this sample: http://web.archive.org/web/20090624020048/http://devedge-temp.mozilla.org/central/dom/catalog-new_en.xml http://web.archive.org/web/20090218052509/http://devedge-temp.mozilla.org/central/xml/catalog-new_en.xml http://web.archive.org/web/20
100913225355/http://devedge-temp.mozilla.org/central/css/catalog-new_en.xml http://web.archive.org/web/20090218052536/http://devedge-temp.mozilla.org/viewsource/catalog-new_en.xml data binder component this procedure traverses the dom that was returned via xmlhttprequest and generates markup based on the data provided in the dom nodes.
...lldevedge('/central/xml/catalog-new_en.xml',this);return false;\" title=\"xml articles\">xml</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/dom/catalog-new_en.xml ',this);return false;\" title=\"dom articles\">dom</a></span>"); } </script> <!-- ***** this represents the container ***** --> <div style="margin-left:0px;border:1px solid #dddddd;" > <div style="padding:
10px;" id="container"> </div> </div> </body> </html> original document information author(s): marcio galli, netscape communications; roger soares, intelinet.com.br; ian oeschger, netscape communications last updated date: published 16 may 2003 copyright information: copyright © 2001-2003 netscape.
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.
JavaScript Client API - Archive of obsolete content
it also has to maintain a "score", which is a number from 0 to
100 which represents "how badly does this data type need to be synced right now".
...setting it to
100 means "sync me immediately".
...*/ this.addchangedid(guid); // update the score as you see fit: this.score +=
10; } }; writing an engine class your engine class serves to tie together your store, tracker, and record classes into a bundle that the sync service can instantiate and use.
Monitoring downloads - Archive of obsolete content
= document.createelement('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltiptext", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute("label", (statement.getint64(1) /
1024).tofixed(1) + "kb"); // size cell.setattribute("style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint64(2) /
1000); // start time cell = document.createelement('listcell'); var datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); thedate = new date...
...(statement.getint64(3)); // end time cell = document.createelement('listcell'); datestr = 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"; ...
... note that the start time is being divided by
1000 before we create a javascript date object from it.
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 source 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 15 not in use load 16 not in use 17 ldc2i...
...quad 64 bit bitwise-and quad 94 orq quad 64 bit bitwise-or quad 95 xorq quad 64 bit bitwise-xor quad 96 lshq quad 64 bit left shift quad,2nd operand is an int 97 rshq quad 64 bit right shift quad, 2nd operand is an int 98 rshuq quad 64 bit right shift unsigned quad; 2nd operand is an int 99 negd double negate double
100 addd double add double
101 subd double subtract double
102 muld double multiply double
103 divd double divide double
104 modd double modulo double lir_modd is just a place-holder opcode, ie.
...
105 cmovi integer conditional move int
106 cmovq quad 64 bit conditional move quad
107 cmovd double conditional move double conversions
108 i2q quad 64 bit sign-extend int to quad
109 ui2uq quad 64 bit zero-extend unsigned int to unsigned quad 1
10 q2i integer 64 bit truncate quad to int (removes the high 32 bits) 111 i2d double convert int to double 112 ui2d double convert unsigned int to double 113 d2i integer convert double to int (no exceptions raised) 114 dasq quad 64 ...
Actionscript Performance Tests - Archive of obsolete content
for example if the mean is
100 and the 95% confidence interval is 2%, 95% of the expected values should fall between 98 and
102.
...# change the iterations $ ./runtests.py --iterations=
10 sunspider/*.as test avm 95% conf metric sunspider/access-binary-trees.as 565 1.0% time [565, 586, 573, 577, 567, 567, 579, 576, 565, 585] sunspider/access-fannkuch.as 361 0.3% time [365, 366, 362, 363, 366, 361, 363, 363, 364, 364] ...
...# compare 2 builds with > 2 iterations $ ./runtests.py --iterations=
10 --avm2=build2/avmshell sunspider/*.as test avm avm2 min : max avg min : max avg %diff metric ----------------------- ----------------------- ----- sunspider/access-binary-trees.as ...
Running Tamarin acceptance tests - Archive of obsolete content
$ cd tamarin-redux/test/acceptance $ export 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: 20
10-09-28
10:37:06.4
10676 current configuration: x64-mac-tvm-release avm version: 5260:6d1899261bac executing 2532 tests against vm: /users/build/hg/builds/5260-6d1899261bac/mac/avmshell_64 2532 running abcasm/abs_helper.as skipping...
...reason: inconsistencies in different debug output, need to implement regex matching of diffs 2527 running abcasm/branchtocommon.abs 2530 running abcasm/arithmetic.abs 2529 running abcasm/bkpt.abs 2528 running abcasm/bkptline.abs 2526 running abcasm/bug_476556.abs 2524 running abcasm/bug_49
1056.abs ...
...tests complete at 20
10-09-28
10:39:26.751797 start date: 20
10-09-28
10:38:07.221457 end date : 20
10-09-28
10:39:26.751797 test time : 0:01:19.530340 passes : 59291 failures : 0 expected failures : 75 tests skipped : 76 the -f flag tells runtests.py to force recompilation of all the scripts.
Reading from Files - Archive of obsolete content
this example keeps reading
10 character strings from a file until there is no more data to read.
...while(stream.available()) output += stream.readstring(
10); the close method is used at the end to close the stream when you are finished reading from it.
...if you want the sign bit to be interpreted such that negative values can be read, you can use a simple calculation to convert the value: var val = stream.read16(); if (val > 0x7fff) val = ~(0x
10000 - val - 1); sometimes, a file will contain bytes that have the value zero.
accessibleType - Archive of obsolete content
possible values are: constant value xulalert
1001 xulbutton
1002 xulcheckbox
1003 xulcolorpicker
1004 xulcolorpickertile
1005 xulcombobox
1006 xuldropmarker
1007 xulgroupbox
1008 xulimage
1009 xullink
100a xullistbox
100b xullistcell
1026 ...
... xullisthead
1024 xullistheader
1025 xullistitem
100c xulmenubar
100d xulmenuitem
100e xulmenupopup
100f xulmenuseparator
1010 xulpane
1011 xulprogressmeter
1012 xulscale
1013 xulstatusbar
1014 xulradiobutton
1015 xulradiogroup
1016 xultab
1017 xultabbox
1018 xultabs
1019 xultext
101a xulte...
...xtbox
101b xulthumb
101c xultree
101d xultreecolumns
101e xultreecolumnitem
101f xultoolbar
1020 xultoolbarseparator
1021 xultooltip
1022 xultoolbarbutton
1023 ...
Progress Meters - Archive of obsolete content
determinate progress meter: indeterminate progress meter: the progress meter has the following syntax: <html:progress id="identifier" mode="determined" value="50" max="
100"/> the attributes are as follows: id the unique identifer of the progress meter mode the type of the progress meter.
...the value should be set to an integer percentage from 0 to
100.
... <textbox id="find-text"/> <html:progress value="50" max="
100" style="margin: 4px;"/> <button id="find-button" label="find" default="true"/> the value has been set to 50% so that we can see the meter on the window.
Property Files - Archive of obsolete content
var dir = "/usr/local/document"; var count =
10; var strbundle = document.getelementbyid("strings"); var result = strbundle.getformattedstring("resultmessage", [ dir, count ]); alert(result); this example will display following message in an alert box.
...
10 files found in the /usr/local/document directory.
... « previousnext » see also how to localize html pages, xul files, and js/jsm files from bootstrapped add-ons: bootstrapped extensions :: localization (l
10n) ...
Using Spacers - Archive of obsolete content
flex examples example 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: <bu...
... example 2 here, both buttons will grow, but the find button will grow ten times as much as the cancel button, because it has a flex value that is
10 times the flex value of the find button.
... available space will be divided into
10 parts for the find button and one part for the cancel button.
datepicker - Archive of obsolete content
dateleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the date when it is less than
10.
... monthleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the month when it is less than
10.
... yearleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the year when it is less than
1000.
scale - Archive of obsolete content
attributes dir, disabled, increment, max, min, movetoclick, pageincrement, tabindex, value properties disabled, max, min, increment, pageincrement, tabindex, value, methods decrease, decreasepage, increase, increasepage, examples horizontal scale: <scale min="1" max="
10"/> vertical scale: <scale min="1" max="
10" orient="vertical"/> attributes dir type: one of the values below the direction in which the child elements of the element are placed.
...the default value is
100 for scales and infinity for number boxes.
...the default value is
10.
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.
timepicker - Archive of obsolete content
hourleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the hour when it is less than
10.
... minuteleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the minute when it is less than
10.
... secondleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the second when it is less than
10.
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.
... the runtime requirement is mac os x
10.2.
...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/2007
1025 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.
Getting started with XULRunner - Archive of obsolete content
in ubuntu desktop and its variants (xubuntu, kubuntu, ...), from version 11.
10 (oneiric ocelot), xulrunner is not longer maintained and doesn't exist in ubuntu repository.
...here is mine: [app] vendor=xultest name=myapp version=1.0 buildid=20
100901 id=xulapp@xultest.org [gecko] minversion=1.8 maxversion=200.* note: the minversion and maxversion fields indicate the range of gecko versions your application is compatible with; make sure that you set them so that the version of xulrunner you're using is in that range, or your application won't work.
...this particular screenshot is from ubuntu
10.
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.l
10n - november 24, 2006 announcements thunderbird 2 release schedule for localizations beta 1 freeze for thunderbird 2 is scheduled on december 4th (en-us only).
... feedback on l
10n:ownership draft feedback on the l
10n:ownership draft at mozilla wiki site detailed here.
... authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers
101) ...
Common Firefox theme issues and solutions - Archive of obsolete content
@media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox
10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread.
...url("chrome://browser/skin/devtools/treepanel-button.png"); -moz-margin-end: 0; -moz-image-region: rect(0px 18px 16px 0px); } /* highlighter toolbar */ #inspector-inspect-toolbutton { list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); -moz-image-region: rect(0px 16px 16px 0px); } style inspector is completely unstyled the style inspector that is part of firefox
10 and later needs to be styled.
... warning: if you copy over the firefox 11 or newer style rules and graphics from the media folder in omni.ja you need to make the following changes in videocontrols.css or the pause and mute buttons will break in firefox
10.
-ms-content-zoom-limit - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-content-zoom-limit-max: 400%-ms-content-zoom-limit-min:
100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesas each of the properties of the shorthand:-ms-content-zoom-limit-max: the largest allowed zoom factor.
... a zoom factor of
100% corresponds to no zooming.
...a zoom factor of
100% corresponds to no zooming.
-ms-filter - Archive of obsolete content
as of internet explorer
10 this feature was removed and should no longer be used.
... 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", e...
...ndcolorstr="#000000", gradienttype=0)'; background-image: linear-gradient(to bottom, #ffffff 0%, #000000
100%); } result specifications not part of any specification.
Examples - Archive of obsolete content
--> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 1 - < in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> var i = 0; while (++i >
10) { // ...
...mlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 2 - comments in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> <!-- body {background-color: blue; color: yellow; } --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i <
10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> </head> <body> <h1>problem 2 - comments in xhtml</h1> <p> this document is valid xhtml 1.0 strict served as <code>application/xhtml+xml</code>.
...> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 3 - comments in xml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> var i; var sum = 0; for (i =
10; i > 0; --i) { sum += i; } </script> </head> <body> <h1>problem 3 - comments in xhtml</h1> <p> this document is not well formed xhtml due to the double dash contained in the comment.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
now more than
10 years later, with netscape's technology group having been transformed into the mozilla foundation, server-side javascript is seeing a strong resurgence because of the simplicity it provides to web developers reinvigorated by the fact that today's cpus can process javascript more than
10x faster than the cpus of the mid-90's ever could.
... listing
10 demonstrates the configuration of a simple service we're able to advertise through jaxer using the data from the database we captured from prior form submissions.
... listing
10 - creating a simple xml service <script runat="server"> var rs_comments = jaxer.db.execute("select * from comments"); var doc = document.implementation.createdocument('', 'comments', null); var root = doc.documentelement; rs_comments.rows.foreach(function(row, index) { if (true || index <
10) { var node = doc.createelement('comment'); node.setattribute('id', row.id); node.setattribute('name', row.name); node.setattribute('message', row.message); root.appendchild(node); } }); jaxer.response.exit(200, doc); </script> the data from the database is represented in xml format as follows: <comments> <comment message="”jaxer" name="”nigel" id="”1”"></comment> ...
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
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%.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index:
10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} note how the image is pushed downward four pixels, while the h3 is pushed rightward four pixels.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index:
10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} div.card p {margin: 0.5em 0.5em 0.5em 160px;} and voila!
Building up a basic demo with A-Frame - Game development
let's try adding a torus — add this element below the previous code: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" rotation="
10 0 0" position="-3 1 0"> </a-entity> our entity has a torus primitive, which represents its shape.
...edit the <a-entity> defining the torus to look like the following: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotation="
10 0 0" position="-3 1 0"> </a-entity> in the new material attribute, we set up the color of the material, then its roughness (a rougher material will scatter reflected light in more directions than a smooth material) and metalness (how metallic the material is).
...add the following <a-animation> element to your torus: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotation="
10 0 0" position="-3 1 0"> <a-animation attribute="scale" to="1 0.5 1" direction="alternate" dur="2000" repeat="indefinite" easing="linear"> </a-animation> </a-entity> the attribute we want to animate for the torus is scale.
Building up a basic demo with Babylon.js - Game development
html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: babylon.js demo</title> <style> html,body,canvas { margin: 0; padding: 0; width:
100%; height:
100%; font-size: 0; } </style> </head> <body> <script src="babylon.js"></script> <canvas id="render-canvas"></canvas> <script> var canvas = document.getelementbyid("render-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element...
... var camera = new babylon.freecamera("camera", new babylon.vector3(0, 0, -
10), scene); there are many cameras available in babylon.js; freecamera is the most basic and universal one.
...add the following line below your camera definition: var light = new babylon.pointlight("light", new babylon.vector3(
10,
10, 0), scene); the parameters are very similar to the previously defined camera: the name of the light, a position in 3d space and the scene to which the light is added.
Building up a basic demo with Three.js - Game development
html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: three.js demo</title> <style> body { margin: 0; padding: 0; } canvas { width:
100%; height:
100%; } </style> </head> <body> <script src="three.min.js"></script> <script> var width = window.innerwidth; var height = window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element, that three.js will insert on the page to
100% ...
...let's start, by defining the geometry for a cube shape, adding the following just above the render() function: var boxgeometry = new three.boxgeometry(
10,
10,
10); in this case, we define a simple cube that is
10 x
10 x
10 units.
...add the following lines, below your shape definitions: var light = new three.pointlight(0xffffff); light.position.set(-
10, 15, 50); scene.add(light); we define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene.
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, 1fr); grid-template-rows:
100px
100px; } lines can ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,
100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows:
100px
100px; } .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,
100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end]; grid-template-rows: [row1-start]
100px [row2-start]
100px [rows-...
Localization - MDN Web Docs Glossary: Definitions of Web-related terms
localization (l
10n) is the process of adapting a software user interface to a specific culture.
....s.) text direction (e.g., european languages are left-to-right, arabic right-to-left) capitalization in latin script (e.g., english uses capitals for weekdays, spanish uses lowercase) adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally) use of register (e.g., in japanese respectful speech differs exceptionally from casual speech) number format (e.g.,
10 000,00 in germany vs.
...
10,000.00 in the u.s.) date format currency cultural references paper size color psychology compliance with local laws local holidays personal names learn more general knowledge localization at mozilla on mdn localization on wikipedia ...
CSS and JavaScript accessibility best practices - Learn web development
there is no rule that says all content has to be
100% accessible to all people — you just need to do what you can, and make your apps as accessible as possible.
...it is arguable that such a game doesn't really have this group of people as a part of its main target audience, and it would be unreasonable to expect you to make it
100% accessible to blind people, however you could implement keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies.
...we didn't end up using these in the demo because cross-browser support for them is patchy (for example ie
10 and above only).
Accessible multimedia - Learn web development
last of all, add the following to the end of the code, to control the time elapsed display: player.ontimeupdate = function() { let minutes = math.floor(player.currenttime / 60); let seconds = math.floor(player.currenttime - minutes * 60); let minutevalue; let secondvalue; if (minutes<
10) { minutevalue = "0" + minutes; } else { minutevalue = minutes; } if (seconds<
10) { secondvalue = "0" + seconds; } else { secondvalue = seconds; } mediatime = minutevalue + ":" + secondvalue; timelabel.textcontent = mediatime; }; each time the time updates (once per second), we fire this function.
... it works out the number of minutes and seconds from the given currenttime value (which is in seconds), adds a leading 0 if either the minute or second value is less than
10, and then creates the display readout and adds it to the time label.
...remember that accessibility is about doing as much as you can, rather than striving for
100% accessibility all the time, which is often impossible.
Fundamental CSS comprehension - Learn web development
float the image to the right so that it sticks to the right hand side of the main business card contents, and give it a max-height of
100% (a clever trick that ensures that it will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.) beware!
... new rulesets you need to write: write a ruleset that targets both the card header, and card footer, giving them both a computed total height of 50px (including a content height of 30px and padding of
10px on all sides.) but express it in ems.
... note: bear in mind that the second ruleset sets font-size:
10px; on the <html> element — this means that for any descendants of <html>, an em will be equal to
10px rather than 16px as it is by default.
The box model - Learn web development
in most cases this means that the box will become as wide as its container, filling up
100% of the space available.
... if we assume that the box has the following css defining width, height, margin, border, and padding: .box { width: 350px; height: 150px; margin:
10px; padding: 25px; border: 5px solid black; } the space taken up by our box using the standard box model will actually be 4
10px (350 + 25 + 25 + 5 + 5), and the height 2
10px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box.
...if you set it to -
10px, you'll see that the overall margin becomes 40px — it subtracts from the 50px.
Multiple-column layout - Learn web development
integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.</p> </div> </div> .container { column-width: 250px; column-gap: 20px; } .card { background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding:
10px; margin: 0 0 1em 0; } to control this behavior we can use properties from the css fragmentation specification.
... .card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding:
10px; margin: 0 0 1em 0; } reload the page and your boxes should stay in one piece.
...integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.</p> </div> </div> .container { column-width: 250px; column-gap: 20px; } .card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding:
10px; margin: 0 0 1em 0; } test your skills!
Normal Flow - Learn web development
by default, a block level element's content is
100% of the width of its parent element, and as tall as its content.
...my adjacent block level elements sit on new lines below me.</p> <p>by default we span
100% of the width of our parent element, and we are as tall as our child content.
...overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: rgba(255,84,
104,0.3); border: 2px solid rgb(255,84,
104); padding:
10px; margin:
10px; } span { background: white; border: 1px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design.
Styling lists - Learn web development
e same vertical spacing as their surrounding elements (such as paragraphs 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.
... 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 #0095dd;"><ul> <li>first, light the candle.</li> <li>next, open the box.</li> <li>finally, place the three magic items in the box, in this exact order, to complete the spell: <ol> <li>the book of spells</li> <li>the shiny rod</li> <li>the goblin statue</li> </ol> </li> </ul></textarea> <h2>css input</h2> <textarea id="code" ...
...class="css-input" style="width: 90%;height:
10em;padding:
10px;border: 1px solid #0095dd;"></textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 12em;padding:
10px;border: 1px solid #0095dd;overflow: auto;"></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.cre...
Example 2 - Learn web development
s content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top :
100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /*
10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width :
10em; /*
100px */ border ...
... : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width :
100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height :
100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; bac...
...kground-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width :
100%; max-height:
10em; /*
100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myf...
Example 3 - Learn web development
content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top :
100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /*
10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width :
10em; /*
100px */ border ...
... : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width :
100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height :
100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; bac...
...kground-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width :
100%; max-height:
10em; /*
100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deacti...
Example 4 - Learn web development
content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top :
100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /*
10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width :
10em; /*
100px */ border ...
... : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width :
100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height :
100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; bac...
...kground-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width :
100%; max-height:
10em; /*
100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deacti...
Example 5 - Learn web development
content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top :
100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /*
10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width :
10em; /*
100px */ border ...
... : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width :
100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height :
100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; bac...
...kground-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width :
100%; max-height:
10em; /*
100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deacti...
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 = '250px'; para.style.textalign = 'center'; reload the page and you'll see that the styles have been applied to the paragraph.
... if you look at that paragraph in your browser's page inspector/dom inspector, you'll see that these lines are indeed adding inline styles to the document: <p style="color: white; background-color: black; padding:
10px; width: 250px; text-align: center;">we hope you enjoyed the ride.</p> note: notice how the javascript property versions of the css styles are written in lower camel case whereas the css versions are hyphenated (e.g.
... add the following inside your html <head>: <style> .highlight { color: white; background-color: black; padding:
10px; width: 250px; 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.
Useful string methods - Learn web development
listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solut...
...li'); listitem.textcontent = result; list.appendchild(listitem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solut...
...li'); listitem.textcontent = result; list.appendchild(listitem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solu...
Client-Server Overview - Learn web development
s 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-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=z...
... post https://developer.mozilla.org/profiles/hamishwillee/edit http/1.1 host: developer.mozilla.org connection: keep-alive content-length: 432 pragma: no-cache cache-control: no-cache origin: https://developer.mozilla.org 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 content-type: application/x-www-form-urlencoded accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/profiles/hamishwillee/edit accept-encoding: gzip, deflate, br accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhb...
... http/1.1 302 found server: apache x-backend-server: developer3.webapp.scl3.mozilla.com vary: cookie vary: accept-encoding content-type: text/html; charset=utf-8 date: wed, 07 sep 2016 00:38:13 gmt location: https://developer.mozilla.org/profiles/hamishwillee keep-alive: timeout=5, max=
1000 connection: keep-alive x-frame-options: deny x-cache-info: not cacheable; request wasn't a get or head content-length: 0 note: the http responses and requests shown in these examples were captured using the fiddler application, but you can get similar information using web sniffers (e.g.
Getting started with Svelte - Learn web development
wing: <script> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight:
100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created.
... the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight:
100; } @media (min-width: 640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element.
...for example, here's the link for a repl running our complete app: https://svelte.dev/repl/378dd79e0dfe4486a8f
10823f3813190?version=3.23.2.
Handling common accessibility problems - Learn web development
note: like many things in web development, accessibility isn't about
100% success or not;
100% accessibility is pretty much impossible to achieve for all content, especially as sites get more complex.
...for example, it would be unreasonable to expect you to make a complex 3d game written using webgl
100% accessible to a blind person, but you could implement keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies.
... here's an example: <p><span id="liveregion1" aria-live="polite" aria-atomic="false"></span></p> you can see an example in action at freedom scientific's aria (accessible rich internet applications) live regions example — the highlighted paragraph should update its content every
10 seconds, and a screenreader should read this out to the user.
Strategies for carrying out testing - Learn web development
there are emulators available for windows mobile oses: see windows phone emulator for windows phone 8 and test with the microsoft emulator for windows
10 mobile (these only run on windows).
...you tend to choose the hard drive space you want for each install; you could get away with probably
10gb, but some sources recommend up to 50gb or more, so the operating system will run reliably.
... having multiple virtual machines is very useful, particularly for windows ie/edge testing — on windows, you are not able to have multiple versions of the default browser installed side by side, so you might want to build up a library of virtual machines to handle different tests as required, e.g.: windows
10 with edge 14 windows
10 with edge 13 windows 8.1 with ie11 windows 8 with ie
10 windows 7 with ie9 windows xp with ie8 windows xp with ie7 windows xp with ie6 note: another good thing about virtual machines is that the virtual disk images are fairly self-contained.
Accessible Toolkit Checklist
tab order must wrap, not have invisible items in tab order dynamically added items must not corrupt the tab cycle or make it disorderly tab cycle must be identical backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visible on any widget, and focus must always be visible shift+f
10 or context menu key should work like right click on focused item, and context menu should show just under and to the right of the current focus.
... multiple selection is possible with ctrl+arrow to move focus without selecting, then space to select item, shift+space to select to current point or control+space to toggle selection of current item shift+f
10 or context menu key to bring up context menu for current item.
...ranch, then move to parent right arrow to first expand a branch, then move to first child multiple selection is possible with ctrl+arrow to move focus without selecting, then space to select item, shift+space to select to current point or control+space to toggle selection of current item typing letter or several letters to navigate (similar to list support for this) shift+f
10 or context menu key to bring up context menu for current item (on os x ctrl+space is used to bring up context menu).
Simple SeaMonkey build
debian linux: # this one-liner should install all necessary build deps sudo aptitude install zip mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libxt-dev libiw-dev libidl-dev mesa-common-dev autoconf2.13 yasm libgtk2.0-dev libdbus-1-dev libdbus-glib-1-dev python-dev libgstreamer0.
10-dev libgstreamer-plugins-base0.
10-dev libpulse-dev ubuntu linux # for ubuntu 12.04 lts (precise pangolin), replace the following line with: sudo apt-get build-dep thunderbird sudo apt-get build-dep seamonkey sudo apt-get install zip unzip mercurial g++ make autoconf2.13 yasm libgtk2.0-dev libglib2.0-dev libdbus-1-dev libdbus-glib-1-dev libasound2-dev libcurl4-openssl-dev lib...
...notify-dev libgstreamer0.
10-dev libgstreamer-plugins-base0.
10-dev libiw-dev libxt-dev mesa-common-dev libpulse-dev fedora linux centos rhel: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel alsa-lib-devel libxt-devel gstreamer-devel gstreamer-plugins-base-devel pulseaudio-libs-devel # 'development tools' is defunct in fedora 19 and above use the following sudo yum groupinstall 'c development tools and libraries' sudo yum group mark install "x software development" mac: install xcode tools.
... if you decided on the windows 8 sdk, you also need the outlook 20
10 mapi header files from microsoft.
The Firefox codebase: CSS Guidelines
writing cross-platform css firefox supports many different platforms and each of those platforms can contain many different configurations: windows 7, 8 and
10 default theme aero basic (windows 7, 8) windows classic (windows 7) high contrast (all versions) linux macos file structure the browser/ directory contains styles specific to firefox the toolkit/ directory contains styles that are shared across all toolkit applications (thunderbird and seamonkey) under each of those two directories, there is a themes directory contai...
...in the following example, -moz-mac-yosemite-theme targets macos
10.
10 and higher, so it should be privileged over the styling for macos
10.9.
... do this: @media (-moz-mac-yosemite-theme: 0) { #placeslist { box-shadow: inset -2px 0 0 hsla(0,0%,
100%,.2); } } not this: #placeslist { box-shadow: inset -2px 0 0 hsla(0,0%,
100%,.2); } @media (-moz-mac-yosemite-theme) { #placeslist { box-shadow: none; } } theme support firefox comes built-in with 3 themes: default, light and dark.
Cross Process Object Wrappers
for example, this frame script sends a dom node to chrome when the user clicks it, as the clicked property of the third argument: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-e
10s-extension-message", {}, { clicked : event.target }); }, false); in the chrome script, the dom node is now accessible through a cross process object wrapper, as a property of the objects property of the message.
... the chrome script can get and set the wrapped object's properties and call its functions: // chrome script windowmm.addmessagelistener("my-e
10s-extension-message", handlemessage); function handlemessage(message) { let wrapper = message.objects.clicked; console.log(wrapper.innerhtml); wrapper.innerhtml = "<h2>modified by chrome!</h2>" wrapper.setattribute("align", "center"); } auto-generated cpows add-ons that have not declared themselves multiprocess compatible are set up with a number of compatibility shims.
... see also: https://mikeconley.ca/blog/2015/02/17/on-unsafe-cpow-usage-in-firefox-desktop-and-why-is-my-nightly-so-sluggish-with-e
10s-enabled/ http://blog.lassey.us/2015/01/
10/unsafe-cpow-usage/ ...
Internationalized Domain Names (IDN) Support in Mozilla Browsers
jprs (japan registry service) decided to move to the new rfc implementation on july
10, 2003, only a few weeks after the icann's guideline was published.
...for example, most sample links on the following test pages can be used without any further setting: http://www.nunames.nu/eu-lang-test.htm (domain names with latin 1 accented characters) http://www.nunames.nu/lldemo/default.htm (domain names in other languages) on july
10, 2003 and thereafter, you can access a large number of japanese domain name sites under the .jp top domain with no further setting on netscape 7.1/mozilla 1.4: http://mitsuketa-nihongo.jp race (row-based ascii compatible encoding) almost all idn registration data are expected to change to punycode by the end of 2003.
...bug 2
10734.) this forces the japanese user to shift out of the japanese input mode to write the top domain names such as .jp causing inconvenience.
SVN for Localizers
enter the following command in your command-line tool: svn checkout https://svn.mozilla.org/projects/mozilla.com/trunk/locales/[your locale code] mozilla-l
10n-[your-localecode] this command creates the mozilla-l
10n-[your-localecode] directory on your computer and copies into it all of the files from https://svn.mozilla.org/projects/moz...om/trunk/locales/[your locale code].
... when localizing websites, l
10n-drivers will always add needed files to your repository or update your files with new strings in english.
... if you have any doubts, ping l
10n-drivers on irc in the #l
10n channel.
Localization formats
there are 4 main approaches to web l
10n with regards to the choice of technology used for localization logic: html/php .lang gettext (.po) wiki (tbd) the choice of the filetype depends on a couple of factors: how much content is there to be localized?
... as every new web-dev project takes shape, a project manager should ask themselves these questions and have the answers ready before starting the web l
10n process.
...t en imprimant votre " "certificat personnalisé firefox 3 download day." advantages of gettext gettext has very powerful tools to update this site (if you use the actual english strings in msgids, not unique identifier strings like certificate_intro) very established with a large set of powerful tools harder to screw things up because existing tools will not allow localizers to edit the l
10n file where they shouldn't separates localizable strings available for localizers for the rest of the code, protecting it from unintended changes disadvantage of gettext .po file needs to be compiled into a .mo file for localizer to see changes using regular diff to see changes to a file is sometimes impossible because the editing tool can save the .po file using a completely different str...
MathML Accessibility in Mozilla
in bug 1175269 and bug
1001641, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions.
... torture test
10: ∑ 0 ≤ i ≤ m 0 < j < n p ( i , j ) __________ sum over fraction 0 is less than or equal to i is less than or equal to m over 0 is less than j is less than n end fraction of cap pee of open i comma j close __________ ∑ p (i, j) see webkit's bug 146...
... y base 3 subscript ‴ superscript scripted d t = φ = 1 + 5 2 , {\displaystyle {\frac {d}{t}}=\varphi ={\frac {1+{\sqrt {5}}}{2}}\ ,} d = t × φ = r 5 + 5 2 = 2 r cos 18 ∘ = 2 r cos π
10 ≈ 1.90211303259 r .
Investigating leaks using DMD heap scan mode
you may want to wait
10 or so seconds after this to make sure as much as possible is cleaned up.
...“-sfl
10000 -a” is useful.
... the -sfl
10000 tells it to not truncate stack frames, and -a tells it to not display generic frames related to the allocator.
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.
...2)); settimeout(snap, 20, destination); } } var timeoutid = null; addeventlistener("scroll", function() { if (timeoutid) cleartimeout(timeoutid); timeoutid = settimeout(snap, 200, parseint(document.getelementbyid('snaptarget').style.top)); }, true); </script> <div id="snaptarget" class="snaptarget" style="position: relative; top: 200px; width:
100%; height: 200px; background-color: green"></div> </body> in this example, there is a scroll event listener which detects if the scroll position is within 200 pixels of the top of the "snaptarget" div.
TraceMalloc
rocessed 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 4754774 76136 6566453 27194 1811679
100.00 nstokenallocator 17 1
10007 60 388260 43 278253 15.36 nsimagegtk 476 2197708 341 2366564 -135 168856 9.32 nsmemcacherecord 843 45767 2328 124767 1485 79000 4.36 nstextnode 209 11704 1614 90384 1405 78680 4.34 htmlattributesimpl 482 14288 2824 88400 2342 74112 ...
...4.09 nsscanner 58 76824 94 146300 36 69476 3.83 nsscripterror 253 25070 842 91548 589 66478 3.67 nshtmldocument.mreferrer 177 21550 691 85460 514 639
10 3.53 nshtmlvalue 139 7846 1215 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.
...leaks: 382739 bytes, 3465 allocations maximum heap size: 7751799 bytes 62095212 bytes were allocated in 39
1091 allocations.
Research and prep
it is one of the most customizable and localizable parts of the product l
10n process, as it goes beyond string translation.
...if this is your first localization for a product, the l
10n drivers will file this bug as part of the new product localization release process.
... it is your l
10n team's responsibility to perform research and identify the most appropriate web services for your region and present them in your bug as your informed recommendations.
L20n Javascript API
ctx.localize(['hello', 'new'], function(l
10n) { var node = document.queryselector('[data-l
10n-id=hello]'); node.textcontent = l
10n.entities.hello.value; node.classlist.remove('hidden'); }); ctx.registerlocales(defaultlocale: string?, availablelocales: array<string>?) register the default locale of the context instance, as well as all other locales available to the context instance before the language negotiation.
... ctx.localize(['hello', 'about'], function(l
10n) { var node = document.queryselector('[data-l
10n-id=hello]'); node.textcontent = l
10n.entities.hello.value; node.classlist.remove('hidden'); }); the callback becomes bound to the entities on the ids list.
... the callback function is passed an l
10n object with the following properties: entities: an object whose keys are the identifiers and value are the entity objects as returned by getentitysync, reason: an object with the reason why callback was invoked.
PRIntervalTime
syntax #include <prinrval.h> typedef pruint32 printervaltime; #define pr_interval_min
1000ul #define pr_interval_max
100000ul #define pr_interval_no_wait 0ul #define pr_interval_no_timeout 0xfffffffful description the units of printervaltime are platform-dependent.
...nspr guarantees that there will be at least
1000 ticks per second and not more than
100000.
... at the maximum resolution of
10000 ticks per second, each tick represents 1/
100000 of a second.
PR_Open
pr_append 0x
10 the file pointer is set to the end of the file prior to each write.
... pr_ixusr 0
100 execute/search permission, owner.
... pr_irwxg 0070 read, write, execute/search by group pr_irgrp 0040 read permission, group pr_iwgrp 0020 write permission, group pr_ixgrp 00
10 execute/search permission, group pr_irwxo 0007 read, write, execute/search by others pr_iroth 0004 read permission, others pr_iwoth 0002 write permission, others pr_ixoth 0001 execute/search permission, others returns the function returns one of the following values: if the file is successfully opened, a pointer to a dynamically allocated prfiledesc for the newly opened file.
Cryptography functions
pk11_freeslotlist mxr 3.2 and later pk11_freeslotlistelement mxr 3.11 and later pk11_freesymkey mxr 3.2 and later pk11_generatefortezzaiv mxr 3.2 and later pk11_generatekeypair mxr 3.2 and later pk11_generatekeypairwithflags mxr 3.
10.2 and later pk11_generatekeypairwithopflags mxr 3.12 and later pk11_generatenewparam mxr 3.2 and later pk11_generaterandom mxr 3.2 and later pk11_generaterandomonslot mxr 3.11 and later pk11_getalltokens mxr 3.2 and later pk11_getallslotsforce...
... mxr 3.2 and later pk11_sign mxr 3.2 and later pk11_signaturelen mxr 3.2 and later pk11_symkeyfromhandle mxr 3.2 and later pk11_tokenexists mxr 3.2 and later pk11_tokenkeygen mxr 3.6 and later pk11_tokenkeygenwithflags mxr 3.
10.2 and later pk11_tokenrefresh mxr 3.7.1 and later pk11_traversecertsfornicknameinslot mxr 3.2 and later pk11_traversecertsforsubjectinslot mxr 3.2 and later pk11_traverseslotcerts mxr 3.4 and later pk11_unlinkgenericobject mxr 3.9.2 and later ...
...mxr 3.2 and later sec_findcrlbydercert mxr 3.2 and later sec_findcrlbyname mxr 3.2 and later sec_lookupcrls mxr 3.2 and later sec_newcrl mxr 3.2 and later sec_quickderdecodeitem mxr 3.6 and later seckey_cachestaticflags mxr 3.
10 and later seckey_converttopublickey mxr 3.2 and later seckey_copyprivatekey mxr 3.2 and later seckey_copypublickey mxr 3.6 and later seckey_copysubjectpublickeyinfo mxr 3.4 and later seckey_createdhprivatekey mxr 3.3 and later seckey_createecp...
JSS FAQ
mozilla/jss/tests directory: http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/tests org/mozilla/jss/tests/closedbs.java org/mozilla/jss/tests/keyfactorytest.java org/mozilla/jss/tests/digesttest.java org/mozilla/jss/tests/jcasigtest.java org/mozilla/jss/tests/keywrapping.java org/mozilla/jss/tests/listcerts.java org/mozilla/jss/tests/pk
10gen.java org/mozilla/jss/tests/sdr.java org/mozilla/jss/tests/selftest.java org/mozilla/jss/tests/setupdbs.java org/mozilla/jss/tests/sigtest.java org/mozilla/jss/tests/symkeygen.java org/mozilla/jss/tests/testkeygen.java org/mozilla/jss/tests/sslclientauth.java org/mozilla/jss/tests/listcacerts.java org/mozilla/jss/tests/keystoretest.java ...
...zilla/jss/tests/verifycert.java ssl examples: org/mozilla/jss/tests/sslclientauth.java org/mozilla/jss/ssl/sslclient.java org/mozilla/jss/ssl/sslserver.java org/mozilla/jss/ssl/ssltest.java other test code that may prove useful: org/mozilla/jss/asn1/integer.java org/mozilla/jss/asn1/sequence.java org/mozilla/jss/asn1/set.java org/mozilla/jss/pkcs
10/certificationrequest.java org/mozilla/jss/pkcs12/pfx.java org/mozilla/jss/pkix/cert/certificate.java org/mozilla/jss/pkix/cmmf/certrepcontent.java org/mozilla/jss/pkix/crmf/certreqmsg.java org/mozilla/jss/pkix/crmf/certtemplate.java org/mozilla/jss/pkix/primitive/name.java org/mozilla/jss/provider/javax/crypto/jsssecretkeyfactoryspi.java org/mozilla...
...you can find more information in bugzilla bug
102251 ssl session cache locking issue with nt fibers how can i tell which ssl/tls ciphers jss supports?
NSS 3.12.4 release notes
bug 488550: crash in certutil or pp when printing cert with empty subject name bug 488992: fix lib/freebl/win_rand.c warnings bug 4890
10: stop exporting mktemp and dbopen (again) bug 489287: resolve a few remaining issues with nss's new revocation flags bug 4897
10: byteswap optimize for msvc++ bug 490154: cryptokey framework requires module to implement generatekey when they support keypairgeneration bug 49
1044: remove support for vms (a.k.a., openvms) from nss bug 491174: cert_pkixverifycert reports wrong error code when ee cert ...
...493364: can't build with --disable-dbm option when not cross-compiling bug 493693: sse2 instructions for bignum are not implemented on os/2 bug 493912: sqlite3_reset should be invoked in sdb_findobjectsinit when error occurs bug 494073: update rsa/dsa powerupself tests to be compliant for 2011 bug 494087: passing null as the value of cert_pi_trustanchors causes a crash in cert_pkixsetparam bug 494
107: during nss_nodb_init(), softoken tries but fails to load libsqlite3.so crash [@ @0x0 ] bug 495097: sdb_mapsqlerror returns signed int bug 495
103: nss_initreadwrite(sql:<dbdir>) causes nss to look for sql:<dbdir>/libnssckbi.so bug 495365: add const to the 'nickname' parameter of sec_certnicknameconflict bug 495656: nss_initreadwrite(sql:<configdir>) leaves behind a pkcs11.txu file if libnssckbi.
...28: coreconf.dep doesn't need to contain the nss version number bug 507422: crash [[@ port_freearena - lg_mksecretkeyrep] when port_newarena fails bug 507482: nss 3.12.3 (and later) doesn't build on aix 5.1 bug 507937: pwdecrypt program problems bug 508259: pk11mode crashed on linux2.4 bug 508467: libpkix ocsp checker should use date argument to obtain the time for cert validity verification bug 5
10367: fix the utf8 characters in the nickname string for ac raíz certicamara s.a.
NSS 3.12.5 release_notes
bug 5
10435: remove unused make variable dso_ldflags bug 5
10436: add macros for build numbers (4th component of version number) to nssutil.h bug 511227: firefox 3.0.13 fails to compile on freebsd/powerpc bug 511312: nss fails to load softoken, looking for sqlite3.dll bug 511781: add new tls 1.2 cipher suites implemented in windows 7 to ssltap bug 516
101: if pk11_importcert fails, it leaves the certif...
...icate undiscoverable by cert_pkixverifycert bug 518443: pk11_importandreturnprivatekey leaks an arena bug 518446: pk11_derencodepublickey leaks a certsubjectpublickeyinfo bug 518457: seckey_encodedersubjectpublickeyinfo and pk11_derencodepublickey are duplicate bug 5225
10: add deprecated comments to key.h and pk11func.h bug 522580: nss uses port_memcmp for comparing secret data.
... this document was generated by genma teruaki on november 28, 20
10 using texi2html 1.82.
NSS 3.16.2.1 release notes
nss 3.16.2.1 requires nspr 4.
10.6 or newer.
... bug
1064636 - (cve-2014-1568) rsa signature forgery in nss.
... bugs fixed in nss 3.16.2.1 bug
1064636 - (cve-2014-1568) rsa signature forgery in nss acknowledgements the nss development team would like to thank antoine delignat-lavaud, security researcher at inria paris in team prosecco, and the advanced threat research team at intel security, who both independently discovered and reported this issue, for responsibly disclosing the issue by providing advance copies of their research.
NSS 3.16.2.2 release notes
nss 3.16.2.2 requires nspr 4.
10.6 or newer.
... notable changes in nss 3.16.2.2 bug
1049435: change rsa_privatekeycheck to not require p > q.
... bugs fixed in nss 3.16.2.2 bug
1049435 - importing an rsa private key fails if p < q compatibility nss 3.16.2.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.16.2.3 release notes
nss 3.16.2.3 requires nspr 4.
10.6 or newer.
... notable changes in nss 3.16.2.3 bug
1057161: check that an imported elliptic curve public key is valid.
... bugs fixed in nss 3.16.2.3 bug
1057161 - nss hangs with
100% cpu on invalid ec key bug
1036735 - add support for draft-ietf-tls-downgrade-scsv to nss compatibility nss 3.16.2.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.16.5 release notes
nss 3.16.5 requires nspr 4.
10.6 or newer.
... bug
1064636 - (cve-2014-1568) rsa signature forgery in nss.
... bugs fixed in nss 3.16.5 bug
1064636 - (cve-2014-1568) rsa signature forgery in nss acknowledgements the nss development team would like to thank antoine delignat-lavaud, security researcher at inria paris in team prosecco, and the advanced threat research team at intel security, who both independently discovered and reported this issue, for responsibly disclosing the issue by providing advance copies of their research.
NSS 3.16.6 release notes
nss 3.16.6 requires nspr 4.
10.6 or newer.
... notable changes in nss 3.16.6 bug
1049435: change rsa_privatekeycheck to not require p > q.
... bugs fixed in nss 3.16.6 bug
1049435 - importing an rsa private key fails if p < q compatibility nss 3.16.6 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.17.4 release notes
nss 3.17.4 requires nspr 4.
10.7 or newer.
... notable changes in nss 3.17.4 bug
1084986: if an ssl/tls connection fails, because client and server don't have any common protocol version enabled, nss has been changed to report error code ssl_error_unsupported_version (instead of reporting ssl_error_no_cypher_overlap).
... bug
1094492: fixed a memory corruption issue during failure of keypair generation.
NSS 3.18 release notes
nss 3.18 requires nspr 4.
10.8 or newer.
... the default key size used by certutil when creating an rsa key pair has been increased from
1024 bits to 2048 bits.
... 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:65:cc:2d:e1:f1:6d:47:b4:40:ca:d9:0a:19:45 cn = tc trustcenter class 3 ca ii sha1 fingerprint: 80:25:ef:f4:6e:70:c8:d4:72:24:65:84:fe:40:3b:8a:8d:6a:db:f5 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:85:00:c0:3d:b6:88:97:c9:ee:fc cn = staat der ...
NSS 3.19.1 release notes
nss 3.19.1 requires nspr 4.
10.8 or newer.
... 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 1138554 / cve-2015-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 kar...
NSS 3.19 release notes
nss 3.19 requires nspr 4.
10.8 or newer.
... 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
1086145 / cve-2015-2721 - fixed a bug related to the ordering of tls handshake messages.
... 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
1086145.
NSS 3.21 release notes
nss 3.21 requires nspr 4.
10.
10 or newer.
... new in nss 3.21 new functionality certutil now supports a --rename option to change a nickname (bug 1142209) tls extended master secret extension (rfc 7627) is supported (bug 1117022) new info functions added for use during mid-handshake callbacks (bug
1084669) new functions in nss.h nss_optionset - sets nss global options nss_optionget - gets the current value of nss global options in secmod.h secmod_createmoduleex - create a new secmodmodule structure from module name string, module parameters string, nss specific parameters string, and nss configuration parameter string.
...1b:56:0f:db:ea:2a:c2:3e:f1 cn = tc trustcenter universal ca iii sha1 fingerprint: 96:56:cd:7b:57:96:98:95: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:75:0b:32:76:29:ff:d5: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.
NSS 3.27 release notes
added support for rsa-pss signatures in tls 1.2 and tls 1.3 new functions in ssl.h ssl_namedgroupconfig notable changes in nss 3.27 update 2016-
10-02: the maximum tls version supported has been increased to tls 1.3 (draft).
... the following ca certificates were removed cn = igc/a, o = pm/sgdn, ou = dcssi sha256 fingerprint: b9:be:a7:86:0a:96:2e:a3:61:1d:ab:97:ab:6d:a3:e2:1c:
10:68:b9:7d:55:57:5e:d0:e1:12:79:c1:1c:89:32 cn = juur-sk, o = as sertifitseerimiskeskus sha256 fingerprint: ec:c3:e9:c3:40:75:03:be:e0:91:aa:95:2f:41:34:8f:f8:8b:aa:86:3b:22:64:be:fa:c8:07:90:15:74:e9:39 cn = ebg elektronik sertifika hizmet sağlayıcısı sha-256 fingerprint: 35:ae:5b:dd:d8:f7:ae:63:5c:ff:ba:56:82:a8:f0:0b:95:f4:84:62:c7:
10:8e:e9:a0:e5:2...
...ngerprint: e7:68:56:34:ef:ac:f6:9a:ce:93:9a:6b:25:5b:7b:4f:ab:ef:42:93:5b:50:a2:65:ac:b5:cb:60:27:e4:4e:70 o = equifax, ou = equifax secure certificate authority sha-256 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-256 fingerprint: cf:56:ff:46:a4:a1:86:
10:9d:d9:65:84:b5:ee:b5:8a:51:0c:42:75:b0:e5:f9:4f:40:bb:ae:86:5e:19:f6:73 cn = equifax secure global ebusiness ca-1 sha-256 fingerprint: 5f:0b:62:ea:b5:e3:53:ea:65:21:65:16:58:fb:b6:53:59:f4:43:28:0a:4a:fb:d1:04:d7:7d:
10:f9:f0:4c:07 bugs fixed in nss 3.27 this bugzilla query returns all the bugs fixed in nss 3.27: https://bugzilla.mozilla.org/buglist.cgi?reso...
NSS 3.41 release notes
ollowing ciphersuites by default: tls_ecdhe_ecdsa_with_aes_256_gcm_sha384 tls_ecdhe_rsa_with_aes_256_gcm_sha384 tls_dhe_rsa_with_aes_256_gcm_sha384 tls_rsa_with_aes_256_gcm_sha384 new functions none notable changes in nss 3.41 the following ca certificates were added: cn = certigna root ca sha-256 fingerprint: d48d3d23eedb50a459e55197601c27774b9d7b18c94d5a059511a
10250b93168 cn = gts root r1 sha-256 fingerprint: 2a575471e31340bc21581cbd2cf13e158463203ece94bcf9d3cc196bf09a5472 cn = gts root r2 sha-256 fingerprint: c45d7bb08e6d67e62e42351
10b564e5f78fd92ef058c840aea4e6455d7585c60 cn = gts root r3 sha-256 fingerprint: 15d5b8774619ea7d54ce1ca6d0b0c403e037a917f131e8a04e1e6b7a71babce5 cn = gts root r4 sha-256 ...
... sha-256 fingerprint: a6c51e0da5ca0a9309d2e4c0e40c2af9
107aae8203857fe198e3e769e343085c cn = certplus root ca g1 sha-256 fingerprint: 152a402bfcdf2cd548054d2275b39c7fca3ec0978078b0f0ea76e561a6c7433e cn = certplus root ca g2 sha-256 fingerprint: 6cc05041e6445e74696c4cfbc9f80f543b7eabbb44b4ce6f787c6a9971c42f17 cn = opentrust root ca g1 sha-256 fingerprint: 56c77128d98c18d91b4cfdffbc25ee9
103d4758ea2abad826a90f3457d...
...460eb4 cn = opentrust root ca g2 sha-256 fingerprint: 27995829fe6a7515c1bfe848f9c4761db16c225929257bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-256 fingerprint: b7c36231706e8
1078c367cb896198f1e3208dd926949dd8f5709a4
10f75b6292 bugs fixed in nss 3.41 bug 1412829, reject empty supported_signature_algorithms in certificate request in tls 1.2 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) bug 1481271 - resend the same ticket in clienthello after helloretryrequest bug 1493769 - set session_id for external resumption tokens bug 1507179 - reject ccs after handshake is complete in tls 1.3 this bugzilla query returns all the bugs fixed in nss 3.41: https://bugzilla.mozilla.org/buglist.cgi...
sample2
s.h> #include <plstr.h> /* nss headers */ #include <cryptohi.h> #include <keyhi.h> #include <pk11priv.h> #include <cert.h> #include <base64.h> #include <secerr.h> #include <secport.h> #include <secoid.h> #include <secmodt.h> #include <secoidt.h> #include <sechash.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits
1024 /* header file constants */ #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac...
...k); } if (pubk) { seckey_destroypublickey(pubk); } return rv; } /* * create certificate request with subject */ secstatus createcertrequest(pk11slotinfo *slot, secupwdata *pwdata, certname *subject, char *certreqfilename, prbool ascii) { secstatus rv; seckeyprivatekey *privkey = null; seckeypublickey *pubkey = null; keytype keytype = rsakey; int keysize = default_key_bits; int publicexponent = 0x0
10001; secoidtag hashalgtag = sec_oid_unknown; privkey = generateprivatekey(keytype, slot, keysize, publicexponent, null, &pubkey, null, pwdata); if (privkey == null) { pr_fprintf(pr_stderr, "unable to generate key(s)\n"); rv = secfailure; goto cleanup; } privkey->wincx = pwdata; port_assert(pubkey != null); rv = certreq(privkey, pubkey, keytype, hashalgtag, subject, ascii, certreqfilename); if (rv ...
...as in sample 5, output is a pkcs#
10 csr * 2.
NSS tools : modutil
certprefix= keyprefix= secmod=secmod.db flags=readonly " nss="trustorder=75 cipherorder=
100 slotparams={0x00000001=[slotflags=rsa,rc4,rc2,des,dh,sha1,md5,md2,ssl,tls,aes,random askpw=any timeout=30 ] } flags=internal,critical" setting a default provider for security mechanisms multiple security modules may provide support for the same security mechanisms.
... rsa: 0x00000001 dsa: 0x00000002 rc2: 0x00000004 rc4: 0x00000008 des: 0x000000
10 dh: 0x00000020 fortezza: 0x00000040 rc5: 0x00000080 sha1: 0x00000
100 md5: 0x00000200 md2: 0x00000400 random: 0x08000000 friendly: 0x
10000000 own_pw_defaults: 0x20000000 disable: 0x40000000 cipherenableflags specifies ciphers that this module provides that nss does not provide (so that the module enables those ciphers for nss).
... user read: 0400 user write: 0200 user execute: 0
100 group read: 0040 group write: 0020 group execute: 00
10 other read: 0004 other write: 0002 other execute: 0001 some platforms may not understand these permissions.
NSS Tools certutil
the default is
1024 bits.
...se with this command: certutil -l -n jsmith@netscape.com -d certdir the certificate database tool displays output similar to the following: certificate: data: version: 3 (0x2) serial number: 0 (0x0) signature algorithm: pkcs #1 md5 with rsa encryption issuer: cn=john smith, o=netscape, l=mountain view, st=california, c=us validity: not before: thu mar 12 00:
10:40 1998 not after: sat sep 12 00:
10:40 1998 subject: cn=john smith, o=netscape, l=mountain view, st=california, c=us subject public key info: public key algorithm: pkcs #1 rsa encryption rsa public key: modulus: 00:da:53:23:58:00:91:6a:d1:a2:39:26:2f:06:3a: 38:eb:d4:c1:54:a3:62:00:b9:f0:7f:d6:00:76:aa: 18:da:6b:79:71:5b:d9:8a:82:24:07:ed:49:5b:33:...
... bf:c5:79:7c:f6:22:a7:18:66:9f:ab:2d:33:03:ec: 63:eb:9d:0d:02:1b:da:32:ae:6c:d4:40:95:9f:b3: 44:8b:8e:8e:a3:ae:ad:08:38:4f:2e:53:e9:e1:3f: 8e:43:7f:51:61:b9:0f:f3:a6:25:1e:0b:93:74:8f: c6:13:a3:cd:51:40:84:0e:79:ea:b7:6b:d1:cc:6b: 78:d0:5d:da:be:2b:57:c2:6f exponent: 65537 (0x
10001) signature algorithm: pkcs #1 md5 with rsa encryption signature: 44:15:e5:ae:c4:30:2c:cd:60:89:f1:1d:22:ed:5e:5b:
10:c8: 7e:5f:56:8c:b4:00:12:ed:5f:a4:6a:12:c3:0d:01:03:09:f2: 2f:e7:fd:95:25:47:80:ea:c1:25:5a:33:98:16:52:78:24:80: c9:53:11:40:99:f5:bd:b8:e9:35:0e:5d:3e:38:6a:5c:
10:d1: c6:f9:54:af:28:56:62:f4:2f:b3:9b:50:e1:c3:a2:ba:27:ee: 07:9f:89:2e:78:5c:6d:46:b6:5e:99:de:e6:9d:eb:d9:ff:b2: 5f:c6:f6:c6:52:4a:d4:67:be:8d:fc:dd:52:51:...
NSS tools : signtool
by default, it produces only rsa certificates with
1024-byte keys in the internal token.
...cryptos (this is an external module) dll name: core32 slots: 1 slots attached status: loaded slot: litronic 2
10 token: ----------------------------------------------- using netscape signing tool and a smart card to sign files the signtool command normally takes an argument of the -k option to specify a signing certificate.
... copyright (c) 20
10, red hat, inc.
SpiderMonkey 1.8.8
spidermonkey 1.8.8 is the javascript engine that shipped in firefox
10.0.
... currently only versions of visual studio prior to 20
10 (also known as version
10) are known to be deficient in this manner, so the custom implementation (which is compatible with the one shipped in visual studio 20
10 and later) is only invoked for those compilers.
... in the long run we anticipate removing the environment variable-based overriding when we drop support for versions of visual studio prior to 20
10.
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.
... > var r = require('redis').createclient(); // and i'll define these utility functions just for this example > function now() { return (new date()).gettime() /
1000 } > function print(err, results) { console.log(json.stringify(results, null, 2)) } whenever someone logs into my site, i record them in my 'last-login' zset.
...as a conservative calculation, i multiply all the bytes i think i might store and multiply by
10, which antirez once recommended as a worst-case factor for data structure overhead.
Signing Mozilla apps for Mac OS X
for projects that don't use mozilla's release automation and would like to be signed for secure launching on os
10.8 mountain lion and later, this guide should provide some insight into how to make sure applications are signed correctly using apple's codesign tool.
... 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.113635.
100.6.1.9] ) or (anchor apple generic and certificate 1[field.1.2.840.113635.
100.6.2.6] and certificate leaf[field.1.2.840.113635.
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.113635.
100.6.1.9] ) or (anchor apple generic and certificate 1[field.1.2.840.113635.
100.6.2.6] and certificate leaf[field.1.2.840.113635.
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.
History Service Design
for example, is possible to create a query folder containing the
10 pages most visited by the user, allowing to fast find good candidates for bookmarking.
...thanks to the underlying database, history size has increased far more than
10 times from the previous mork based implementation, thus the need for a simple and efficient way to extract slices of data.
...query uris (for example place:querytype=0&sort=8&maxresults=
10) can be easily built and read by users (through a built-in advanced search builder ui) and can be bookmarked, creating a so called smart bookmark.
Using XPCOM Utilities to Make Things Easier
many cids take the following form: #define ns_ioservice_cid \ { /* 9ac9e770-18bc-11d3-9337-00
104ba0fd40 */ \ 0x9ac9e770, \ 0x18bc, \ 0x11d3, \ {0x93, 0x37, 0x00, 0x
10, 0x4b, 0xa0, 0xfd, 0x40} \ } the next entry is the contract id string, which is also usually defined in a #define in a header file.
... 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 \ { 0x777f7150, 0x4a2b, 0x4301, \ { 0xad, 0x
10, 0x5e, 0xab, 0x25, 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_constructor(sample); static const ns...
... linking the full string library (.lib or .a) into a component may raise its footprint by more than
100k (on windows), which in many cases is an unacceptable gain (see the xpcom string guide).
nsAString (External)
<map id="classes" name="classes"> <area alt="" coords="963,6,
1045,54" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,
102,
1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,676,246" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,246" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="937...
...,198,
1071,246" href="http://developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promiseflatstring_(external)"> <area alt="" coords="
1095,198,1196,246" href="http://developer.mozilla.org/en/nsautostring_(external)" shape="rect" title="nsautostring_(external)"> <area alt="" coords="5,294,197,342" href="http://developer.mozilla.org/en/nsdependentstring_external" shape="rect" title="nsdependentstring_external"> <area alt="" coords="221,294,467,342" href="http://developer.mozilla.org/en/ns_convertasciitoutf16_external" shape="rect" title="ns_convertasciitoutf16_external"> <area alt="" coords="491,294,733,342" href="http://developer.mozilla.org/en/ns_convertutf8toutf16_external" shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="757,294,869,342" href="...
...@param aradix must be
10 or 16 parameters nsresult* aerrorcode pruint32 aradix ...
nsIBrowserHistory
lastpagevisited obsolete since gecko
10.0 autf8string the last page that was visited in a top-level window.
... note: if removing fewer than
10 pages, calling this repeatedly is preferable over calling removepages(), since that's about the point at which the overhead of setting up a batch operation doesn't make sense anymore.
... note: if removing fewer than
10 pages, calling removepage() repeatedly is preferable over calling this, since that's about the point at which the overhead of setting up a batch operation doesn't make sense anymore.
nsIComponentManager
until gecko
10 you had to call this method manually from within the add-on's startup() method (with a matching removebootstrappedmanifestlocation() call in the add-on's shutdown() method).
... if you're targeting gecko
10 or higher there should be no need to call this method, since the bootstrapped add-on's chrome.manifest is loaded automatically now.
... function startup(params, areason) { if (services.vc.compare(services.appinfo.platformversion, "
10.0") < 0) components.manager.addbootstrappedmanifestlocation(params.installpath); } function shutdown(params, areason) { if (services.vc.compare(services.appinfo.platformversion, "
10.0") < 0) components.manager.removebootstrappedmanifestlocation(params.installpath); } ...
nsIDocShell
this means
100% of normal scaling or in other words normal size no zoom.
... internal_load_flags_bypass_classifier 0x
10 used to indicate that load_flags_bypass_classifier was passed as one of the flags to loaduri().
... kcharsetfromirreversibleautodetection
10 kcharsetfrombyteordermark 11 the character set was determined from a byte order mark in the content.
nsIZipWriter
(a forward slash is '/') detail: this azipentry is very important, this example demonstrates its usage: var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var myzipfile = fu.file('c:\\myzipfile.zip'); //this file will be creatd in c drive var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x
10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x80}; zw.open(xpi, pr.pr_wronly | pr.pr_create_file | pr.pr_truncate); //xpi file is created if not there, if it is there it is truncated/deleted var filetoaddtozip = fileutils.file('c:\\add this file.txt'); var saveinzipas = 'blah.txt'; zw.addentryfile(saveinzipas, ci.nsizipwriter.compression_none, filetoaddtozip, false); in the above example, the ...
... zipw.open(myzipfilepath, pr_rdwr | pr_create_file | pr_truncate); zipw.comment = "this is a comment."; zipw.close(); pr_rdwr and friends are constants that are not in any interface (see bug 433295), so for the code above to work you need something like: const pr_rdonly = 0x01; const pr_wronly = 0x02; const pr_rdwr = 0x04; const pr_create_file = 0x08; const pr_append = 0x
10; const pr_truncate = 0x20; const pr_sync = 0x40; const pr_excl = 0x80; see pr_open documentation or file i/o snippets for details.
... var {cc: classes, ci: interfaces, cu: utils} = components; var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x
10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x80}; //https://developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.modegetfolder); fp.appendfilters(ci.nsifilepicker.filterall | ci.nsifilepicker.fil...
Performance
for example sqlite> explain query plan select * from moz_historyvisit v join moz_history h on v.page_id = h.id where v.visit_date >
1000000000; 0|0|table moz_historyvisit as v with index moz_historyvisit_dateindex 1|1|table moz_history as h using primary key this tells us that it will first look up in moz_historyvisit using an index, and will then look up in moz_history using the primary key.
...as of april
10, 2006, mozilla uses sqlite 3.3.4, but the latest precompiled version of the command line tools is not available for all platforms.
...on some networked drives, vacuuming a
10mb database has been timed at over one minute.
Xray vision
for example, if content code creates a new date object, it will usually be created as a property of a dom object, and then it will be filtered out by the dom xray: // content code // redefine date.getfullyear() date.prototype.getfullyear = function() {return
1000}; var date = new date(); // chrome code // contentwindow is an xray, and date is an expando on contentwindow // so date is filtered out gbrowser.contentwindow.date.getfullyear() // -> typeerror: gbrowser.contentwindow.date is undefined the chrome code will only even see date if it waives xrays, and then, because waiving is transitive, it should expect to be vulnerable to redefinition: // ch...
...rome code components.utils.waivexrays(gbrowser.contentwindow).date.getfullyear(); // ->
1000 however, there are some situations in which privileged code will access javascript objects that are not themselves dom objects and are not properties of dom objects.
... like dom objects, most javascript built-in objects have an underlying c++ state that is separate from their javascript representation, so the xray implementation can go straight to the c++ state and guarantee that the object will behave as its specification defines: // chrome code var sandboxscript = 'date.prototype.getfullyear = function() {return
1000};' + 'var date = new date(); '; var sandbox = components.utils.sandbox("https://example.org/"); components.utils.evalinsandbox(sandboxscript, sandbox); // date objects are xrayed console.log(sandbox.date.getfullyear()); // -> 2014 // but you can waive xray vision console.log(components.utils.waivexrays(sandbox.date).getfullyear()); // ->
1000 to test out examples like t...
Toolkit version format
numbers are integers base
10 (may be negative), strings are non-numeric ascii characters.
...'1.0pre1' < '1.0pre
10', while the strings are compared bytewise.
...== 1.0 == 1.0.0 < 1.1a < 1.1aa < 1.1ab < 1.1b < 1.1c < 1.1pre == 1.1pre0 == 1.0+ < 1.1pre1a < 1.1pre1aa < 1.1pre1b < 1.1pre1 < 1.1pre2 < 1.1pre
10 < 1.1.-1 < 1.1 == 1.1.0 == 1.1.00 < 1.
10 < 1.* < 1.*.1 < 2.0 technical reference for those interested in seeing the implementation of toolkit version comparison, see nsversioncomparator.cpp.
Working with windows in chrome code
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.getelementbyid("progressmet...
...er"); if("arguments" in window && window.arguments.length > 0) { maxprogress = window.arguments[0].maxprogress; setprogress(window.arguments[0].progress); setstatus(window.arguments[0].status); } } function setprogress(value) { gprogressmeter.value =
100 * value / maxprogress; } function setstatus(text) { gstatus.value = "status: " + text + "..."; } ]]></script> <label id="status" value="(no status)" /> <hbox> <progressmeter id="progressmeter" mode="determined" /> <button label="cancel" oncommand="close();" /> </hbox> </window> example 2: interacting with the opener sometimes an opened window needs to interact with its opener; for example, it might do so in order to give notice that the user has made changes in the window.
... 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.
Zombie compartments
──28.45 mb (05.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%) ++ malloc-heap │ │ │ │ │ └──0.00 mb (00.00%) ── non-heap/code/asm.js │ │ │ │ ├──2.43 mb (00.49%) -- shapes │ │ │ │ │ ├──1.47 mb (00.29%) ++ gc-heap │ │ │ │ │ └──0.96 mb (00.19%) ++ malloc-heap │ │ │ │ ├──1.03 mb (00.21%) -- scripts │ │ │ │ │ ├──0.72 mb (00.14%)...
...� │ │ │ └──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) │ │ │ ├──0.51 mb (00.
10%) ── style-sheets │ │ │ ├──0.33 mb (00.07%) -- dom │ │ │ │ ├──0.17 mb (00.04%) ── text-nodes │ │ │ │ ├──0.13 mb (00.03%) ── element-nodes │ │ │ │ ├──0.02 mb (00.00%) ── other │ │ │ │ ├──0.01 mb (00.00%) ── orphan-nodes │ │ │ │ └──0.00 mb (00.00%) ── event-ta...
... js-compartment([system principal], 0x7f
10f1250000) compartment(atoms) js-compartment(about:home) js-compartment(about:blank) compartment([system principal], resource://gre/modules/addons/xpiprovider.jsm) when looking at user compartments there are a couple of things to be aware of.
Debugging Tips
let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(
10); console.log(i); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(
10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value:
10 } cdata { x:
10, y: 20 } cdata { contents: cdata } to see more descriptive information, you can use .tosource().
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(
10); console.log(i.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(
10, 20); console.log(p.tosource()); let pp = p.address(); console.log(pp.tosource()); the result will be : ctypes.int32_t(
10) point(
10, 20) point.ptr(ctypes.uint64("0x15fdafb08")) to see the complete type information, you can use .constructor.tosource(), to print the source of ctype.
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(
10); console.log(i.constructor.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(
10, 20); console.log(p.constructor.tosource()); let pp = p.address(); console.log(pp.constructor.tosource()); the result will be as per the following: ctypes.int32_t ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]) ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]).ptr ...
Mozilla
if the bitmaps resulting from displaying the two files in an 800x
1000 window are identical, the test passes.
...also, with as many as
100 engineers, it was very difficult to determine what happened in the tree that caused the instability.
... localization at mozilla localization (l
10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture.
All keyboard shortcuts - Firefox Developer Tools
up arrow , down arrow up arrow , down arrow choose current auto-complete suggestion (rules view only, when a property or value is being edited) enter or tab return or tab enter or tab increment selected value by 1 up arrow up arrow up arrow decrement selected value by 1 down arrow down arrow down arrow increment selected value by
100 shift + page up shift + page up shift + page up decrement selected value by
100 shift + page down shift + page down shift + page down increment selected value by
10 shift + up arrow shift + up arrow shift + up arrow decrement selected value by
10 shift + down arrow shift + down arrow shift + down arrow increment selected val...
...a string in the current file ctrl + f cmd + f ctrl + f search for a string in all files ctrl + shift + f cmd + shift + f ctrl + shift + f find next in the current file ctrl + g cmd + g ctrl + g search for scripts by name ctrl + p cmd + p ctrl + p resume execution when at a breakpoint f8 f8 1 f8 step over f
10 f
10 1 f
10 step into f11 f11 1 f11 step out shift + f11 shift + f11 1 shift + f11 toggle breakpoint on the currently selected line ctrl + b cmd + b ctrl + b toggle conditional breakpoint on the currently selected line ctrl + shift + b cmd + shift + b ctrl + shift + b 1.
...rl + space ctrl + space show inline documentation ctrl + shift + space ctrl + shift + space ctrl + shift + space eyedropper command windows macos linux select the current color enter return enter dismiss the eyedropper esc esc esc move by 1 pixel arrow keys arrow keys arrow keys move by
10 pixels shift + arrow keys shift + arrow keys shift + arrow keys ...
Network request details - Firefox Developer Tools
see https://en.wikipedia.org/wiki/special:centralautologin/p3p for more info.\"" }, { "name": "server", "value": "mw1316.eqiad.wmnet" }, { "name": "server-timing", "value": "cache;desc=\"pass\"" }, { "name": "strict-transport-security", "value": "max-age=
1063847
10; 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-j...
...un-2019;wmf-last-access-global=11-jun-2019;https=1" }, { "name": "x-cache", "value": "cp
1075 pass, cp
1075 pass" }, { "name": "x-cache-status", "value": "pass" }, { "name": "x-client-ip", "value": "204.2
10.158.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": "esvan0r5bnnwscyk2wq09i1im" }, { "name": "x-varnish", "value": "766019457, 417549316" ...
...1.38:-74.67:v4" }, { "name": "dnt", "value": "1" }, { "name": "host", "value": "en.wikipedia.org" }, { "name": "referer", "value": "https://www.wikipedia.org/" }, { "name": "te", "value": "trailers" }, { "name": "user-agent", "value": "mozilla/5.0 (windows nt
10.0; win64; x64; rv:68.0) gecko/20
100
101 firefox/68.0" } ] } } request headers the request headers section shows details about the request headers.
Waterfall - Firefox Developer Tools
for example, suppose we have code like this: var iterations = 70; var multiplier =
1000000000; function calculateprimes() { console.time("calculating..."); 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) ...
... for example, consider code like this: var timerbutton = document.getelementbyid("timer"); timerbutton.addeventlistener("click", handleclick, false); function handleclick() { console.time("timer"); runtimer(
1000).then(timerfinished); } function timerfinished() { console.timeend("timer"); console.log("ready!"); } function runtimer(t) { return new promise(function(resolve) { settimeout(resolve, t); }); } the waterfall will display a marker for the period between time() and timeend(), and if you select it, you'll see the async stack in the sidebar: timestamp markers timestamps enable yo...
... for example, suppose we adapt the code above to make a timestamp every
10 iterations of the loop, labeled with the iteration number: var iterations = 70; var multiplier =
1000000000; function calculateprimes() { console.time("calculating..."); var primes = []; for (var i = 0; i < iterations; i++) { if (i %
10 == 0) { console.timestamp(i.tostring()); } 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.
AnalyserNode.frequencyBinCount - Web APIs
therefore, it will be one of 16, 32, 64, 128, 256, 512,
1024, 2048, 4096, 8192, and 16384.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -
10; ...
...ght); 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.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth; } }; draw(); specifications specification status comment web audio apithe definition of 'frequencybincount' in that specification.
AnalyserNode.maxDecibels - Web APIs
syntax var curvalue = analysernode.maxdecibels; analysernode.maxdecibels = newvalue; value a double, representing the maximum decibel value for scaling the fft analysis data, where 0 db is the loudest possible sound, -
10 db is a
10th of that, etc.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -
10; ...
... 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 of 'maxdecibels' in that specification.
AudioBufferSourceNode.detune - Web APIs
for example, values of +
100 and -
100 detune the source up or down by one semitone, while +1200 and -1200 detune it up or down by one octave.
... syntax var source = audioctx.createbuffersource(); source.detune.value =
100; // value in cents note: though the audioparam returned is read-only, the value it represents is not.
...channelcount, framecount, audioctx.samplerate); for (let channel = 0; channel < channelcount; channel++) { const nowbuffering = myarraybuffer.getchanneldata(channel); for (let i = 0; i < framecount; i++) { nowbuffering[i] = math.random() * 2 - 1; } } const source = audioctx.createbuffersource(); source.buffer = myarraybuffer; source.connect(audioctx.destination); source.detune.value =
100; // value in cents source.start(); specifications specification status comment web audio apithe definition of 'detune' in that specification.
BiquadFilterNode.Q - Web APIs
it is a dimensionless value with a default value of 1 and a nominal range of 0.0001 to
1000.
... syntax var audioctx = new audiocontext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.q.value =
100; note: though the audioparam returned is read-only, the value it represents is not.
...audioctx.createconvolver(); // connect 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 = 25; biquadfilter.type = "peaking"; biquadfilter.frequency.value =
1000; biquadfilter.q.value =
100; biquadfilter.gain.value = 25; specifications specification status comment web audio apithe definition of 'q' in that specification.
Using the CSS Typed Object Model - Web APIs
s.get( ofinterest[i] ).unit )); row.appendchild( cssunit ); //add the row to the table stylestable.appendchild( row ); } for those of you using a non-supporting browser, the above output should looks something like this: property value unit padding-top 0 px margin-bottom 16 px font-size 16 px font-stretch
100 percent animation-duration 0 s animation-iteration-count 1 number width auto undefined height auto undefined you'll note the <length> unit returned is px, the <percentage> unit returned is percent, the <time> unit is s for 'seconds', and the unitless <number> unit is number.
...for example, the parameters for a csspositionvalue is one to two cssunitvalues or csskeywordvalues, or one of each: let position = new csspositionvalue( new csskeywordvalue("center"), new cssunitvalue(
10, "px")); cssstylevalue the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api, including cssimagevalue, csskeywordvalue, cssnumericvalue, csspositionvalue, csstransformvalue, and cssunparsedvalue.
...we'll take a look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 16%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198,
100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.95); } let's add the class to a bu...
CanvasRenderingContext2D.arcTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(180, 90); ctx.arcto(180,130, 1
10,130, 130); ctx.lineto(1
10, 130); ctx.stroke(); result live demo more sophisticated demo of the method.
... html <div> <label for="radius">radius: </label> <input name="radius" type="range" id="radius" min=0 max=
100 value=50> <label for="radius" id="radius-output">50</label> </div> <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const controlout = document.getelementbyid('radius-output'); const control = document.getelementbyid('radius'); control.oninput = () => { controlout.textcontent = r = control.value; }; const mouse = { x: 0, y: 0 }; let r =
100; // radius const p0 = { x: 0, y: 50 }; const p1 = { x:
100, y:
100 }; const p2 = { x: 150, y: 50 }; const p3 = { x: 200, y:
100 }; const labelpoint = function (p...
... var p = points[i]; labelpoint(p, { x: 0, y: -20 } , i) } } // draw arc const drawarc = function ([p0, p1, p2], r) { ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, r); ctx.lineto(p2.x, p2.y); ctx.stroke(); } let t0 = 0; let rr = 0; // the radius that changes over time let a = 0; // angle let pi2 = math.pi * 2; const loop = function (t) { t0 = t /
1000; a = t0 % pi2; rr = math.abs(math.cos(a) * r); ctx.clearrect(0, 0, canvas.width, canvas.height); drawarc([p1, p2, p3], rr); drawpoints([p1, p2, p3]); requestanimationframe(loop); } loop(0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.arcto' in that specification.
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: 150, y: 80 }; let end = { x: 250, 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.beg...
...the first control point is placed at (120, 160), and the second at (180,
10).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,
10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.clearRect() - Web APIs
html <canvas id="canvas"></canvas> javascript the cleared area is rectangular in shape, with its top-left corner at (
10,
10).
... the cleared area has a width of 120 and a height of
100.
...st canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw yellow background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(
10,
10, 120,
100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clearrect' in that specification.
CanvasRenderingContext2D.clip() - Web APIs
html <canvas id="canvas"></canvas> javascript the clipping region is a full circle, with its center at (
100, 75), and a radius of 50.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(
100, 75, 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.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.
... 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] = 2
10; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result more examples for more examples using createimagedata(...
CanvasRenderingContext2D.drawImage() - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f374e9c6fc.jpg" width="300" height="227"> </div> javascript the source image is taken from the coordinates (33, 71), with a width of
104 and a height of 124.
... it is drawn to the canvas at (21, 20), where it is given a width of 87 and a height of
104.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71,
104, 124, 21, 20, 87,
104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing.
CanvasRenderingContext2D.drawWindow() - Web APIs
drawwindow_async_decode_images 0x
10 do not synchronously decode images - draw what we have.
...for example, ctx.drawwindow(window, 0, 0,
100, 200, 'rgb(255,255,255)'); ...
... would draw the contents of the current window, in the rectangle (0,0,
100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas.
CanvasRenderingContext2D.fillRect() - Web APIs
html <canvas id="canvas"></canvas> javascript the rectangle's top-left corner is at (20,
10).
... it has a width of 150 and a height of
100.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(20,
10, 150,
100); result filling the whole canvas this code snippet fills the entire canvas with a rectangle.
CanvasRenderingContext2D.lineTo() - Web APIs
html <canvas id="canvas"></canvas> javascript the line begins at (30, 50) and ends at (150,
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(150,
100); // draw a line to (150,
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(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(2
10, 130); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
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 red and the start and end points are blue.
... html <canvas id="canvas"></canvas> javascript the curve begins at the point specified by moveto(): (20, 1
10).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 1
10); ctx.quadraticcurveto(230, 150, 250, 20); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.
CanvasRenderingContext2D.rect() - Web APIs
html <canvas id="canvas"></canvas> javascript the rectangle's corner is located at (
10, 20).
... it has a width of 150 and a height of
100.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(
10, 20, 150,
100); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.rect' in that specification.
CanvasRenderingContext2D.strokeRect() - Web APIs
html <canvas id="canvas"></canvas> javascript the rectangle's top-left corner is at (20,
10).
... it has a width of 160 and a height of
100.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.strokestyle = 'green'; ctx.strokerect(20,
10, 160,
100); result applying various context settings this example draws a rectangle with a drop shadow and thick, beveled outlines.
CanvasRenderingContext2D - Web APIs
this code draws a house: // set line width ctx.linewidth =
10; // wall ctx.strokerect(75, 140, 150, 1
10); // door ctx.fillrect(130, 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas.
...default
10.
...default value
10px sans-serif.
Manipulating video using canvas - Web APIs
<!doctype html> <html> <head> <style> body { background: black; color:#cccccc; } #c2 { background-image: url(media/foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:
10px; margin:
10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canvas> </div> <script type="text/javascript" src="processor.js"></script> ...
... processor.computeframe = function computeframe() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getimagedata(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g >
100 && r >
100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putimagedata(frame, 0, 0); return; } when this routine is called, the video element is displaying the most recent frame of video data, which looks like this: in line 2, that frame of video is copied into the graphics context ctx1 of the first canvas, specifying as the height and width the values we previously...
... as a result, the final image has the entire green screen area
100% transparent, so that when it's drawn into the destination context in line 13, the result is an overlay onto the static backdrop.
Compositing example - Web APIs
var lightmix = function() { var ctx = canvas2.getcontext("2d"); ctx.save(); ctx.globalcompositeoperation = "lighter"; ctx.beginpath(); ctx.fillstyle = "rgba(255,0,0,1)"; ctx.arc(
100, 200,
100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,0,255,1)"; ctx.arc(220, 200,
100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,255,0,1)"; ctx.arc(160,
100,
100, math.pi*2, 0, false); ctx.fill(); ctx.restore(); ctx.beginpath(); ctx.fillstyle = "#f00"; ctx.fillrect(0,0,30,30) c...
...); var width = 360; var halfwidth = width / 2; var rotate = (1 / 360) * math.pi * 2; // per degree var offset = 0; // scrollbar offset var oleft = -20; var otop = -20; for (var n = 0; n <= 359; n ++) { var gradient = ctx.createlineargradient(oleft + halfwidth, otop, oleft + halfwidth, otop + halfwidth); var color = color.hsv_rgb({ h: (n + 300) % 360, s:
100, v:
100 }); gradient.addcolorstop(0, "rgba(0,0,0,0)"); gradient.addcolorstop(0.7, "rgba("+color.r+","+color.g+","+color.b+",1)"); gradient.addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.moveto(oleft + halfwidth, otop); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillsty...
...late(oleft + halfwidth, otop + halfwidth); ctx.rotate(rotate); ctx.translate(-(oleft + halfwidth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,30,30) ctx.fill(); return ctx.canvas; }; // hsv (1978) = h: hue / s: saturation / v: value color = {}; color.hsv_rgb = function (o) { var h = o.h / 360, s = o.s /
100, v = o.v /
100, r, g, b; var a, b, c, d; if (s == 0) { r = g = b = math.round(v * 255); } else { if (h >= 1) h = 0; h = 6 * h; d = h - math.floor(h); a = math.round(255 * v * (1 - s)); b = math.round(255 * v * (1 - (s * d))); c = math.round(255 * v * (1 - (s * (1 - d)))); v = math.round(255 * v); ...
Using images - Web APIs
<html> <body onload="draw();"> <canvas id="canvas" width="180" height="150"></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, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } the resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method adds two new parameters and lets us place scaled images on the canvas.
...yripple.com/samples/db/f374e9c6fc.jpg" width="300" height="227"> <img id="frame" src="https://udn.realityripple.com/samples/57/952c634159.png" width="132" height="150"> </div> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // draw slice ctx.drawimage(document.getelementbyid('source'), 33, 71,
104, 124, 21, 20, 87,
104); // draw frame ctx.drawimage(document.getelementbyid('frame'), 0, 0); } we took a different approach to loading the images this time.
.../td> <td><img src="https://udn.realityripple.com/samples/6e/d8d545e955.jpg"></td> <td><img src="https://udn.realityripple.com/samples/b7/86ecdc3e8d.jpg"></td> </tr> </table> <img id="frame" src="https://udn.realityripple.com/samples/57/952c634159.png" width="132" height="150"> </body> </html> and here's some css to make things look nice: body { background: 0 -
100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4f191a; margin:
10px; } img { display: none; } table { margin: 0 auto; } td { padding: 15px; } tying it all together is the javascript to draw our framed images: function draw() { // loop through all images for (var i = 0; i < document.images.length; i++) { // don't add a canvas for the frame image ...
console - Web APIs
up to
10,000 simultaneous timers can run on a given page.
...formatting is supported, for example console.log("foo %.2f", 1.1) will output the number to 2 decimal places: foo 1.
10 note: precision formatting doesn't work in chrome each of these pulls the next argument after the format string off the parameter list.
...up to
10,000 timers can run simultaneously on a given page.
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
... document.xmlstandalone obsolete since gecko
10 returns true if the xml declaration specifies the document to be standalone (e.g., an external part of the dtd affects the document's content), else false.
... document.xmlversion obsolete since gecko
10 returns the version number as specified in the xml declaration or "1.0" if the declaration is absent.
DynamicsCompressorNode() - Web APIs
options optional options are as follows: attack: the amount of time (in seconds) to reduce the gain by
10db.
... release: the amount of time (in seconds) to increase the gain by
10db.
...its nominal range is [-
100, 0].
Using files from web applications - Web APIs
ize() { let nbytes = 0, ofiles = this.files, nfiles = ofiles.length; for (let nfileid = 0; nfileid < nfiles; nfileid++) { nbytes += ofiles[nfileid].size; } let soutput = nbytes + " bytes"; // optional code for multiples approximation const amultiples = ["kib", "mib", "gib", "tib", "pib", "eib", "zib", "yib"]; for (nmultiple = 0, napprox = nbytes /
1024; napprox > 1; napprox /=
1024, nmultiple++) { soutput = napprox.tofixed(3) + " " + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code document.getelementbyid("filenum").innerhtml = nfiles; document.getelementbyid("filesize").innerhtml = soutput; } document.getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script...
... function fileupload(img, file) { const reader = new filereader(); this.ctrl = createthrobber(img); const xhr = new xmlhttprequest(); this.xhr = xhr; const self = this; this.xhr.upload.addeventlistener("progress", function(e) { if (e.lengthcomputable) { const percentage = math.round((e.loaded *
100) / e.total); self.ctrl.update(percentage); } }, false); xhr.upload.addeventlistener("load", function(e){ self.ctrl.update(
100); const canvas = self.ctrl.ctx.canvas; canvas.parentnode.removechild(canvas); }, false); xhr.open("post", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); xhr.overridemimetyp...
... the xmlhttprequest's upload load event handler is set to update the throbber progress information to
100% to ensure the progress indicator actually reaches
100% (in case of granularity quirks during the process).
FileSystemDirectoryReader.readEntries() - Web APIs
#dropzone { text-align: center; width: 300px; height:
100px; margin:
10px; padding:
10px; border: 4px dashed red; border-radius:
10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height:
100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
...in chromium-based browsers, the following example will only return a max of
100 entries.
... on chrome 77, readentries() will only return the first
100 filesystementry instances.
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.
...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.
...i sure can't.</p> <button id="break40">last width: 40em</button> <button id="break50">last width: 50em</button> </article> css article { margin: 1em; max-width: 60em; min-width: 20em; height:
100vh; border: 4em solid #880e4f; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width:
100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the relevant portion of the sizes string.
HTMLTableElement.cellPadding - Web APIs
"
10") or a percentage value (e.g.
... "
10%").
... example // set cell padding to
10 pixels let t = document.getelementbyid('tablea'); t.cellpadding = '
10'; specification w3c dom 2 html specification htmltableelement .cellpadding.
HTMLTableElement.cellSpacing - Web APIs
syntax htmltableelement.cellspacing = spacing; var spacing = htmltableelement.cellspacing; value a domstring which is either a number of pixels (such as "
10") or a percentage value (like "
10%").
... example this example sets cell spacing for a given table to
10 pixels.
... var t = document.getelementbyid('tablea'); t.cellspacing = "
10"; specification w3c dom 2 html specification htmltableelement .cellspacing.
HashChangeEvent - 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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="midd...
...here is a version that allows only one handler to be bound to the onhashchange property: ;(function(window) { // exit if the browser implements that event if ( "onhashchange" in window.document.body ) { return; } var location = window.location, oldurl = location.href, oldhash = location.hash; // check the location hash on a
100ms interval setinterval(function() { var newurl = location.href, newhash = location.hash; // if the hash has changed and a handler has been bound...
... if ( newhash != oldhash && typeof window.onhashchange === "function" ) { // execute the handler window.onhashchange({ type: "hashchange", oldurl: oldurl, newurl: newurl }); oldurl = newurl; oldhash = newhash; } },
100); })(window); specifications specification status comment html living standardthe definition of 'hashchangeevent' in that specification.
IDBCursor.key - Web APIs
full support 24 no support 23 — 24prefixed 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 15safari full support 7webview android full support yeschrome android full support yesfire...
... opera full support 45safari full support
10.1webview android full support 58chrome android full support 58firefox android ?
... opera android full support 43safari ios full support
10.3samsung internet android full support 7.0legend full support full support partial support partial support compatibility unknown compatibility unknownrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
ImageData.height - Web APIs
syntax imagedata.height example this example creates an imagedata object that is 200 pixels wide and
100 pixels tall.
... thus, the height property is
100.
... let imagedata = new imagedata(200,
100); console.log(imagedata.height); //
100 specification specification status comment html living standardthe definition of 'imagedata.height' in that specification.
Recording a media element - Web APIs
px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; display: block; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; text-decoration: none; } h2 { margin-bottom: 4px; } .left { margin-right:
10px; float: left; width: 160px; padding: 0px; } .right { margin-left:
10px; float: left; width: 160px; padding: 0px; } .bottom { clear: both; padding-top:
10px; } javascript content now let's have a look at the javascript code; this is where the majority of the action happens, after all!
... starting media recording the startrecording() function handles starting the recording process: function startrecording(stream, lengthinms) { let recorder = new mediarecorder(stream); let data = []; recorder.ondataavailable = event => data.push(event.data); recorder.start(); log(recorder.state + " for " + (lengthinms/
1000) + " seconds..."); let stopped = new promise((resolve, reject) => { recorder.onstop = resolve; recorder.onerror = event => reject(event.name); }); let recorded = wait(lengthinms).then( () => recorder.state == "recording" && recorder.stop() ); return promise.all([ stopped, recorded ]) .then(() => data); } startrecording() takes two input parameters: a media...
... line
10 when the preview video begins to play, we know there's media to record, so we respond by calling the startrecording() function we created earlier, passing in the preview video stream (as the source media to be recorded) and recordingtimems as the number of milliseconds of media to record.
Transcoding assets for Media Source Extensions - Web APIs
throughout this tutorial, you'll see the filename trailer_
1080p.mov which is the download.
... $ ffmpeg -i trailer_
1080p.mov -c:v copy -c:a copy bunny.mp4 $ ls bunny.mp4 trailer_
1080p.mov checking fragmentation in order to properly stream mp4, we need the asset to be an iso bmf format mp4.
... fragmenting if you have an asset that is not already an mp4, ffmpeg can handle emitting a properly fragmented mp4 during the transcode process, with the -movflags frag_keyframe+empty_moov command line flag: $ ffmpeg -i trailer_
1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4 if you already have an mp4, but it's not properly fragmented, you can again use ffmpeg: $ ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4 in both cases, chrome may require an extra movie flag to be set: -movflags frag_keyframe+empty_moov+default_base_moof having a properly fragm...
Page Visibility API - Web APIs
in chrome, this value is
10 seconds.
... the budget regenerates at a rate of
10 ms per second, in both firefox and chrome.
... the example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code: // set the name of the hidden property and the change event for visibility var hidden, visibilitychange; if (typeof document.hidden !== "undefined") { // opera 12.
10 and firefox 18 and later support hidden = "hidden"; visibilitychange = "visibilitychange"; } else if (typeof document.mshidden !== "undefined") { hidden = "mshidden"; visibilitychange = "msvisibilitychange"; } else if (typeof document.webkithidden !== "undefined") { hidden = "webkithidden"; visibilitychange = "webkitvisibilitychange"; } var videoelement = document.getelementbyid("vid...
Path2D() - Web APIs
<canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let path1 = new path2d(); path1.rect(
10,
10,
100,
100); let path2 = new path2d(path1); path2.moveto(220, 60); path2.arc(170, 60, 50, 0, 2 * math.pi); ctx.stroke(path2); using svg paths this example creates a path2d path using svg path data.
... the path will move to point (m
10 10) and then move horizontally 80 points to the right (h 80), then 80 points down (v 80), then 80 points to the left (h -80), and then back to the start (z).
... <canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let p = new path2d('m
10 10 h 80 v 80 h -80 z'); ctx.fill(p); specification specification status comment html living standardthe definition of 'path2d()' in that specification.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/>...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
... example svg content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="
100" cy="
100" rx="
100" ry="60" id="ellipse" onclick="outputsize();"/> </svg> javascript content function outputsize() { var ellipse = document.getelementbyid("ellipse"); // outputs "horizontal radius:
100 vertical radius: 60" console.log( 'horizontal radius: ' + ellipse.rx.baseval.valueasstring, 'vertical radius: ' + ellipse.ry.baseval.valueasstring ) } result specificat...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="1...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
..." 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"><rect x="271" y="65" width="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecompositeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomposite_operator_unknown 0 the type is not one of predefined types.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="1...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
..." 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="65" width="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemergenodeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="1...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
..." 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="65" width="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespotlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151"...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
...x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" 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="151" y="65" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherit...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,2...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
...(changing the color of the rect interface on every click) svg content <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="
100" id="myrect" onclick="dorectclick()" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> <text x="60" y="40" fill="white" font-size="40" onclick="dorectclick();">click me</text> </svg> javascript content function dorectclick(){ var myrect = document.getelementbyid('myrect'); var r = math.floor(math.random() * 255); var g = math.floor(math.random() * 255); var b...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
..."2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" 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="65" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgswitchelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specifi...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" strok...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
...="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" 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/svgtextcontentelement" target="_top"><rect x="51" y="65" width="2
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/d...
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="1
10" 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="#4d4e53...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
...="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" 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/svgtextcontentelement" target="_top"><rect x="51" y="65" width="2
10" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants constant value description lengthadj...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
...="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" 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/svgtextcontentelement" target="_top"><rect x="51" y="65" width="2
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/d...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
...="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" 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/svgtextcontentelement" target="_top"><rect x="51" y="65" width="2
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/d...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-basel...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
...="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" 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/svgtextcontentelement" target="_top"><rect x="51" y="65" width="2
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/d...
Using server-sent events - Web APIs
when using http/2, the maximum number of simultaneous http streams is negotiated between the server and the client (defaults to
100).
... the php code for the example we're using here follows: date_default_timezone_set("america/new_york"); header("cache-control: no-cache"); header("content-type: text/event-stream"); $counter = rand(1,
10); while (true) { // every second, send a "ping" event.
..."\n\n"; $counter = rand(1,
10); } ob_end_flush(); flush(); sleep(1); } the code above generates an event every second, with the event type "ping".
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-8859-2", "iso-ir-
101", "iso8859-2", "iso88592", "iso_8859-2", "iso_8859-2:1987", "l2", "latin2" 'iso-8859-2' "csisolatin3", "iso-8859-3", "iso-ir-
109", "iso8859-3", "iso88593", "iso_8859-3", "iso_8859-3:1988", "l3", "latin3" 'iso-8859-3' "csisolatin4", "iso-8859-4", "iso-ir-1
10", "iso8859-4", "iso88594", "iso_8859-4", "iso_8859-4:1988", "l4", "latin4" 'iso-8859-4' "csi...
...", "iso-ir-126", "iso8859-7", "iso88597", "iso_8859-7", "iso_8859-7:1987", "sun_eu_greek" 'iso-8859-7' "csiso88598e", "csisolatinhebrew", "hebrew", "iso-8859-8", "iso-8859-8-e", "iso-ir-138", "iso8859-8", "iso88598", "iso_8859-8", "iso_8859-8:1988", "visual" 'iso-8859-8' "csiso88598i", "iso-8859-8-i", "logical" 'iso-8859-8i' "csisolatin6", "iso-8859-
10", "iso-ir-157", "iso8859-
10", "iso8859
10", "l6", "latin6" 'iso-8859-
10' "iso-8859-13", "iso8859-13", "iso885913" 'iso-8859-13' "iso-8859-14", "iso8859-14", "iso885914" 'iso-8859-14' "csisolatin9", "iso-8859-15", "iso8859-15", "iso885915", "l9", "latin9" 'iso-8859-15' "iso-8859-16" 'iso-8859-16' "cskoi8r", "koi", "koi8...
... "mac", "macintosh", "x-mac-roman" 'macintosh' "dos-874", "iso-8859-11", "iso8859-11", "iso885911", "tis-620", "windows-874" 'windows-874' "cp1250", "windows-1250", "x-cp1250" 'windows-1250' "cp1251", "windows-1251", "x-cp1251" 'windows-1251' "ansi_x3.4-1968", "ascii", "cp1252", "cp819", "csisolatin1", "ibm819", "iso-8859-1", "iso-ir-
100", "iso8859-1", "iso88591", "iso_8859-1", "iso_8859-1:1987", "l1", "latin1", "us-ascii", "windows-1252", "x-cp1252" 'windows-1252' "cp1253", "windows-1253", "x-cp1253" 'windows-1253' "cp1254", "csisolatin5", "iso-8859-9", "iso-ir-148", "iso8859-9", "iso88599", "iso_8859-9", "iso_8859-9:1989", "l5", "latin5", "windows-1254", "x-cp1254" 'windows-1254' ...
TextEncoder - Web APIs
new array(len * 1.5) : new uint8array(len * 3); for (var point=0, nextcode=0, i = 0; i !== len; ) { point = str.charcodeat(i), i += 1; if (point >= 0xd800 && point <= 0xdbff) { if (i === len) { resarr[respos += 1] = 0xef/*0b11
101111*/; resarr[respos += 1] = 0xbf/*0b
10111111*/; resarr[respos += 1] = 0xbd/*0b
10111
101*/; break; } // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae nextcode = str.charcodeat(i); if (nextcode >= 0xdc00 && nextcode <= 0xdfff) { point = (point - 0xd800) * 0x400 + nextcode ...
...- 0xdc00 + 0x
10000; i += 1; if (point > 0xffff) { resarr[respos += 1] = (0x1e/*0b111
10*/<<3) | (point>>>18); resarr[respos += 1] = (0x2/*0b
10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/); resarr[respos += 1] = (0x2/*0b
10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); resarr[respos += 1] = (0x2/*0b
10*/<<6) | (point&0x3f/*0b00111111*/); continue; } } else { resarr[respos += 1] = 0xef/*0b11
101111*/; resarr[respos += 1] = 0xbf/*0b
10111111*/; resarr[respos += 1] = 0xbd/*0b
10111
101*/; continue; } } if (point <= 0x007f) { ...
... resarr[respos += 1] = (0x0/*0b0*/<<7) | point; } else if (point <= 0x07ff) { resarr[respos += 1] = (0x6/*0b1
10*/<<5) | (point>>>6); resarr[respos += 1] = (0x2/*0b
10*/<<6) | (point&0x3f/*0b00111111*/); } else { resarr[respos += 1] = (0xe/*0b11
10*/<<4) | (point>>>12); resarr[respos += 1] = (0x2/*0b
10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); resarr[respos += 1] = (0x2/*0b
10*/<<6) | (point&0x3f/*0b00111111*/); } } if (typeof uint8array !== "undefined") return resarr.subarray(0, respos + 1); // else // ie 6-9 resarr.length = respos + 1; // trim off extra weight return resarr; }; textencoder.prototype.tostring = function(){re...
WEBGL_compressed_texture_astc - Web APIs
xel 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 2
10944 ext.compressed_rgba_astc_5x5_khr ext.compressed_srgb8_alpha8_astc_5x5_khr 5x5 5.12 floor((width + 4) / 5) * floor((height + 4) / 5) * 16 169744 ext.compressed_rgba_astc_6x5_khr ext.compressed_srgb8_alpha8_astc_6x5_khr 6x5 4.27 floor((width + 5) / 6) * floor((height + 4) / 5) * 16 141728 ext.compressed_rgba_astc_6x6_khr ext.compres...
...sed_srgb8_alpha8_astc_6x6_khr 6x6 3.56 floor((width + 5) / 6) * floor((height + 5) / 6) * 16 118336 ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr 8x5 3.20 floor((width + 7) / 8) * floor((height + 4) / 5) * 16
105472 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 ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr 8x8 2.00 floor((width + 7) / 8) * floor((height + 7) / 8) * 16 65536 ext.compressed_rgba_astc_
10x5_khr ext.compressed_srgb8_alpha8_astc_
10x5_khr
10x5 2.56 floor((width + 9) /
10) * floor((height + 4) / 5) * 16 85696 ...
... 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 71552 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_
10x
10_khr ext.compressed_srgb8_alpha8_astc_
10x
10_khr
10x
10 1.28 floor((width + 9) /
10) * floor((height + 9) /
10) * 16 43264 ext.compressed_rgba_astc_12x
10_khr ext.compressed_srgb8_alpha8_astc_12x
10_khr 12x
10 1.07 floor((width + 11) / 12) * floor((height + 9) /
10) * 16 35776 ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr 12x12 0.89 ...
Adding 2D content to a WebGL context - Web APIs
// our field of view is 45 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 = 45 * 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 also specify that we only want objects between 0.1 and
100 units from the camera to be rendered.
WebGL model view projection - Web APIs
homogeneoustocartesian([
10, 4, 5, 0]); this evaluates to: [infinity, infinity, infinity].
...then consider moving the camera away from the box until it's two meters away (by adding a meter to the camera's z position), then sliding it
10 centimeters to the its left.
... instead of moving the camera backward and to the left, we apply the inverse transform to the box: we move the box backward one meter, and then
10 centimeters to its right.
Advanced techniques: Creating and sequencing audio - Web APIs
let bandpass = audioctx.createbiquadfilter(); bandpass.type = 'bandpass'; bandpass.frequency.value =
1000; // connect our graph noise.connect(bandpass).connect(audioctx.destination); noise user controls on the ui we'll expose 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" ste...
...p="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 entire playnoise() function: function playnoise() { const buffersize = audioctx.samplerate * noiseduration; // set the time of the note const buffer = audioctx.createbuffer(1, buffersize, audioctx.samplerate); // create an empty buffer let data = buffer.getchannel...
... if (lastnotedrawn != drawnote) { pads.foreach(function(el, i) { el.children[lastnotedrawn].style.bordercolor = 'hsla(0, 0%,
10%, 1)'; el.children[drawnote].style.bordercolor = 'hsla(49, 99%, 50%, 1)'; }); lastnotedrawn = drawnote; } // set up to draw again requestanimationframe(draw); } putting it all together now all that's left to do is make sure we've loaded the sample before we are able to play the instrument.
Web audio spatialization basics - Web APIs
by default, it's
10,000 (a unitless relative value).
... we can keep it as this: const maxdistance =
10000; there's also a reference distance (refdistance), which is used by the distance models.
... const rolloff =
10; now we can start setting our position and orientation of our boombox.
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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" fon...
...x" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor wheelevent() creates a wheelevent object.
XRRigidTransform.matrix - Web APIs
thus, for an array [a0, a1, a2, ..., a13, a14, a15], 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[15]]\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[15]\\ \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.
...it begins by allocating a new matrix and writing a 4x4 identity matrix into it: [
10000
10000
100001]\begin{bmatrix} 1 & 0 & 0 & 0\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix} this is a transform that will not change either the orientation or position of any point, vector, or object to which it's applied.
... [
100px0
10py001pz0001]\begin{bmatrix} 1 & 0 & 0 & x\\ 0 & 1 & 0 & y\\ 0 & 0 & 1 & z\\ 0 & 0 & 0 & 1 \end{bmatrix} then a rotation matrix is created by computing a column-vector rotation matrix from the unit quaternion specified by orientation: [1-2(qy2+qz2)2(qxqy-qzqw)2(qxqz+qyqw)02(qxqy+qzqw)1-2(qx2+qz2)2(qyqz-qxqw)02(qxqz-qyqw)2(qyqz+qxqw)1-2(qx2+qy2)00001]\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2...
Using the slider role - Accessibility
by
10 on a range from 0 to
100) possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique.
... examples example 1: simple numerical range in the example below, a simple slider is used to select a value between 1 and
100.
... <label for="fader">volume</label> <input type="range" id="fader" min="1" max="
100" value="50" step="1" aria-valuemin="1" aria-valuemax="
100" aria-valuenow="50" oninput="outputupdate(value)"> <output for="fader" id="volume">50</output> the following code snippet allows you to return the output as it is updated by user input: function outputupdate(vol) { document.queryselector('#volume').value = vol; } example 2: text values sometimes, a slider is used to choose a value that is not, semantically, a number.
Cognitive accessibility - Accessibility
timers options for adjusting time requirements include: allowing the user to turn off or adjust the time to at least
10 times the original limit before encountering it.
... alerting the user and providing a buffer of at least 20 seconds to extend the timeout duration by a factor of
10 with a simple action, such as hitting the space bar.
... navigation guideline 2.4 states "provide ways to help users navigate, find content, and determine where they are," and provides
10 guidelines to ensure the site is navigable and content is findable: include a <title> make sure to include a <title> for the document, as titles provide a quick and easy to reference description of the screen's main point.
HTML To MSAA - Accessibility
ner is registered state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x
100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (
1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a ...
...tatechange when state is changed input type="radio" role_system_ radiobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" event_object_ statechange when state is changed label role_system_ statictext from child nodes n/a n/a n/a n/a n/a legend role_system_ statictext n/a n/a n/a label_for (0x
1002), points to caption element n/a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_system_ listitem from @label attribute, from child text nodes n/a state_system_ selected if ...
...ctable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x
100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a n/a n/a n/a thead role_system_ columnheader n/a n/a n/a n/a n/a n/a abbr, acronym, blockquote, form, frame, h1-h6, iframe bstr role n/a n/a n/a n/a n/a n/a ...
Web Accessibility: Understanding Colors and Luminance - Accessibility
em { color: #f00; } /* #rgb */ em { color: #ff0000; } /* #rrggbb */ em { color: #ff0000ff; } /* #rrggbbaa */ em { color: rgb(255, 0, 0); } em { color: rgb(
100%, 0%, 0%); } em { color: rgb(255, 0, 0, 1); } em { color: rgba(
100%, 0%, 0%,
100%); } conversions are not casual.
... white has
100% relative luminance, black has 0% relative luminance (in most but not all literature).
...for example, in addition to the color #990000 described above, the color #8b0000 also has a saturation of
100%.
-moz-image-rect - CSS: Cascading Style Sheets
the container looks like this: #container { width:267px; height:272px; top:
100px; left:
100px; position:absolute; font-size:16px; text-shadow:white 0px 0px 6px; text-align:center; } then the four boxes defining the segments of the image are defined.
... #box2 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/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/12053/firefox.png), 50%, 50%,
100%, 0%); width:133px; height:136px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/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 gr...
-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, 25%, -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 <len...
...that means, a value of 0% means the left edge of the image is aligned with the box's left padding edge and a value of
100% means the right edge of the image is aligned with the box's right padding edge.
... right equivalent to
100%.
-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, 25%, -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 <lengt...
...a value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of
100% means the bottom edge of the image is aligned with the box's bottom padding edge.
... bottom equivalent to
100%.
::slotted() - CSS: Cascading Style Sheets
ls> — is defined like so: customelements.define('person-details', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('person-template'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}); let style = document.createelement('style'); style.textcontent = 'div { padding:
10px; border: 1px solid gray; width: 200px; margin:
10px; }' + 'h2 { margin: 0 0
10px; }' + 'ul { margin: 0; }' + 'p { margin:
10px 0; }' + '::slotted(*) { color: gray; font-family: sans-serif; } '; shadowroot.appendchild(style); shadowroot.appendchild(templatecontent.clonenode(tr...
...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): t...
...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.
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: 75% 125%; font-stretch: condensed ultra-condensed;; the font-weight property is described using any one of the values listed below.
... if the font does not provide a face that exactly matches the given value, then values less than
100% map to a narrower face, and values greater than or equal to
100% map to a wider face.
... 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 75% semi-condensed 87.5% normal
100% semi-expanded 112.5% expanded 125% extra-expanded 150% ultra-expanded 200% variable fonts most fonts have a particular width which corresponds to one of the keyterm values.
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.
...if this is the situation that you want then typically you would use 1 as the value, however you could give them all a flex-grow of 88, or
100, or 1.2 if you like — it is a ratio.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
.image img { max-width:
100px; } you could also allow both sides to grow and shrink in proportion.
... .media .content { flex: 1; padding:
10px; } .image { flex: 1; } you could also give each side different flex-grow factors, for example setting the side with the image to flex: 1 and the content side to flex: 3.
... .media .content { flex: 3; padding:
10px; } .image { flex: 1; } flipping the media object to switch the display of the media object so that the image is on the right and the content is on the left we can use the flex-direction property set to row-reverse.
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
v> .wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; grid-gap: 20px; } .box3 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; position: relative; } .abspos { position: absolute; top: 40px; left: 40px; background-color: rgba(255,255,255,.5); border: 1px solid rgba(0,0,0,0.5); color: #000; padding:
10px; } grid and display: contents a final interaction with another layout specification that is worth noting is the interaction between css grid layout and display: contents.
...} <div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> <div class="nested">c</div> </div> <div class="box box2">two</div> <div class="box box3">three</div> <div class="box box4">four</div> <div class="box box5">five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(
100px, auto); } .box1 { grid-column-start: 1; grid-column-end: 4; } if i now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.
...} <div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> <div class="nested">c</div> </div> <div class="box box2">two</div> <div class="box box3">three</div> <div class="box box4">four</div> <div class="box box5">five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(
100px, auto); } .box1 { grid-column-start: 1; grid-column-end: 4; display: contents; } this can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented.
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.
Sticky footers - CSS: Cascading Style Sheets
the recipe download this example note: in this example and the following one we are using a wrapper set to min-height:
100% in order that our live example works.
... you could also achieve this for a full page by setting a min-height of
100vh on the <body> and then using it as your grid container.
...the .wrapper has a minimum height of
100% which means it is as tall as the container it is in.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
d earlier, you use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value: element { background-color: var(--main-bg-color); } first steps with custom properties let's start with this simple css that applies the same color to elements of different classes: .one { color: white; background-color: brown; margin:
10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: black; margin:
10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: brown; margin:
10px; width: 75px; } .four { color: white; background-color: brown; margin:
10px; width:
100px; } .five { background-color: brown; } we...
...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: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: var(--main-bg-color); margin:
10px; width: 75px; } .four { color: white; background-color: var(--main-bg-color); margin:
10px; width:
100px; } .five { b...
...with the following css: .two { --test:
10px; } .three { --test: 2em; } in this case, the results of var(--test) are: for the class="two" element:
10px for the class="three" element: 2em for the class="four" element:
10px (inherited from its parent) for the class="one" element: invalid value, which is the default value of any custom property keep in mind that these are custom properties, not actual variables like you might fi...
Viewport concepts - CSS: Cascading Style Sheets
in an experiment with these, the innerwidth and outerwidth was seen to be the same, but the outerheight was
100px taller than the innerheight.
... this is because the outerheight includes the browser chrome: measurements were taken on a browser with an address bar and bookmarks bar totalling
100px in height, but no chrome on the left or right of the window.
...it should preferably be set to device-width, which is the width of the screen in css pixels at a scale of
100%.
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 15prefixed prefixed implemented with the vendor prefix: -webkit- no support 12.1 — 15 no support 12 — 15prefixed prefixed implemented with the vendor prefix: ...
... full support 1.0prefixed prefixed implemented with the vendor prefix: -webkit-alternate-reversechrome full support 19edge full support 12firefox full support 16ie full support
10opera full support 12.1safari full support 6webview android full support ≤37chrome android full support 25firefox android full support 16opera android full s...
... full support 6samsung internet android full support 1.5reversechrome full support 19edge full support 12firefox full support 16ie full support
10opera full support 12.1safari full support 6webview android full support ≤37chrome android full support 25firefox android full support 16opera android full s...
animation-fill-mode - CSS: Cascading Style Sheets
the last keyframe depends on the value of animation-direction and animation-iteration-count: animation-direction animation-iteration-count last keyframe encountered normal even or odd
100% or to reverse even or odd 0% or from alternate even 0% or from alternate odd
100% or to alternate-reverse even
100% or to alternate-reverse odd 0% or from backwards the animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and ...
...the first relevant keyframe depends on the value of animation-direction: animation-direction first relevant keyframe normal or alternate 0% or from reverse or alternate-reverse
100% or to both the animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.
... html <p>move your mouse over the gray box!</p> <div class="demo"> <div class="growsandstays">this grows and stays big.</div> <div class="grows">this just grows.</div> </div> css .demo { border-top:
100px solid #ccc; height: 300px; } @keyframes grow { 0% { font-size: 0; }
100% { font-size: 40px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards; } see css animations for more examples.
backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px
10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax ...
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples css .box { background-color: rgba(255, 255, 255, 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/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: ce...
...nter; display: flex; justify-content: center; height:
100%; width:
100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(
10px)</p> </div> </div> result specifications specification status comment filter effects module level 2the definition of 'backdrop-filter' in that specification.
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: 25%; /* <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-position-y property is specified as one or more values, separated by commas.
...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/17350/3b4892b7e820122ac6dd7678891d4507/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.
border-image - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice:
100%border-image-width: 1border-image-outset: 0border-image-repeat: stretchapplies toall elements, except internal table elements when border-collapse is collapse.
... #bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding:
10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gr...
... candidate recommendation initial definition initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice:
100%border-image-width: 1border-image-outset: 0border-image-repeat: stretchapplies toall elements, except internal table elements when border-collapse is collapse.
border-radius - CSS: Cascading Style Sheets
constituent 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; /* (fi...
...rst radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius:
10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius:
10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius:
10px 5% / 20px 25em 30px 35em; /* 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.
...es of the shorthand:border-top-left-radius: a length, percentage or calc();border-top-right-radius: a length, percentage or calc();border-bottom-right-radius: a length, percentage or calc();border-bottom-left-radius: a length, percentage or calc(); formal syntax <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?where <length-percentage> = <length> | <percentage> examples border: solid
10px; /* the border will curve into a 'd' */ border-radius:
10px 40px 40px
10px; border: groove 1em red; border-radius: 2em; background: gold; border: ridge gold; border-radius: 13em/3em; border: none; border-radius: 40px
10px; border: none; border-radius: 50%; border: dotted; border-width:
10px 4px; border-radius:
10px 40px; border: dashed; border-width: ...
clamp() - CSS: Cascading Style Sheets
the <body> element's width is set as min(
1000px, calc(70% +
100px)).
... this means that the width will be set at
1000px, unless the result of calc(70% +
100px) is less than
1000px, in which case it will be set to that value instead.
...</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.
<easing-function> - CSS: Cascading Style Sheets
on is a keyword indicating if it the function is left- or right-continuous: jump-start denotes a left-continuous function, so that the first step or jump happens when the animation begins; jump-end denotes a right-continuous function, so that the last step or jump happens when the animation ends; jump-both denotes a right and left continuous function, includes pauses at both the 0% and
100% marks, effectively adding a step during the animation iteration; jump-none there is no jump on either end.
... instead, holding at both the 0% mark and the
100% mark, each for 1/n of the duration start is the equivalent of jump-start end is the equivalent of jump-end end is the default.
...option> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > div { position: relative; height:
100px; } div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient(circle at
10px
10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left:
10%; } to { left: 90%; } } li { display: flex; align-items: cente...
grayscale() - CSS: Cascading Style Sheets
a value of
100% is completely grayscale, while a value of 0% leaves the input unchanged.
... values between 0% and
100% are linear multipliers on the effect.
... examples grayscale(0) /* no effect */ grayscale(.7) /* 70% grayscale */ grayscale(
100%) /* completely grayscale */ specifications specification status filter effects module level 1the definition of 'grayscale()' in that specification.
invert() - CSS: Cascading Style Sheets
a value of
100% is completely inverted, while a value of 0% leaves the input unchanged.
... values between 0% and
100% are linear multipliers on the effect.
... examples invert(0) /* no effect */ invert(.6) /* 60% inversion */ invert(
100%) /* completely inverted */ specifications specification status filter effects module level 1the definition of 'invert()' in that specification.
saturate() - CSS: Cascading Style Sheets
a value under
100% desaturates the image, while a value over
100% super-saturates it.
... a value of 0% is completely unsaturated, while a value of
100% leaves the input unchanged.
... examples saturate(0) /* completely unsaturated */ saturate(.4) /* 40% saturated */ saturate(
100%) /* no effect */ saturate(200%) /* double saturation */ specifications specification status filter effects module level 1the definition of 'saturate()' in that specification.
sepia() - CSS: Cascading Style Sheets
a value of
100% is completely sepia, while a value of 0% leaves the input unchanged.
... values between 0% and
100% are linear multipliers on the effect.
... examples sepia(0) /* no effect */ sepia(.65) /* 65% sepia */ sepia(
100%) /* completely sepia */ specifications specification status filter effects module level 1the definition of 'sepia()' in that specification.
flex - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: flex-grow flex-shrink flex-basis syntax /* keyword values */ flex: auto; flex: initial; flex: none; /* one value, unitless number: flex-grow */ flex: 2; /* one value, width/height: flex-basis */ flex:
10em; flex: 30%; flex: min-content; /* two values: flex-grow | flex-basis */ flex: 1 30px; /* two values: flex-grow | flex-shrink */ flex: 2 2; /* three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2
10%; /* global values */ flex: inherit; flex: initial; flex: unset; the flex property may be specified using one, two, or three values.
...">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: 1
10px; min-width: 0; background-color: #1b5385; color: white; font-family: monospace; font-size: 13px; } .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex: 4; } .two { flex: 2; } .one { flex: 1; } by default flex items don't shrink below their minimum content size.
..."block" : "none"; }); #flex-container { width:
100%; font-family: consolas, arial, sans-serif; } #flex-container > div { border: 1px solid #f00; padding: 1rem; } #flex-container > .raw-item { border: 1px solid #000; } result specifications specification status comment css flexible box layout modulethe definition of 'flex' in that specification.
font-size - CSS: Cascading Style Sheets
similarly, if you want a font size of
10px, then specify 0.625em (
10/16 = 0.625); for 22px, specify 1.375em (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 25.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).
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 150px 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.
...percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid column size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { height:
100px; display: grid; grid-template-areas: "a a"; grid-gap:
10px; grid-auto-columns: 200px; } #grid > div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-columns' in that specification.
grid-auto-rows - CSS: Cascading Style Sheets
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 150px 390px; grid-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.
...<flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid row size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap:
10px; grid-auto-rows:
100px; } #grid > div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-rows' in that specification.
grid-template-columns - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-columns: none; /* <track-list> values */ grid-template-columns:
100px 1fr; grid-template-columns: [linename]
100px; grid-template-columns: [linename1]
100px [linename2 linename3]; grid-template-columns: minmax(
100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); grid-template-columns: subgrid; /* <auto-track-list> values */ grid-template-columns: 200px repeat(auto-fill,
100px) 300px; grid-template-columns: minmax(
100px,...
... max-content) repeat(auto-fill, 200px) 20%; grid-template-columns: [linename1]
100px [linename2] repeat(auto-fit, [linename3 linename4] 300px)
100px; grid-template-columns: [linename1 linename2]
100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset; values none indicates that there is no explicit grid.
...h> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; width:
100%; grid-template-columns: 50px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-columns' in that specification.
grid-template-rows - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-rows: none; /* <track-list> values */ grid-template-rows:
100px 1fr; grid-template-rows: [linename]
100px; grid-template-rows: [linename1]
100px [linename2 linename3]; grid-template-rows: minmax(
100px, 1fr); grid-template-rows: fit-content(40%); grid-template-rows: repeat(3, 200px); grid-template-rows: subgrid; /* <auto-track-list> values */ grid-template-rows: 200px repeat(auto-fill,
100px) 300px; grid-template-rows: minmax(
100px, max-content) ...
... repeat(auto-fill, 200px) 20%; grid-template-rows: [linename1]
100px [linename2] repeat(auto-fit, [linename3 linename4] 300px)
100px; grid-template-rows: [linename1 linename2]
100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-rows: inherit; grid-template-rows: initial; grid-template-rows: unset; this property may be specified as: either the keyword value none or a <track-list> value or an <auto-track-list> value.
...dth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height:
100px; grid-template-rows: 30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specification.
left - CSS: Cascading Style Sheets
syntax /* <length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left:
10%; /* keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block.
...ve; top: 0; right: 0; </pre> <p>relative position in relation to its siblings.</p> </div> <div id="example_3"> <pre> 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; backgr...
...sition: absolute; left: 20px; top: 20px; background-color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; background-color: #c1ffdb; } #example_3 { width: 600px; height: 400px; position: relative; top: 20px; left: 20px; background-color: #ffd7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:
10px; right:20px; background-color:#ffc7e4; } #example_5 { position: absolute; right: 0; left: 0; top:
100px; background-color: #d7ffc2; } result specifications specification status comment css positioned layout module level 3the definition of 'left' in that specification.
<length> - CSS: Cascading Style Sheets
1mm = 1/
10th of 1cm.
... html <div class="outer"> <div class="input-container"> <label>enter width:</label> <input type="text" id="length"> </div> <div class="inner"> </div> </div> <div class="results"> </div> css html { font-family: sans-serif; font-weight: bold; box-sizing: border-box; } .outer { width:
100%; height: 50px; background-color: #eee; position: relative; } .inner { height: 50px; background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); } .result { height: 20px; background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); backgroun...
...d-color: orange; display: flex; align-items: center; margin-top:
10px; } .result code { position: absolute; margin-left: 20px; } .results { margin-top:
10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0
10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const resultsdiv = document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.value}</code>`; resultsdiv.appendc...
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: 25% 75%; 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.
... | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom:
10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="
10px 20...
...px">
10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
object-fit - CSS: Cascading Style Sheets
/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.3em; } div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 940px; } img { width: 150px; height:
100px; border: 1px solid #000; } .narrow { width:
100px; height: 150px; margin-top:
10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification status comment css images module level 4the definition o...
... 36ie no support noopera full support 19 full support 19 full support 11.6prefixed prefixed implemented with the vendor prefix: -o-safari full support
10webview android full support 4.4.3chrome android full support 31firefox android full support 36opera android full support 19 full support 19 full support ...
... 12prefixed prefixed implemented with the vendor prefix: -o-safari ios full support
10samsung internet android full support 2.0legend full support full support no support no supportsee implementation notes.see implementation notes.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
offset-distance - CSS: Cascading Style Sheets
100% represents the total length of the path (when the offset-path is defined as a basic shape or path()).
...if you want to animate an element along its full path, you would define its offset-path and then set up an animation that takes the offset-distance from 0% to
100%.
... html <div id="motion-demo"></div> css #motion-demo { offset-path: path('m20,20 c20,
100 200,0 200,
100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; }
100% { offset-distance:
100%; } } result specifications specification status comment motion path module level 1the definition of 'offset-distance' in that specification.
offset - 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(45deg 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(45deg closest-side) / 40px 20px; of...
...fset: 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 specifiedani...
... 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.
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: 15px; } 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: 15px; } result setting outline style to so...
...lid 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: 15px; } 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: 15px; } 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 cleare...
...r */ * { outline-width:
10px; padding: 15px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-style' in that specification.
repeating-radial-gradient() - CSS: Cascading Style Sheets
a percentage of 0%, or a length of 0, represents the center of the gradient; the value
100% represents the intersection of the ending shape with the virtual gradient ray.
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples black and white gradient <div class="radial-gradient"></div> .radial-gradient { width: 120px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(black, black 5px, white 5px, white
10px); } farthest-corner <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red, black 5%, blue 5%, green
10%); background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red 0 5%, green 5%
10%); } the elliptical gradient wil...
...l be centered 20% from the top left, and will repeat
10 times between the center and the farthest corner (the bottom right corner).
right - CSS: Cascading Style Sheets
syntax /* <length> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right:
10%; /* keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block.
...cified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { width:
100px; height:
100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width:
100px; height:
100px; background-color: #ffd7c2; position: absolute; bottom:
10px; right: 20px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constraints prevent it from doin...
... html <div id="parent">parent <div id="nowidth">no width</div> <div id="width">width:
100px</div> </div> css div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px; background-color: #ffc7e4; position: relative; } /* declare both a left and a right */ #width, #nowidth { background-color: #c2ffd7; position: absolute; left: 0; right: 0; } /* declare a width */ #width { width:
100px; top: 60px; } result specifications specifica...
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.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,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(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape...
... </p> </div> css .main { width: 530px; } .left, .right { width: 40%; height: 12ex; background-color: lightgray; } .left { -webkit-shape-outside: polygon(0 0,
100%
100%, 0
100%); shape-outside: polygon(0 0,
100%
100%, 0
100%); float: left; -webkit-clip-path: polygon(0 0,
100%
100%, 0
100%); clip-path: polygon(0 0,
100%
100%, 0
100%); } .right { -webkit-shape-outside: polygon(
100% 0,
100%
100%, 0
100%); shape-outside: polygon(
100% 0,
100%
100%, 0
100%); float: right; -webkit-clip-path: polygon(
100% 0,
100%
100%, 0
100%); clip-path: polyg...
...on(
100% 0,
100%
100%, 0
100%); } p { text-align: center; } result specifications specification status comment css shapes module level 1the definition of 'shape-outside' in that specification.
top - CSS: Cascading Style Sheets
when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or
100%) both the top and bottom distances are respected.
... syntax /* <length> values */ top: 3px; top: 2.4em; /* <percentage>s of the height of the containing block */ top:
10%; /* keyword value */ top: auto; /* global values */ top: inherit; top: initial; top: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the top edge of the containing block.
...es topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples body { background: beige; } div { position: absolute; top:
10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; } <div>the size of this content is determined by the position of its edges.</div> specifications specification status comment css positioned layout module level 3the definition of 'top' in that specification.
translate() - CSS: Cascading Style Sheets
syntax /* single <length-percentage> values */ transform: translate(200px); transform: translate(50%); /* double <length-percentage> values */ transform: translate(
100px, 200px); transform: translate(
100px, 50%); transform: translate(30%, 200px); transform: translate(30%, 50%); values single <length-percentage> values this value is a <length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector.
...
10tx01ty001
10tx01ty001
100tx0
10ty00
100001 [1 0 0 1 tx ty] formal syntax translate(<length-percentage> , <length-percentage>?) examples using a single-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(
10px); /* equal to:...
... translatex(
10px) or translate(
10px, 0) */ background-color: pink; } result combining y-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(
10px,
10px); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translate()' in that specification.
<transform-function> - CSS: Cascading Style Sheets
ption>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 mai...
...n { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width:
100px; height:
100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width:
100%; height:
100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,2
10,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(2
10,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,2
10,.7); transform: rotatey(-9...
...0deg) translatez(50px); } .top { background: rgba(2
10,2
10,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(2
10,0,2
10,.7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; } javascript const selectelem = document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; }, 2000) } }) result specifications specification status comment css transforms level 2the definition of...
Adding captions and subtitles to HTML5 video - Developer guides
'none' : 'block'); } }); subtitle menu css we also added some rudimentary styling for the newly created subtitles menu: .subtitles-menu { display:none; position:absolute; bottom:14.8%; right:20px; background:#666; list-style-type:none; margin:0; padding:0; width:
100px; padding:
10px; } .subtitles-menu li { padding:0; text-align:center; } .subtitles-menu li button { border:none; background:#000; color:#fff; cursor:pointer; width:90%; padding:2px 5px; border-radius:2px; } styling the displayed subtitles one of the less well known about and supported features of webvtt is the ability to style the individual subtitles ...
... internet explorer internet explorer
10+ subtitles are enabled by default, and the default controls contain a button and a menu that offers the same functionality as the menu we just built.
... safari safari 6.1+ has similar support to internet explorer
10+, displaying a menu with the different available options, with the addition of an "auto" option, which allows the browser to choose.
Cross-browser audio basics - Developer guides
e.display = "none"; pause.style.display = "block"; }); pause.addeventlistener('click', function() { myaudio.pause(); pause.style.display = "none"; play.style.display = "block"; }); // display progress myaudio.addeventlistener('timeupdate', function() { //sets the percentage bar.style.width = parseint(((myaudio.currenttime / myaudio.duration) *
100),
10) + "%"; }); } you should end up with something like this: seeking using the seek bar this is a good start, but it would be nice to be able to navigate the audio using the progress bar.
... desktop desktop browser version chrome 4+ firefox 3.5+ internet explorer 9+ opera
10.5+ safari 4+ mobile mobile browser version chrome (android) 32+ firefox (android) 26+ ie mobile
10+ opera mobile 11+ safari (ios) 4+ android browser 2.3+ blackberry 7+ audio codec support browser ogg mp3 aac pcm opus firefox 3.5+ �...
...�� ✓ *26+ ✓ ✓ *14+ safari 5+ ✓ ✓ chrome 6+ ✓ ✓ ✓ ✓ *9+ opera
10.5+ ✓ internet explorer 9+ ✓ ✓ firefox mobile ✓ ✓ ✓ ✓ ✓ safari ios3+ ✓ ✓ ✓ *4.2+ chrome mobile ✓ ✓ ✓ ✓ opera mobile ✓ ✓ ✓ ✓ internet explorer mobile ✓ ✓ ✓ ✓ android 2.3+ ✓ ✓ ✓ ✓ note: we are at the stage where nearly all browsers support mp3 — for more details visit this page on media format browser compatibility.
Block formatting context - Developer guides
float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; width: 200px; height:
100px; background-color: rgba(255, 255, 255, .5); border:1px solid black; padding:
10px; } exclude external floats in the following example, we are using display:flow-root and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new bfc must not overlap the margin box of any floats in the same block formatting context as the element it...
...oot</code><p></div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:25px; width: 200px; height:
100px; background-color: rgba(255, 255, 255, .75); border: 1px solid black; padding:
10px; } rather than inline-blocks with width:<percentage>, in this case we don't have to specify the width of the right div.
... 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.
Media events - Developer guides
you can easily watch for these events, using code such as the following: var v = document.getelementsbytagname("video")[0]; v.addeventlistener("seeked", function() { v.play(); }, true); v.currenttime =
10.0; this example fetches the first video element in the document and attaches an event listener to it, watching for the seeked event, which is sent whenever a seek operation completes.
... then, in line 3, the example sets the element's currenttime attribute to
10.0, which initiates a seek operation to the
10-second mark in the media.
... in other words, this example seeks to the
10-second mark in the media, then begins playback as soon as that's finished.
Using device orientation with 3D transforms - Developer guides
there are however two corrections that should be applied to those values: the initial alpha value is 180 (device flat on the back, top of the screen pointing 12:00), so the rotatez value should be alpha - 180 the y axis of the screen coordinate system is inverted, such that translatey(
100px) moves an element
100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotatex and then rotatey.
... need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation matrix rm00 = c + x*x * t, rm
10 = z*s + y*x * t, rm20 = -y*s + z*x * t, rm01 = -z*s + x*y * t, rm11 = c + y*y * t, rm21 = x*s + z*y * t, rm02 = y*s + x*z * t, rm12 = -x*s + y*z * t, rm22 = c + z*z * t, to_deg = 180 / math.pi, ea = [], n = math.sqrt( rm22 * rm22 + rm20 * rm20 ); // rotation matrix to euler angles ea[1] = math.atan2...
...1 : -1 ) * math.atan2( -rm
10, rm00 ); } return { alpha: -ea[0] * to_deg - 180, beta: -ea[1] * to_deg, gamma: ea[2] * to_deg }; } ...
HTML attribute: min - HTML: Hypertext Markup Language
for example, if we have <input type="number" min="
10" step="2"> any even integer,
10 or great, is valid.
... step="1"> month yyyy-mm <input type="month" min="2019-12" step="12"> week yyyy-w## <input type="week" min="2019-w23" step=""> time hh:mm <input type="time" min="09:00" step="900"> datetime-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t19:30"> 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 min value set, the value is considered invalid in contraint validation and will match the :invalid pseudoclass see client-side validation and rangeunderflow for more information.
... syntax for min values for other elements input type syntax example <meter> <number> <meter id="fuel" min="0" max="
100" low="33" high="66" optimum="80" value="40"> at 40/
100</meter> 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.
<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.
... in this case the "- 1", which consists of characters with neutral or weak 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.
... these elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(
100% - 40px - 6px); padding: 20px; width: calc(
100% - 40px - 6px); border-width: 1px 1px 1px 5px; } specifications specification status comment html living standardthe definition of '<bdi>' in that specification.
<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/62ac2ecddbec0e0b540098c28451e57203e5cab46dfed7ab0115d5a659fcfb7b.png"> the src attribute is used to specify the path to the image you want to display in the button.
...> <p>login to your account</p> <div> <label for="userid">user id</label> <input type="text" id="userid" name="userid"> </div> <div> <label for="pwd">password</label> <input type="password" id="pwd" name="pwd"> </div> <div> <input id="image" type="image" src="/static/external/62/62ac2ecddbec0e0b540098c28451e57203e5cab46dfed7ab0115d5a659fcfb7b.png" alt="login" width="
100"> </div> </form> css and now some simple css to make the basic elements sit more neatly: div { margin-bottom:
10px; } label { display: inline-block; width: 70px; text-align: right; padding-right:
10px; } adjusting the image position and scaling in this example, we adapt the previous example to set aside more space for the image and then adjust the actual image's size and positi...
...unt</p> <div> <label for="userid">user id</label> <input type="text" id="userid" name="userid"> </div> <div> <label for="pwd">password</label> <input type="password" id="pwd" name="pwd"> </div> <div> <input id="image" type="image" src="/static/external/62/62ac2ecddbec0e0b540098c28451e57203e5cab46dfed7ab0115d5a659fcfb7b.png" alt="login" width="200" height="
100"> </div> </form> css div { margin-bottom:
10px; } label { display: inline-block; width: 70px; text-align: right; padding-right:
10px; } #image { object-position: right top; object-fit: contain; background-color: #ddd; } here, object-position is configured to draw the image at the top-right corner of the element, while object-fit is set to contain, which indicates that the...
<input type="search"> - HTML: Hypertext Markup Language
making input required you can use the 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.
... <form> <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).
...the following example covers it: <form> <div> <label for="mysearch">search for product by id:</label> <input type="search" id="mysearch" name="q" placeholder="two letters followed by four numbers" required size="30" pattern="[a-z]{2}[0-9]{4}"> <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: examples you can see a good example of a search form used in context at our website-aria-roles example (see it live).
<input type="tel"> - HTML: Hypertext Markup Language
, let's use this html: <form> <div> <label for="telno">enter a telephone number (required): </label> <input id="telno" name="telno" type="tel" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> and let's include the following css to highlight valid entries with a checkmark and invalid entries with a cross: 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; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } the output looks like this: pattern validation if you want to further ...
...l use the same css as before, but our html is changed to look like this: <form> <div> <label for="telno">enter a telephone number (in the form xxx-xxx-xxxx): </label> <input id="telno" name="telno" type="tel" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> 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; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } notice how the entered value is reported as invalid unless the pattern ...
... 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; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } specifications specification status comment ht...
<input type="url"> - HTML: Hypertext Markup Language
the example below creates a 30-character wide url address entry box, requiring that the contents be no shorter than
10 characters and no longer than 80 characters.
... <input id="myurl" name="myurl" type="url" size="30" minlength="
10" maxlength="80"> note: these attributes also affect validation; a value shorter or longer than the specified minimum/maximum lengths will be classified as invalid; in addition most browsers will simply refuse to let the user enter a value longer than the specified maximum length.
...let's see how: 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; } <form> <div> <label for="myurl">enter the problem website address:</lab...
<input type="week"> - 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; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in su...
... 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 other part of the code that may be of interest is the feature detection code.
...tive picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the weeks dynamically populateweeks(); } function populateweeks() { // populate the week select with 52 weeks for(var i = 1; i <= 52; i++) { var option = document.createelement('option'); option.textcontent = (i <
10) ?
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
html "0.a" - from the beginning through january
10, 1991 this tag had not been invented as yet, so no examples are found from this period.
...on heading</a> <a name="z1" href="#z5">second section heading</a> <a name="z8" href="#z14">newly inserted third section heading</a> <a name="z9" href="#z15">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="z
10" href="#z16">seventh section heading</a> <a name="z11" href="#z17">eighth section heading</a> <a name="z12" href="#z18">ninth section heading</a> <a name="z13" href="#z19">tenth section heading</a> <h2><a name="z4">first section heading</a></h1><p> ...
...tid n="z30"> </head> <body> <a name="z0" href="#z4">first section heading</a> <a name="z1" href="#z5">second section heading</a> <a name="z8" href="#z14">newly inserted third section heading</a> <a name="z9" href="#z15">newly inserted fourth section heading</a> <a name="z2" href="#z6">original third (now fifth) section heading</a> <a name="z
10" href="#z16">seventh (now sixth) section heading</a> <a name="z11" href="#z17">eighth (now seventh) section heading</a> <a name="z12" href="#z18">ninth (now eighth) section heading</a> <a name="z20" href="#z25">new ninth section heading</a> <a name="z21" href="#z26">new tenth section heading</a> <a name="z22" href="#z27">new eleventh section heading</a> ...
Microformats - HTML: Hypertext Markup Language
me entry name/title p-author who wrote the entry, optionally embedded h-card 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/jgmac1
106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1
106">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://quickthoughts.jgregorymcverry.com/profile/jgmac1
106">greg mcverry</a> published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published" datetime="2019-05-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/05/31/hey-thanks-for-making-this-microformats-resource" ], "published": [ "2019-05-31t14:19:09+0000" ], "...
...mats resource", "lang": "en" } ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "greg mcverry" ], "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ], "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1
106" ] }, "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="p-name">microformats blogs</h1> <article class="h-ent...
MIME types (IANA media types) - HTTP
ost" 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/20
100
101 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=---------------------------8721656041911415653955004498 content-length: 465 -----------------------------8721656041911415653955...
... http/1.1 206 partial content accept-ranges: bytes content-type: multipart/byteranges; boundary=3d6b6a416f9b5 content-length: 385 --3d6b6a416f9b5 content-type: text/html content-range: bytes
100-200/1270 eta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="vieport" content --3d6b6a416f9b5 content-type: text/html content-range: bytes 300-400/1270 -color: #f0f0f2; margin: 0; padding: 0; font-family: "open sans", "helvetica --3d6b6a416f9b5-- importance of setting the correct mime type most web servers send unrecognized resources as...
...not all file types have magic numbers, so this is not
100% reliable either.
Indexed collections - JavaScript
let a1 = ['a',
10, 'b', 20, 'c', 30] let a2 = a1.filter(function(item) { return typeof item === 'number'; }) console.log(a2) // logs [
10, 20, 30] every(callback[, thisobject]) returns true if callback returns true for every item in the array.
... let a = [
10, 20, 30] let total = a.reduce(function(accumulator, currentvalue) { return accumulator + currentvalue }, 0) console.log(total) // prints 60 reduceright(callback[, initialvalue]) works like reduce(), but starts with the last element.
...-bit two's complement signed integer short int16_t uint16array 0 to 65535 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 4294967295 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.1234567) 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...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int6...
Loops and iteration - JavaScript
ough the elements in an array until it finds the index of an element whose value is thevalue: for (let i = 0; i < a.length; i++) { if (a[i] === thevalue) { break; } } example 2: breaking to a label let x = 0; let z = 0; labelcancelloops: while (true) { console.log('outer loops: ' + x); x += 1; z = 1; while (true) { console.log('inner loops: ' + z); z += 1; if (z ===
10 && x ===
10) { break labelcancelloops; } else if (z ===
10) { break; } } } continue statement the continue statement can be used to restart a while, do-while, for, or label statement.
... let i = 0; let n = 0; while (i < 5) { i++; if (i === 3) { continue; } n += i; console.log(n); } //1,3,7,12 let i = 0; let n = 0; while (i < 5) { i++; if (i === 3) { // continue; } n += i; console.log(n); } // 1,3,6,
10,15 example 2 a statement labeled checkiandj contains a statement labeled checkj.
... let i = 0; let j =
10; checkiandj: while (i < 4) { console.log(i); i += 1; checkj: while (j > 4) { console.log(j); j -= 1; if ((j % 2) === 0) { continue checkj; } console.log(j + ' is odd.'); } console.log('i = ' + i); console.log('j = ' + j); } for...in statement the for...in statement iterates a specified variable over all th...
Text formatting - JavaScript
with unicode code point escapes, any character can be escaped using hexadecimal numbers so that it is possible to use unicode code points up to 0x
10ffff.
...string text line 1\n\ string text line 2'); // "string text line 1 // string text line 2" to get the same effect with multi-line strings, you can now write: console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2" embedded expressions in order to embed expressions within normal strings, you would use the following syntax: const five = 5; const ten =
10; console.log('fifteen is ' + (five + ten) + ' and not ' + (2 * five + ten) + '.'); // "fifteen is 15 and not 20." now, with template literals, you are able to make use of the syntactic sugar making substitutions like this more readable: const five = 5; const ten =
10; console.log(`fifteen is ${five + ten} and not ${2 * five + ten}.`); // "fifteen is 15 and not 20." for more information, read a...
...(the result is different in another time zone.) const msperday = 24 * 60 * 60 *
1000; // july 17, 2014 00:00:00 utc.
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 0x
10ffff (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 0x
10ffff (1114111).
... a code point is a value in the unicode codespace; that is, the range of integers from 0 to 0x
10ffff.
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 es2015, 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.
Array.prototype.every() - JavaScript
if (!testresult) { return false; } } k++; } return true; }; } examples testing size of all array elements the following example tests whether all elements in the array are bigger than
10.
... function isbigenough(element, index, array) { return element >=
10; } [12, 5, 8, 130, 44].every(isbigenough); // false [12, 54, 18, 130, 44].every(isbigenough); // true using arrow functions arrow functions provide a shorter syntax for the same test.
... [12, 5, 8, 130, 44].every(x => x >=
10); // false [12, 54, 18, 130, 44].every(x => x >=
10); // true affecting initial array (modifying, appending, and deleting) the following examples tests the behaviour of the every method when the array is modified.
Array.prototype.some() - JavaScript
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.
... function isbiggerthan
10(element, index, array) { return element >
10; } [2, 5, 8, 1, 4].some(isbiggerthan
10); // false [12, 5, 8, 1, 4].some(isbiggerthan
10); // true testing array elements using arrow functions arrow functions provide a shorter syntax for the same test.
... [2, 5, 8, 1, 4].some(x => x >
10); // false [12, 5, 8, 1, 4].some(x => x >
10); // true checking whether a value exists in an array to mimic the function of the includes() method, this custom function returns true if the element exists in the array: const fruits = ['apple', 'banana', 'mango', 'guava']; function checkavailability(arr, val) { return arr.some(function(arrval) { return val === arrval; }); } checkavailability(fruits, 'kela'); // false checkavailability(fruits, 'banana'); // true checking whether a value exists using an arrow function const fruits = ['apple', 'banana', 'mango', 'guava']; function checkavailability(arr, val) { return arr.some(arrval => val === arrval); } checkavailability(fruits, 'kela'); // false checkavailability(fruits, 'banana'); // tr...
BigInt.prototype.toString() - JavaScript
for radixes above
10, the letters of the alphabet indicate numerals greater than 9.
... if the radix is not specified, the preferred radix is assumed to be
10.
... examples using tostring 17n.tostring(); // '17' 66n.tostring(2); // '
10000
10' 254n.tostring(16); // 'fe' -
10n.tostring(2); // -
1010' -0xffn.tostring(2); // '-11111111' negative-zero bigint there is no negative-zero bigint as there are no negative zeros in integers.
Math.ceil() - JavaScript
* @param {integer} exp the exponent (the
10 logarithm of the adjustment base).
...(+value[1] + exp) : exp)); } // decimal round if (!math.round
10) { math.round
10 = function(value, exp) { return decimaladjust('round', value, exp); }; } // decimal floor if (!math.floor
10) { math.floor
10 = function(value, exp) { return decimaladjust('floor', value, exp); }; } // decimal ceil if (!math.ceil
10) { math.ceil
10 = function(value, exp) { return decimaladjust('ceil', value, exp); }; } })(); // ...
...round math.round
10(55.55, -1); // 55.6 math.round
10(55.549, -1); // 55.5 math.round
10(55, 1); // 60 math.round
10(54.9, 1); // 50 math.round
10(-55.55, -1); // -55.5 math.round
10(-55.551, -1); // -55.6 math.round
10(-55, 1); // -50 math.round
10(-55.1, 1); // -60 // floor math.floor
10(55.59, -1); // 55.5 math.floor
10(59, 1); // 50 math.floor
10(-55.51, -1); // -55.6 math.floor
10(-51, 1); // -60 // ceil math.ceil
10(55.51, -1); // 55.6 math.ceil
10(51, 1); // 60 math.ceil
10(-55.59, -1); // -55.5 math.ceil
10(-59, 1); // -50 specifications specification ecmascript (ecma-262)the definition of 'math.ceil' in that specification.
Math.floor() - JavaScript
* @param {integer} exp the exponent (the
10 logarithm of the adjustment base).
...(+value[1] + exp) : exp)); } // decimal round const round
10 = (value, exp) => decimaladjust('round', value, exp); // decimal floor const floor
10 = (value, exp) => decimaladjust('floor', value, exp); // decimal ceil const ceil
10 = (value, exp) => decimaladjust('ceil', value, exp); // round round
10(55.55, -1); // 55.6 round
10(55.549, -1); // 55.5 round
10(55, 1); // 60 round
10(54.9, 1); // 50 round
10(-55.55, -1); // -55.5 round
10(-55.551, -1);...
... // -55.6 round
10(-55, 1); // -50 round
10(-55.1, 1); // -60 // floor floor
10(55.59, -1); // 55.5 floor
10(59, 1); // 50 floor
10(-55.51, -1); // -55.6 floor
10(-51, 1); // -60 // ceil ceil
10(55.51, -1); // 55.6 ceil
10(51, 1); // 60 ceil
10(-55.59, -1); // -55.5 ceil
10(-59, 1); // -50 specifications specification ecmascript (ecma-262)the definition of 'math.floor' in that specification.
Math.hypot() - JavaScript
the largest number you can represent in js is number.max_value, which is around
10308.
... if your numbers are larger than about
10154, taking the square of them will result in infinity.
...1 / 0 : max * math.sqrt(s)); }; examples using math.hypot() math.hypot(3, 4); // 5 math.hypot(3, 4, 5); // 7.07
10678118654755 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.07
10678118654755, +'5' => 5 math.hypot(-3); // 3, the same as math.abs(-3) specifications specification ecmascript (ecma-262)the definition of 'math.hypot' in that...
Number.prototype.toString() - JavaScript
for radices above
10, the letters of the alphabet indicate numerals greater than 9.
... if the radix is not specified, the preferred radix is assumed to be
10.
... examples using tostring let count =
10 console.log(count.tostring()) // displays '
10' console.log((17).tostring()) // displays '17' console.log((17.2).tostring()) // displays '17.2' let x = 6 console.log(x.tostring(2)) // displays '1
10' console.log((254).tostring(16)) // displays 'fe' console.log((-
10).tostring(2)) // displays '-
1010' console.log((-0xff).tostring(2)) // displays '-11111111' specifications specification ecmascript (e...
Number - JavaScript
the largest value a number can hold is about 1.8×
10308.
...37 is still a number, not a bigint.) number may also be expressed in literal forms like 0b
101, 0o13, 0x0a.
... convert numeric strings and null to numbers number('123') // 123 number('123') === 123 /// true number('12.3') // 12.3 number('12.00') // 12 number('123e-1') // 12.3 number('') // 0 number(null) // 0 number('0x11') // 17 number('0b11') // 3 number('0o11') // 9 number('foo') // nan number('
100a') // nan number('-infinity') //-infinity specifications specification ecmascript (ecma-262)the definition of 'number' in that specification.
Promise.all() - JavaScript
var p1 = promise.resolve(3); var p2 = 1337; var p3 = new promise((resolve, reject) => { settimeout(() => { resolve("foo"); },
100); }); promise.all([p1, p2, p3]).then(values => { console.log(values); // [3, 1337, "foo"] }); if the iterable contains non-promise values, they will be ignored, but still counted in the returned promise array value (if the promise is 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 it...
... 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 p5 = new promise((resolve, reject) => { reject(new error('reject')); }); // using .catch: promise.all([p1, p2,...
... p3, p4, p5]) .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('p1_delayed_resolution'),
1000); }); var p2 = new promise((resolve, reject) => { reject(new error('p2_immediate_rejection')); }); promise.all([ p1.catch(error => { return error }), p2.catch(error => { return error }), ]).then(values => { console.log(values[0]) // "p1_delayed_resolution" console.error(values[1]) // "error: p2_immediate_rejection" }) specifications specification ecmascript (ecma-262)the definition of 'promise.all' in that specification.
Promise.race() - JavaScript
verpendingpromise); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "pending" } if the iterable contains one or more non-promise value and/or an already settled promise, then promise.race will resolve to the first of these values found in the array: var foreverpendingpromise = promise.race([]); var alreadyfulfilledprom = promise.resolve(
100); var arr = [foreverpendingpromise, alreadyfulfilledprom, "non-promise value"]; var arr2 = [foreverpendingpromise, "non-promise value", promise.resolve(
100)]; var p = promise.race(arr); var p2 = promise.race(arr2); console.log(p); console.log(p2); settimeout(function(){ console.log('the stack is now empty'); console.log(p); console.log(p2); }); // logs, in order: // promise { <sta...
...te>: "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(va...
...lue) { console.log(value); // "three" // p3 is faster, so it fulfills }, function(reason) { // not called }); var p5 = new promise(function(resolve, reject) { settimeout(() => resolve('five'), 500); }); var p6 = new promise(function(resolve, reject) { settimeout(() => reject(new error('six')),
100); }); promise.race([p5, 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.
Promise - JavaScript
the effect is much like that of settimeout(action,
10).
... "use strict"; // to experiment with error handling, "threshold" values cause errors randomly const threshold_a = 8; // can use zero 0 to guarantee error function 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'.
... resolve(thispromisecount); }, math.random() * 2000 +
1000); }); // we define what to do when the promise is resolved with the then() call, // and what to do when the promise is rejected with the catch() call p1.then(function(val) { // log the fulfillment value log.insertadjacenthtml('beforeend', val + ') promise fulfilled (async code terminated)'); }).catch((reason) => { // log the rejection reason console.log(`handle reject...
Set.prototype.delete() - JavaScript
setobj.add({x:
10, y: 20}); // add object in the set.
... // delete any point with `x >
10`.
... setobj.foreach(function(point){ if (point.x >
10){ setobj.delete(point) } }) specifications specification ecmascript (ecma-262)the definition of 'set.prototype.delete' in that specification.
SharedArrayBuffer - JavaScript
var sab = new sharedarraybuffer(
1024); worker.postmessage(sab); updating and synchronizing shared memory with atomic operations shared memory can be created and updated simultaneously in workers or the main thread.
... var sab = sharedarraybuffer(
1024); // typeerror: calling a builtin sharedarraybuffer constructor // without new is forbidden var sab = new sharedarraybuffer(
1024); constructor sharedarraybuffer() creates a new sharedarraybuffer object.
... examples creating a new sharedarraybuffer var sab = new sharedarraybuffer(
1024); slicing the sharedarraybuffer sab.slice(); // sharedarraybuffer { bytelength:
1024 } sab.slice(2); // sharedarraybuffer { bytelength:
1022 } sab.slice(-2); // sharedarraybuffer { bytelength: 2 } sab.slice(0, 1); // sharedarraybuffer { bytelength: 1 } using it in a webgl buffer const canvas = document.queryselector('canvas'); const gl = canvas.getcontext('webgl'); const buffer = gl.c...
String.prototype.charCodeAt() - JavaScript
description unicode code points range from 0 to 1114111 (0x
10ffff).
... // high surrogate (could change last hex to 0xdb7f // to treat high private surrogates // as single characters) if (0xd800 <= code && code <= 0xdbff) { hi = code; low = str.charcodeat(idx + 1); if (isnan(low)) { throw 'high surrogate not followed by ' + 'low surrogate in fixedcharcodeat()'; } return ( (hi - 0xd800) * 0x400) + (low - 0xdc00) + 0x
10000; } if (0xdc00 <= code && code <= 0xdfff) { // low surrogate // we return false to allow loops to skip // this iteration since should have already handled // high surrogate above in the previous iteration return false; // hi = str.charcodeat(idx - 1); // low = code; // return ((hi - 0xd800) * 0x400) + // (low - 0xdc00) + 0x
10000; } return code; } fixi...
...dx) { idx++; } else { break; } } if (idx >= end || idx < 0) { return nan; } code = str.charcodeat(idx); var hi, low; if (0xd800 <= code && code <= 0xdbff) { hi = code; low = str.charcodeat(idx + 1); // go one further, since one of the "characters" // is part of a surrogate pair return ((hi - 0xd800) * 0x400) + (low - 0xdc00) + 0x
10000; } return code; } specifications specification ecmascript (ecma-262)the definition of 'string.prototype.charcodeat' in that specification.
String.fromCodePoint() - JavaScript
sult = ""; for (var index=0, len = arguments.length; index !== len; ++index) { var codepoint = +arguments[index]; // correctly handles all cases including `nan`, `-infinity`, `+infinity` // the surrounding `!(...)` is required to correctly handle `nan` cases // the (codepoint>>>0) === codepoint clause handles decimals and negatives if (!(codepoint < 0x
10ffff && (codepoint>>>0) === codepoint)) throw rangeerror("invalid code point: " + codepoint); if (codepoint <= 0xffff) { // bmp code point codelen = codeunits.push(codepoint); } else { // astral code point; split in surrogate halves // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae codepoint -= 0x
10000; codele...
...n = codeunits.push( (codepoint >>
10) + 0xd800, // highsurrogate (codepoint % 0x400) + 0xdc00 // lowsurrogate ); } if (codelen >= 0x3fff) { result += stringfromcharcode.apply(null, codeunits); codeunits.length = 0; } } return result + stringfromcharcode.apply(null, codeunits); }; try { // 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(65, 90); // "az...
...code points 0x0
10000 – 0x
10ffff) by specifying their code point.
TypedArray.prototype.every() - JavaScript
examples testing size of all typed array elements the following example tests whether all elements in the typed array are bigger than
10.
... 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
examples filtering out all small values the following example uses filter() to create a filtered typed array that has all elements with values less than
10 removed.
... 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
examples testing size of all typed array elements the following example tests whether any element in the typed array is bigger than
10.
... function isbiggerthan
10(element, index, array) { return element >
10; } new uint8array([2, 5, 8, 1, 4]).some(isbiggerthan
10); // false new uint8array([12, 5, 8, 1, 4]).some(isbiggerthan
10); // 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.
Bitwise AND (&) - JavaScript
for example, the following integer with more than 32 bits will be converted to a 32 bit integer: before: 11
1001
101111
101000000000000001
10000000000001 after:
101000000000000001
10000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
... 9 (base
10) = 0000000000000000000000000000
1001 (base 2) 14 (base
10) = 000000000000000000000000000011
10 (base 2) -------------------------------- 14 & 9 (base
10) = 0000000000000000000000000000
1000 (base 2) = 8 (base
10) bitwise anding any number x with 0 yields 0.
... examples using bitwise and // 5: 00000000000000000000000000000
101 // 2: 000000000000000000000000000000
10 5 & 2; // 0 specifications specification ecmascript (ecma-262)the definition of 'bitwise and expression' in that specification.
Bitwise OR (|) - JavaScript
for example, the following integer with more than 32 bits will be converted to a 32 bit integer: before: 11
1001
101111
101000000000000001
10000000000001 after:
101000000000000001
10000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
... 9 (base
10) = 0000000000000000000000000000
1001 (base 2) 14 (base
10) = 000000000000000000000000000011
10 (base 2) -------------------------------- 14 | 9 (base
10) = 00000000000000000000000000001111 (base 2) = 15 (base
10) bitwise oring any number x with 0 yields x.
... examples using bitwise or // 9 (0000000000000000000000000000
1001) // 14 (000000000000000000000000000011
10) 14 | 9; // 15 (00000000000000000000000000001111) specifications specification ecmascript (ecma-262)the definition of 'bitwise or expression' in that specification.
Bitwise XOR (^) - JavaScript
for example, the following integer with more than 32 bits will be converted to a 32 bit integer: before: 11
1001
101111
101000000000000001
10000000000001 after:
101000000000000001
10000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
... 9 (base
10) = 0000000000000000000000000000
1001 (base 2) 14 (base
10) = 000000000000000000000000000011
10 (base 2) -------------------------------- 14 ^ 9 (base
10) = 00000000000000000000000000000111 (base 2) = 7 (base
10) bitwise xoring any number x with 0 yields x.
... examples using bitwise xor // 9 (0000000000000000000000000000
1001) // 14 (000000000000000000000000000011
10) 14 ^ 9; // 7 (00000000000000000000000000000111) specifications specification ecmascript (ecma-262)the definition of 'bitwise xor expression' in that specification.
Unsigned right shift (>>>) - JavaScript
9 (base
10): 0000000000000000000000000000
1001 (base 2) -------------------------------- 9 >>> 2 (base
10): 000000000000000000000000000000
10 (base 2) = 2 (base
10) however, this is not the case for negative numbers.
... for example, -9 >>> 2 yields
1073741821, which is different than -9 >> 2 (which yields -3): .
... -9 (base
10): 111111111111111111111111111
10111 (base 2) -------------------------------- -9 >>> 2 (base
10): 00111111111111111111111111111
101 (base 2) =
1073741821 (base
10) examples using unsigned right shift 9 >>> 2; // 2 -9 >>> 2; //
1073741821 specifications specification ecmascript (ecma-262)the definition of 'bitwise shift operators' in that specification.
delete operator - JavaScript
object.defineproperty(globalthis, 'variable1', { value:
10, configurable: true, }); object.defineproperty(globalthis, 'variable2', { value:
10, configurable: false, }); // syntaxerror in strict mode.
...delete employeedetails; // returns true function f() { var z = 44; // delete doesn't affect local variable names delete z; // returns false } delete and the prototype chain in the following example, we delete an own property of an object while a property with the same name is available on the prototype chain: function foo() { this.bar =
10; } foo.prototype.bar = 42; var foo = new foo(); // foo.bar is associated with the // own property.
... console.log(foo.bar); //
10 // delete the own property within the // foo object.
async function - JavaScript
async function foo() { const p1 = new promise((resolve) => settimeout(() => resolve('1'),
1000)) const p2 = new promise((_,reject) => settimeout(() => reject('2'), 500)) const results = [await p1, await p2] // do not do this!
...onds() { console.log("starting slow promise") return new promise(resolve => { settimeout(function() { resolve("slow") console.log("slow promise is done") }, 2000) }) } function resolveafter1second() { console.log("starting fast promise") return new promise(resolve => { settimeout(function() { resolve("fast") console.log("fast promise is done") },
1000) }) } async function sequentialstart() { console.log('==sequential start==') // 1.
...esolveafter2seconds()))(), (async()=>console.log(await resolveafter1second()))() ]) } sequentialstart() // after 2 seconds, logs "slow", then after 1 more second, "fast" // wait above to finish settimeout(concurrentstart, 4000) // after 2 seconds, logs "slow" and then "fast" // wait again settimeout(concurrentpromise, 7000) // same as concurrentstart // wait again settimeout(parallel,
10000) // truly parallel: after 1 second, logs "fast", then after 1 more second, "slow" await and parallelism in sequentialstart, execution suspends 2 seconds for the first await, and then another second for the second await.
for...of - JavaScript
examples iterating over an array const iterable = [
10, 20, 30]; for (const value of iterable) { console.log(value); } //
10 // 20 // 30 you can use let instead of const too, if you reassign the variable inside the block.
... 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 // 255 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 iteratin...
...functions generating an iterable object: function* fibonacci() { // a generator function let [prev, curr] = [0, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (const n of fibonacci()) { console.log(n); // truncate the sequence at
1000 if (n >=
1000) { break; } } do not reuse generators generators should not be re-used, even if the for...of loop is terminated early, for example via the break keyword.
OpenSearch description format
it must be
1024 or fewer characters of plain text, with no html or other markup.
... note: for icons loaded remotely (that is, from https:// uris as opposed to data: uris), firefox will reject icons larger than
10 kilobytes.
... remotely fetched favicons must not be larger than
10kb (see bug 361923).
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="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="
100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" 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="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop of...
...fset="50%" stop-color="green" /> <stop offset="
100%" stop-color="white" /> </radialgradient> <radialgradient cx="
100%" id="mygradient
100"> <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(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient
100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cx' in that specification.
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="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="
100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" 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="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop of...
...fset="50%" stop-color="green" /> <stop offset="
100%" stop-color="white" /> </radialgradient> <radialgradient cy="
100%" id="mygradient
100"> <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(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient
100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cy' in that specification.
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...
... 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="25%" y2="25%" /> <line x1="0" x2="
100%" y1="50%" y2="50%" /> <line x1="0" x2="
100%" y1="75%" y2="75%" /> <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="25%">svg</text> <text dx="0
10%" x="
10%" y="50%">svg</text> <text dx="0
10% 20%" x="
10%" y="75%">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
seven elements utilize 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="
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: ...
... value list of <length> default value none animatable yes example html,body,svg { height:
100% } <svg viewbox="0 0 150
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.
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="40" font-family="verdana, sans-serif" font-size="
10px"> this text uses the verdana font (
10px), which has relatively large lowercase letters.
... </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.35" fy="0.35" 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.35" fy="0.35" fr="25%"> <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" ...
...nslatex(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.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="
100%" stop-color="blue"/> </radialgradient> </defs> <rect x="
10" y="
10" rx="15" ry="15" 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="35" cy="35" 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 'fr' in that specification.
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="150" 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="80" textlength="
100" lengthadjust="spacing"> shrunk using spacing only.
... </text> <text x="0" y="1
10" textlength="
100" lengthadjust="spacingandglyphs"> shrunk using spacing and glyphs.
pointer-events - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0 20
10" xmlns="http://www.w3.org/2000/svg"> <!-- the circle will always intercept the mouse event.
... 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="15" 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>, <ellipse...
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,35 2,35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(
100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by...
... 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,35 2,35 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,35 2,35 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="mygradient050"> <stop offset="0" stop-color="white" /> <stop offset="
100%" stop-color="black" /> </radialgradient> <radialgradient r="
100%" id="mygradient
100"> <stop offset="0" stop-color="white" /> <stop offset="
100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" 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(#mygradient050)" /> <rect x="220" y="120" width="60" height="60" fill="url(#mygradient
100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its size.
... the gradient will be drawn such that the
100% gradient stop is mapped to the perimeter of this end circle.
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="m
10,1
10 a120,120 -45 0,1 1
10 10 a120,120 -45 0,1
10,1
10" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l
10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> <...
.../path> <g transform="translate(
100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l
10,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 l
10,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)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 2
10 degrees --> <path fill="purple" d="m-5,-5 l
10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="2
10"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications specification status comment svg animations level 2the definition of 'rotate' in that specification.
textLength - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height:
100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlength="6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percentage> | <number> default value none animatable yes <length-percentage> this value specifies the width of the space the text wil...
...it's pretty basic, with a
1000-by-300 pixel space mapped into a
10 centimeter by 3 centimeter box.
... <svg width="
10cm" height="3cm" viewbox="0 0
1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="
10" y="150" font-family="sans-serif" font-size="60" fill="green"> hello world!
viewBox - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } svg:not(:root) { display: inline-block; } <svg viewbox="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 reso...
...lved 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 against
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 botto...
...m/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.
<clipPath> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0
100
100"> <clippath id="myclip"> <!-- everything outside the circle will be clipped and therefore invisible.
... --> <circle cx="40" cy="35" r="35" /> </clippath> <!-- the original black heart, for reference --> <path id="heart" d="m
10,30 a20,20,0,0,1,50,30 a20,20,0,0,1,90,30 q90,60,50,90 q
10,60,
10,30 z" /> <!-- only the portion of the red heart inside the clip circle is visible.
...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.
<mask> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="-
10 -
10 120 120"> <mask id="mymask"> <!-- everything under a white pixel will be visible --> <rect x="0" y="0" width="
100" height="
100" fill="white" /> <!-- everything under a black pixel will be invisible --> <path d="m
10,35 a20,20,0,0,1,50,35 a20,20,0,0,1,90,35 q90,65,50,95 q
10,65,
10,35 z" fill="black" /> </mask> <polygon points="-
10,1
10 1
10,1
10 1
10,-
10" fill="orange" /> <!-- with this mask applied, we "punch" a heart shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="url(#mymask)" /> </svg> attributes height this attribute defines the heigh...
... value type: <coordinate> ; default value: -
10%; animatable: yes y this attribute defines the y-axis coordinate of the top-left corner of the masking area.
... value type: <coordinate> ; default value: -
10%; animatable: yes width this attribute defines the width of the masking area.
Clipping and masking - SVG: Scalable Vector Graphics
creating clips we create the above mentioned semicircle based on a circle element: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="
100" /> </clippath> </defs> <circle cx="
100" cy="
100" r="
100" clip-path="url(#cut-off-bottom)" /> </svg> centered at (
100,
100) a circle with radius
100 is painted.
...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.
Filter effects - SVG: Scalable Vector Graphics
setblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <!-- litpaint --> <fespecularlighting in="blur" surfacescale="5" specularconstant=".75" 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="litpain...
...t"/> </femerge> </filter> </defs> <!-- graphic elements --> <g filter="url(#myfilter)"> <path fill="none" stroke="#d90000" stroke-width="
10" d="m50,66 c-50,0 -50,-60 0,-60 h
100 c50,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="45" 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".
... step 3 <fespecularlighting in="offsetblur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-
10000" z="20000"/> </fespecularlighting> <fespecularlighting> takes in "offsetblur", generates a lighting effect, and stores the result in the buffer "specout".
Texts - SVG: Scalable Vector Graphics
basics we have seen in the introducing example, that the text element can be used to put arbitrary text in svg documents: <text x="
10" y="
10">hello world!</text> the x and y attributes determine, where in the viewport the text will appear.
... textpath this element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path: <path id="my_path" d="m 20,20 c 80,60
100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
... </textpath> </text> playable code 2 <svg width="200" height="
100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="m 20,20 c 80,60
100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
window/utils - Archive of obsolete content
features object map of features to set for the window, defined like this: { width:
10, height: 15, chrome: true }.
... features string map of features to set for the window, defined like: { width:
10, height: 15, chrome: true }.
cfx - Archive of obsolete content
--e
10s if this option is set then the add-on runs in a separate process.
... --e
10s if this option is set then the add-on runs in a separate process.
Embedding SVG - Archive of obsolete content
l version="1.0" encoding="utf-8"?> <!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" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <p>hello</p> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="
10" y="
10" width="
100" height="
100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ...
...example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <vbox> <label value="hello"/> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="
10" y="
10" width="
100" height="
100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <label value="world"/> </vbox> </window> ...
Miscellaneous - Archive of obsolete content
<div id="scrollarea" style="overflow: scroll; height: 6em; width:
10em;"> this is the scrolling area.
... simulating mouse and key events https://developer.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown",
10,
10, 0, 1, 0); utils.sendmouseevent("mouseup",
10,
10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.getselection().tostring(); or: content.getselection(); // |window| object is implied; i.e., window.content.getselection() or: getbrowserselection(); // |window| object is implied; i.e., window.g...
JavaScript Daemons Management - Archive of obsolete content
*/ daemon.prototype; daemon.context.constructor = object; /* these properties can be manually reconfigured after the creation of the daemon */ daemon.prototype.owner = daemon.context; daemon.prototype.task = null; daemon.prototype.rate =
100; daemon.prototype.length = infinity; daemon.prototype.reversals = 0; daemon.prototype.onstart = null; daemon.prototype.onstop = null; /* these properties should be read-only after the creation of the daemon */ daemon.prototype.session = -1; daemon.prototype.index = 0; daemon.prototype.paused = true; daemon.prototype.backw = true; /* system required daemon global object me...
...the default value is
100.
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
' [dir]' : '')); } alert(list.join('\n')); get parent directory although the nsilocalfile object does not contain a function for moving to higher directories, listing
10 does show how you can use the parent property to get the parent directory of the current file.
... listing
10: creating a backup of a specific file in a separate folder file.initwithpath('c:\\temp\\temp.txt'); backupfolder = file.parent.parent; // c:\ backupfolder.append('backup'); // c:\backup backupfolder.create(components.interfaces.nsifile.directory_type, 0666); file.copyto(backupfolder, file.leafname+'.bak'); converting between file paths and file urls xpcom functions can use both remote resources and local files, and these functions almost always specify their targets using uris.
Promises - Archive of obsolete content
try { this.data = json.parse( yield os.file.read(this.path, { encoding: "utf-8" })); } catch (e if e.becausenosuchfile) { this.data = json.parse(json.stringify(default_)); } // create a saver to write our json-stringified data to our // path, at
1000ms minimum intervals.
... this.saver = new deferredsave(this.path, () => json.stringify(this.data),
1000); return this; }.bind(this)); } /** * immediately save the data to disk.
Adding preferences to an extension - Archive of obsolete content
ence changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice) .getbranch("extensions.stockwatcher2."); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.refreshinformation(); window.setinterval(this.refreshinformation,
10*60*
1000); } }, our object has two member variables.
... the last thing the startup() method does is to call the window.setinterval() dom method to set up a callback that will automatically run our refreshinformation() method every
10 minutes.
Creating a dynamic status bar extension - Archive of obsolete content
we end up reloading data from each of the windows once in
10 minutes - fixing this by creating a js component responsible for communication with the server is a good idea for one of the future articles startup: function() { this.refreshinformation(); window.setinterval(this.refreshinformation,
10*60*
1000); }, this starts by calling our refreshinformation() function, which is responsible for fetching and displaying stock ticker information in the statu...
...this configures our refreshinformation() routine to be called every
10 minutes (the time interval is specified in milliseconds).
List of Former Mozilla-Based Applications - Archive of obsolete content
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, 20
10 jolicloud web operating system as of march 20
10, rw/w reports jolicloud is on chrome/chrome os joost tv over internet switched from xulrunner-based client to a web application liferea news aggregator switched to webkit in version 1.6 manyone browser browser originally mozilla-based but now i believe the have a web-based tool (need refere...
...f 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 editor inactive xulplayer media player last project update on 3/14/09 zoomcreator photo collage tool on april 29, 20
10 the site announced zoomara was shutting down.
List of Mozilla-Based Applications - Archive of obsolete content
l client thunderbird bundled with a set of extensions (formerly known as milimail) tuneup music collection organizer listed on xulrunner hall of fame but haven't seen information elsewhere tuxguitar tabulature editor uses xulrunner twitfactory standalone twitter/identi.ca client uis university information system intranet application,
1000 users, thin client based on ff3 unison desktop enterprise email i think it's using mailnews code but don't have any information to link to.
...t web browser control library wyzo browser xb browser anonymous web browser xbusiness create and send branded invoices, quotes or estimates xdf billing and quotes software xiphos bible study software xmldbeditor database editor xpud linux desktop xpud: linux with an xul interface,
10 second boot time xrap xulrunner application packager xul daim image tool xul explorer development tool xulrunner application xuljet javascript framework uses xulrunner xulmine game standalone version yahoo!
cert_override.txt - Archive of obsolete content
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-256: 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
tail = sounddata.slice(written); } currentwriteposition += written; } },
100); } // control and generate the sound.
... var frequency = 0, currentsoundsample; var samplerate = 44
100; function requestsounddata(sounddata) { if (!frequency) { return; // no sound selected } var k = 2* math.pi * frequency / samplerate; for (var i=0, size=sounddata.length; i<size; i++) { sounddata[i] = math.sin(k * currentsoundsample++); } } var audiodestination = new audiodatadestination(samplerate, requestsounddata); function start() { currentsoundsample = 0; frequency = parsefloat(document.getelementbyid("freq").value); } function stop() { frequency = 0; } </script> </body> </html> ...
No Proxy For configuration - Archive of obsolete content
the entry ("www.otherdomain.localhost") a hostname (with domain) domain name "www.mozilla.org" does not block hostnames or domains that end in the same string (other-www.mozilla.org) an ip address ip address "1.2.3.4" does not block hostnames that resolve to the ip address ("127.0.0.1" does not block "localhost") a network network w/ cidr block "
10.0.0.0/8" does not block hostnames that resolve to the ip address range (
10.0.0.0/8 is not "no proxy for intranet hostnames") optional - port-specific (optional) ":" + port number "<filter>:81" only black-lists port.
...or
10.0.* ip addresses with wildcards in quads
10.*.*.* preferences name network.proxy.no_proxies_on default value localhost, 127.0.0.1 by default "localhost" and "127.0.0.1" are excluded, since most people assume these should connect to the local system.
Installing Dehydra - Archive of obsolete content
building spidermonkey it is recommended that you use spidermonkey revision aurora_base_201
10705 when building dehydra.
... cd $home hg clone http://hg.mozilla.org/mozilla-central/ cd mozilla-central hg update aurora_base_201
10705 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.
Building Firefox with Rust code - Archive of obsolete content
if you want to call code in the "e
10s" crate, you would add: extern crate e
10s; to toolkit/library/rust/shared/lib.rs; you would also need to specify the path to that crate in the dependencies section of toolkit/library/rust/shared/cargo.toml: [dependencies] e
10s = { path = "../../../../path/from/srcdir/e
10s" } the e
10s crate must also be checked into the tree at the appropriate path.
... if the e
10s crate depends on any other crates, their sources must also be checked into the tree, and e
10s's cargo.toml must have path attributes for each of its dependencies, and so on.
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,715,300" href="#nsiexternalhelperappservice::docontent"> <area alt="(
10) getcategoryentry()" coords="575,418,821,418,821,455,629,455,629,484,575,484" href="#categorymanager" shape="poly"> <area alt="(12)" coords="539,133,583,163" href="#stream-converter"> <area alt="(11)" coords="485,133,537,163" href="#contenthandler"> <area alt="(9)" coords="445,132,484,165" href="#nsdocumentopeninfo::dispatchcontent"> <area alt="(8)" coords="405,133,439,162" href="#onstartrequest-...
...="#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,505,88,505,88,535,37,535" 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,305,839,339" href="#nsiexternalhelperappservice"> <area alt="category manager" coords="683,467,807,527" href="#nscategorymanager"> <area alt="nsdocumentopeninfo" coords="371,71,635,185" href="#nsdocumentopeninfo"> <area alt="necko" coord...
Code snippets - Archive of obsolete content
components.utils.import("resource://services-sync/main.js"); weave.service._freshstart(); // if you want to do it without wiping the server (which will cause corruption!): weave.service.generatenewsymmetrickeys(); print out a list of large bookmark records // change '
1000' as appropriate.
... components.utils.import("resource://services-sync/engines.js"); components.utils.import("resource://services-sync/engines/bookmarks.js"); let bme = weave.service.enginemanager.get("bookmarks"); let ids = object.keys(bme._store.getallids()); for each (let id in ids) { let record = bme._store.createrecord(id, "bookmarks"); let len = record.tostring().length; if (len >
1000) { console.log("id: " + id + ", len = " + len + ", " + record.title); } } print an alphabetically sorted list of members of a collection components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); let ids = json.parse(new resource(weave.service.storageurl + "bookmarks").get()); for each (let id in ids.sort()) { console.log(" " + id); } get ...
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: {221ffe
10-ae3c-11d1-b66c-00805f8a2676} to initialize an id struct you declare them like this: id = {0x221ffe
10, 0xae3c, 0x11d1, {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}}; why the b66c couplet gets broken up and grouped with the last set of bytes is probably a footnote somewhere.
... links the component object model specification revision history feb 25, 1998, created oct 19, 1998, dusted off momentarily oct
10, 1999, added comments about xpidl, language-independentness original document information author(s): will scullin last updated date: september 13, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details ...
Reading textual data - Archive of obsolete content
using utf-8 for this example: */ "utf-8"; const replacementchar = components.interfaces.nsiconverterinputstream.default_replacement_character; var is = components.classes["@mozilla.org/intl/converter-input-stream;1"] .createinstance(components.interfaces.nsiconverterinputstream); is.init(fis, charset,
1024, replacementchar); now you can read string from is: var str = {}; var numchars = is.readstring(4096, str); if (numchars != 0 /* eof */) var read_string = str.value; to read the entire stream and do something with the data: var str = {}; while (is.readstring(4096, str) != 0) { processdata(str.value); } don't forget to close the stream when you're done with it (is.close()).
...using utf-8 for this example: */ "utf-8"; var is = components.classes["@mozilla.org/intl/converter-input-stream;1"] .createinstance(components.interfaces.nsiconverterinputstream); // this assumes that fis is the nsiinputstream you want to read from is.init(fis, charset,
1024, 0xfffd); is.queryinterface(components.interfaces.nsiunicharlineinputstream); if (is instanceof components.interfaces.nsiunicharlineinputstream) { var line = {}; var cont; do { cont = is.readline(line); // now you can do something with line.value } while (cont); } the above example reads an entire stream until eof.
Actionscript Acceptance Tests - Archive of obsolete content
when that keyword is encountered, the test harness will run the test against all possible -swfversion versions: uses_swfversion is the equivalent of: -swfversion 9 -swfversion
10 -swfversion 11 -swfversion 12 ...
...verifyerror: error #
1021 exitcode: 1 testname.exitcode file that specifies the expected exitcode.
Using addresses of stack variables with NSPR threads on win16 - Archive of obsolete content
with the speed of today's processors (even those running win-16), the copying of
10 - 50 kilobytes of data between two locations in memory is barely measurable 1.
...hareddata; static void forkedthread(void *arg) { shareddata *shared = (shareddata*)arg; while (--shared->counter > 0) pr_waitcondvar(shared->cv, pr_interval_no_timeout); return; } /* forkedthread */ printn main(printn argc, char **argv) { prthread *thread; shareddata shared; shared.ml = pr_newlock(); shared.cv = pr_newcondvar(shared.ml); shared.counter =
10; thread = pr_createthread( pr_user_thread, forkedthread, &shared, pr_priority_normal, pr_local_thread, pr_joinable_thread, 0); do { pr_sleep(pr_secondstointerval(1)); pr_lock(shared.ml); if (0 == shared.counter) break; pr_notifycondvar(shared.cv); pr_unlock(shared.ml); } while (pr_true); rv = pr_jointhread(thread); ...
Using gdb on wimpy computers - Archive of obsolete content
n mozilla_five_home=/home/blizzard/src/mozilla/mozilla/dist/bin ld_library_path=/home/blizzard/src/mozilla/mozilla/dist/bin shlib_path=/home/blizzard/src/mozilla/mozilla/dist/bin libpath=/home/blizzard/src/mozilla/mozilla/dist/bin moz_program=./mozilla-bin moz_toolkit= moz_debug=1 moz_debugger= /usr/bin/gdb ./mozilla-bin -x /tmp/mozargs22288 gnu gdb 1999
1004 copyright 1998 free software foundation, inc.
...you can see what libraries you already have loaded with the info sharedlibrary command: (gdb) info shar from to syms read shared object library 0x4044a000 0x4044d08c yes /lib/libdl.so.2 0x4044e000 0x4048ff90 yes /usr/lib/libstdc++-libc6.1-1.so.2 0x4049
1000 0x404ad9d8 yes /lib/libm.so.6 0x404ae000 0x405a285c yes /lib/libc.so.6 0x40000000 0x40013ed0 yes /lib/ld-linux.so.2 0x40607000 0x4061554c no /usr/lib/libz.so.1 0x40763000 0x4088af74 no /usr/lib/libgtk-1.2.so.0 0x4088b000 0x408c04d4 no /usr/lib/libgdk-1.2.so.0 [...] gdb is taking forever to load a shared library.
Video presentations - Archive of obsolete content
(as quicktime; 122 mb and 1
10 mb) release builds - from source tree to exe (part 1, part 2) learn how release builds of firefox are created.
... (as quicktime;
105 mb and 34 mb) other videos (might be obsolete) mozilla video presentations (2001-2002) seamonkey brownbag training series (2000) ...
Install script template - Archive of obsolete content
dentifier.html **/ // define some global variables var plugin_file = "npmyplugin.dll"; // this plugin consists of an xpt file because it is scriptable // http://mozilla.org/projects/plugins/scripting-plugins.html var component_file = "npmypluginscriptable.xpt"; var plugin_size = 2000; // (dll file) reserve a little extra so it is not required to update too often var component_size =
10; // (xpi file) reserve a little extra so it is not required to update too often var software_name="cult3d mozilla viewer"; // plids (http://mozilla.org/projects/plugins/plugin-identifier.html) are coined by vendors.
... * * @param dirpath directory path from getfolder * @param spacerequired required space in kilobytes * **/ function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable /
1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } /** * function for writing keys to the win32 system registry.
Using XPInstall to Install Plugins - Archive of obsolete content
here's an example of a hypothetical object tag used to invoke myplugin (an imaginary application): <object id="theplugin" type="application/x-myplugin" width="
100" height="
100" codebase="http://location/xpi/myplugin.xpi"> <param ....
...here's an example of a hypothetical object tag used to invoke myplugin (an imaginary application): <object id="theplugin" type="application/x-xpinstall" width="
100" height="
100" codebase="http://location/xpi/myplugin.xpi"> <param ....
Windows Install - Archive of obsolete content
// this function verifies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable /
1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } function updatewinreg4ren8dot3() { var fprogram = getfolder("program"); var ftemp = getfolder("tempora...
...lepath = file.windowsgetshortname(flongfilepath); if(sshortfilepath) { fren8dot3ini.writestring("rename", sshortfilepath, flongfilepath); binicreated = true; } } if(binicreated) updatewinreg4ren8dot3() ; } return(0); } // main var srdest; var err; var fprogram; srdest = 449; err = initinstall(prettyname, regname, "6.0.0.20001
10801"); logcomment("initinstall: " + err); fprogram = getfolder("program"); logcomment("fprogram: " + fprogram); if(verifydiskspace(fprogram, srdest)) { setpackagefolder(fprogram); err = adddirectory("", "6.0.0.20001
10801", "bin", // dir name in jar to extract fprogram, // where to put this file // (returned from getfolder) "", // subdir name to create relative to...
Introduction to XUL - Archive of obsolete content
type window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" onclick="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="
100%"/> </window> the beginning of this example, down through the window tag, is the standard preamble.
... #main-window { display: block; width:
100%; height:
100%; } for example, the above style rule would apply to the main window and dictates that the window should consume the full width and height available to it in a content area.
Multiple Rules - Archive of obsolete content
operatordescriptionexample equalsmatch if a value equals anothermatch a specific value lessmatch if a number is less than anothermatch only negative values with one rule, positive values with another greatermatch if a number is greater than anotherdisplay values greater than
1000 differently beforematch if a value comes before another alphabetically aftermatch if a value comes after another alphabetically startswithmatch if a value starts with a specific string endswithmatch if a value ends with a specific string containsmatch if a value contains a substringto highlight results that contain a search term here is an example using the 'contains' operator: <vbox datasour...
... <where subject="?age" rel="less" value="
10" negate="true"/> additional where clause attributes by default, the case of values must match in a condition.
Anonymous Content - Archive of obsolete content
for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="
1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
...the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="
1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others.
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.
Stack Positioning - Archive of obsolete content
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.
Tabboxes - Archive of obsolete content
</description> <spacer style="height:
10px"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width:
10px;"/> <menulist id="searchmode"> <menupopup> <menuitem ...
...label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="height:
10px"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="case sensitive search"/> <checkbox id="wordscheck" label="match entire filename"/> </tabpanel> </tabpanels> </tabbox> the tab elements have been placed around the main content of the window.
Tree Box Objects - Archive of obsolete content
for example if the tree shows
10 rows at a time, a page will be equivalent to
10 rows.
... 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.
The Implementation of the Application Object Model - Archive of obsolete content
if we ship a browser that does not have
100% support for css2, for example, but we've extended html by adding 20-30 new tags, people are going to put down their blinders and see only the fact that we were off adding a whole slew of new stuff to html when we could have been firming up our standards story.
...four interfaces with over
100 methods combined, a significant portion of which are redundant.
progressmeter - Archive of obsolete content
the default value if not specified is
100 such that the value may be used as a percentage.
...for instance, if no maximum value has been set, setting the value to "0" shows an empty bar, "
100" shows a bar at full length and "25" shows the first quarter of the bar.
Deploying XULRunner - Archive of obsolete content
copy xulrunner/ to this directory when deploying with xulrunner 2.0 and above do the following: move chrome.manifest to the root directory, and adjust resource paths inside chrome.manifest accordingly with xulrunner 9.0 or
10.0 you may need to copy "mozutils.dll" and/or "mozcrt19.dll" from the xulrunner directory to the root directory.
... xulrunner 39 and later due to mac os x code signing rules and how they interact with the design of xulrunner (see bug 1
105044 for the inside scoop), starting with xulrunner 39 the xulrunner library files are no longer able to reside in a xulrunner framework directory.
2006-12-08 - Archive of obsolete content
summary: mozilla.dev.l
10n - december 8, 2006 announcements mozilla sponsored server for l
10n the server for mozilla sponsored server for l
10n should be up and running soon.
... authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers
101) ...
2006-09-22 - Archive of obsolete content
announcements l
10n firefox 2.0 rc1 builds available paul reed announced the availability of firefox 2 rc1 l
10n builds 'major update' test paul reed made a test of the 'major update' feature available on sept.
... discussions discussion of l
10n builds some discussion about the firefox 2 rc1 l
10n builds happened, including why some locales are missing.
title - Archive of obsolete content
note: in userland's rss 0.91 there is a
100 character maximum limit.
...cles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> <url>http://www.advogato.org/image/tinyadvogato.png</url> </image> <item> <title>why can i not get any tang?!</title> <link>http://www.advogato.org/article/
10101.html</link> <description>seriously.
Encryption and Decryption - Archive of obsolete content
roughly speaking, 128-bit rc4 encryption is 3 x
1026 times stronger than 40-bit rc4 encryption.
... because it is relatively trivial to break an rsa key, an rsa public-key encryption cipher must have a very long key, at least
1024 bits, to be considered cryptographically strong.
Introduction to Public-Key Cryptography - Archive of obsolete content
86: ed:27:40:4d:86:b3:05:c0:01:bb:50:15:c9:de:dc:85:19:22: 43:7d:45:6d:71:4e:17:3d:f0:36:4b:5b:7f:a8:51:a3:a1:00: 98:ce:7f:47:50:2c:93:36:7c:01:6e:cb:89:06:41:72:b5:e9: 73:49:38:76:ef:b6:8f:ac:49:bb:63:0f:9b:ff:16:2a:e3:0e: 9d:3b:af:ce:9a:3e:48:65:de:96:61:d5:0a:11:2a:a2:80:b0: 7d:d8:99:cb:0c:99:34:c9:ab:25:06:a8:31:ad:8c:4b:aa:54: 91:f4:15 public exponent: 65537 (0x
10001) extensions: identifier: certificate type critical: no certified usage: ssl client identifier: authority key identifier critical: no key identifier: f2:f2:06:59:90:18:47:51:f5:89:33:5a:31:7a:e6:5c:fb:36: 26:c9 signature: algorithm: pkcs #1 md5 with rsa encryption signature: 6d:23:af:f3:d3:b6:7a:df:90:df:cd:7e:18:6c:01:69:8e:54:65:fc:06: 30...
...for example, figure
10 shows how verification fails if neither the root ca certificate nor any of the intermediate ca certificates are included in the verifier's local database.
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% 75% / 91% 75% / 75% 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 proper...
...se}, {name: 'widows', 'supported': false}, {name: 'zindex', 'supported': false} ] }; function supports(object, featureset) { var i; var features = _features[featureset]; var level = 0; if (!features) return level; for (i = 0; i < features.length; i++) if (typeof(object[features[i].name]) != 'undefined') { features[i].supported = true; ++level; } return math.floor( (
100 * level) / features.length ); } function generatereport(object, featureset, description) { var i; var features = _features[featureset]; document.write('<p><b>' + featureset + ' support for properties/methods in ' + description + ', percentage of names defined = ' + supports(object, featureset) + '%<\/b><\/p>'); document.write('<table cellspacing="0">'); for (i = 0; i < features.length; ...
-ms-scroll-chaining - Archive of obsolete content
for more information, see html scrolling, panning and zooming sample or internet explorer
10 scrolling, panning, and zooming with touch.
... .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min:
100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(
100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
-ms-scroll-snap-x - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-scroll-snap-type: none-ms-scroll-snap-points-x: snapinterval(0px,
100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-scroll-snap-type: as specified-ms-scroll-snap-points-x: as specifiedanimation typediscrete syntax values the -ms-scroll-snap-x shorthand property is specified as one or both of the following values, in order and separated by spaces.
... .scroll1 { -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(
100%, 200%, 300%, 400%, 500%); } .scroll2 { -ms-scroll-snap-x: proximity snaplist(
100%, 200%, 300%, 400%, 500%); } specifications not part of any specification.
-ms-scroll-snap-y - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-scroll-snap-type: none-ms-scroll-snap-points-y: snapinterval(0px,
100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-scroll-snap-type: as specified-ms-scroll-snap-points-y: as specifiedanimation typediscrete syntax values the -ms-scroll-snap-y shorthand property is specified as one or both of the following values, in order and separated by spaces.
... .scroll1 { -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: snapinterval(0,
100%); } .scroll2 { -ms-scroll-snap-y: mandatory snapinterval(0,
100%); } specifications not part of any specification.
::-ms-fill - Archive of obsolete content
this pseudo-element is available only in internet explorer
10, internet explorer 11, and microsoft edge.
...at, and background-size border border-radius box-shadow box-sizing color cursor display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color, outline-style, and outline-width padding transform and transform-origin visibility syntax ::-ms-fill example html <progress value="
10" max="50"></progress> css progress::-ms-fill { background-color: orange; } result a progress bar using this style might look something like this: ...
Iterator - Archive of obsolete content
examples iterating over properties of an object var a = { x:
10, y: 20, }; var iter = iterator(a); console.log(iter.next()); // ["x",
10] console.log(iter.next()); // ["y", 20] console.log(iter.next()); // throws stopiteration iterating over properties of an object with legacy destructuring for-in statement var a = { x:
10, y: 20, }; for (var [name, value] in iterator(a)) { console.log(name, value); // x
10 // y 20 ...
...} iterating with for-of var a = { x:
10, y: 20, }; for (var [name, value] of iterator(a)) { // @@iterator is used console.log(name, value); // x
10 // y 20 } iterates over property name var a = { x:
10, y: 20, }; for (var name in iterator(a, true)) { console.log(name); // x // y } passing generator instance function* f() { yield 'a'; yield 'b'; } var g = f(); console.log(g == iterator(g)); // true for (var v in iterator(g)) { console.log(v); // a // b } passing iterator instance var a = { x:
10, y: 20, }; var i = iterator(a); console.log(i == iterator(i)); // true specifications non-standard.
ActiveXObject - Archive of obsolete content
excelsheet.application.quit(); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
... note: creating an activexobject on a remote server is not supported in internet explorer 9 standards mode, internet explorer
10 standards mode, internet explorer 11 standards mode, and windows store apps or later.
Enumerator.atEnd - Archive of obsolete content
example in following code, the atend method is used to determine if the end of a list of drives has been reached: function showdrives() { var s = ""; var bytespergb =
1024 *
1024 *
1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += ...
... s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
Enumerator.item - Archive of obsolete content
example function showdrives() { var s = ""; var bytespergb =
1024 *
1024 *
1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += ...
... s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
Enumerator.moveFirst - Archive of obsolete content
example in following example, the movefirst method is used to evaluate members of the drivescollection from the beginning of the list: function showdrives() { var s = ""; var bytespergb =
1024 *
1024 *
1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += ...
... s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
Enumerator.moveNext - Archive of obsolete content
example in following example, the movenext method is used to move to the next drive in the drives collection: function showdrives() { var s = ""; var bytespergb =
1024 *
1024 *
1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += ...
... s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
Enumerator - Archive of obsolete content
example the following code shows the usage of the enumerator object: var bytespergb =
1024 *
1024 *
1024; var fso = new activexobject("scripting.filesystemobject"); document.write(fso.drives); var e = new enumerator(fso.drives); var drivestring = ""; e.movefirst(); while (e.atend() == false) { var drv = e.item(); drivestring += drv.path + " - "; if (drv.isready){ var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; ...
... requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
Error.stackTraceLimit - Archive of obsolete content
the default limit is
10.
... try { var err = new error("my error"); error.stacktracelimit = 7; throw err; } catch(e) { document.write("error stack trace limit: ") document.write(error.stacktracelimit); } requirements supported in internet explorer
10 and in windows 8.x store apps.
GetObject - Archive of obsolete content
remarks the getobject function is not supported in internet explorer 9 standards mode, internet explorer
10 standards mode, internet explorer 11 standards mode, and windows store apps or later.
...for example: myobject.line(9, 90); myobject.inserttext(9,
100, "hello, world."); myobject.saveas("c:\\drawings\\sample.drw"); note: use the getobject function when there is a current instance of the object, or if you want to create the object with a file already loaded.
New in JavaScript 1.7 - Archive of obsolete content
iterators and generators array comprehensions let statement (support for let expression was dropped in gecko 41, see bug
1023609).
... const statement destructuring assignment (support for js1.7 style destructuring for-in was dropped in gecko 40, see bug
1083498).
ECMAScript 2015 support in Mozilla - Archive of obsolete content
in weakmap constructor (firefox 36) constructor argument: new weakmap(null) (firefox 37) monkey-patched set() in constructor (firefox 37) weakset (firefox 34) constructor argument: new weakset(null) (firefox 37) monkey-patched add() in constructor (firefox 37) new math functions math.imul() (firefox 20) math.clz32() (firefox 31) math.fround() (firefox 26) math.log
10(), math.log2(), math.log1p(), math.expm1(), math.cosh(), math.sinh(), math.tanh(), math.acosh(), math.asinh(), math.atanh(), math.hypot(), math.trunc(), math.sign(), math.cbrt() (firefox 25) additions to the number object number.isnan() (firefox 16) number.isfinite() (firefox 16) number.isinteger() (firefox 16) number.parseint() (firefox 25) number.parsefloat() (firefox 25) number.epsil...
...fox 16) use symbol.iterator property (firefox 36) spread operator for function calls (firefox 27) use symbol.iterator property (firefox 36) const (js 1.5, firefox 1.0) (es2015 compliance bug 950547 implemented in firefox 51) let (js 1.7, firefox 2) (es2015 compliance bug 950547 implemented in firefox 51) destructuring assignment (js 1.7, firefox 2) (es2015 compliance bug
1055984) statements for...of (firefox 13) works in terms of .iterator() and .next() (firefox 17) use "@@iterator" property (firefox 27) use symbol.iterator property (firefox 36) functions rest parameters (firefox 15) default parameters (firefox 15) parameters without defaults after default parameters (firefox 26) destructured parameters with default value assign...
MSX Emulator (jsMSX) - Archive of obsolete content
jsmsx is the first msx emulator
100% written in javascript.
...external links view the online demo (requires firefox 2+) jsmsx project see also drawing graphics with canvas canvas tutorial jsc64 the
100% javascript / canvas commodore 64 emulator ...
background-size - Archive of obsolete content
styles like this should work: body { border:0; margin:0; padding:0.6em } /* or for less content, if body is small */ html, body { height:
100%; } body { border:0; margin:0; padding:0.6em } furthermore, you may simplify things a bit if you apply the background and border-image styles to <html> rather than <body>.
... and anyway, it's more the -moz-border-image that seems to be the problem - 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 497995.
Writing JavaScript for XHTML - Archive of obsolete content
if your code contains either of these, you can work around this with cdata sections: <script type="text/javascript"> <![cdata[ // is the variable a non-negative integer less than
10?
... if (variable <
10 && variable >= 0) action(); ]]> </script> note that the cdata section is only necessary because of the < in the code; otherwise you could have ignored it.
Building up a basic demo with PlayCanvas editor - Game development
try applying the rotation values x:
10 and y: 20.
...add the following line inside this function, to rotate the cube on every frame: this.entity.rotate(dt*
10, dt*20, dt*30); in the line above this.entity refers to the object to which the script will be attached (the box); using the dt variable, which contains the delta time passed since the previous frame, we can rotate the box by a different amount around all three axes.
Bounce off the walls - Game development
« previousnext » this is the 3rd step out of
10 of the gamedev canvas tutorial.
...add this to your code, somewhere below the existing variable declarations: var ballradius =
10; now update the line that draws the ball inside the drawball() function to this: ctx.arc(x, y, ballradius, 0, math.pi*2); bouncing off the top and bottom there are four walls to bounce the ball off — let's focus on the top one first.
Build the brick field - Game development
« previousnext » this is the 6th step out of
10 of the gamedev canvas tutorial.
... var brickrowcount = 3; var brickcolumncount = 5; var brickwidth = 75; 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.
Create the Canvas and draw on it - Game development
« previousnext » this is the 1st step out of
10 of the gamedev canvas tutorial.
...try adding this code to your javascript too: ctx.beginpath(); ctx.rect(160,
10,
100, 40); ctx.strokestyle = "rgba(0, 0, 255, 0.5)"; ctx.stroke(); ctx.closepath(); the code above prints a blue-stroked empty rectangle.
Game over - Game development
« previousnext » this is the 5th step out of
10 of the gamedev canvas tutorial.
... first, replace where you initially called setinterval() setinterval(draw,
10); with: var interval = setinterval(draw,
10); then replace the second if statement with the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } letting the paddle hit the ball the last thing to do in this lesson is to cr...
Paddle and keyboard controls - Game development
« previousnext » this is the 4th step out of
10 of the gamedev canvas tutorial.
...add the following variables near the top of your code, beside your other variables: var paddleheight =
10; var paddlewidth = 75; var paddlex = (canvas.width-paddlewidth) / 2; here we're defining the height and width of the paddle and its starting point on the x axis for use in calculations further on down the code.
Animations and tweens - Game development
it takes an object containing the chosen parameter's desired ending values (scale takes a scale value, 1 being
100% of size, 0 being 0% of size, etc.), the time of the tween in milliseconds and the type of easing to use for the tween.
... 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.
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 the canvas where we shall start to draw the bricks) and the padding between each row and column of bricks.
... 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...
Collision detection - Game development
« previousnext » this is the
10th 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/lesson
10.html.
2D maze game with device orientation - Game development
with every asset loaded you can see more of the preloadbar image: from 0% to
100%, updated on every frame.
... the best way to use it in our case is to vibrate the phone every time the ball hits the walls — inside the wallcollision function: if("vibrate" in window.navigator) { window.navigator.vibrate(
100); } if the vibrate method is supported by the browser and available in the window.navigator object, vibrate the phone for
100 miliseconds.
Gecko FAQ - Gecko Redirect 1
as robert o'callahan notes in bug 25707, "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.
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
a few request headers after a get request: get /home.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x
10.9; rv:50.0) gecko/20
100
101 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, br referer: https://developer.mozilla.org/testpage.html connection: keep-alive upgrade-insecure-requests: 1 if-modified-since: mon, 18 jul 2016 02:36:04 gmt if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-co...
...ntrol: max-age=0 strictly speaking, the content-length header in this example is not a request header like the others, but an entity header: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x
10.9; rv:50.0) gecko/20
100
101 firefox/50.0 content-length: 128 learn more technical knowledge list of all http headers ...
Speed index - MDN Web Docs Glossary: Definitions of Web-related terms
the calculation calculates what percent of the page is visually complete at every
100ms interval until the page is visually complete.
... the overall score, the above the fold metric, is a sum of the individual
10 times per second intervals of the percent of the screen that is not-visually complete.
Cacheable - MDN Web Docs Glossary: Definitions of Web-related terms
(for example, firefox does not support it per https://bugzilla.mozilla.org/show_bug.cgi?id=
109553.) other methods, like put or delete are not cacheable and their result cannot be cached.
...the following status code are cacheable: 200, 203, 204, 206, 300, 301, 404, 405, 4
10, 414, and 501.
Loop - MDN Web Docs Glossary: Definitions of Web-related terms
example: for(var i = 0; i <
10; i++){ console.log(i) } //this loop will print numbers 0-9, will stop when condition is met (i =
10) for the above example, the syntax is as follows: statement 1 sets the variable for the loop (var i = 0).
... statement 2 sets the loop condition (i <
10).
HTML: A good basis for accessibility - Learn web development
"center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="
100"> <button width="
100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="
10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80f...
...f" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="
10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"> <td colspan="6"> <p>©copyright 2050 by nobody.
HTML: A good basis for accessibility - Learn web development
"center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="
100"> <button width="
100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="
10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80f...
...f" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="
10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"> <td colspan="6"> <p>©copyright 2050 by nobody.
What is accessibility? - Learn web development
note: the world health organization's disability and health fact sheet states that "over a billion people, about 15% of the world's population, have some form of disability", and "between 1
10 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.
..."
100% accessibility" is an unobtainable ideal — you will always come across some kind of edge case that results in a certain user finding certain content difficult to use — but you should do as much as you can.
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: 15%; } thead th:nth-child(4) { width: 35%; } 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 th...
... we've coupled this with a width of
100%, meaning that the table will fill any container it is put in, and be nicely responsive (although it would still need some more work to get it looking good on narrow screen widths).
Flexbox - Learn web development
we first use flex:1
100px; to effectively give it a minimum height of
100px, then we set its children (the <button> elements) to also be laid out like flex items.
... article:nth-of-type(3) div:first-child { flex:1
100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; } finally, we set some sizing on the button, but more interestingly we give it a flex value of 1 auto.
Beginner's guide to media queries - Learn web development
box-sizing: border-box; } body { width: 90%; margin: 2em auto; font: 1em/1.3 arial, helvetica, sans-serif; } a:link, a:visited { color: #333; } nav ul, aside ul { list-style: none; padding: 0; } nav a:link, nav a:visited { background-color: rgba(207, 232, 220, 0.2); border: 2px solid rgb(79, 185, 227); text-decoration: none; display: block; padding:
10px; color: #333; font-weight: bold; } nav a:hover { background-color: rgba(207, 232, 220, 0.7); } .related { background-color: rgba(79, 185, 227, 0.3); border: 1px solid rgb(79, 185, 227); padding:
10px; } .sidebar { background-color: rgba(207, 232, 220, 0.5); padding:
10px; } article { margin-bottom: 1em; } we've made no layout changes, however the source...
... <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.
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.
What is CSS? - Learn web development
port 3.5safari full support 1webview android full support 1chrome android full support 18firefox android full support 4opera android full support
10.1safari ios full support 1samsung internet android full support 1.0system-uichrome full support 56edge full support 79firefox no support no no support ...
...ported on macos only.alternate name uses the non-standard name: -apple-systemie no support noopera full support 43safari full support 9notes alternate name full support 9notes alternate name notes supported since macos
10.11.alternate name uses the non-standard name: -apple-systemwebview android full support 56chrome android full support 56firefox android no support noopera android full support 43safari ios full support ...
How does the Internet work? - Learn web development
once we add a router to the system, our network of
10 computers only requires
10 cables: a single plug for each computer and a router with
10 plugs.
...it's an address made of a series of four numbers separated by dots, for example: 192.168.2.
10.
How much does it cost to do something on the Web? - Learn web development
editors can be free (gimp, paint.net), moderately expensive (paintshop pro, less than $
100), or several hundred dollars (adobe photoshop).
...likewise, video-editing software can be free (pitivi, openshot for linux, imovie for mac), less than $
100 (adobe premiere elements), or several hundred dollars (adobe premiere pro, avid media composer, final cut pro).
Test your skills: Form validation - Learn web development
remove the length validation from the phone number field if it is present, and set it so that it accepts
10 digits — either
10 digits in a row, or a pattern of three digits, three digits, then four digits, separated by either spaces, dashes, or dots.
... make the input mandatory to fill in, and give it a minimum length of
10 characters.
Front-end web developer - Learn web development
modules introduction to html (15–20 hour read/exercises) multimedia and embedding (15–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.
... modules css first steps (
10–15 hour read/exercises) css building blocks (35–45 hour read/exercises) styling text (15–20 hour read/exercises) css layout (30–40 hour read/exercises) additional resources css layout cookbook interactivity with javascript time to complete: 135–185 hours prerequisites it is recommended that you have basic html knowledge before starting to learn javascript.
Installing basic software - Learn web development
you should also test how your site performs on mobile devices and on any old browsers your target audience may still be using (such as ie 8–
10.) lynx, a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users.
... windows: firefox, chrome, opera, internet explorer, microsoft edge, brave (windows
10 comes with edge by default; if you have windows 7 or above, you can install internet explorer 11; otherwise, you should install an alternative browser).
JavaScript basics - Learn web development
let myvariable =
10; boolean this is a true/false value.
... let myvariable = [1,'bob','steve',
10]; refer to each member of the array like this: myvariable[0], myvariable[1], etc.
Using data attributes - Learn web development
to support ie
10 and under you need to access data attributes with getattribute() instead.
... in firefox 49.0.2 (and perhaps earlier/later versions), the data attributes that exceed
1022 characters will not be read by javascript (ecmascript 4).
Images in HTML - Learn web development
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: 95%"> <img> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } var textarea = d...
...if you get really stuck, press the show solution button to see an answer: 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:
100px; width: 95%"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin:
10px; background: #f5f9fa; } var textarea = documen...
Test your skills: Conditionals - Learn web development
the different conditional tests (and resulting responses) are as follows: score of less than 0 or more than
100 — "this is not possible, an error has occurred." score of 0 to 19 — "that was a terrible score — total fail!" score of 20 to 39 — "you know some things, but it's a pretty bad score.
... needs improvement." score of 40 to 69 — "you did a passable job, not bad!" score of 70 to 89 — "that\'s a great score, you really know your stuff." score of 90 to
100 — "what an amazing score!
What went wrong? Troubleshooting JavaScript - Learn web development
we need to multiply the random number by
100 before we round it down.
... the following would give us a random number between 0 and 99: math.floor(math.random()*
100); hence us wanting to add 1, to give us a random number between 1 and
100: math.floor(math.random()*
100) + 1; try updating both lines like this, then save and refresh — the game should now play like we are intending it to!
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 < 25) { 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,255) + ',' + random(0,255) + ',' + random(0,255) +')', size ); balls.push(ball); } the while loop creates ...
Multimedia: video - Learn web development
for example, given video compressions in three different formats at
10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" controls="controls"> <!-- webm:
10 mb --> <source src="video.webm" type="video/webm" /> <!-- mpeg-4/h.264: 12 mb --> <source src="video.mp4" type="video/mp4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv" type="video/ogv" /> </video> the browser downloads the first format it un...
...while a 128 kb video may seem like it could provide a better user experience than a
10 mb download, a grainy gif-like video may reflect poorly on the brand or project.
Handling common HTML and CSS problems - Learn web development
for="time">enter a time:</label> <input id="time" type="time"> </div> </form> the output of this code is as follows: hidden example label { float: left; width: 30%; text-align: right; } input { float: right; width: 65%; } label, input { margin-bottom: 20px; } div { clear: both; margin:
10px; } body { width: 400px; margin: 0 auto; } <form> <div> <label for="date">enter a date:</label> <input id="date" type="date"> </div> <div> <label for="time">enter a time:</label> <input id="time" type="time"> </div> </form> note: you can also see this running live as forms-test.html on github (se...
...ie 9 doesn't support it at all, and ie
10 and old versions of ios/desktop safari respectively support incompatible old versions of the flexbox spec.
Command line crash course - Learn web development
better programs exist for providing a terminal experience on windows, such as powershell (see here to find installers), and gitbash (which comes as part of the git for windows toolset) however, the best option for windows in the modern day is the windows subsystem for linux (wsl) — a compatibility layer for running linux operating systems directly from inside windows
10, allowing you to run a “true terminal” directly on windows, without needing a virtual machine.
... let’s say you had
1000 text files in a directory, and you wanted to go through them all and only delete the ones that have a certain substring inside the filename.
Package management basics - Learn web development
in the index.js file, add the following code and save it: import { formatdistancetonow } from 'date-fns' const date = '1996-09-13
10:00:00'; document.body.textcontent = formatdistancetonow(new date(date)) + ' ago'; go back to http://localhost:1234 and you'll see how long ago it is since the author turned 18.
... dist/my-project.86f8a5fc.js
10.34 kb 7.17s dist/index.html 288 b 753ms now the bundle is approximately
10k.
omni.ja (formerly omni.jar)
note: starting with firefox
10 and thunderbird
10, the file extension .ja is used because windows system restore does not back up files with the .jar extension, but it does back up .ja files.
... note: prior to firefox
10 and thunderbird
10, omni.ja was called omni.jar.
Embedding API for Accessibility
a zoom factor of 1.0 represents
100%, or normal zoom.
... audio setboolpref("browser.accept.audio", acceptaudio); no timed events setboolpref("browser.accept.timed_events", accepttimedevents); no timer speed setintpref("timer.relative_speed", percent); /*
100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setboolpref("keyboardnav.allow_cycling", allowcycling); no mouse pointer moves with keyboard focus setboolpref("keyboardnav.mouse_follows_keyboard_focus", mousefollows); ...
A bird's-eye view of the Mozilla 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/20051
104 seamonkey/1.1a from a new source tree checked out 11/04/05.
... the build id is 20051
10409.
Chrome registration
for example, a theme may wish to adopt a different look on mac os x
10.5 than
10.4: osversion>=
10.5 abi if a component is only compatible with a particular abi, it can specify which abi/os by using this directive.
... note: extensions can't currently (bug 113
1065) register components to load in the content process using the manifest file so this flag is largely useless to extension developers.
Creating a spell check dictionary add-on
although the restartless format for dictionary add-ons were introduced in gecko
10, dictionary updates only works starting from gecko 18.
...if you set em:minversion to a lower value, gecko
10-17 will not be able to update your dictionary add-on once the restartless dictionary is installed (bug 782118), and gecko
10-16 may warn the user that your dictionary is not compatible, when users try to update to a newer version of firefox/thunderbird (bug 782115).
Creating reftest-based unit tests
if the bitmaps resulting from displaying the two files in an 800x
1000 window are identical, the test passes.
...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.
Debugging a hang on OS X (Archived)
creating the sample on mac os x
10.5 (xcode < 4.2) when the application is still hung, open up spin control.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple).
... creating the sample on mac os x
10.4 when the application is still hung, open up sampler.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple.).
Makefile - variables
default=$(dist)/bin xpi_name if set final_target=$(dist)/xpi-stage/$(xpi_name) dist_subdir if set final_target will be $(dist)/bin/$(dist_subdir) [ metro build ] l
10n.mk and localization variable description en_us_binary_url server url from which wget will ftp binaries.
... l
10nbasedir moz_chrome_multilocale a list of locale names to process moz_chrome_file_format both, file, jar, omni, symlink packager_no_libs hack to allow one makefile to include another without pulling in libs:: target definitions.
Windows SDK versions
visual c++
10 (vs20
10) professional this comes with the windows 7 sdk, so you should be all set out of the box.
... visual c++
10 (vs20
10) express download and install the windows 7 sdk.
Commenting IDL for better documentation
*/ attribute integer favoritecookie; /** * a value from 0-
100 indicating how hungry the cookie monster is.
... * 0 means "stuffed to the brim with cookies" and
100 means "i'm so empty of * cookies!
Listening to events on all tabs
optional from gecko
10 onprogresschange called when updated progress information for the download of a document is available.
... amaxselfprogress the value representing
100% complete for the request indicated by the request parameter.
SVG Guidelines
nreferenced/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.05 (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 the actual shape, instead of introducing a class ...
...you can avoid this by doing basic algebra, for example: <g transform="translate(-62, -3
10)"><shape transform="translate(60, 308)"/></g> can be cut down to: <shape transform="translate(-2,-2)"/> because: -62+60 = -3
10+308 = -2 performance tips these rules are optional, but they help speeding up the svg.
Performance best practices for Firefox front-end engineers
this example has been cribbed from davidwalsh’s blog post: // create the fragment var frag = document.createdocumentfragment(); // create numerous list items, add to fragment for(var x = 0; x <
10; x++) { var li = document.createelement("li"); li.innerhtml = "list item " + x; frag.appendchild(li); } // mass-add the fragment nodes to the list listnode.appendchild(frag); the above is strictly cheaper than individually adding each node to the dom.
... explicitly define start and end animation values some optimizations in the animation code of gecko are based on an expectation that the from (0%) and the to (
100%) values will be explicitly defined in the @keyframes definition.
Gecko Keypress Event
gecko 1.9 key handling changed significantly after beta 5 (bug 359638, bug 4295
10 and the bugs on which they depend).
... problem 3 users with non-latin keyboard layouts would like to be able to use latin access keys in web pages without switching to a latin layout (bug 4295
10).
HTTP Cache
dispatching to a level with a lower number is executed sooner then dispatching to higher number layers; also any loop on lower levels yields to higher levels so that scheduled deletion of
1000 files will not block opening cache entries.
...the form is following (currently pending in bug 968593): a,b,i
1009,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 is no app (app...
Hacking with Bonsai
also, with as many as
100 engineers, it was very difficult to determine what happened in the tree that caused the instability.
...at
10:00 am, everyone who is on the hook is available in case the build breaks eventually, the tree builds, and it is re-opened.
How to Report a Hung Firefox
check the cpu usage of the firefox process(es): is it idle, using
100% of a core (which may show up as 50%, 25% in your monitoring tool if you have a multi-core processor) or neither?
... then, in a terminal, kill firefox using a command such as this: # replace 3
1042 with the pid of firefox found above kill -n sigabrt 3
1042 # on osx kill -s sigabrt 3
1042 the firefox crash report ui should appear.
Download
progress read only number progress percent, from 0 to
100.
... note: you shouldn't rely on this property being equal to
100 to determine whether the download is completed.
PerfMeasurement.jsm
branch_instructions 0x000000
10 measure the number of branch instructions executed.
... major_page_faults 0x00000
100 measure the number of major page faults that occurred.
Examples
= "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { return 'i didnt do a promise.resolve so this will not understand that mypromise is a promise'; } // creates this error: /* exception: mypromise.then is not a function @scratchpad/5:8:1 wca_evalwithdebugger@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:
1069:7 wca_onevaluatejs@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:734:9 dsc_onpacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:
1098:9 ldt_send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transport.js:279:11 makeinfallible/<@re...
...let promise = promisevalueaftertimeout("value",
1000); let newpromise = promise.then(function onfulfill(avalue) { console.log("fulfilled with this value: " + avalue); }, function onreject(areason) { console.log("rejected with this reason: " + areason); }); // unexpected errors should always be reported at the end of a promise chain.
Setting up the infrastructure
create a new branch for l
10n (optional if starting a new project).
... merge the l
10n branch back to main trunk (if the l
10n branch was created in step 1).
Localization at Mozilla
localization (l
10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture.
...l
10n documentation has moved to https://mozilla-l
10n.github.io/localizer-documentation/ .
Basics
</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>&invisibletimes;</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>3</mn> </msup> </mrow> <mo>+</mo> <mrow> <mn>5</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <msu...
...z</mi> <mo>)</mo> </mrow> <mi>α</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>π</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width:
100%; height: 58px; } ...
NSS 3.34 release notes
d:ce:bc:65 trust flags: websites, email cn = ssl.com ev root certification authority rsa r2 sha-256 fingerprint: 2e:7b:f1:6c:c2:24:85:a7:bb:e2:aa:86:96:75: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-256 fingerprint: 22:a2:c1:f7:bd:ed:70:4c:c1:e7:01:b5:f4:08:c3:
10:88:0f:e9:56:b5:de:2a:4a:44:f9:9c:87:3a:25:a7:c8 trust flags: websites cn = trustcor rootcert ca-1 sha-256 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-256 fingerprint: 07:53:e9:40:37:8c:1b:d5:e3:83:6e:39:5d:ae:a5:cb:83:9...
...e:50:46:f1:bd:0e:ae:19:51:cf:
10:fe:c7:c9:65 trust flags: websites, email cn = trustcor eca-1 sha-256 fingerprint: 5a:88:5d:b1:9c:01:d9:12:c5:75:93:88:93:8c:af:bb:df:03:1a:b2:d4:8e:91:ee:15:58:9b:42:97:1d:03:9c trust flags: websites, email the following ca certificates were removed: cn = certum ca, o=unizeto sp.
NSS 3.39 release notes
oot ca - r6 sha-256 fingerprint: 2cabeafe37d06ca22aba7391c0033d25982952c453647349763a3ab5ad6ccf69 cn = oiste wisekey global root gc ca sha-256 fingerprint: 8560f91c3624daba9570b5fea0dbe36ff11a8323be9486854fb3f34a5571198d the following ca certificate was removed: cn = comsign sha-256 fingerprint: ae4457b40d9eda96677b0d3c92d57b5177abd7ac
1037958356d1e094518be5f2 the following ca certificates had the websites trust bit disabled: cn = certplus root ca g1 sha-256 fingerprint: 152a402bfcdf2cd548054d2275b39c7fca3ec0978078b0f0ea76e561a6c7433e cn = certplus root ca g2 sha-256 fingerprint: 6cc05041e6445e74696c4cfbc9f80f543b7eabbb44b4ce6f787c6a9971c42f17 cn = opentrust root ca ...
...g1 sha-256 fingerprint: 56c77128d98c18d91b4cfdffbc25ee9
103d4758ea2abad826a90f3457d460eb4 cn = opentrust root ca g2 sha-256 fingerprint: 27995829fe6a7515c1bfe848f9c4761db16c225929257bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-256 fingerprint: b7c36231706e8
1078c367cb896198f1e3208dd926949dd8f5709a4
10f75b6292 bugs fixed in nss 3.39 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) this bugzilla query returns all the bugs fixed in nss 3.39: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.39 compatibility nss 3.39 shared libraries are backward compatib...
NSS 3.43 release notes
d813e043cf9e8a862cd5c57a36bbe6b cn = emsign root ca - c1 sha-256 fingerprint: 125609aa301da0a249b97a8239cb6a34216f44dcac9f3954b14292f2e8c8608f cn = emsign ecc root ca - c3 sha-256 fingerprint: bc4d809b15189d78db3e1d8cf4f9726a795da1643ca5f1358e1ddb0edc0d7eb3 cn = hongkong post root ca 3 sha-256 fingerprint: 5a2fc03f0c83b090bbfa40604b0988446c7636183df9846e17
101a447fb8efd6 the following ca certificates were removed: none bugs fixed in nss 3.43 bug 1528669 and bug 1529308 - improve gyp build system handling bug 1529950 and bug 1521174 - improve nss s/mime tests for thunderbird bug 1530134 - if docker isn't installed, try running a local clang-format as a fallback bug 1531267 - enable fips mode automatically if the system fips m...
...ode flag is set bug 1528262 - add a -j option to the strsclnt command to specify sigschemes bug 1513909 - add manual for nss-policy-check bug 153
1074 - fix a deref after a null check in seckey_setpublicvalue bug 1517714 - properly handle esni with hrr bug 1529813 - expose hkdf-expand-label with mechanism bug 1535122 - align tls 1.3 hkdf trace levels bug 1530
102 - use getentropy on compatible versions of freebsd.
NSS 3.45 release notes
only relevant for clients that might have copied the unit test code verbatim bug 1550022 - ensure nssutil3 gets built on android bug 1528174 - chacha20poly1305 should no longer modify output length on failure bug 1549382 - don't leak in pkcs#11 modules if c_getslotinfo() returns error bug 155
1041 - fix builds using gcc < 4.3 on big-endian architectures bug 1554659 - add versioning to openbsd builds to fix link time errors using nss bug 1553443 - send session ticket only after handshake is marked as finished bug 1550708 - fix gyp scripts on solaris sparc so that libfreebl_64fpu_3.so builds bug 1554336 - optimize away unneeded loop in mpi.c bug 1559906 - fipstest: use ckm_tls12_...
...master_key_derive instead of vendor specific mechanism bug 1558126 - tls_aes_256_gcm_sha384 should be marked as fips compatible bug 1555207 - helloretryrequestcallback return code for rejecting 0-rtt bug 1556591 - eliminate races in uses of pk11_setwrapkey bug 1558681 - stop using a global for anti-replay of tls 1.3 early data bug 15615
10 - fix a bug where removing -arch xxx args from cc didn't work bug 1561523 - add a string for the new-ish error ssl_error_missing_post_handshake_auth_extension this bugzilla query returns all the bugs fixed in nss 3.45: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.45 compatibility nss 3.45 shared libraries are backward compatible with all older nss 3.x shar...
NSS 3.47 release notes
ickname for ec keys bug 1586456 - unnecessary conditional in pki3hack, pk11load and stanpcertdb bug 1576307 - check mechanism param and param length before casting to mechanism-specific structs bug 1577953 - support longer (up to rfc maximum) hkdf outputs bug 1508776 - remove refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and selfserv bug 158
1024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag sizes for ckm_aes_gcm bug 1576295 - check all bounds when encrypting with seed_cbc bug 1580286 - nss rejects tls 1.2 records with large padding with sha384 hmac bug 1577448 - create additional nested s/mime test messages for thunderbird bug 1399095 - allow n...
...bssl should allow selecting the order of cipher suites in clienthello bug 1581507 - fix unportable grep expression in test scripts bug 1234830 - [cid 1242894][cid 1242852] unused values bug 1580126 - fix build failure on aarch64_be while building freebl/gcm bug 1385039 - build nspr tests as part of nss continuous integration bug 1581391 - fix build on openbsd/arm64 after bug #1559012 bug 158
1041 - mach-commands -> mach-completion bug 1558313 - code bugs found by clang scanners.
NSS 3.48 release notes
the master password pbe now uses
10,000 iterations by default when using the default sql (key4.db) storage.
...d if arm doesn't support neon bug 1575411 - enable tls extended master secret by default bug 1590970 - ssl_settimefunc has incomplete coverage bug 1590678 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1588244 - nss changes for delegated credential key strength checks bug 1459141 - add more cbc padding tests that missed nss 3.47 bug 1590339 - fix a memory leak in btoa.c bug 15898
10 - fix uninitialized variable warnings from certdata.perl bug 1573118 - enable tls 1.3 by default in nss this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.48 compatibility nss 3.48 shared libraries are backward compatible with all older nss 3.x sh...
NSS 3.50 release notes
added nist sp800-
108 kbkdf - pkcs#11 implementation.
... bugs fixed in nss 3.50 bug 1599514 - update dtls 1.3 implementation to draft-30 bug 1603438 - fix native tools build failure due to lack of zlib include dir if external bug 1599603 - nist sp800-
108 kbkdf - pkcs#11 implementation bug 1606992 - cache the most recent pbkdf1 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts.
NSS 3.52 release notes
bug 1629
105 - add pkcs11 v3.0 functions to module debug logger.
... bug 1619
102 - add workaround option to include both dtls and tls versions in dtls supported_versions.
NSS 3.54 release notes
certificate authority changes the following ca certificates were added: bug 1645186 - certsign root ca g2 sha-256 fingerprint: 657cfe2fa73faa38462571f332a2363a46fce70209517
10702cdfbb6eeda3305 bug 1645174 - e-szigno root ca 2017 sha-256 fingerprint: beb00b30839b9bc32c32e4447905950641f26421b15ed089198b518ae2ea1b99 bug 1641716 - microsoft ecc root certificate authority 2017 sha-256 fingerprint: 358df39d764af9e1b766e9c972df352ee15cfac227af6ad1d70e8e4a6edcba02 bug 1641716 - microsoft rsa root certificate authority 201...
...7 sha-256 fingerprint: c741f70f4b2a8d88bf2e71c14122ef53ef
10eba0cfa5e64cfa20f418853073e0 the following ca certificates were removed: bug 1645199 - addtrust class 1 ca root sha-256 fingerprint: 8c7209279ac04e275e16d07fd3b775e80154b5968046e31f52dd25766324e9a7 bug 1645199 - addtrust external ca root sha-256 fingerprint: 687fa451382278fff0c8b11f8d43d576671c6eb2bceab413fb83d965d06d2ff2 bug 1641718 - luxtrust global root 2 sha-256 fingerprint: 54455f7129c20b1447c418f997168f24c58fc5023bf5da5be2eb6e1dd8902ed5 bug 1639987 - staat der nederlanden root ca - g2 sha-256 fingerprint: 668c83947da63b724bece1743c31a0e6aed0db8ec5b31be377bb784f91b6716f bug 1618402 - symantec class 2...
Enc Dec MAC Output Public Key as CSR
de #include #include #include /* nss headers */ #include #include #include #include #include #include #include #include #include #include #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define default_key_bits
1024 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #define iv_header "-----beg...
...t, const char *certreqfilename, prbool ascii) { secstatus rv; seckeyprivatekey *privkey = null; seckeypublickey *pubkey = null; keytype keytype = rsakey; int keysize = default_key_bits; int publicexponent = 0x0
10001; secoidtag hashalgtag = sec_oid_unknown; privkey = generateprivatekey(keytype, slot, keysize, publicexponent, null, &pubkey, null, pwdata); if (privkey == null) { pr_fprintf(pr_stderr, "unable to generate key(s)\n"); rv = secfailure; goto cleanup; } privkey->wincx = pw...
nss tech note3
/* x.509 v3 key usage extension flags */ #define ku_digital_signature (0x80) /* bit 0 */ #define ku_non_repudiation (0x40) /* bit 1 */ #define ku_key_encipherment (0x20) /* bit 2 */ #define ku_data_encipherment (0x
10) /* bit 3 */ #define ku_key_agreement (0x08) /* bit 4 */ #define ku_key_cert_sign (0x04) /* bit 5 */ #define ku_crl_sign (0x02) /* bit 6 */ #define ns_cert_type_ssl_client (0x80) /* bit 0 */ #define ns_cert_type_ssl_server (0x40) /* bit 1 */ #define ns_cert_type_email (0x20) /* bit 2 */ #define ns_cert_type_obj...
...ect_signing (0x
10) /* bit 3 */ #define ns_cert_type_reserved (0x08) /* bit 4 */ #define ns_cert_type_ssl_ca (0x04) /* bit 5 */ #define ns_cert_type_email_ca (0x02) /* bit 6 */ #define ns_cert_type_object_signing_ca (0x01) /* bit 7 */ </x> ...
Overview of NSS
rsa standard that governs selected attribute types, including those used with pkcs #7, pkcs #8, and pkcs #
10.
... pkcs #
10.
Build instructions
for windows, install the mozillabuild environment and microsoft visual studio 20
10.
... (the free edition works, and other versions like visual studio 2008 and visual studio 2012 may also work.) use start-shell-msvc20
10.bat from mozillabuild to get a bash shell with the path already configured, and execute these instructions from within that bash shell.
NSS tools : certutil
certutil -c -c issuer -i cert-request-file -o output-file [-m serial-num ber] [-v valid-months] [-w offset-months] -d [sql:]directory [-1] [-2] [ -3] [-4] [-5 keyword] [-6 keyword] [-7 emailaddress] [-8 dns-names] for example: $ certutil -c -c "my-ca-cert" -i /home/certs/cert.req -o cert.cer -m 0
10 -v 12 -w 1 -d sql:/home/my/sharednssdb -1 nonrepudiation,dataencipherme nt -5 sslclient -6 clientauth -7 jsmith@example.com generating key pairs key pairs are generated automatically with a certificate request or certificate, but they can also be generated independently using the -g command option.
...id < 1> rsa 40defeeb522ade1
1090eacebaaf1196a172127df example domain administrator cert < 2> rsa 1d0b06f44f6c03842f7d4f4a1dc78b3bcd1b85a5 john smith user cert there are ways to narrow the keys listed in the search results: * to return a specific key, use the -n name argument with the name of the key.
NSS tools : vfychain
-r following certfile is raw binary der (default) -t following cert is explicitly trusted (overrides db trust) -u usage 0=ssl client, 1=ssl server, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient, 6=object signer, 9=protectedobjectsigner,
10=ocsp responder, 11=any ca -v verbose mode.
...copyright (c) 20
10, red hat, inc.
NSS Tools modutil
rsa: 0x00000001 dsa: 0x00000002 rc2: 0x00000004 rc4: 0x00000008 des: 0x000000
10 dh: 0x00000020 fortezza: 0x00000040 rc5: 0x00000080 sha1: 0x00000
100 md5: 0x00000200 md2: 0x00000400 random: 0x08000000 friendly: 0x
10000000 own_pw_defaults: 0x20000000 disable: 0x40000000 cipherenableflags specifies ciphers t...
...this string is a bitwise or of the following constants: user read: 0400 user write: 0200 user execute: 0
100 group read: 0040 group write: 0020 group execute: 00
10 other read: 0004 other write: 0002 other execute: 0001 some platforms may not understand these permissions.
NSS tools : crlutil
itical 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.
... copyright (c) 20
10, red hat, inc.
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 15 - 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 ...
... copyright (c) 20
10, red hat, inc.
NSS tools : vfychain
-r following certfile is raw binary der (default) -t following cert is explicitly trusted (overrides db trust) -u usage 0=ssl client, 1=ssl server, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient, 6=object signer, 9=protectedobjectsigner,
10=ocsp responder, 11=any ca -v verbose mode.
... copyright (c) 20
10, red hat, inc.
Rhino downloads archive
rhino1_6r5.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 2005-09-19 changes in 1.6r2 rhino1_6r2.zip rhino 1.6r1 2004-11-29 changes in 1.6r1 rhino1_6r1.zip rhino 1.5r5 2004-03-25 changes in 1.5r5 rhino1_5r5.zip rhino 1.5r4.1 2003-04-21 changes in 1.5r4.1 rhino15r41.zi...
...p rhino 1.5r4 2003-02-
10 changes in 1.5r4 rhino15r4.zip rhino 1.5r3 2002-01-27 changes in 1.5r3 rhino15r3.zip rhino 1.5r2 2001-07-27 changes in 1.5r2 rhino15r2.zip rhino 1.5r1 2000-09-
10 changes in 1.5r1 rhino15r1.zip rhino 1.4r3 1999-05-
10 initial public release rhino14r3.zip rhino 1.6r1 through 1.6r6 implement e4x using xmlbeans library.
SpiderMonkey Build Documentation
refer the release notes under command line tools -> new features the release notes also states that this compatibility package will no longer be provided in the near future, so the build system on macos will have to be adapted to look for headers in the sdk until then, the following should help, open /library/developer/commandlinetools/packages/macos_sdk_headers_for_macos_
10.14.pk this builds an executable named js in the directory build-release/dist/bin.
...mac os x
10.5), you can use the following: ar=ar cc="gcc -m64" cxx="g++ -m64" ../configure --target=x86_64-apple-darwin
10.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.
Exact Stack Rooting
until the system described above has
100% browser coverage, it is unsafe to enable it.
...if you are
100% sure that there is no way for spidermonkey to gc while the pointer is on the stack, this is an option.
SpiderMonkey Internals
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 15 => 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 line 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 => li...
...ne 22 line 25 => 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 154 => line 21 line 31 => pc 154 => line 21 line 32 => pc 161 => line 32 line 33 => pc 172 => line 33 line 34 => pc 172 => line 33 line 35 => 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.).
Introduction to the JavaScript shell
for example, if you enter the javascript function below: function test() { var i = 3; print(i+2); } then run the command dis(test);, you get this output: main: 00000: uint16 3 00003: setvar 0 00006: pop 00007: name "print" 000
10: pushobj 00011: getvar 0 00014: uint16 2 00017: add 00018: call 1 00021: pop 00022: stop source notes: 0: 0 [ 0] newline 1: 3 [ 3] decl offset 0 2: 7 [ 4] newline 3: 18 [ 11] xdelta 4: 18 [ 0] pcbase offset 11 dissrc([function]) disassembles the javascript bytecode for the entire program, or for the specified function, showing the source lines...
... if your program includes a function, dostuff(), like this: function dostuff(input) { print("enter a number: "); var n1 = readline(); print("enter another one: "); var n2 = readline(); print("you 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 000
10:
10 pop ;------------------------- 11: var n1 = readline(); 00011: 11 name "readline" 00014: 11 pushobj 00015: 11 call 0 00018: 11 setvar 0 00021: 11 pop ;------------------------- 12: print("enter another one: "); 00022: 12...
JS::PersistentRooted
before spidermonkey 38, persistentrooted<t> itself cannot be a global variable, but from spidermonkey38, it can be declared as a global variable, and initialized later with init() method (bug 1
107639).
...d mxr id search for js::persistentrootedfunction mxr id search for js::persistentrootedid mxr id search for js::persistentrootedobject mxr id search for js::persistentrootedscript mxr id search for js::persistentrootedstring mxr id search for js::persistentrootedsymbol mxr id search for js::persistentrootedvalue js::rooted js::handle js::mutablehandle gc rooting guide bug 892643 bug 1
107639 -- added two phase construction.
JSClass.flags
if the global object does not have this flag, then scripts may cause nonstandard behavior by replacing 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 §15.4.2.1 and others).
... see also bug 527805 - removed jsclass_share_all_properties bug 571789 - removed jsclass_is_extended bug 638291 - removed jsclass_mark_is_trace bug 64
1025 - added jsclass_implements_barriers bug 702507 - removed jsclass_construct_prototype bug 758913 - removed jsclass_new_resolve_gets_start bug 766447 - added jsclass_is_domjsclass bug 792
108 - added jsclass_emulates_undefined bug 993026 - removed jsclass_new_resolve bug
1097267 - removed jsclass_new_enumerate ...
JS_DefinePropertyWithTinyId
for example, if a property named "color" is defined with tiny id
10, then the javascript expressions obj[
10] and obj.color will both result in int_to_jsval(
10) being passed to jsclass.getproperty as the id parameter.
... per-property getters and setters do not suffer from this confusion: in the above example, obj.color would cause the javascript engine to call the getter for the color property, but obj[
10] wouldn't.
JS_ExecuteScript
in ecmascript terms, the script is executed in a new execution context, but that context is not initialized quite as described in any of the three cases in ecma 262-3 §
10.2.
... bug
1097987 -- removed obj from js_executescript ...
JS_ExecuteScriptPart
js_executescriptpart has been removed in bug 555
104.
...see also mxr id search for js_executescriptpart js_executescript bug 555
104 ...
JS_ExecuteScriptVersion
in ecmascript terms, the script is executed in a new execution context, but that context is not initialized quite as described in any of the three cases in ecma 262-3 §
10.2.
... see also js::compile js_executescript js::evaluate bug
1095660 ...
JS_GetGCParameter
see also mxr id search for js_getgcparameter mxr id search for js_setgcparameter bug 474801 jsgc_bytes jsgc_number bug 474497 jsgc_max_code_cache_bytes this option no-longer exists js_getgcparameterforthread js_setgcparameterforthread bug 624229 jsgc_mode bug 631733 jsgc_unused_chunks bug 674480 jsgc_total_chunks bug 64
1025 jsgc_slice_time_budget bug 673551 jsgc_mark_stack_limit bug 765435 jsgc_high_frequency_time_limit jsgc_high_frequency_low_limit jsgc_high_frequency_high_limit jsgc_high_frequency_heap_growth_max jsgc_high_frequency_heap_growth_min jsgc_low_frequency_heap_growth jsgc_dynamic_heap_growth jsgc_dynamic_mark_slice bug 800063 jsgc_allocat...
...ion_threshold bug 87
1005 jsgc_decommit_threshold this option is no-longer exists bug
1017141 jsgc_min_empty_chunk_count jsgc_max_empty_chunk_count ...
Property attributes
this is a temporary hack that will need to go away in bug 1
105518.
...added in spidermonkey 38 mxr id search for jsprop_ignore_value see also bug 575997 - for jsprop_shared bug
1088002 - added jsprop_propop_accessors bug 825199 - added jsprop_define_late bug 365851 - added jsfun_stub_gsops bug 581263 - added jsfun_constructor bug 1
101123 - added jsprop_redefine_nonconfigurable bug
1037770 - added jsop_ignore_* bug 1
105518 - for jsprop_redefine_nonconfigurable bug 1138489 - removed jsprop_index bug 1140482 - added jsprop_resolving ...
jschar
(see bug
1063962.) as required by the ecmascript standard, ecma 262-3 §4.3.16", javascript strings are arbitrary sequences of 16-bit values.
... see also bug
1063962 ...
SpiderMonkey 1.8.7
—22 march 2011 platform support spidermonkey 1.8.7 is supported on all the platforms where firefox
10 runs.
...known issues mac os x
10.5 (leopard) and xcode 3.2 spidermonkey will not build with certain builds of apple's gcc 4.2 c++ compiler.
SpiderMonkey 17
currently only versions of visual studio prior to 20
10 (also known as version
10) are known to be deficient in this manner, so the custom implementation (which is compatible with the one shipped in visual studio 20
10 and later) is only invoked for those compilers.
... in the long run we anticipate removing the environment variable-based overriding when we drop support for versions of visual studio prior to 20
10.
Shell global objects
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) f...
...inish collection 9: (incrementalmarkallthenfinish) incremental gc in two slices: 1) mark all 2) new marking and finish
10: (incrementalmultipleslices) 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 15: (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.
Security and the jar protocol
firefox 2.0.0.
10 (and firefox 1.5.0.15) 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.15 and 1.8.1.
10, the jar: protocol is only allowed if the mime type of the file is application/java-archive.
Animated PNG graphics
if the denominator is 0, it is to be treated as if it were
100 (that is, delay_num then specifies 1/
100ths of a second).
... removed hidden flag, instead only the first frame can be hidden and it is signaled with a missing fctl idat, fctl and fdat are no longer required to have no other chunks in between them from 0.8 removed crcs for ihdr and plte from actl the actl fctl and adat are now not copy safe, renamed them to actl, fctl and adat from 0.9 split render_op into dispose_op and blend_op from 0.
10 no changes test encoder and sample images sample images are available from the apng implementation page at http://littlesvr.ca/apng/ an encoder (open source) is available in versions of the gecko engine starting with version 1.9 alpha 4.
Querying Places
igned short sort_by_date_ascending = 3 const unsigned short sort_by_date_descending = 4 const unsigned short sort_by_uri_ascending = 5 const unsigned short sort_by_uri_descending = 6 const unsigned short sort_by_visitcount_ascending = 7 const unsigned short sort_by_visitcount_descending = 8 const unsigned short sort_by_keyword_ascending = 9 const unsigned short sort_by_keyword_descending =
10 const unsigned short sort_by_dateadded_ascending = 11 const unsigned short sort_by_dateadded_descending = 12 const unsigned short sort_by_lastmodified_ascending = 13 const unsigned short sort_by_lastmodified_descending = 14 const unsigned short sort_by_annotation_ascending = 15 const unsigned short sort_by_annotation_descending = 16 const unsigned short results_as_uri = 0 const unsigned s...
... // first query object searches for "firefox" in title/url var query1 = placesutils.history.getnewquery(); query1.searchterms = "firefox"; // second query object searches for visited in past 24 hours and from mozilla.org var query2 = placesutils.history.getnewquery(); query2.begintimereference = query2.time_relative_now; query2.begintime = -24 * 60 * 60 *
1000000; // 24 hours ago in microseconds query2.endtimereference = query2.time_relative_now; query2.endtime = 0; // now query2.domain = "mozilla.org"; var result = placesutils.history.executequeries([query1, query2], 2, options); note: keyword searching doesn't work correctly across or queries.
Avoiding leaks in JavaScript XPCOM components
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 f...
...ns1[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.
Component Internals
of those 1300 interfaces, less than
100 were frozen, which means that a developer is likely to stumble upon useful interfaces that aren't frozen.
...most components and embedding applications need to link to some string class or other in order to utilize certain gecko apis, but the string code that mozilla uses is highly complex and even more expensive than the glue code in terms of footprint (~
100k).
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 \ { 0x777f7150, 0x4a2b, 0x4301, \ { 0xad, 0x
10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} static const nscid ksamplecid = sample_cid; nsimodule.h and nsifactory.h are required to build your module successfully.
... "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 \ { 0x777f7150, 0x4a2b, 0x4301, \ { 0xad, 0x
10, 0x5e, 0xab, 0x25, 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() { mrefcnt = 0; } sample::~s...
nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="
1005,6,
1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,
102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstr...
...@param aradix must be
10 or 16 parameters nsresult* aerrorcode pruint32 aradix ...
nsIAppStartup
erestart 0x
10 restart the application after quitting.
... erestartnotsameprofile 0x
100 restart the application after quitting.
nsIBidiKeyboard
the problem is fixed on gtk+ version 2.
10.1 and 2.12.
...for gtk+ (>=2.
10.1, >=2.12.0) and all gecko versions, we check only the first shift-level of the layout, to fix the problem with hebrew layouts.
nsIZipReaderCache
inherits from: nsisupports last changed in gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7) implemented by: @mozilla.org/libjar/zip-reader-cache;1.
... to create an instance, use: var zipreadercache = components.classes["@mozilla.org/libjar/zip-reader-cache;1"] .createinstance(components.interfaces.nsizipreadercache); method overview nsizipreader getinnerzip(in nsifile zipfile, in autf8string zipentry); nsizipreader getinnerzip(in nsifile zipfile, in string zipentry); obsolete since gecko
10 nsizipreader getzip(in nsifile zipfile); void init(in unsigned long cachesize); methods getinnerzip() returns a (possibly shared) cached nsizipreader for a zip inside another zip.
nsMsgSearchAttrib
bvalue 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 = 15; const nsmsgsearchattribvalue ke...
... */ const nsmsgsearchattribvalue otherheader = 52; // must be last attribute const nsmsgsearchattribvalue knummsgsearchattributes =
100; }; ...
MailNews fakeserver
i tend to like using
1024 + default port number myself.
...also, use something // larger than
1024 for best results.
Thunderbird Binaries
latest english trunk builds are available at: https://archive.mozilla.org/pub/thunderbird/nightly/latest-comm-central/ latest localized trunk builds are available at: https://archive.mozilla.org/pub/thunderbird/nightly/latest-comm-central-l
10n/ note: please use http://ftp.stage.mozaws.net/pub/thunderbird/nightly/latest-comm-central/ because the above two links currently do not work.
...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/20
100308 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.
Working with ArrayBuffers
])" 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).
UInt64
if you don't specify a radix, base
10 is used.
...type is "' + ccon + '"'); } } } } function uint64_add(...uint64) { ensureuint64(uint64); var hi = uint64.hi(uint64[0]); var lo = uint64.lo(uint64[0]);; for (var i=1; i<uint64.length; i++) { hi += uint64.hi(uint64[i]); lo += uint64.lo(uint64[i]); if (lo > 0x
100000000) { hi += 1; } hi = hi >>> 0; lo = lo >>> 0; } return uint64.join(hi, lo); } function uint64_sub(a, b) { var valarr = [a, b]; ensureuint64(valarr); a = valarr[0]; b = valarr[1]; var hi = uint64.hi(a) - uint64.hi(b); var lo = uint64.lo(a) - uint64.lo(b); if (...
Animation inspector example: Web Animations API - Firefox Developer Tools
iv class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.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(
100%)', 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: 750, fill: 'forwards', easing: 'ease-in', enddelay:
100 } var notekeyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } 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; } if (e.target.id != "icon") { return; } if (firsttime) { iconanimation.play(); note...
Work with animations - Firefox Developer Tools
if you hover over a dot, you'll see the value assigned to that property at that point in the timeline: this is essentially a visual representation of the animation's keyframes: var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(
100%)' }, { filter: 'grayscale(
100%)', offset: 0.333 }, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)' } ]; application to the example applying all this to our example, we can see that: the animation involved two elements, span#note and img#icon.
... the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of
100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar.
Call Tree - Firefox Developer Tools
it can shoulder the blame for another 252 samples, or almost another
10% of the total cost.
... with this kind of digging, we can figure out the whole call graph, with associated sample count: sortall() // 8 -> sort() // 37 -> bubblesort() // 1345 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() //
103 -> partition() // 12 platform data you'll also see some rows labeled gecko, input & events, and so on.
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...
... 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.addeventlistener("message", ha...
Responsive Design Mode - Firefox Developer Tools
screen size - you can edit the width and height values to change the device size by editing a number directly or using the up and down keys to increase or decrease the value by 1 pixels on each keypress or hold and shift to change the value by
10.
... selection download speed upload speed minimum latency (ms) gprs 50 kb/s 20 kb/s 500 regular 2g 250 kb/s 50 kb/s 300 good 2g 450 kb/s 150 kb/s 150 regular 3g 750 kb/s 250 kb/s
100 good 3g 1.5 mb/s 750 kb/s 40 regular 4g/lte 4 mb/s 3 mb/s 20 dsl 2 mb/s 1 mb/s 5 wi-fi 30 mb/s 15 mb/s 2 to select a network, click the list box that's initially labeled "no throttling": ...
AesGcmParams - Web APIs
according to the web crypto specification this must have one of the following values: 32, 64, 96,
104, 112, 120, or 128.
... the aes-gcm specification recommends that it should be 96,
104, 112, 120 or 128, although 32 or 64 bits may be acceptable in some applications: appendix c of the specification provides additional guidance here.
AnalyserNode.smoothingTimeConstant - Web APIs
var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -
10; analyser.smoothingtimeconstant = 0.85; ...
... 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 of 'smoothingtimeconstant' in that specification.
AudioBufferSourceNode.playbackRate - Web APIs
consider a sound buffer containing audio sampled at 44.1 khz (44,
100 samples per second).
... let's see what a few values of playbackrate do: a playbackrate of 1.0 plays the audio at full speed, or 44,
100 hz.
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12p...
...font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which ha...
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: 256, 512,
1024, 2048, 4096, 8192, or 16384.
... example the following script illustrates the use of createjavascriptnode(): var sinewave = function(context) { var that = this; this.x = 0; // initial sample number this.context = context; this.node = context.createjavascriptnode(
1024, 1, 1); this.node.onaudioprocess = function(e) { that.process(e) }; } sinewave.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...
AudioContextOptions.sampleRate - Web APIs
syntax audiocontextoptions.samplerate = 44
100; var samplerate = audiocontextoptions.samplerate; value the desired sample rate for the audiocontext, specified in samples per second.
...this value should typically be between 8,000 hz and 96,000 hz; the default will vary depending on the output device, but the sample rate 44,
100 hz is the most common.
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, 22050, 44
100); if you use this call, you will get a stereo buffer (two channels), that, when played back on an audiocontext running at 44
100hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames / 44
100hz = 0.5 seconds.
... var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(1, 22050, 22050); if you use this call, you will get a mono buffer (one channel), that, when played back on an audiocontext running at 44
100hz, will be automatically *resampled* to 44
100hz (and therefore yield 44
100 frames), and last for 1.0 second: 44
100 frames / 44
100hz = 1 second.
BiquadFilterNode.detune - Web APIs
syntax var audioctx = new audiocontext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.detune.value =
100; note: though the audioparam returned is read-only, the value it represents is not.
...audioctx.createconvolver(); // connect 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 = 25; biquadfilter.detune.value =
100; specifications specification status comment web audio apithe definition of 'detune' in that specification.
BiquadFilterNode.frequency - Web APIs
frequency's default value is 350 with a nominal range of
10 to the nyquist frequency — that is, half of the sample rate.
...audioctx.createconvolver(); // connect 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 = 25; specifications specification status comment web audio apithe definition of 'frequency' in that specification.
BiquadFilterNode.getFrequencyResponse() - Web APIs
we first create the float32arrays 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>biquad filter frequency response for: </p> <ul class="freq-response-output...
...put = document.queryselector('.freq-response-output'); finally, after creating our biquad 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 biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value =
1000; biquadfilter.gain.value = range.value; ...
Blob.slice() - Web APIs
for example, -
10 would be the
10th from last byte in the blob.
...for example, -
10 would be the
10th from last byte in the blob.
BroadcastChannel: message event - Web APIs
annel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = 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-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); result specifications specification status html living standard living standard ...
CSSKeyframeRule - Web APIs
it has two specific properties: csskeyframe.keytext represents the key of the keyframe, like '
10%', '75%'.
... the from keyword maps to '0%' and the to keyword maps to '
100%'.
CSSKeyframesRule - Web APIs
the parameter is the index of the keyframe to be deleted, expressed as a domstring resolving as a number between 0% and
100%.
...the key is a domstring containing an index of the keyframe to be returned, resolving to a percentage between 0% and
100%.
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); ...
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; paddi...
...ng: 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.65em; 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.
CSS Painting API - Web APIs
fillstyle = 'none'; ctx.strokestyle = 'none'; } ctx.beginpath(); ctx.moveto( x, y ); ctx.lineto( blockwidth, y ); ctx.lineto( blockwidth + blockheight, blockheight ); ctx.lineto( x, blockheight ); ctx.lineto( x, y ); ctx.closepath(); ctx.fill(); ctx.stroke(); for (let i = 0; i < 4; i++) { let start = i * 2; ctx.beginpath(); ctx.moveto( blockwidth + (start *
10) +
10, y); ctx.lineto( blockwidth + (start *
10) + 20, y); 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>it...
...em 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 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); 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(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type...
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, 75, 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, 1
10, 50, 0, math.pi); ctx.stroke(); edit the code below to see your changes update live in the canvas.
...wser 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:250px"> ctx.beginpath(); ctx.arc(
100,
100, 75, 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, 1
10, 50, 0, math.pi, false); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext(...
CanvasRenderingContext2D.arc() - Web APIs
html <canvas></canvas> javascript the arc is given an x-coordinate of
100, a y-coordinate of 75, and a radius of 50.
... const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(
100, 75, 50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws various shapes to show what is possible with arc().
CanvasRenderingContext2D.closePath() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 140); // move pen to bottom-left corner ctx.lineto(120,
10); // line to top corner ctx.lineto(220, 140); // line to bottom-right corner ctx.closepath(); // line to bottom-left corner ctx.stroke(); result closing just one sub-path this example draws a smiley face consisting of three disconnected sub-paths.
... 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(215, 80); ctx.arc(150, 80, 65, 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.fill() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(
10,
10, 150,
100); ctx.fill(); result specifying a path and a fillrule this example saves some intersecting lines to a path2d object.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(1
10, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fill' in that specification.
CanvasRenderingContext2D.font - Web APIs
the default font is
10px sans-serif.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = 'bold 48px serif'; ctx.stroketext('hello world', 50,
100); result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas.
CanvasRenderingContext2D.getImageData() - Web APIs
html <canvas id="canvas"></canvas> javascript the object retrieved by getimagedata() has a width of 200 and a height of
100, for a total of 20,000 pixels.
... 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, 150,
10); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.getimagedata' in that specification.
CanvasRenderingContext2D.getLineDash() - Web APIs
html <canvas id="canvas"></canvas> javascript as set by setlinedash(), strokes consist of lines that are
10 units wide, with spaces of 20 units in between each line.
... 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.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.
.../ draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75,
10 +
10 * i, 0, math.pi * 2, true); ctx.fill(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.globalalpha' in that specification.
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 = 15; 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="150" height="150"></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 = 15; ctx.linecap = linecap[i]; ctx.beginpath(); ctx.moveto(25 + i * 50,
10); ctx.lineto(25 + i * 50, 140); ctx.stroke(); } screenshotlive sample specifications specification status com...
CanvasRenderingContext2D.lineDashOffset - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([4, 16]); // dashed line with no offset ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // dashed line with offset of 4 ctx.beginpath(); ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0,
100); ctx.lineto(300,
100); ctx.stroke(); result the line with a dash offset is drawn in red.
... html <canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(
10,
10,
100,
100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linedashoffset' in that specification.
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, 150); 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="150" height="150"></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(35, 45 + i * 40); ctx.lineto(75, 5 + i * 40); ctx.lineto(115, 45 + i * 40); ctx.lineto(155, 5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linejoin' in that specification.
CanvasRenderingContext2D.miterLimit - Web APIs
the default value is
10.0.
... 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"> ctx.beginpath(); ctx.moveto(0,0); ctx.linewidth = 15; ctx.lineto(
100,
100); ctx.stroke();</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; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeve...
CanvasRenderingContext2D.scale() - Web APIs
since its specified corner is (
10,
10), its rendered corner becomes (90, 30).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // scaled rectangle ctx.scale(9, 3); ctx.fillstyle = 'red'; ctx.fillrect(
10,
10, 8, 20); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // non-scaled rectangle ctx.fillstyle = 'gray'; ctx.fillrect(
10,
10, 8, 20); result the scaled rectangle is red, and the non-scaled rectangle is gray.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(
10,
10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <text...
...area id="code" class="playable-code"> ctx.beginpath(); ctx.rect(
10,
10, 30, 30); ctx.scrollpathintoview();</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; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html...
CanvasRenderingContext2D.setLineDash() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); 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 = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([
10,
10]); drawdashedline([20, 5]); drawdashedline([15, 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 specification.
CanvasRenderingContext2D.shadowColor - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx =
10; ctx.shadowoffsety =
10; // filled rectangle ctx.fillrect(20, 20,
100,
100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20,
100,
100); result shadows on translucent shapes a shadow's opacity is affected by the transparency level of its parent object (even when shadowcolor specifies a completely opaque value).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'rgba(255, 0, 0, .8)'; ctx.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(
10,
10, 150,
100); // stroked rectangle ctx.linewidth =
10; ctx.strokestyle = 'rgba(0, 0, 255, .6)'; ctx.strokerect(
10,
10, 150,
100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowcolor' in that specification.
CanvasRenderingContext2D.shadowOffsetX - Web APIs
the shadowcolor property sets its color, shadowoffsetx sets its offset 25 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 = 25; ctx.shadowblur =
10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150,
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 25 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 = 25; ctx.shadowblur =
10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 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, 150,
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(25, 25,
100,
100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25,
100,
100); ctx.stroke(); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroke' in that specification.
CanvasRenderingContext2D.strokeStyle - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.strokestyle = 'blue'; ctx.strokerect(
10,
10,
100,
100); result creating multiple stroke colors using loops in this example, we use two for loops and the arc() method to draw a grid of circles, each having a different stroke color.
...e red channel has a fixed value.) <canvas id="canvas" width="150" height="150"></canvas> var ctx = document.getelementbyid('canvas').getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25,
10, 0, math.pi * 2, true); ctx.stroke(); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokestyle' in that specification.
CanvasRenderingContext2D.translate() - Web APIs
html <canvas id="canvas"></canvas> javascript the translate() method translates the context by 1
10 horizontally and 30 vertically.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(1
10, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray.
Canvas API - Web APIs
the fillrect() method places its top-left corner at (
10,
10), and gives it a size of 150 units wide by
100 tall.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(
10,
10, 150,
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.
DOMHighResTimeStamp - Web APIs
// reduced time precision (2ms) in firefox 60 event.timestamp // 1519211809934 // 15192118
10362 // 1519211811670 // ...
... in firefox, you can also enable privacy.resistfingerprinting, the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
DOMPoint.DOMPoint() - Web APIs
examples this example creates a dompoint representing the top-left corner of the current window, then creates a second point based on the first, which is then offset by
100 pixels both vertically and horizontally.
... var windtopleft = new dompoint(window.screenx, window.screeny); var newtopleft = dompoint.frompoint(windtopleft); newtopleft.x +=
100; newtopleft.y +=
100; specifications specification status comment geometry interfaces module level 1the definition of 'dompoint()' in that specification.
DataTransferItem.webkitGetAsEntry() - Web APIs
#dropzone { text-align: center; width: 300px; height:
100px; margin:
10px; padding:
10px; border: 4px dashed red; border-radius:
10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height:
100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
...in chromium-based browsers, the following example will only return a max of
100 entries.
Detecting device orientation - Web APIs
so let's imagine a ball in a garden: <div class="garden"> <div class="ball"></div> </div> <pre class="output"></pre> this garden is 200 pixel wide (yes, it's a tiny one), and the ball is in the center: .garden { position: relative; width : 200px; height: 200px; border: 5px solid #ccc; border-radius:
10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border-radius:
100%; } now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var output = document.queryselector('.output'); var maxx = garden.clientwidth - ball.clientwid...
...ma; // in degree in the range [-90,90] output.innerhtml = "beta : " + x + "\n"; output.innerhtml += "gamma: " + y + "\n"; // because we don't want to have the device upside down // we constrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // to make computation easier we shift the range of // x and y to [0,180] x += 90; y += 90; //
10 is half the size of the ball // it center the positioning point to the center of the ball ball.style.top = (maxy*y/180 -
10) + "px"; ball.style.left = (maxx*x/180 -
10) + "px"; } window.addeventlistener('deviceorientation', handleorientation); click here to open this example in a new window; because deviceorientation doesn't work in a cross-origin <iframe> in all browsers.
Using light sensors - Web APIs
10 ~ 50 lux : dim environment
100 ~
1000 lux : normal >
10000 lux : bright it uses the addeventlistener method of the window object.
... window.addeventlistener("devicelight", function (event) { // read out the lux value var luminosity = event.value; alert(luminosity); }); example: window.addeventlistener('devicelight', function(event) { var bodybg= document.body.style; //event.value is the lux value returned by the sensor on the device if (event.value <
100) { alert('hey, you!
Document.mozSetImageElement() - Web APIs
var c = 0x00; function clicked() { var canvas = document.createelement("canvas"); canvas.setattribute("width",
100); canvas.setattribute("height",
100); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "#" + c.tostring(16) + "0000"; ctx.fillrect(25, 25, 75, 75); c += 0x11; if (c > 0xff) { c = 0x00; } document.mozsetimageelement("canvasbg", canvas); } the code here is called each time the user clicks the <div> element.
... it creates a new <canvas> with the width and height set to
100 pixels, then draws into it a 50 by 50 pixel square.
Document.xmlEncoding - Web APIs
obsolete since gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7)this feature is obsolete.
... warning: do not use this attribute; it has been removed from the dom level 4 specification and is no longer supported in gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7).
Document.xmlVersion - Web APIs
obsolete since gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7)this feature is obsolete.
...as such, firefox
10 no longer implements it.
DynamicsCompressorNode - Web APIs
dynamicscompressornode.attack read only is a k-rate audioparam representing the amount of time, in seconds, required to reduce the gain by
10 db.
... dynamicscompressornode.release read only is a k-rate audioparam representing the amount of time, in seconds, required to increase the gain by
10 db.
EffectTiming.easing - Web APIs
frames(<integer>) specifies a frames timing function, which breaks the animation down into a number of equal time intervals but also displays the start (0%) and end (
100%) states for an equal amount of time to the other intervals.
... examples in the red queen's race example, we animate alice and the red queen by passing an easing of steps(7, end) to animate(): // define the key frames var spriteframes = [ { transform: 'translatey(0)' }, { transform: 'translatey(-
100%)' } ]; // get the element that represents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "reverse", duration: 600, playbackrate: 1, iterations: infinity }); specificati...
Element.classList - Web APIs
starting state: <div class="foo"></div> console.log(div.outerhtml); // use the classlist api to remove and add classes div.classlist.remove("foo"); div.classlist.add("anotherclass"); // <div class="anotherclass"></div> console.log(div.outerhtml); // if visible is set remove it, otherwise add it div.classlist.toggle("visible"); // add/remove visible, depending on test conditional, i less than
10 div.classlist.toggle("visible", i <
10 ); console.log(div.classlist.contains("foo")); // add or remove multiple classes div.classlist.add("foo", "bar", "baz"); div.classlist.remove("foo", "bar", "baz"); // add or remove multiple classes using spread syntax const cls = ["foo", "bar"]; div.classlist.add(...cls); div.classlist.remove(...cls); // replace class "foo" with class "bar" div.classlist...
... the following polyfill for both classlist and domtokenlist ensures full compliance (coverage) for all standard methods and properties of element.prototype.classlist for ie
10-ie11 browsers plus nearly compliant behavior for ie 6-9.
Element.getAttributeNS() - Web APIs
<svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="
10" stroke="#444" stroke-width="2" fill="none" test:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an html5 document the attribute has to be accessed with te...
... <!doctype html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="
10" stroke="#444" stroke-width="2" fill="none" test:foo="foo value"/> </svg> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log('attribute value: ' + circle.getattribute('test:foo')); </script> </body> </html> notes namespaces are only supported in xml documents.
Element.localName - Web APIs
on/javascript"><![cdata[ function test() { var text = document.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.
...for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="
1001">tony's syrup warehouse </ecomm:partner> </ecomm:partner> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms).
Element.scroll() - Web APIs
examples // put the
1000th vertical pixel at the top of the element element.scroll(0,
1000); using options: element.scroll({ top:
100, left:
100, behavior: 'smooth' }); specification specification status comment css object model (cssom) view modulethe definition of 'element.scroll()' in that specification.
...etscrollchrome full support 45edge full support 79firefox full support 36ie no support noopera full support 32safari full support
10webview android full support 45chrome android full support 45firefox android full support 36opera android full support 32safari ios no support nosamsung internet android ...
Element.scrollLeft - Web APIs
setting the value // set the number of pixels scrolled element.scrollleft =
10; scrollleft can be specified as any integer value.
... example html <div id="container"> <div id="content">click the button to slide right!</div> </div> <button id="slide" type="button">slide right</button> css #container { width:
100px; height:
100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px; background-color: #ccc; } javascript const button = document.getelementbyid('slide'); button.onclick = function () { document.getelementbyid('container').scrollleft += 20; }; result specifications specification status comment css object model (cssom) view modu...
Element.scrollTo() - Web APIs
examples element.scrollto(0,
1000); using options: element.scrollto({ top:
100, left:
100, behavior: 'smooth' }); specifications specification status comment css object model (cssom) view modulethe definition of 'element.scrollto()' in that specification.
...scrolltochrome full support 45edge full support 79firefox full support 36ie no support noopera full support 32safari full support
10webview android full support 45chrome android full support 45firefox android full support 36opera android full support 32safari ios no support nosamsung internet android ...
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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86"...
... y1="25" x2="116" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event.
Comparison of Event Targets - Web APIs
examples <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>comparison of event targets</title> <style> table { border-collapse: collapse; height: 150px; width:
100%; } td { border: 1px solid #ccc; font-weight: bold; padding: 5px; min-height: 30px; } .standard { background-color: #99ff99; } .non-standard { background-color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">...
... example <hbox id="outer"> <hbox id="inner" onmouseover="dump('mouseover ' + event.relatedtarget.id + ' > ' + event.target.id + '\n');" onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedtarget.id + '\n');" style="margin:
100px; border:
10px solid black; width:
100px; height:
100px;" /> </hbox> ...
Event.timeStamp - Web APIs
// reduced time precision (2ms) in firefox 60 event.timestamp; // 1519211809934 // 15192118
10362 // 1519211811670 // ...
... in firefox, if you also enable privacy.resistfingerprinting, the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
File.lastModified - Web APIs
// reduced time precision (2ms) in firefox 60 somefile.lastmodified; // 1519211809934 // 15192118
10362 // 1519211811670 // ...
... in firefox, you can also enabled privacy.resistfingerprinting, the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
File.lastModifiedDate - Web APIs
// reduced time precision (2ms) in firefox 60 somefile.lastmodifieddate.gettime(); // 1519211809934 // 15192118
10362 // 1519211811670 // ...
... in firefox, you can also enable privacy.resistfingerprinting, the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><...
...x" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor focusevent() creates a focusevent event with the given parameters...
FontFace.display - Web APIs
the spec recommends
100 ms or less for the block period and 3 seconds for the swap period, though these values may vary from browser to browser.
...the spec recommends
100 ms or less, though this may vary from browser to browser.
GlobalEventHandlers.onanimationcancel - Web APIs
{ --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding:
10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... @keyframes slidebox { from { left:0; top:0; } to { left:calc(
100% - var(--boxwidth)); top:calc(
100% - var(--boxwidth)) } } since the animation is described as taking place an infinite number of times, alternating direction each time, the box will glide back and forth between the two corners until stopped or the page is closed.
GlobalEventHandlers.onanimationend - Web APIs
t { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding:
10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... .slideanimation { animation: 5s ease-in-out 0s 1 slidebox; } @keyframes slidebox { from { left:0; top:0; } to { left:calc(
100% - var(--boxwidth)); top:calc(
100% - var(--boxwidth)) } } since the css describes the animation but doesn't connect it to the box, we'll need some javascript code to do that.
GlobalEventHandlers.onanimationiteration - Web APIs
t { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding:
10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... @keyframes slidebox { from { left:0; top:0; } to { left:calc(
100% - var(--boxwidth)); top:calc(
100% - var(--boxwidth)) } } javascript some javascript code will need to be written to handle the click on the button to start the next iteration.
GlobalEventHandlers.onanimationstart - Web APIs
t { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding:
10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... .slideanimation { animation: 5s ease-in-out 0s 1 slidebox; } @keyframes slidebox { from { left:0; top:0; } to { left:calc(
100% - var(--boxwidth)); top:calc(
100% - var(--boxwidth)) } } since the css describes the animation but doesn't connect it to the box, we'll need some javascript code to do that.
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="m...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><l...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="1...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
HTMLCanvasElement.mozGetAsFile() - Web APIs
html <canvas id="canvas" width="
100" height="
100"></canvas> <p><a href="#" id="link">click here to try out mozgetasfile()</a>.</p> javascript the following code uses mozgetasfile() to create a file object from the canvas and appends it as an image to the page by loading it as a data url using the readasdataurl() method.
... function draw() { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(
10,
10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specifications not part of any...
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="1
10" 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="#4d4e53" text-anchor...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eve...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyli...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventta...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
HTMLElement.offsetTop - Web APIs
example var d = document.getelementbyid("div1"); var toppos = d.offsettop; if (toppos >
10) { // object is offset more // than
10 pixels from its parent } specification specification status comment css object model (cssom) view modulethe definition of 'offsettop' in that specification.
...upport 8safari full support 3webview android full support 1chrome android full support 18firefox android full support 4opera android full support
10.1safari ios full support 1samsung internet android full support 1.0legend full support full support in compliance with the specification, this property will return null on webkit if the element is hidden (the style.display of this element ...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><poly...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those fr...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignm...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</te...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline po...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,mon...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" align...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
HTMLImageElement.alt - Web APIs
body { margin: 0; padding: 0; } p { margin-block-start: 0; margin-block-end: 1em; margin-top: 0; margin-bottom: 1em; } .container { width:
100vh; height: 95vh; font: 16px arial,helvetica,sans-serif; } .left-margin { background-color: rgb(241, 240, 237, 255); width: 9em; height:
100%; float: left; margin-right: 5px; padding-right: 1em; display: flex; align-items: center; justify-content: center; } .left-margin img { width: 6em; } .contents { background-color: rgb(241, 240, 235, 255); height:
100%; margin...
... .container { max-width: 500px; } .pageinfo-badge { width: 9em; padding-right: 1em; float: left; clip-path: polygon(
100% 0,
100% 50%, 90% 70%, 80% 80%, 70% 90%, 50%
100%, 0
100%, 0 0); shape-outside: polygon(
100% 0,
100% 50%, 90% 70%, 80% 80%, 70% 90%, 50%
100%, 0
100%, 0 0); } .contents { margin-top: 1em; font: 16px arial,helvetica,verdana,sans-serif; } result other images images simply showing objects or scenes should have alt text describing what's seen in the image.
HTMLImageElement.currentSrc - Web APIs
to change preferences in firefox, visit about:config.ie no support noopera full support yessafari full support
10.1webview android full support 45chrome android full support 45firefox android full support 38 full support 38 no support 32 — 52disabled disabled from version 32 until version 52 (exclusive):...
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support
10.3samsung internet android full support 5.0legend full support full support no support no supportexperimental.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middl...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 ...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor=...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width:
100%; padding-bottom: 8.571428571428571%; 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="1
10" 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="#4d4e53" text-anchor="middle" alignment-bas...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width:
100%; padding-bottom: 8.571428571428571%; 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="1
10" 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="#4d4e53" t...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarg...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">e...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="mi...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fi...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="mi...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke=...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
HTMLOptionsCollection - 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="consola...
...s,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="2
10" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties name type description length unsigned long as optionally allowed by the ...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline po...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" st...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-bas...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignm...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anch...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><po...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
HTMLSlotElement.name - Web APIs
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):...
...to change preferences in firefox, visit about:config.opera android full support 41safari ios full support
10.3samsung internet android full support 6.0legend full support full support no support no supportexperimental.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text>...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="11...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget<...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget<...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="mid...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-ba...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fi...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyli...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 ...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" ali...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline ...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12p...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25...
IDBDatabase: error event - Web APIs
ore.createindex('hours', 'hours', { unique: false }); objectstore.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) => { const newitem = { tasktitle: 'my task', hours:
10, minutes:
10, day:
10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const o...
...ore.createindex('hours', 'hours', { unique: false }); objectstore.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) => { const newitem = { tasktitle: 'my task', hours:
10, minutes:
10, day:
10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160...
IDBRequest: error event - Web APIs
e }); objectstore.createindex('year', 'year', { unique: false }); }); dbopenrequest.addeventlistener('success', event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours:
10, minutes:
10, day:
10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4);...
...', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours:
10, minutes:
10, day:
10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; }; ...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from eventtarget.
IDBTransaction: complete event - Web APIs
penrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.addeventlistener('complete', event => { console.log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours:
10, minutes:
10, day:
10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an obj...
... const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.oncomplete = event => { console.log('transaction was competed'); }; const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours:
10, minutes:
10, day:
10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; ...
IDBTransaction: error event - Web APIs
=> { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours:
10, minutes:
10, day:
10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database...
...success = (event) => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours:
10, minutes:
10, day:
10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; ...
ImageData.width - Web APIs
syntax imagedata.width example this example creates an imagedata object that is 200 pixels wide and
100 pixels tall.
... let imagedata = new imagedata(200,
100); console.log(imagedata.width); // 200 specification specification status comment html living standardthe definition of 'imagedata.width' in that specification.
Using IndexedDB - Web APIs
blink/webkit supports the current version of the spec, as shipped in chrome 23+ and opera 17+; ie
10+ does too.
...m; display: inline-block; margin-bottom: 0.5em; padding: 1em; } table { border-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } #pub-viewer { float: right; width: 48%; height: 20em; border: solid #d092ff 0.1em; } #pub-viewer iframe { width:
100%; height:
100%; } #pub-list { width: 46%; background-color: #eeeeee; border-radius: 0.3em; } #pub-list li { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; } #msg { margin-bottom: 1em; } .action-success { padding: 0.5em; color: #00d21e; background-color: #eeeeee; border-radius: 0.2em; } .action-failure { padding: 0.5em; color: #ff1408; backgroun...
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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86...
...x" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">inputevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor inputevent() creates an inputevent object.
KeyboardEvent.location - Web APIs
dom_key_location_left 1 the key was the left-hand version of the key; for example, the left-hand control key was pressed on a standard
101 key us keyboard.
... dom_key_location_right 2 the key was the right-hand version of the key; for example, the right-hand control key is pressed on a standard
101 key us keyboard.
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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" fon...
... examples include alphanumeric keys on the standard pc
101 us keyboard, the numlock key, and the space bar.
LocalFileSystem - Web APIs
so to request storage, you need to do something like the following: var requestedbytes =
1024*
1024*
10; //
10mb navigator.webkitpersistentstorage.requestquota ( requestedbytes, function(grantedbytes) { window.requestfilesystem(persistent, grantedbytes, oninitfs, errorhandler); }, function(e) { console.log('error', e); } ); your user must grant your app permission to store data locally before your app can use persistent storage.
... window.requestfilesystem(window.persistent,
1024*
1024,oninitfs,errorhandler); method overview void requestfilesystem (in unsigned short type, in unsigned long long size, in filesystemcallback successcallback, in optional errorcallback errorcallback); void resolvelocalfilesystemurl (in domstring url, in entrycallback successcallback, in optional errorcallback errorcallback); constants constant value ...
Location - Web APIs
location html <span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</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(255,255,255,.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...
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: 15 } } }; front and back camera on mobile phones.
MediaSessionActionDetails - Web APIs
if this property isn't present, those actions should choose a reasonable default distance to skip forward or backward (such as 7 or
10 seconds).
... let skiptime =
10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon.
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="1
10" 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="#4d4e53" text-anchor="middle" ...
...alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
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="75" 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="#4d4e53" te...
...xt-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on this interface are addtrack and removetrack properties also inherits properties from its parent interface, event.
MediaTrackSettings - Web APIs
properties of video tracks aspectratio a double-precision floating point value indicating the current value of the aspectratio property, specified precisely to
10 decimal places.
...common values include 1.3333333333 (for the classic television 4:3 "standard" aspect ratio, also used on tablets such as apple's ipad), 1.7777777778 (for the 16:9 high-definition widescreen aspect ratio), and 1.6 (for the 16:
10 aspect ratio common among widescreen computers and tablets).
Using the Media Capabilities API - Web APIs
const videoconfiguration = { type: "file", video: { contenttype: "video/webm;codecs=vp8", width: 800, height: 600, bitrate:
10000, framerate: 15 } }; 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:...
...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>2560x1440</option> <option>1920x
1080</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>...
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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" fon...
...x" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mouseevent() creates a mouseevent object.
NameList - Web APIs
obsolete since gecko
10.0 (firefox
10.0 / thunderbird
10.0 / seamonkey 2.7)this feature is obsolete.
...namelist has been removed, effective with gecko
10.0 the namelist interface provides an abstraction for an ordered collection of name and namespace value pairs.
Navigator.productSub - Web APIs
example <script> function prodsub() { var dt = document.getelementbyid("d").childnodes[0]; dt.data = window.navigator.productsub; } </script> <button onclick="prodsub();">productsub</button> // returns: 200
10725 notes on ie, this property returns undefined.
... on apple safari and google chrome this property always returns 20030
107.
Navigator - Web APIs
2018
100
1000000 in firefox 64 onwards.
...this value is an approximation given by rounding to the nearest power of 2 and dividing that number by
1024.
Node.localName - Web APIs
on/javascript"><![cdata[ function test() { var text = document.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.
...for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="
1001">tony's syrup warehouse </ecomm:partner> </ecomm:partners> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms).
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
...ible 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.
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment
10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_w...
...ebgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment
10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl when using the webgl_depth_texture extension: ext.depth_stencil_attachment: depth and stencil buffer data storage.
OfflineAudioContext.OfflineAudioContext() - Web APIs
the most commonly-used rate is 44
100hz, which is the sample rate used by cd audio.
... example const offlinectx = new offlineaudiocontext({ numberofchannels: 2, length: 44
100 * 40, samplerate: 44
100, }); const source = offlinectx.createbuffersource(); // etc...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
... note: for a working example, see our offline-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44
100*40,44
100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudi...
OscillatorNode.detune - Web APIs
syntax var oscillator = audioctx.createoscillator(); oscillator.detune.setvalueattime(
100, audioctx.currenttime); // value in cents note: though the audioparam returned is read-only, the value it represents is not.
... // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.detune.setvalueattime(
100, audioctx.currenttime); // value in cents oscillator.start(); specifications specification status comment web audio apithe definition of 'detune' in that specification.
ParentNode.replaceChildren() - Web APIs
this html might look something like this: <h2>party food option list</h2> <main> <div> <label for="no">no thanks!</label> <select id="no" multiple size="
10"> <option>apples</option> <option>oranges</option> <option>grapes</option> <option>bananas</option> <option>kiwi fruits</option> <option>chocolate cookies</option> <option>peanut cookies</option> <option>chocolate bars</option> <option>ham sandwiches</option> <option>cheese sandwiches</option> <option>falafel sandwiches</option> ...
...and houmous</option> <option>margherita pizza</option> <option>pepperoni pizza</option> <option>vegan veggie pizza</option> </select> </div> <div class="buttons"> <button id="to-yes">transfer to "yes" --></button> <button id="to-no"><-- transfer to "no"</button> </div> <div> <label for="yes">yes please!</label> <select id="yes" multiple size="
10"> </select> </div> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; } div { margin-right: 20px; } label, button { display: block; } .buttons { display: flex; flex-flow: column; justify-content: center; } select { width: 200px; } what we wan...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="c...
...31" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties target (domstring) read only a name identifying the app...
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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,mona...
...co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhan...
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
) { let startremoteoutbound = startreport.get(endremoteoutbound.id); if (startremoteoutbound) { let startinboundstats = findreportentry(startreport, "remoteid", startremoteoutbound.id); let endinboundstats = findreportentry(endreport, "remoteid", endremoteoutbound.id); let elapsedtime = (endremoteoutbound.timestamp - startremoteoutbound.timestamp) /
1000; /* in seconds */ let packetssent = endremoteoutbound.packetssent - startremoteoutbound.packetssent; let bytessent = endremoteoutbound.bytessent - startremoteoutbound.bytessent; let framesdecoded = endinboundstats.framesdecoded - startinboundstats.framesdecoded; let framerate = framesdecoded / elapsedtime; let timestring = ""; if (...
...we then divide by
1000 to convert the result from milliseconds to seconds.
Range.setStart() - Web APIs
html <p id="address">wyatt earp<br>
101 e.
...ddress:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city const startoffset = 2; // start at third node:
101 e.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alig...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,3...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 1...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, eleme...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="no...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 1...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
SVGGeometryElement.isPointInFill() - Web APIs
example svg <svg viewbox="0 0
100
100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="
10"/> <circle cx="
10" cy="
10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at
10,
10:', circl...
...e.ispointinfill(new dompoint(
10,
10))); // point in circle console.log('point at 40,30:', circle.ispointinfill(new dompoint(40, 30))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinfill()' in that specification.
SVGGeometryElement.isPointInStroke() - Web APIs
example svg <svg viewbox="0 0
100
100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="
10"/> <circle cx="
10" cy="
10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> <circle cx="83" cy="17" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point ...
...not in circle console.log('point at
10,
10:', circle.ispointinstroke(new dompoint(
10,
10))); // point in circle but not stroke console.log('point at 40,30:', circle.ispointinstroke(new dompoint(40, 30))); // point in circle stroke console.log('point at 83,17:', circle.ispointinstroke(new dompoint(83, 17))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinstroke()' in that specification.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline=...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
SVGLength - Web APIs
lueinspecifiedunits 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.getelementbyid("myrect"); var val = rect.x.baseval; // read x in pixel and cm units console.log("value: " + val.value + ...
... svg_lengthtype_pc
10 a value was specified using the pc units defined in css2.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,2...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,2...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
SVGPathSeg - Web APIs
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 pathseg_lineto_vertical_rel = 15 pathseg_curveto_cubic_smooth_abs = 16 pathseg_curveto_cubic_smooth_rel = 17 pathseg_curveto_quadratic_smooth_abs = 18 pathseg_curveto_...
... pathseg_arc_abs
10 corresponds to an "absolute arcto" (a) 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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,3...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
SVGPreserveAspectRatio - Web APIs
rveaspectratio_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 name value description svg_preserveaspectratio_unknown 0 the enumeration was set to a value that is not one of predefined types.
... svg_preserveaspectratio_xmaxymax
10 corresponds to value xmaxymax for attribute preserveaspectratio.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
SVGTransformList - Web APIs
orm() 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,225
100,115 130,115 70,15 70,15
10,115 40,115 40,225" 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="250" 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.
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><lin...
...x" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25...
Screen.width - Web APIs
syntax lwidth = window.screen.width example // crude way to check that the screen is at least
1024x768 if (window.screen.width >=
1024 && window.screen.height >= 768) { // resolution is
1024x768 or above } notes note that not all of the width given by this property may be available to the window itself.
...it will only return the real width of the screen if the zoom is set to
100%.
Selection API - Web APIs
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 ?
... yessamsung internet android full support yesfocusnode experimentalchrome full support yesedge full support 12firefox full support 3.6ie full support
10opera full support yessafari full support 5.1webview android full support yeschrome android full support yesfirefox android full support yesopera android full ...
ServiceWorkerRegistration.showNotification() - Web APIs
for example, [300,
100, 400] would vibrate 300ms, pause
100ms, then vibrate 400ms.
...buzz!', icon: '../images/touch/chrome-touch-icon-192x192.png', vibrate: [200,
100, 200,
100, 200,
100, 200], tag: 'vibration-sample' }); }); } }); } to invoke the above function at an appropriate time, you could use the serviceworkerglobalscope.onnotificationclick event handler.
Slottable: assignedSlot - Web APIs
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):...
...to change preferences in firefox, visit about:config.opera android full support 41safari ios full support
10.3samsung internet android full support 6.0legend full support full support no support no supportexperimental.
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="12...
...px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="131,25 141,20 141,30 131,25" stroke="#d4dde4" fill="none"/><line x1="141" y1="25" x2="171" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the ...
SubtleCrypto.importKey() - Web APIs
+xa0h+3lhzaqiqnmfacibsgifzuvegb+7tqxwqpolofr/r7mvgwcsk98jyrvtved8zmzyyitsy7m2hcasqafikyoouv5vzyre87/leyzzbpf3bqq4idaqu+k9hj5fkuu6rroeohsdnjc+vddqlschxvmolz9vtt+ok9j4/tolwr4cg8khdlburcby6gpclo3dpu09sw+6ctx2cx4mkxx6o/0mmdtmacr/vu50kdrmlefezyowpaehhmfywybtuzbipvizvp8wfcsknmbfi1s9a9pdbqnebwwhhx3/hsebt2bagmbaaecggeabei1p6nf6zs7mjlybdv+pfl5rjl2coqly6tovvzvblmkcppjyfunipdk2tk2i897zaxfhpdbikmllm2hq6jzqkb1
10oantpdg0jxzmiihps32s1d/kilhjgff4hjd4nxp1l1dp8bupollorr2tym2x6dccgfw9lhtr8o03qp4hjn84vjgiwadyck83mgs4nrsnhkdiqynwx1ajkly51yek6rcrdmi0th2rxrrinoc35svv+apt2rkomgi52rwtesea1kzgfrxjq61rejif6p2vxecvhex6cwlx014lgk43z6q28p6hgeevefijyqcuea5du/myb/qsrscosxlxbqwqkbgqd1+fdc9zimrvi+km7nx2ckbn8rjrdmuh5sbxn2myjdrud8bynnzkcgkmgxvxsvjrbmvorby2txoiqudzkk5md3e5o/qzwpwqlgru8ueynpobax9nrgnfz7rzd+81vh5mfzixfuzouzv29izh...
...r(str.length); const bufview = new uint8array(buf); for (let i = 0, strlen = str.length; i < strlen; i++) { bufview[i] = str.charcodeat(i); } return buf; } const pemencodedkey = `-----begin public key----- miibijanbgkqhkig9w0baqefaaocaq8amiibcgkcaqeay3xo3u13dc+xojwqywojlcboq5fovy8llnqcjm1w1bftxihoajwohihuirmctv7dzx47tllmarskvtrjd0df92jx/xy20lz+dxp8yl5yuwafga3xko3lsjgeoex
10nb8jfkmgsb7qiudtvvbbudfd5fwibmctacwwx7nyewwdb7a9cfxj7ejrdrdak3ux/tomlhfxvlqsl341tkcf4zqoz96rfpugpplofvn0x66cm1pqckdhzje6u5xge964zkkyuppsy6dcie4obhw4vdjgumlzv0z7ud0
10rlineugde2fqbfy/c+uwignpbpkkq+bv/uigs6dhqtcved5wgybqidaqab -----end public key-----`; function importrsakey(pem) { // fetch the part of the pem string between header and footer const pemheader = "-----begin public key-----";...
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="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe,...
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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" fon...
...x" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor touchevent() creates a touchevent object.
WEBGL_compressed_texture_etc - Web APIs
the webgl_compressed_texture_etc extension is part of the webgl api and exposes
10 etc/eac compressed texture formats.
... constants the compressed texture formats are exposed by
10 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
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_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment
10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_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_buffer5_webgl ext.draw_buffer6_webgl ext.draw_buffer7_webgl ext.draw_buffer8_webgl ext.draw_buffer9_webgl ext.draw_buffer
10_webgl ext.draw_buffer11_webgl ext.draw_buffer12_webgl ext.draw_buffer13_webgl ext.draw_buffer14_webgl ext.draw_buffer15_webgl a glenum returning a draw buffer.
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.rgb565 gl.r11f_g11f_b
10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb5_a1 gl.rgba4444 gl.rgba16f gl.rgba32f gl.rgba8ui width a glsizei specifying the width of the texture.
... 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.
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.rgb565 gl.r11f_g11f_b
10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb5_a1 gl.rgba4444 gl.rgba16f gl.rgba32f gl.rgba8ui type a glenum specifying the data type of the texel data.
... 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.
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_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment
10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.co...
...lor_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment
10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_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_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment
10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.co...
...lor_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment
10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl when using the webgl_depth_texture extension: gl.depth_stencil_attachment: depth and stencil buffer data storage.
WebGLRenderingContext.getFramebufferAttachmentParameter() - 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_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment
10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.co...
...lor_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment
10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl pname a glenum specifying information to query.
WebGLRenderingContext.getParameter() - Web APIs
pressed_srgb8_alpha8_astc_6x5_khr ext.compressed_rgba_astc_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr ext.compressed_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_
10x5_khr ext.compressed_srgb8_alpha8_astc_
10x5_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_
10x
10_khr ext.compressed_srgb8_alpha8_astc_
10x
10_khr ext.compressed_rgba_astc_12x
10_khr ext.compressed_srgb8_alpha8_astc_12x
10_kh...
... ext.draw_buffer0_webgl ext.draw_buffer1_webgl ext.draw_buffer2_webgl ext.draw_buffer3_webgl ext.draw_buffer4_webgl ext.draw_buffer5_webgl ext.draw_buffer6_webgl ext.draw_buffer7_webgl ext.draw_buffer8_webgl ext.draw_buffer9_webgl ext.draw_buffer
10_webgl ext.draw_buffer11_webgl ext.draw_buffer12_webgl ext.draw_buffer13_webgl ext.draw_buffer14_webgl ext.draw_buffer15_webgl glenum webgl_draw_buffers drawing buffers.
WebGLRenderingContext.renderbufferStorage() - Web APIs
gl.depth_stencil when using a webgl 2 context, the following values are available additionally: 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 (also available as an extension for webgl 1, see below) gl.rgb
10_a2 gl.rgba8ui gl.rgba8i gl.rgb
10_a2ui gl.rgba16ui gl.rgba16i gl.rgba32i gl.rgba32ui gl.depth_component24 gl.depth_component32f gl.depth24_stencil8 gl.depth32f_stencil8 when using the webgl_color_buffer_float extension: ext.rgba32f_ext: rgba 32-bit floating-point type.
... when using a webgl 2 context and the ext_color_buffer_float extension: gl.r16f gl.rg16f gl.rgba16f gl.r32f gl.rg32f gl.rgba32f gl.r11f_g11f_b
10f width a glsizei specifying the width of the renderbuffer in pixels.
WebGLRenderingContext.stencilMask() - Web APIs
examples gl.stencilmask(1
10101); to get the current stencil masks, query the stencil_writemask, stencil_back_writemask, or stencil_bits constants.
... gl.getparameter(gl.stencil_writemask); // 1
10101 gl.getparameter(gl.stencil_back_writemask); // 1
10101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status comment webgl 1.0the definition of 'stencilmask' in that specification.
WebGLRenderingContext.stencilMaskSeparate() - Web APIs
examples gl.stencilmaskseparate(gl.front, 1
10101); to get the current stencil masks, query the stencil_writemask, stencil_back_writemask, or stencil_bits constants.
... gl.getparameter(gl.stencil_writemask); // 1
10101 gl.getparameter(gl.stencil_back_writemask); // 1
10101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status comment webgl 1.0the definition of 'stencilmaskseparate' in that specification.
Color masking - Web APIs
<p>tinting the displayed colors with color masking.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : center; } canvas { display : block; width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.addeventliste...
...ument.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation,
1000); var mask = [true, true, true]; var redtoggle = document.queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.addeventlistener("click", setcolormask, false); greentoggle.addeventlistener("click", setcolormask, false); bluetoggle.addeventlistener("click", setcolormask, false); fu...
Hello GLSL - Web APIs
hello glsl!</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version
100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version ...
...
100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachs...
Hello vertex attributes - Web APIs
click on the canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version
100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script ty...
...pe="x-shader/x-fragment" id="fragment-shader"> #version
100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); pro...
Simple color animation - Web APIs
at shows color animation.</p> <p>you can click the button below to toggle the color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
... timer = setinterval(drawanimation,
1000); // give immediate feedback to user after clicking, by // drawing one animation frame.
Textures from code - Web APIs
simple demonstration of procedural texturing</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version
100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_pointsize = 128.0; } </script> <script type="x...
...-shader/x-fragment" id="fragment-shader"> #version
100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("...
Writing WebSocket servers - Web APIs
section
10 discusses security and you should definitely peruse it before exposing your server.
...that header looks something like the following (remember each header line ends with \r\n and put an extra \r\n after the last one to indicate the end of the header): http/1.1
101 switching protocols upgrade: websocket connection: upgrade sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo= additionally, the server can decide on extension/subprotocol requests here; see miscellaneous for details.
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.
... and we can do the same thing when setting the cake and bottle durations: var drinking = document.getelementbyid('liquid').animate( [ { height: '
100%' }, { height: '0' } ], { fill: 'forwards', duration: alicechange.effect.getcomputedtiming().duration / 2 }); drinking.pause(); now all three animations are linked to just one duration, which we can change easily from one place.
Migrating from webkitAudioContext - Web APIs
if your code uses either of these names, like in the example below : // old method names var gain = context.creategainnode(); var delay = context.createdelaynode(); var js = context.createjavascriptnode(
1024); you can simply rename the methods to look like this: // new method names var gain = context.creategain(); var delay = context.createdelay(); var js = context.createscriptprocessor(
1024); the semantics of these methods remain the same in the renamed versions.
...for example, if we have code that looks like this: var gainnode = context.creategain(); gainnode.gain.settargetvalueattime(0.0,
10.0, 1.0); you can rename the method, and be compliant with the standard, like so: var gainnode = context.creategain(); gainnode.gain.settargetattime(0.0,
10.0, 1.0); enumerated values that changed the original webkitaudiocontext api used c-style number based enumerated values in the api.
Window.customElements - Web APIs
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):...
...to change preferences in firefox, visit about:config.opera android full support 41safari ios full support
10.3samsung internet android full support 6.0legend full support full support no support no supportuser must explicitly enable this feature.user must explicitly enable this feature.
Window.devicePixelRatio - Web APIs
ctx.scale(scale, scale); ctx.fillstyle = "#bada55"; ctx.fillrect(
10,
10, 300, 300); ctx.fillstyle = "#ffffff"; ctx.font = '18px arial'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = "i love mdn"; ctx.filltext(textstring, x, y); monitoring screen resolution or zoom level changes in this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check...
... let pixelratiobox = document.queryselector(".pixel-ratio"); let mqstring = `(resolution: ${window.devicepixelratio}dppx)`; const updatepixelratio = () => { let pr = window.devicepixelratio; let prstring = (pr *
100).tofixed(0); pixelratiobox.innertext = `${prstring}% (${pr.tofixed(2)})`; } updatepixelratio(); matchmedia(mqstring).addlistener(updatepixelratio); the string mqstring is set up to be the media query itself.
Window.getDefaultComputedStyle() - Web APIs
example simple example var elem1 = document.getelementbyid("elemid"); var style = window.getdefaultcomputedstyle(elem1); longer example <style> #elem-container { position: absolute; left:
100px; top: 200px; height:
100px; } </style> <div id="elem-container">dummy</div> <div id="output"></div> <script> var elem = document.getelementbyid("elem-container"); var thecssprop = window.getdefaultcomputedstyle(elem).position; document.getelementbyid("output").innerhtml = thecssprop; // will output "static" </script> use with pseudo-elements the getdefaultcomputedstyle() m...
...see http://blog.mozilla.com/security/20
10/03/31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/20
10/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented.
Window.moveBy() - Web APIs
example this example moves the window
10 pixels to the right and
10 pixels up.
... function budge() { moveby(
10, -
10); } specification specification status comment css object model (cssom) view modulethe definition of 'window.moveby()' 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/20
100
101 firefox/61.0" } else if (susrag.indexof("samsungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.1806
10.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 (macint...
...osh; intel mac os x
10_14_0) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.
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.1
10 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.3359.181 chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safar...
Window.scroll() - Web APIs
examples <!-- put the
100th vertical pixel at the top of the window --> <button onclick="scroll(0,
100);">click to scroll down
100 pixels</button> using options: window.scroll({ top:
100, left:
100, behavior: 'smooth' }); notes window.scrollto() is effectively the same as this method.
...upport 3safari full support 1webview android full support 1chrome android full support 18firefox android full support 4opera android full support
10.1safari ios full support 1samsung internet android full support 1.0scrolltooptions parameterchrome full support 45edge full support 79firefox full support yesie ...
Window.scrollBy() - Web APIs
examples to scroll down one page: window.scrollby(0, window.innerheight); to scroll up: window.scrollby(0, -window.innerheight); using options: window.scrollby({ top:
100, left:
100, behavior: 'smooth' }); notes window.scrollby() scrolls by a particular amount, whereas window.scroll() scrolls to an absolute position in the document.
...upport 3safari full support 1webview android full support 1chrome android full support 18firefox android full support 4opera android full support
10.1safari ios full support 1samsung internet android full support 1.0scrolltooptions parameterchrome full support 45edge full support 79firefox full support yesie ...
WorkerGlobalScope.navigator - Web APIs
ollowing console.log(navigator); inside a worker (which would basically be the equivalent of self.console.log(self.navigator);, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), you will get a workernavigator object written to the console — something like the following: object {online: true, useragent: "mozilla/5.0 (macintosh; intel mac os x
10_
10_1) ap…ml, like gecko) chrome/40.0.2214.93 safari/537.36", product: "gecko", platform: "macintel", appversion: "5.0 (macintosh; intel mac os x
10_
10_1) applewebki…ml, like gecko) chrome/40.0.2214.93 safari/537.36"…} appcodename: "mozilla" appname: "netscape" appversion: "5.0 (macintosh; intel mac os x
10_
10_1) applewebkit/537.36 (khtml, like gecko) chrome/40.0.2214.93 safari/5...
...37.36" hardwareconcurrency: 4 online: true platform: "macintel" product: "gecko" useragent: "mozilla/5.0 (macintosh; intel mac os x
10_
10_1) applewebkit/537.36 (khtml, like gecko) chrome/40.0.2214.93 safari/537.36" __proto__: object you could use this navigator object to return more information about the runtime envinronment, as you might do with a normal navigator object.
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="1
10" 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="#4d4e53" text-...
..." /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used ...
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 155px 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:a...
... 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 155px 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"/> <...
ARIA live regions - Accessibility
general support for live regions was added to jaws on version
10.0.
...nvda added some basic support for live regions for mozilla firefox back in 2008 and was improved in 20
10 and 2014.
Using the aria-valuemax attribute - Accessibility
examples example 1: the snippet below shows a simple slider with a maximum value of
10.
... <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="
10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemin aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuemax attribute ...
Using the progressbar role - Accessibility
examples example 1: basic progressbar with percentage values <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="
100">20 %</div> example 2: using aria-valuetext <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="step 2: copying files...
... " aria-valuemax="
100"> step 2: copying files...
ARIA: gridcell role - Accessibility
mple creates a table-style grouping of information: <h3 id="table-title">jovian gas giant planets</h3> <div role="grid" aria-describedby="table-title"> <div role="rowgroup"> <div role="row"> <div role="columnheader">name</div> <div role="columnheader">diameter (km)</div> <div role="columnheader">length of day (hours)</div> <div role="columnheader">distance from sun (
10<sup>6</sup>km)</div> <div role="columnheader">number of moons</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 - Accessibility
here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="
100"> </div> this progress bar is built using a <div>, which has no meaning.
...progressbar.setattribute("role", "progressbar"); progressbar.setattribute("aria-valuemin", 0); progressbar.setattribute("aria-valuemax",
100); // create a function that can be called at any time to update // the value of the progress bar.
Operable - Accessibility
2.4.8 location within site (aaa) when on a page inside a complex site or set of steps, the user should be given an indicator of where they are in the site, for example a breadcrumb trail, sitemap or text such as "form page 2 of
10".
... 2.4.
10 section headings (aaa) as well as creating a useful document structure, headings should also accurately describe and break up content areas into logical sections.
::after (:after) - CSS: Cascading Style Sheets
</span> css .ribbon { background-color: #5bc8f7; } .ribbon::after { content: "this is a fancy orange box."; background-color: #ffba
10; border-color: black; border-style: dotted; } result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips.
...</p> css span[data-descr] { position: relative; text-decoration: underline; color: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius:
10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } result specifications specification status comment css pseudo-elements level 4the definition of '::after' in that specification.
:focus-visible - CSS: Cascading Style Sheets
<input value="default styles"><br> <button>default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> input, button { margin:
10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:focus-visible { outline: 4px dashed darkorange; } selectively showing the focus indicator a custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.
... <custom-button tabindex="0" role="button">click me</custom-button> custom-button { display: inline-block; margin:
10px; } custom-button:focus { /* provide a fallback style for browsers that don't support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for browsers that do support :focus-visible */ background: transparent; } custom-button:focus-visible { /* draw a very noticeable focus style for keyboard-focus on browsers that do support :focus-visible */ outline: 4px dashed darkorange; background: transparent; } polyfill you can polyfill :focus-visible using focus-visible.js.
:host() - CSS: Cascading Style Sheets
to change preferences in firefox, visit about:config.ie no support 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 ...
...to change preferences in firefox, visit about:config.opera android full support 41safari ios full support
10notes full support
10notes notes certain css selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.samsung internet android full support 6.0legend full support full support no support ...
:host-context() - CSS: Cascading Style Sheets
fariandroid 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
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): t...
...to change preferences in firefox, visit about:config.opera android full support 41safari ios full support
10samsung internet android full support 6.0legend full support full support no support no supportuser must explicitly enable this feature.user must explicitly enable this feature.
:in-range - CSS: Cascading Style Sheets
in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and
10 are valid.
... <li> <input id="value1" name="value1" type="number" placeholder="1 to
10" min="1" max="
10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment html living standardthe definition of ':in-range' in that specification.
:nth-child() - CSS: Cascading Style Sheets
:nth-child(5n) represents elements 5 [=5×1],
10 [=5×2], 15 [=5×3], etc.
... :nth-child(3n+4) represents elements 4 [=(3×0)+4], 7 [=(3×1)+4],
10 [=(3×2)+4], 13 [=(3×3)+4], etc.
:target - CSS: Cascading Style Sheets
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: 25rem; position: relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; posi...
...tion: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width:
100%; height:
100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status comment html living standardthe definition of ':target' in that specification.
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.
...nine
10.
-webkit-transform-2d - CSS: Cascading Style Sheets
examples basic example @media (-webkit-transform-2d) { div { -webkit-transform: translate(
100px,
100px); } } this media feature is only supported by webkit.
... if possible, use an @supports feature query instead: @supports (-webkit-transform: translate(
100px,
100px)) { div { -webkit-transform: translate(
100px,
100px); } } specifications not part of any standard.
prefers-reduced-motion - CSS: Cascading Style Sheets
in windows
10: settings > ease of access > display > show animations in windows.
...*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width:
10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); }
100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; }
100% { opacity: 1; } } result specifications specification status...
size - CSS: Cascading Style Sheets
<page-size> a5 this matches the standard, iso dimensions: 148mm x 2
10mm.
... a4 this matches the standard, iso dimensions: 2
10mm x 297mm.
@supports - CSS: Cascading Style Sheets
the following example returns true if the browser's transform-origin property doesn't consider
10em
10em
10em valid: @supports not (transform-origin:
10em
10em
10em) {} as with any operator, the not operator can be applied to a declaration of any complexity.
...'='<attr-modifier> = i | s examples testing for the support of a given css property @supports (animation-name: test) { … /* css applied when animations are supported without a prefix */ @keyframes { /* other at-rules can be nested inside */ … } } testing for the support of a given css property or a prefixed version @supports ((perspective:
10px) or (-moz-perspective:
10px) or (-webkit-perspective:
10px) or (-ms-perspective:
10px) or (-o-perspective:
10px)) { … /* css applied when 3d transforms, prefixed or not, are supported */ } testing for the non-support of a specific css property @supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) { … /* css to provide fallback alternative for text-ali...
@viewport - CSS: Cascading Style Sheets
@viewport { width:
100vw; /*sets the width of the actual viewport to the device width*/ } note: the use of <meta name="viewport"> tag overrides @viewport syntax the at-rule contains a set of nested descriptors in a css block that is delimited by curly braces.
... a zoom factor of 1.0 or
100% corresponds to no zooming.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
.runbutton { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 12px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } @keyframes colorchange { 0% { background: yellow }
100% { background: blue } } .box { width:
100px; height:
100px; border: 1px solid black; } .changing { animation: colorchange 2s; } there are two classes here.
... 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.classname = 'slidein stopped' } watchme.addeventlistener('click', () => watchme.addeventlistener('animationiteration', listener, false) ) demo https://jsfiddle.net/morenoh149/5ty5a4oy/ ...
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
the two browsers you should still keep in mind for cross-browser compatibility are: internet explorer
10, which implemented the display: flexbox version of the specification with the -ms- prefix.
...if you are trying to ensure backwards compatibility with old versions of browsers, and in particular ie
10 and 11, the flexbugs site is a helpful resource.
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
for example, if you give a box a width of
100px, in horizontal-tb that would control the size in the inline direction.
...if we give our block an inline-size of
100px, it doesn’t matter whether we are in a horizontal or a vertical writing mode, inline-size will always mean the size in the inline direction.
CSS Grid Layout - CSS: Cascading Style Sheets
basic example the example below shows a three-column track grid with new rows created at a minimum of
100 pixels and a maximum of auto.
...der-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-t...
Using z-index - CSS: Cascading Style Sheets
; <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: 150px; height: 350px; top:
10px; left:
10px; border: 1px dashed #900; background-color: #fdd; } #rel1 { z-index: 3; height:
100px; position: relative; top: 30px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #r...
...el2 { z-index: 2; height:
100px; position: relative; top: 15px; left: 20px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #abs2 { z-index: 1; position: absolute; width: 150px; height: 350px; top:
10px; right:
10px; border: 1px dashed #900; background-color: #fdd; } #sta1 { z-index: 8; height: 70px; border: 1px dashed #996; background-color: #ffc; margin: 0px 50px 0px 50px; } ...
Stacking 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: 150px; height: 200px; top:
10px; right: 140px; border: 1px dashed #900; background-color: #fdd; } #sta1 { height:
100px; border: 1px dashed #996; background-color: #ffc; margin: 0px
10px 0px
10px; text-align: left; } #flo1 { margin: 0px
10px 0px 20px; float: left; width...
...: 150px; height: 200px; border: 1px dashed #090; background-color: #cfc; } #flo2 { margin: 0px 20px 0px
10px; float: right; width: 150px; height: 200px; border: 1px dashed #090; background-color: #cfc; } #abs2 { position: absolute; width: 150px; height:
100px; top: 130px; left:
100px; border: 1px dashed #990; background-color: #fdd; } ...
Stacking without the z-index property - CSS: Cascading Style Sheets
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: 150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: relative; height: 80px; background-color: #cfc; border-color: #696; opacity: 0.7; } #...
...abs1 { top:
10px; left:
10px; } #rel1 { top: 30px; margin: 0px 50px 0px 50px; } #rel2 { top: 15px; left: 20px; margin: 0px 50px 0px 50px; } #abs2 { top:
10px; right:
10px; } #sta1 { background-color: #ffc; margin: 0px 50px 0px 50px; } ...
The stacking context - CSS: Cascading Style Sheets
ve;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> css * { margin: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding:
10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px dashed #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px dashed #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15p...
...x; padding: 25px
10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px
10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px dashed #009; padding-top: 125px; background-color: #ddf; text-align: center; } result ...
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.
<angle> - CSS: Cascading Style Sheets
examples: 0grad,
100grad, 38.8grad.
... examples setting a clockwise right angle 90deg =
100grad = 0.25turn ≈ 1.5708rad setting a flat angle 180deg = 200grad = 0.5turn ≈ 3.1416rad setting a counterclockwise right angle -90deg = -
100grad = -0.25turn ≈ -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.
background-position-x - CSS: Cascading Style Sheets
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/17350/3b4892b7e820122ac6dd7678891d4507/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.
border-bottom-style - CSS: Cascading Style Sheets
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="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b
10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px; background-color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: doub...
...le;} .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} .b
10 {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-bottom-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> values */ border-bottom-width:
10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword.
...rt 3.5safari full support 1webview android full support 2.3chrome android full support 18firefox android full support 4opera android full support
10.1safari ios full support 1samsung internet android full support 1.0legend full support full support see also the other border-width-related css properties: border-left-width, border-right-width, border-top-width, and border-width.
border-end-end-radius - CSS: Cascading Style Sheets
/* <length> values */ /* with one value the corner will be a circle */ border-end-end-radius:
10px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property.
...ed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius:
10px; } .exampletext { writing-mode: vertical-rl; padding:
10px; background-color: #fff; border-end-end-radius:
10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-end-end-radius' in that specification.
border-end-start-radius - CSS: Cascading Style Sheets
/* <length> values */ /* with one value the corner will be a circle */ border-end-start-radius:
10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property.
...computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius:
10px; } .exampletext { writing-mode: vertical-rl; padding:
10px; background-color: #fff; border-end-start-radius:
10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-end-start-radius' in that 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.
...idth 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-left-style - CSS: Cascading Style Sheets
olid | 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="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b
10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {bord...
...er-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} .b
10 {border-left-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-style' in that specification.
border-right-style - CSS: Cascading Style Sheets
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="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b
10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-right-style example classes */ .b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b...
...7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} .b
10 {border-right-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-style' in that specification.
border-start-end-radius - CSS: Cascading Style Sheets
/* <length> values */ /* with one value the corner will be a circle */ border-start-end-radius:
10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property.
...computed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius:
10px; } .exampletext { writing-mode: vertical-rl; padding:
10px; background-color: #fff; border-start-end-radius:
10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-start-end-radius' in that specification.
border-start-start-radius - CSS: Cascading Style Sheets
/* <length> values */ /* with one value the corner will be a circle */ border-start-start-radius:
10px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property.
...mputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius:
10px; } .exampletext { writing-mode: vertical-rl; padding:
10px; background-color: #fff; border-start-start-radius:
10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-start-start-radius' in 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="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b
10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px; background-color: #52e396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashed;} .b5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge...
...;} .b9 {border-style:inset;} .b
10 {border-style:outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-style' in that specification.
border-top-style - CSS: Cascading Style Sheets
olid | 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="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b
10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-...
...style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b
10 {border-top-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
bottom - CSS: Cascading Style Sheets
when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or
100%) both the top and bottom distances are respected.
... syntax /* <length> values */ bottom: 3px; bottom: 2.4em; /* <percentage>s of the height of the containing block */ bottom:
10%; /* keyword value */ bottom: auto; /* global values */ bottom: inherit; bottom: initial; bottom: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the bottom edge of the containing block.
color - CSS: Cascading Style Sheets
olor> 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.
...)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(255,0,0); } p { color: rgb(
100%, 0%, 0%); } p { color: hsl(0,
100%, 50%); } /* 50% translucent */ p { color: #ff000080; } p { color: rgba(255, 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.
element() - CSS: Cascading Style Sheets
<div style="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(45deg); color:white;">this text is part of the background.
... <div style="width:400px; height:
100px; background:-moz-element(#mybackground2);"> </div> <div style="overflow:hidden; height:0;"> <button id="mybackground2" type="button">evil button!</button> </div> specifications specification status comment css images module level 4the definition of 'using elements as images: the element() notation' in that specification.
brightness() - CSS: Cascading Style Sheets
a value under
100% darkens the image, while a value over
100% brightens it.
... a value of 0% will create an image that is completely black, while a value of
100% leaves the input unchanged.
contrast() - CSS: Cascading Style Sheets
a value under
100% decreases the contrast, while a value over
100% increases it.
... a value of 0% will create an image that is completely gray, while a value of
100% leaves the input unchanged.
opacity() - CSS: Cascading Style Sheets
a value of 0% is completely transparent, while a value of
100% leaves the input unchanged.
... values between 0% and
100% are linear multipliers on the effect.
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.
float - CSS: Cascading Style Sheets
we gave the parent width:
100% and floated it to ensure it is tall enough to encompass it's floated children, and to make sure it takes up the width of the parent so we don't have to clear it's adjacent sibling.
...phasellus feugiat est vel leo finibus congue.</p> </section> css section { border: 1px solid blue; width:
100%; float: left; } div { margin: 5px; width: 50px; height: 150px; } .left { float: left; background: pink; } .right { float: right; background: cyan; } result clearing floats sometimes you may want to force an item to move below any floated elements.
font-size-adjust - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea number formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (
10px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (
10px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the
10px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size:
10px; } .verdana { font-family: verdana, sans-serif; font-size:
10px; } .ad...
...jtimes { font-family: times, serif; font-size-adjust: 0.58; font-size:
10px; } results specifications specification status comment css fonts module level 3the definition of 'font-size-adjust' in that specification.
font-style - CSS: Cascading Style Sheets
syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique
10deg; /* global values */ font-style: inherit; font-style: initial; font-style: unset; the font-style property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is oblique.
...license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height:
100vh; max-width:
100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sam...
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 for <'row-gap'> followed optionally by a value for ...
... 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; ...
grid-template - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: grid-template-areas grid-template-columns grid-template-rows syntax /* keyword value */ grid-template: none; /* grid-template-rows / grid-template-columns values */ grid-template:
100px 1fr / 50px 1fr; grid-template: auto 1fr / auto 1fr auto; grid-template: [linename]
100px / [columnname1] 30% [columnname2] 70%; grid-template: fit-content(
100px) / fit-content(40%); /* grid-template-areas grid-template-rows / grid-template-column values */ grid-template: "a a a" "b b b"; grid-template: "a a a" 20% "b b b" auto; grid-template: [header-top] "a a a"...
...<track-size> ]+ <line-names>?where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples defining a grid template css #page { display: grid; width:
100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } header { background-color: lime; grid-area: head; } nav { background-color: lightblue; grid-area: nav; } main { background-color: yellow; grid-ar...
height - CSS: Cascading Style Sheets
syntax /* keyword value */ height: auto; /* <length> values */ height: 120px; height:
10em; /* <percentage> value */ height: 75%; /* global values */ height: inherit; height: initial; height: unset; values <length> defines the height as an absolute value.
... </div> </div> css div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height:
100px; } #child { height: 50%; width: 75%; } result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification.
image-set() - CSS: Cascading Style Sheets
efixed implemented with the vendor prefix: -webkit-edge full support 79prefixed full support 79prefixed prefixed implemented with the vendor prefix: -webkit-firefox no support nonotes no support nonotes notes see bug 1
107646.ie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: -webkit-safari partial support 6prefixed notes partial support 6prefixed notes prefixed imp...
... with the vendor prefix: -webkit-chrome android full support 25prefixed full support 25prefixed prefixed implemented with the vendor prefix: -webkit-firefox android no support nonotes no support nonotes notes see bug 1
107646.opera android full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios partial support 6prefixed notes partial support 6prefixed notes prefixed implemented with the vendor prefix: -webkit-notes su...
inset - CSS: Cascading Style Sheets
/* <length> values */ inset:
10px; /* value applied to all edges */ inset: 4px 8px; /* top/bottom left/right */ inset: 5px 15px
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;...
...hat directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px
10px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset' in that specification.
<length-percentage> - CSS: Cascading Style Sheets
html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width: 75%; height: 200px; margin: 3rem; padding: 1%; border-radius:
10px
10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression.
... therefore, all of the following values are acceptable for width: width: 200px; width: 20%; width: calc(
100% - 200px); specifications specification status comment css values and units module level 4the definition of '<length-percentage>' in that specification.
letter-spacing - CSS: Cascading Style Sheets
3.5safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support
10.1safari ios full support 1samsung internet android full support 1.0svg supportchrome full support 1edge full support 12firefox full support 72ie full support ...
...t 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 android full support 1.0legend full support full support no support no support see also font-kerning ...
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-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.
margin - CSS: Cascading Style Sheets
to ]{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; .
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% 45; /* 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.
... negative values are invalid; values greater than their corresponding dimension are clamped to
100%.
mask-origin - CSS: Cascading Style Sheets
for single boxes 0 0 is the upper left corner of the padding edge,
100%
100% is the lower right corner.
...lies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width:
100px; height:
100px; margin:
10px; border:
10px solid blue; background-color: #8cffa0; padding:
10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</o...
mask-type - CSS: Cascading Style Sheets
ml <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height:
100px; width:
100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance...
..."> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height:
100px; width:
100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
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%) minmax(30%, 300px) minmax(min-conten...
...ength> | <percentage> | <flex> | min-content | max-content | auto ] ) css properties minmax() function can be used within: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width:
100%; background-color: #8cffa0; padding:
10px; } #container > div { background-color: #8ca0ff; padding: 5px; } html <div id="container"> <div> item as wide as the content, but at most 300 pixels.
offset-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: 25% 75%; /* <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 value from offset-position.
...et-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 specifications specification status comment motion p...
offset-position - CSS: Cascading Style Sheets
syntax /* keyword values */ offset-position: auto; offset-position: top; offset-position: bottom; offset-position: left; offset-position: right; offset-position: center; /* <percentage> values */ offset-position: 25% 75%; /* <length> values */ offset-position: 0 0; offset-position: 1cm 2cm; offset-position:
10ch 8em; /* edge offsets values */ offset-position: bottom
10px right 20px; offset-position: right 3em bottom
10px; offset-position: bottom
10px right; offset-position: top right
10px; /* global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property.
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting initial offset position <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,
100 200,0 200,
100'); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; }
100% { offset-distance:
100%; } } specifications specification status comment motion path module level 1the definition of 'offset-position' in that s...
opacity - CSS: Cascading Style Sheets
syntax values <alpha-value> a <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to
100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel).
...kground */ } .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.
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.
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.
... 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: 1
10px 50px 50px 1
10px; } 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 */ ...
perspective - CSS: Cascading Style Sheets
/* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width:
100%; height:
100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width:
100px; height:
100px; border: none; line-height:
100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0...
...deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding:
10px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'perspective' in that specification.
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.
...length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width:
100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(3, 1fr); row-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; } result specifications s...
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.
...tainer coordinate25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer coordinate50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .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; } .coordinate25 > div { scroll-snap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coord...
scroll-snap-destination - CSS: Cascading Style Sheets
iner destination25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer destination50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .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; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer > div { width:
100px; height:
100px; display: i...
...nline-block; line-height:
100px; text-align: center; font-size: 50px; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-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: 256px; height: 256px; flex-flow: column nowrap; } /* definite scr...
...ng { 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: 256px; font-size: 128px; width: 256px; height: 256px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } html <div class="container x ...
scroll-snap-type - CSS: Cascading Style Sheets
rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div> css /* setup */ html, body, .holster { height:
100%; } .holster { 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: 256px; height: 256px; flex-flow: column nowrap; } /...
...ng { 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: 256px; font-size: 128px; width: 256px; height:
100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } results specifications ...
text-size-adjust - CSS: Cascading Style Sheets
instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or
1000 pixels.
...when an element containing text uses
100% of the screen's width, the algorithm increases its text size, but without modifying the layout.
text-transform - CSS: Cascading Style Sheets
full-width (general) <p>initial string <strong>0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</strong> </p> <p>text-transform: full-width <strong><span>0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</span></strong> </p> span { text-transform: full-width; } strong { width:
100%; float: right; } some characters exists in two formats, normal width and a full-width, with different unicode code points.
... full-width (japanese half-width katakana) <p>initial string <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong> </p> <p>text-transform: full-width <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong> </p> span { text-transform: full-width; } strong { width:
100%; float: right; } the japanese half-width katakana was used to represent katakana in 8-bit character codes.
perspective() - CSS: Cascading Style Sheets
10000
10000
1000−1/d1 examples html <p>without perspective:</p> <div class="no-perspective-box"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (9cm):</p> <div class="perspective-box-far"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspec...
...tive (4cm):</p> <div class="perspective-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(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) tra...
rotate() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000
100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple...
... html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div> css div { position: absolute; left: 40px; top: 40px; width:
100px; height:
100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translatex(180px); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(45deg); } result specifications specification stat...
scaleZ() - CSS: Cascading Style Sheets
1000
1000s
10000
10000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-
100px); background-color: limegreen; } .scaled-tran...
...slated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) translatez(-
100px); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'scalez()' in that specification.
skew() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)
10001 1tan(ax)0tan(ay)
10001 1tan(ax)00tan(ay)
10000
100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(
10deg); /* equal to skewx(
10deg) */ background-color: pink; } result using two angles h...
...tml <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(
10deg,
10deg); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skew()' in that specification.
translate3d() - CSS: Cascading Style Sheets
100tx0
10ty001tz0001 examples using a single axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { /* equivalent to perspective(500px) translatex(
10px) */ transform: perspective(500px) translate3d(
10px, 0, 0px); background-color: pink; } result combining z-axis...
... and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: perspective(500px) translate3d(
10px, 0,
100px); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'translate3d()' in that specification.
translateZ() - CSS: Cascading Style Sheets
10000
100001t0001 examples in this example, two boxes are created.
... 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.
transform-style - CSS: Cascading Style Sheets
> <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-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: rgb...
...a(0,2
10,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(2
10,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,2
10,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(2
10,2
10,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(2
10,0,2
10,.7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment ...
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: translatez(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, 20...
...deg); 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%
105px; /* three values */ translate: 50%
105px 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: 150px; margin: 0 auto; } p { padding:
10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; 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 transforms' in that specification.
vertical-align - CSS: Cascading Style Sheets
vertical-align:text-bottom" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> 0.2em:<img style="vertical-align:0.2em" src="https://udn.realityripple.com/samples/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: ...
... syntax /* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <length> values */ vertical-align:
10em; vertical-align: 4px; /* <percentage> values */ vertical-align: 20%; /* global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset; the vertical-align property is specified as one of the values listed below.
Live streaming web audio and video - Developer guides
hls can also be decoded using javascript, which means we can support the latest versions of firefox, chrome and internet explorer
10+.
... streaming file format support browser dash hls opus (audio) firefox 32 ✓ [1] ✓ [2] ✓ 14+ safari 6+ ✓ chrome 24+ ✓ [1] ✓ opera 20+ ✓ [1] internet explorer
10+ ✓ 11 ✓ [2] firefox mobile ✓ ✓ ✓ safari ios6+ ✓ chrome mobile ✓ ✓ [2] opera mobile ✓ [1] ✓ internet explorer mobile ✓ 11 ✓ [2] android ✓ [1] via javascript and mse [2] via javascript and a cors proxy video fallbacks between dash a...
Media buffering, seeking, and time ranges - Developer guides
ad controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height:
100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height:
100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('pr...
...ogress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) *
100 + "%"; break; } } } }); myaudio.addeventlistener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.getelementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*
100) + "%"; } }); } the progress event is fired as data is downloaded, this is a good event to react to if we want to display down...
Audio and Video Delivery - Developer guides
a few examples: http://example.com/video.ogv#t=
10,20 specifies that the video should play the range
10 seconds through 20 seconds.
... http://example.com/video.ogv#t=,
10.5 specifies that the video should play from the beginning through
10.5 seconds.
Audio and video manipulation - Developer guides
<video id="my-video" controls src="myvideo.mp4" type="video/mp4"> </video> javascript var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); // configure filter filter.type = "lowshelf"; filter.frequency.value =
1000; filter.gain.value = 25; playable code <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <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"> filter.type = "lowshelf"; filter.frequency.value =
1000; filter.gain.value = 25;</textarea> var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setfilter(); }); edit.addeventlistener('click', function() { textarea.fo...
Index - Developer guides
9 cross-browser audio basics apps, audio, guide, html5, media, events this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api
10 live streaming web audio and video guide, adaptive streaming live streaming technology is often employed to relay live events such as sports, concerts and more generally tv and radio programmes that are output live.
... 40 the unicode bidirectional text algorithm algorithm, bidi, guide, internationalization, introduction, localization, text, unicode, direction, i18n, l
10n, ltr, rtl the unicode® bidirectional algorithm (also known as the bidi algorithm) is part of the unicode text standard that describes how the user agent should order characters while rendering unicode text.
HTML attribute: accept - HTML: Hypertext Markup Language
ncluding both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>submit</button> </div> </form> div { margin-bottom:
10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live.
... let's look at a more complete example: <form method="post" enctype="multipart/form-data"> <div> <label for="profile_pic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </div> <div> <button>submit</button> </div> </form> div { margin-bottom:
10px; } specifications specification status html living standardthe definition of 'accept attribute' in that specification.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
a complete address would look like so:
103 frogmarch street upper-wapping winchelsea tn99 8zz the address levels are: address-level1: the post town — "winchelsea" in this case.
... address-line1: the house/street particulars — "
103 frogmarch street" the postcode is separate.
HTML attribute: max - HTML: Hypertext Markup Language
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-25t23: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.
... syntax for max values for other elements input type syntax example <progress> <number> <progress id="file" max="
100" value="70"> 70% </progress> <meter> <number> <meter id="fuel" min="0" max="
100" low="33" high="66" optimum="80" value="40"> at 40/
100</meter> ...
HTML attribute: step - HTML: Hypertext Markup Language
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-25t19: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 the step value, up to the max value, if specified.
... for example, if we have <input type="number" min="
10" step="2"> any even integer,
10 or great, is valid.
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
1 -f webm -dash 1 \ -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v
1000k -dash 1 video_640x360_
1000k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm or do it in all in one command.
... ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \ -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \ -an -vf scale=640:360 -b:v
1000k -dash 1 video_640x360_
1000k.webm \ -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm 2.
<blink>: The Blinking Text element (obsolete) - HTML: Hypertext Markup Language
works in ie
10+.
... blink { -webkit-animation: 2s linear infinite condemned_blink_effect; /* for safari 4.0 - 8.0 */ animation: 2s linear infinite condemned_blink_effect; } /* for safari 4.0 - 8.0 */ @-webkit-keyframes condemned_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; }
100% { visibility: visible; } } @keyframes condemned_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; }
100% { visibility: visible; } } ...
<button>: The Button element - HTML: Hypertext Markup Language
example <button name="favorite"> <svg aria-hidden="true" viewbox="0 0
10 10"><path d="m7 9l5 8 3 9v6l1 4h3l1-3 1 3h3l7 6z"/></svg> add to favorites </button> if you want to visually hide the button's text, an accessible way to do so is to use a combination of css properties to remove it visually from the screen, but keep it parseable by assistive technology.
... desktop browsers windows 8.1 os x
10.x firefox yes - firefox 30.0 no (even with a tabindex) firefox 63 chrome yes - chrome 35 yes - chrome 65 safari n/a no (even with a tabindex) safari 12 (bug 22261) internet explorer yes - internet explorer 11 n/a presto yes - opera 12 yes - opera 12 does tapping on a <button> give it focus?
<details>: The Details disclosure element - HTML: Hypertext Markup Language
css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0
10px
10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.
... css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radius: 0 0
10px
10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents.
<output>: The Output element - HTML: Hypertext Markup Language
examples in the following example, the form provides a slider whose value can range between 0 and
100, and an <input> element into which you can enter a second number.
... <form oninput="result.value=parseint(a.value)+parseint(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="
10" /> = <output name="result" for="a b">60</output> </form> accessibility concerns many browsers implement this element as an aria-live region.
<sub>: The Subscript element - HTML: Hypertext Markup Language
denoting the number of atoms of a given element within a chemical formula (such as every developer's best friend, c8h
10n4o2, otherwise known as "caffeine").
... another example: <p>almost every developer's favorite molecule is c<sub>8</sub>h<sub>
10</sub>n<sub>4</sub>o<sub>2</sub>, which is commonly known as "caffeine."</p> the output: specifications specification status comment html living standardthe definition of '<sub> and <sup>' in that specification.
<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>3741255</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>4
100332</td> <td>petrov, alexandra</td> <td>astrophysics</td> </tr> </tbody> </table> css the css to style our table is shown next.
...> <tr> <td>4077830</td> <td>pierce, benjamin</td> </tr> <tr> <td>5151701</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">astrophysics</th> </tr> <tr> <td>4
100332</td> <td>petrov, alexandra</td> </tr> <tr> <td>8892377</td> <td>toyota, hiroko</td> </tr> </tbody> </table> notice that each major is placed in a separate <tbody> block, the first row of which contains a single <th> element with a colspan attribute that spans the entire width of the table.
Identifying resources on the Web - HTTP
urn:isbn:978014
1036144 urn:ietf:rfc:7230 the two urns correspond to the book nineteen eighty-four by george orwell, the ietf specification 7230, hypertext transfer protocol (http/1.1): message syntax and routing.
... examples https://developer.mozilla.org/docs/learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git ftp://example.org/resource.txt urn:isbn:978014
1036144 mailto:help@supercyberhelpdesk.info specifications specification title rfc 7230, section 2.7: uniform resource identifiers hypertext transfer protocol (http/1.1): message syntax and routing ...
Content negotiation - HTTP
this value is an approximation given by rounding to the nearest power of 2 and dividing that number by
1024.
... 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.
Access-Control-Max-Age - HTTP
chromium (prior to v76) caps at
10 minutes (600 seconds).
... examples cache results of a preflight request for
10 minutes: access-control-max-age: 600 specifications specification status comment fetchthe definition of 'access-control-max-age' in that specification.
CSP: report-to - HTTP
report-to: { "group": "csp-endpoint", "max_age":
10886400, "endpoints": [ { "url": "https://example.com/csp-reports" } ] }, { "group": "hpkp-endpoint", "max_age":
10886400, "endpoints": [ { "url": "https://example.com/hpkp-reports" } ] } content-security-policy: ...; report-to csp-endpoint report-to: { "group": "endpoint-1", "ma...
...x_age":
10886400, "endpoints": [ { "url": "https://example.com/reports" }, { "url": "https://backup.com/reports" } ] } content-security-policy: ...; report-to endpoint-1 ...
Upgrade - HTTP
if the server decides to upgrade the connection, it must: send back a
101 switching protocols response status with an upgrade header that specifies the protocol(s) being switched to.
... for example: http/1.1
101 switching protocols upgrade: foo/2 connection: upgrade send a response to the original request using the new protocol (the server may only switch to a protocol with which it can complete the original request).
Warning - HTTP
code text description 1
10 response is stale a response provided by a cache is stale (the expiration time set for it has passed).
... 299 miscellaneous persistent warning same as 199, but indicating a persistent warning examples warning: 1
10 anderson/1.3.37 "response is stale" date: wed, 21 oct 2015 07:28:00 gmt warning: 112 - "cache down" "wed, 21 oct 2015 07:28:00 gmt" specifications specification title rfc 7234, section 5.5: warning hypertext transfer protocol (http/1.1): caching ...
An overview of HTTP - HTTP
the ability to relax the origin constraint, by contrast, has only been added in the 20
10s.
...for example: get / http/1.1 host: developer.mozilla.org accept-language: fr read the response sent by the server, such as: http/1.1 200 ok date: sat, 09 oct 20
10 14:28:02 gmt server: apache last-modified: tue, 01 dec 2009 20:18:22 gmt etag: "51142bc1-7449-479b075b2891b" accept-ranges: bytes content-length: 29769 content-type: text/html <!doctype html...
Protocol upgrade mechanism - HTTP
if the server decides to upgrade the connection, it sends back a
101 switching protocols response status with an upgrade header that specifies the protocol(s) being switched to.
... right after sending the
101 status code, the server can begin speaking the new protocol, performing any additional protocol-specific handshakes as necessary.
Iterators and generators - JavaScript
let result; if (nextindex < end) { result = { value: nextindex, done: false } nextindex += step; iterationcount++; return result; } return { value: iterationcount, done: true } } }; return rangeiterator; } using the iterator then looks like this: const it = makerangeiterator(1,
10, 2); let result = it.next(); while (!result.done) { console.log(result.value); // 1 3 5 7 9 result = it.next(); } console.log("iterated over sequence of size: ", result.value); // [5 numbers returned, that took interval in between: 0 to
10] note: it is not possible to know reflectively whether a particular object is an iterator.
... function* makerangeiterator(start = 0, end =
100, step = 1) { let iterationcount = 0; for (let i = start; i < end; i += step) { iterationcount++; yield i; } return iterationcount; } iterables an object is iterable if it defines its iteration behavior, such as what values are looped over in a for...of construct.
Using Promises - JavaScript
the most obvious example is the settimeout() function: settimeout(() => saysomething("
10 seconds passed"),
10*
1000); mixing old-style callbacks and promises is problematic.
...best practice is to wrap problematic functions at the lowest possible level, and then never call them directly again: const wait = ms => new promise(resolve => settimeout(resolve, ms)); wait(
10*
1000).then(() => saysomething("
10 seconds")).catch(failurecallback); basically, the promise constructor takes an executor function that lets us resolve or reject a promise manually.
Memory Management - JavaScript
cycles are a common mistake that can generate memory leaks: var div; window.onload = function() { div = document.getelementbyid('mydivelement'); div.circularreference = div; div.lotsofdata = new array(
10000).join('*'); }; in the above example, the dom element "mydivelement" has a circular reference to itself in the "circularreference" property.
... max amount of available heap memory can be increased with a flag: node --max-old-space-size=6000 index.js we can also expose the garbage collector for debugging memory issues using a flag and the chrome debugger: node --expose-gc --inspect index.js see also ibm article on "memory leak patterns in javascript" (2007) kangax article on how to register event handler and avoid memory leaks (20
10) performance ...
Classes - JavaScript
class rectangle { constructor(height, width) { this.height = height; this.width = width; } // getter get area() { return this.calcarea(); } // method calcarea() { return this.height * this.width; } } const square = new rectangle(
10,
10); console.log(square.area); //
100 static methods the static keyword defines a static method for a class.
... 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.07
10678118654755 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.
SyntaxError: return not in function - JavaScript
examples missing curly brackets var cheer = function(score) { if (score === 147) return 'maximum!'; }; if (score >
100) { return 'century!'; } } // syntaxerror: return not in function the curly brackets look correct at a first glance, but this code snippet is missing a { after the first if statement.
... correct would be: var cheer = function(score) { if (score === 147) { return 'maximum!'; } if (score >
100) { return 'century!'; } }; ...
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.
... let iterable = [
10, 20, 30]; for (let value of iterable) { value += 50; console.log(value); } // 60 // 70 // 80 ...
RangeError: precision is out of range - JavaScript
method firefox (spidermonkey) chrome, opera (v8) number.prototype.toexponential() 0 to
100 0 to 20 number.prototype.tofixed() -20 to
100 0 to 20 number.prototype.toprecision() 1 to
100 1 to 21 examples invalid cases 77.1234.toexponential(-1); // rangeerror 77.1234.toexponential(
101); // rangeerror 2.34.tofixed(-
100); // rangeerror 2.34.tofixed(
1001); // rangeerror 1234.5.toprecision(-1); // rangeerror 1234.5.toprecision(...
...
101); // rangeerror valid cases 77.1234.toexponential(4); // 7.7123e+1 77.1234.toexponential(2); // 7.71e+1 2.34.tofixed(1); // 2.3 2.35.tofixed(1); // 2.4 (note that it rounds up in this case) 5.123456.toprecision(5); // 5.1235 5.123456.toprecision(2); // 5.1 5.123456.toprecision(1); // 5 ...
InternalError: too much recursion - JavaScript
examples this recursive function runs
10 times, as per the exit condition.
... function loop(x) { if (x >=
10) // "x >=
10" is the exit condition return; // do stuff loop(x + 1); // the recursive call } loop(0); setting this condition to an extremely high value, won't work: function loop(x) { if (x >=
1000000000000) return; // do stuff loop(x + 1); } loop(0); // internalerror: too much recursion this recursive function is missing a base case.
The arguments object - JavaScript
non-strict functions that are passed only simple parameters (that is, not rest, default, or restructured parameters) will sync the value of variables new values in the body of the function with the arguments object, and vice versa: function func(a) { arguments[0] = 99; // updating arguments[0] also updates a console.log(a); } func(
10); // 99 and also: function func(a) { a = 99; // updating a also updates arguments[0] console.log(arguments[0]); } func(
10); // 99 conversely, non-strict functions that are passed rest, default, or destructured parameters will not sync new values assigned to argument variables in the function body with the arguments object.
...ead, 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 specification ecmascript (ecma-262)the definition of 'arguments exotic objects' in that ...
Array.prototype.filter() - JavaScript
as set if (i in this){ kvalue = t[i]; if (func.call(thisarg, t[i], i, t)){ res[c++] = kvalue; } } } } res.length = c; // shrink down array to proper size return res; }; } examples filtering out all small values the following example uses filter() to create a filtered array that has all elements with values less than
10 removed.
... 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(isprime)); // [2, 3, 5, 7, 11, 13] filtering invalid entries from json the following example uses filter() to create a filtered json of all elements with non-zero, numeric id.
Array.from() - JavaScript
if (arguments.length > 2) { t = arguments[2]; } } //
10.
...clojure, php etc) const range = (start, stop, step) => array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); // generate numbers range 0..4 range(0, 4, 1); // [0, 1, 2, 3, 4] // generate numbers range 1..
10 with step of 2 range(1,
10, 2); // [1, 3, 5, 7, 9] // generate the alphabet using array.from making use of it being ordered as a sequence range('a'.charcodeat(0), 'z'.charcodeat(0), 1).map(x => string.fromcharcode(x)); // ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"] specifications specification i...
Array.prototype.includes() - JavaScript
let arr = ['a', 'b', 'c'] arr.includes('c', 3) // false arr.includes('c',
100) // false computed index is less than 0 if fromindex is negative, the computed index is calculated to be used as a position in the array at which to begin searching for valuetofind.
... // array length is 3 // fromindex is -
100 // computed index is 3 + (-
100) = -97 let arr = ['a', 'b', 'c'] arr.includes('a', -
100) // true arr.includes('b', -
100) // true arr.includes('c', -
100) // true arr.includes('a', -2) // false includes() used as a generic method includes() method is intentionally generic.
Array.prototype.length - JavaScript
var namelista = new array(4294967296); //2 to the 32nd power = 4294967296 var namelistc = new array(-
100) //negative sign console.log(namelista.length); //rangeerror: invalid array length console.log(namelistc.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); //4294967295 you can set the length property to truncate an array at any time.
... 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.
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 0
101 which is 5 in decimal.
... 5 0
101 1 0001 ---- 5 0
101 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.
Atomics.xor() - JavaScript
the truth table for the xor operation is: a b a ^ b 0 0 0 0 1 1 1 0 1 1 1 0 for example, a bitwise xor of 5 ^ 1 results in 0
100 which is 4 in decimal.
... 5 0
101 1 0001 ---- 4 0
100 examples using xor const sab = new sharedarraybuffer(
1024); const ta = new uint8array(sab); ta[0] = 5; atomics.xor(ta, 0, 1); // returns 5, the old value atomics.load(ta, 0); // 4 specifications specification ecmascript (ecma-262)the definition of 'atomics.xor' in that specification.
Atomics - JavaScript
examples using atomics const sab = new sharedarraybuffer(
1024); const ta = new uint8array(sab); ta[0] = 5; atomics.add(ta, 0, 12); atomics.load(ta, 0); // 12 atomics.and(ta, 0, 1); atomics.load(ta, 0); // 1 atomics.compareexchange(ta, 0, 5, 12); atomics.load(ta, 0); // 12 atomics.exchange(ta, 0, 12); atomics.load(ta, 0); // 12 atomics.islockfree(1); // true atomics.islockfree(2); // true atomics.islockfree(3); // false atomics.islockfree(4); // true...
... atomics.or(ta, 0, 1); atomics.load(ta, 0); // 5 atomics.store(ta, 0, 12); // 12 atomics.sub(ta, 0, 2); atomics.load(ta, 0); // 3 atomics.xor(ta, 0, 1); atomics.load(ta, 0); // 4 waiting and notifiying given a shared int32array: const sab = new sharedarraybuffer(
1024); const int32 = new int32array(sab); a reading thread is sleeping and waiting on location 0 which is expected to be 0.
Date.now() - JavaScript
// reduced time precision (2ms) in firefox 60 date.now() // 1519211809934 // 15192118
10362 // 1519211811670 // ...
... in firefox, you can also enable privacy.resistfingerprinting, the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
Date.prototype.setMilliseconds() - JavaScript
for example, if you specify
1005, the number of seconds is incremented by 1, and 5 is used for the milliseconds.
... examples using setmilliseconds() var thebigday = new date(); thebigday.setmilliseconds(
100); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.setmilliseconds' in that specification.
Date.prototype.toISOString() - JavaScript
engines which have not been updated to support this method can work around the absence of this method using the following shim: if (!date.prototype.toisostring) { (function() { function pad(number) { if (number <
10) { return '0' + number; } return number; } date.prototype.toisostring = function() { return this.getutcfullyear() + '-' + pad(this.getutcmonth() + 1) + '-' + pad(this.getutcdate()) + 't' + pad(this.getutchours()) + ':' + pad(this.getutcminutes()) + ':' + pad(this.getutcseconds()) + '.' + (this.getutcmilliseconds() ...
.../
1000).tofixed(3).slice(2, 5) + 'z'; }; })(); } examples using toisostring() let today = new date('05 october 2011 14:48 utc') console.log(today.toisostring()) // returns 2011-
10-05t14:48:00.000z the above example uses parsing of a non–standard string value that may not be correctly parsed in non–mozilla browsers.
Date - JavaScript
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, 275760 ce) can be represented by the standard date object (equivalent to ±8,640,000,000,000,000 milliseconds).
... get the number of seconds since the ecmascript epoch let seconds = math.floor(date.now() /
1000) in this case, it's important to return only an integer—so a simple division won't do.
Function.prototype.bind() - JavaScript
const addthirtyseven = addarguments.bind(null, 37); const list2 = leadingthirtysevenlist(); // [37] const list3 = leadingthirtysevenlist(1, 2, 3); // [37, 1, 2, 3] const result2 = addthirtyseven(5); // 37 + 5 = 42 const result3 = addthirtyseven(5,
10); // 37 + 5 = 42 // (the second argument is ignored) with settimeout() by default within window.settimeout(), the this keyword will be set to the window (or global) object.
... function latebloomer() { this.petalcount = math.floor(math.random() * 12) + 1; } // declare bloom after a delay of 1 second latebloomer.prototype.bloom = function() { window.settimeout(this.declare.bind(this),
1000); }; latebloomer.prototype.declare = function() { console.log(`i am a beautiful flower with ${this.petalcount} petals!`); }; const flower = new latebloomer(); flower.bloom(); // after 1 second, calls 'flower.declare()' bound functions used as constructors warning: this section demonstrates javascript capabilities and documents some edge cases of the bind() method.
InternalError - JavaScript
examples too much recursion this recursive function runs
10 times, as per the exit condition.
... function loop(x) { if (x >=
10) // "x >=
10" is the exit condition return; // do stuff loop(x + 1); // the recursive call } loop(0); setting this condition to an extremely high value, won't work: function loop(x) { if (x >=
1000000000000) return; // do stuff loop(x + 1); } loop(0); // internalerror: too much recursion for more information, see internalerror: too much recursion.
Intl.DateTimeFormat.prototype.formatRange() - JavaScript
let date1 = new date(date.utc(2007, 0,
10,
10, 0, 0)); let date2 = new date(date.utc(2007, 0,
10, 11, 0, 0)); let date3 = new date(date.utc(2007, 0, 20,
10, 0, 0)); // > 'wed,
10 jan 2007
10:00:00 gmt' // > 'wed,
10 jan 2007 11:00:00 gmt' // > 'sat, 20 jan 2007
10:00:00 gmt' let fmt1 = new intl.datetimeformat("en", { year: '2-digit', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }); console.log...
...(fmt1.format(date1)); console.log(fmt1.formatrange(date1, date2)); console.log(fmt1.formatrange(date1, date3)); // > '1/
10/07,
10:00 am' // > '1/
10/07,
10:00 – 11:00 am' // > '1/
10/07,
10:00 am – 1/20/07,
10:00 am' let fmt2 = new intl.datetimeformat("en", { year: 'numeric', month: 'short', day: 'numeric' }); console.log(fmt2.format(date1)); console.log(fmt2.formatrange(date1, date2)); console.log(fmt2.formatrange(date1, date3)); // > 'jan
10, 2007' // > 'jan
10, 2007' // > 'jan
10 – 20, 2007' specifications specification intl.datetimeformat.formatrangethe definition of 'formatrange()' in that specification.
Math.clz32() - JavaScript
consider the following 32-bit word: var a = 32776; // 0000000000000000
100000000000
1000 (16 leading zeros) math.clz32(a); // 16 var b = ~32776; // 111111111111111
101111111111
10111 (32776 inversed, 0 leading zeros) math.clz32(b); // 0 (this is equal to how many leading one's there are in a) using this logic, a clon function can be created as follows: var clz = math.clz32; function clon(integer){ return clz(~integer); } further, this technique could be exte...
... var asuint = x >>> 0; if (asuint === 0) { return 32; } return 31 - (log(asuint) / ln2 | 0) |0; // the "| 0" acts like math.floor }; })(math.log, math.ln2); examples using math.clz32() math.clz32(1); // 31 math.clz32(
1000); // 22 math.clz32(); // 32 var stuff = [nan, infinity, -infinity, 0, -0, false, null, undefined, 'foo', {}, []]; stuff.every(n => math.clz32(n) == 32); // true math.clz32(true); // 31 math.clz32(3.5); // 30 specifications specification ecmascript (ecma-262)the definition of 'math.clz32' in that specification.
Math.log1p() - JavaScript
instead, you will end up taking the logarithm of 1.0000000000000011
1022 (the roundoff is in binary so sometimes it gets ugly), so you get the answer 1.1
1022...e-15, with only 3 correct digits.
... if, instead, you calculate math.log1p(1.1111111111e-15) you will get a much more accurate answer 1.11111111
10999995e-15 with 15 correct digits of precision (actually 16 in this case).
Number.prototype.toFixed() - JavaScript
values between 0 and
100, inclusive, will not cause a rangeerror.
... examples using tofixed let numobj = 12345.6789 numobj.tofixed() // returns '12346': note rounding, no fractional part numobj.tofixed(1) // returns '12345.7': note rounding numobj.tofixed(6) // returns '12345.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.35.tofixed(1) // returns '2.4'.
Object.entries() - JavaScript
examples const obj = { foo: 'bar', baz: 42 }; console.log(object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] // array like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] // array like object with random key ordering const anobj = {
100: 'a', 2: 'b', 7: 'c' }; console.log(object.entries(anobj)); // [ ['2', 'b'], ['7', 'c'], ['
100', 'a'] ] // getfoo is property which isn't enumerable const myobj = object.create({}, { getfoo: { value() { return this.foo; } } }); myobj.foo = 'bar'; console.log(object.entries(myobj)); // [ ['foo', 'bar'] ] // non-object argument will be coerced to an object console.log(object.entries('foo')); // ...
...[ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] // returns an empty array for any primitive type, since primitives have no own properties console.log(object.entries(
100)); // [ ] // iterate through key-value gracefully const obj = { a: 5, b: 7, c: 9 }; for (const [key, value] of object.entries(obj)) { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" } // or, using array extras object.entries(obj).foreach(([key, value]) => { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" }); converting an object to a map the new map() constructor accepts an iterable of entries.
Object.prototype.toString() - JavaScript
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 f...
...or octal numbers,
10 for decimal numbers, 16 for hexadecimal numbers.
handler.get() - JavaScript
const p = new proxy({}, { get: function(target, property, receiver) { console.log('called: ' + property); return
10; } }); console.log(p.a); // "called: a" //
10 the following code violates an invariant.
... const obj = {}; object.defineproperty(obj, 'a', { configurable: false, enumerable: false, value:
10, writable: false }); const p = new proxy(obj, { get: function(target, property) { return 20; } }); p.a; // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[get]]' in that specification.
handler.getOwnPropertyDescriptor() - JavaScript
const p = new proxy({ a: 20}, { getownpropertydescriptor: function(target, prop) { console.log('called: ' + prop); return { configurable: true, enumerable: true, value:
10 }; } }); console.log(object.getownpropertydescriptor(p, 'a').value); // "called: a" //
10 the following code violates an invariant.
... const obj = { a:
10 }; object.preventextensions(obj); const p = new proxy(obj, { getownpropertydescriptor: function(target, prop) { return undefined; } }); object.getownpropertydescriptor(p, 'a'); // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[getownproperty]]' in that specification.
String.prototype.replace() - JavaScript
$n where n is a positive integer less than
100, inserts the nth parenthesized submatch string, provided the first argument was a regexp object.
...for example, if the input number is "212f", the function returns "
100c".
WebAssembly.Memory.prototype.grow() - JavaScript
examples using grow the following example creates a new webassembly memory instance with an initial size of 1 page (64kib), and a maximum size of
10 pages (640kib).
... var memory = new webassembly.memory({initial:1, maximum:
10}); we can then grow the instance by one page like so: const bytesperpage = 64 *
1024; console.log(memory.buffer.bytelength / bytesperpage); // "1" console.log(memory.grow(1)); // "1" console.log(memory.buffer.bytelength / bytesperpage); // "2" note the return value of grow() here is the previous number of webassembly pages.
WebAssembly.Table.prototype.grow() - JavaScript
examples using grow the following example creates a new webassembly table instance with an initial size of 2 and a maximum size of
10.
... var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum:
10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'grow()' in that specification.
WebAssembly.Table.prototype.length - JavaScript
syntax table.length; examples using length the following example creates a new webassembly table instance with an initial size of 2 and a maximum size of
10.
... var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum:
10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'length' in that specification.
eval() - JavaScript
",
1000) use: settimeout(function() { ...
... },
1000); // instead of elt.setattribute("onclick", "...") use: elt.addeventlistener('click', function() { ...
Bitwise NOT (~) - JavaScript
for example, the following integer with more than 32 bits will be converted to a 32 bit integer: before: 11
1001
101111
101000000000000001
10000000000001 after:
101000000000000001
10000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
... the truth table for the not operation is: a not a 0 1 1 0 9 (base
10) = 0000000000000000000000000000
1001 (base 2) -------------------------------- ~9 (base
10) = 111111111111111111111111111
101
10 (base 2) = -
10 (base
10) bitwise noting any number x yields -(x + 1).
Operator precedence - JavaScript
console.log(3 +
10 * 2); // logs 23 console.log(3 + (
10 * 2)); // logs 23 because parentheses here are superfluous console.log((3 +
10) * 2); // logs 26 because the parentheses change the order left-associativity (left-to-right) means that it is processed as (a op1 b) op2 c, while right-associativity (right-to-left) means it is interpreted as a op1 (b op2 c).
... left-to-right … < … less than or equal … <= … greater than … > … greater than or equal … >= … in … in … instanceof … instanceof … 11 equality left-to-right … == … inequality … != … strict equality … === … strict inequality … !== …
10 bitwise and left-to-right … & … 9 bitwise xor left-to-right … ^ … 8 bitwise or left-to-right … | … 7 logical and left-to-right … && … 6 logical or left-to-right … || … 5 nullish coalescing operator left-to-right … ??
Right shift (>>) - JavaScript
9 (base
10): 0000000000000000000000000000
1001 (base 2) -------------------------------- 9 >> 2 (base
10): 000000000000000000000000000000
10 (base 2) = 2 (base
10) likewise, -9 >> 2 yields -3, because the sign is preserved: .
... -9 (base
10): 111111111111111111111111111
10111 (base 2) -------------------------------- -9 >> 2 (base
10): 11111111111111111111111111111
101 (base 2) = -3 (base
10) examples using right shift 9 >> 2; // 2 -9 >> 2; // -3 specifications specification ecmascript (ecma-262)the definition of 'bitwise shift operators' in that specification.
async function expression - JavaScript
examples simple example function resolveafter2seconds(x) { return new promise(resolve => { settimeout(() => { resolve(x); }, 2000); }); }; const add = async function(x) { // async function expression assigned to a variable let a = await resolveafter2seconds(20); let b = await resolveafter2seconds(30); return x + a + b; }; add(
10).then(v => { console.log(v); // prints 60 after 4 seconds.
... }); (async function(x) { // async function expression used as an iife let p_a = resolveafter2seconds(20); let p_b = resolveafter2seconds(30); return x + await p_a + await p_b; })(
10).then(v => { console.log(v); // prints 60 after 2 seconds.
function* - JavaScript
example with yield* function* anothergenerator(i) { yield i + 1; yield i + 2; yield i + 3; } function* generator(i) { yield i; yield* anothergenerator(i); yield i +
10; } var gen = generator(
10); console.log(gen.next().value); //
10 console.log(gen.next().value); // 11 console.log(gen.next().value); // 12 console.log(gen.next().value); // 13 console.log(gen.next().value); // 20 passing arguments into generators function* loggenerator() { console.log(0); console.log(1, yield); console.log(2, yield); console.log(3, yield); } var gen = loggenerator()...
...{ yield 1; yield 2; } } const someobj = { *[symbol.iterator] () { yield 'a'; yield 'b'; } } console.log(array.from(new foo)); // [ 1, 2 ] console.log(array.from(someobj)); // [ 'a', 'b' ] generators are not constructable function* f() {} var obj = new f; // throws "typeerror: f is not a constructor generator defined in an expression const foo = function* () { yield
10; yield 20; }; const bar = foo(); console.log(bar.next()); // {value:
10, done: false} generator example function* powers(n){ //endless loop to generate for(let current =n;; current *= n){ yield current; } } for(let power of powers(2)){ //controlling generator if(power > 32) break; console.log(power) //2 //4 //8 //1...
Transitioning to strict mode - JavaScript
ecmascript 5 introduced strict mode which is now implemented in all major browsers (including ie
10).
... argument name using one of the newly reserved keywords (in prevision for ecmascript 2015): 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 2015 (bug
1041128).
Digital audio concepts - Web media technologies
44
100 hz the 44.1 khz sample rate is used for compact disc (cd) audio.
...ional quality loss factors that may recommend the use of lossy compression include: very large source audio constrained storage (either because the storage space is small, or because there's a large amount of sound to store into it) a need to constrain the network bandwidth required to broadcast the audio; this is especially important for live streams and teleconferencing psychoacoustics
101 diving into the details of psychoacoustics and how audio compression works is far beyond the scope of this article, but it is useful to have a general idea of how audio gets compressed by common algorithms can help understand and make better decisions about audio codec selection.
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
to keep images from breaking out of their containers when the container becomes narrower than the image, developers started using css like the following: img { max-width:
100%; height: auto; } this is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above css overrides the width and height attribute information, meaning that if the image has not loaded for some reason, its height will be set to 0.
... when the width/height of an <img> element — as set using html attributes — is overidden using css using something like this: img { max-width:
100%; height: auto } the aspect ratio is then used to calculate the height and therefore the correct size is applied to the <img> element, meaning that the aforementioned jank will not occur when the image loads.
Critical rendering path - Web Performance
block level elements, by definition, have a default width of
100% of the width of their parent.
...unless otherwise defined, the body has a width of
100%, meaning it will be
100% of the width of the viewport.
Lazy loading - Web Performance
between 2011 and 2019, the median resource weight increased from ~
100kb to ~400kb for desktop and ~50kb to ~350kb for mobile.
... while image size has increased from ~250kb to ~900kb on desktop and ~
100kb to ~850kb on mobile.
Navigation and resource timings - Web Performance
compression to get the compression savings percentage, we divide the transfersize by the decodedbodysize, and subtract that from
100%.
...client-side web applications may seem faster than this one with transfer sizes under
10000 and decoded body sizes under 30000, but that doesn't mean javascript, css, or media assets aren't adding bloat.
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
k 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.25" cy="0.25" r="0.25" 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.
... you could also apply a color matrix: <svg height="0"> <filter id="f2"> <fecolormatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 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="f5">...
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,1
10 m30,
10 l300,
10 m30,65 l300,65 m30,1
10 l300,1
10 " stroke="grey" /> <!-- anchors in action --> <text alignment-baseline="hanging" x="60" y="
10">a hanging</text> <text alignment-baseline="middle" x="60" y="65">a middle</text> <text alignment-baseline="baseline" x="60" y="1
10">a baselin...
...e</text> <!-- materialisation of anchors --> <circle cx="60" cy="
10" r="3" fill="red" /> <circle cx="60" cy="65" r="3" fill="red" /> <circle cx="60" cy="1
10" 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.025" /> </filter> <filter id="noise2" x="0" y="0" width="
100%" height="
100%"> <feturbulence basefrequency="0.05" /> </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 valu...
... 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.05" 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 'basefrequency' in that specification.
color-rendering - SVG: Scalable Vector Graphics
ment but it only has an effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <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.35" fy="0.35" 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" /> <t...
...ext x="45" 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"/> </fecomponenttransfe...
...r> </filter> <filter id="componenttransfer2" 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 speci...
flood-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="seagreen" flood-opacity="1" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" flood-opacity="0.3" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" wid...
... a number of 0 or a percentage of 0% represents a fully transparent color, 1 or
100% represents a fully opaque color.
font-weight - 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 viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-weight="normal">normal text</text> <text x="
100" y="20" font-weight="bold">bold text</text> </svg> usage notes value normal | bold | bolder | lighter | <number> default value normal animatable yes for a description of the values, please refer to the css font-w...
... working draft defines font-weight to accept any numbers between 1 and
1000.
gradientTransform - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient id="gradient1" gradientunits="userspaceonuse" cx="
100" cy="
100" r="
100" fx="
100" fy="
100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="
100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="use...
...rspaceonuse" cx="
100" cy="
100" r="
100" fx="
100" fy="
100" gradienttransform="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="
100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system.
href - SVG: Scalable Vector Graphics
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height:
100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="
10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable yes example html, body, svg { height:
100%; } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <image href="/files/2917/fxlogo.png" x="0" y="0" height="
100" width="
100"/> </svg> lineargradient for <lineargradient>, href defines url referring to a template gradient element; to be valid, the reference must be to a different <lineargradient> or <radialgradient> element.
id - SVG: Scalable Vector Graphics
<svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> <![cdata[ #smallrect { stroke: #000066; fill: #00cc00; } ]]> </style> <rect id="smallrect" x="
10" y="
10" width="
100" height="
100" /> </svg> usage notes value <id> default value none animatable no <id> specifies the element's id.
... note: you should avoid the use of id values that would be parsed as an svg view specification (e.g., mydrawing.svg#svgview(viewbox(0,200,
1000,
1000))) or a basic media fragment when used as a url target fragment.
in - SVG: Scalable Vector Graphics
--> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="
10%" y="
10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
... --> <feimage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="
10%" y="
10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
intercept - 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="linear" intercept="0"/> <fefuncg type="linear" interc...
...ept="0"/> <fefuncb type="linear" intercept="0"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="
100%" height="
100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0.3"/> <fefuncg type="linear" intercept="0.1"/> <fefuncb type="linear" intercept="0.8"/> </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 0 animatable yes specifications specification status...
keySplines - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height:
100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="
10" r="
10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 1
10 ; 60 ;
10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attributename="cy" dur="4s" calcmode="splin...
...e" repeatcount="indefinite" values="
10 ; 60 ; 1
10 ; 60 ;
10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> </circle> </svg> usage notes value <control-point> [ ; <control-point> ]* ;?
limitingConeAngle - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height:
100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="spotlight1" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="
10" y="
10" z="50" pointsatx="
100" pointsaty="
100" limitingconeangle="
10" /> </fediffuselighting> </filter> <filter id="spotlight2" x="0" y="0" width="
100%" height="
100%"> <fediffuseligh...
...ting diffuseconstant="2"> <fespotlight x="
10" y="
10" z="50" pointsatx="
100" pointsaty="
100" limitingconeangle="40" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'limitingconeangle' in that specification.
marker-end - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height:
100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0
10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="
10" markerheight="
10" orient="auto"> <path d="m 0 0 l
10 5 l 0
10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,
100 40,6...
...0 70,80
100,20" marker-end="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the final vertex.
marker-start - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height:
100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0
10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="
10" markerheight="
10" orient="auto"> <path d="m 0 0 l
10 5 l 0
10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,
100 40,6...
...0 70,80
100,20" marker-start="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the first vertex.
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.025" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="
100%" height="
100%"> <feturbulence basefrequency="0.025" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" 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.
pathLength - SVG: Scalable Vector Graphics
seven elements are using this attribute: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html,body,svg { height:
100% } <svg viewbox="0 0
100 60" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: none; stroke: black; stroke-width: 2; stroke-dasharray:
10; } </style> <!-- no pathlength, the real length of the path is used.
... in that case,
100 user units --> <path d="m 0,
10 h
100"/> <!-- compute everything like if the path length was 90 user units long --> <path d="m 0,20 h
100" pathlength="90"/> <!-- compute everything like if the path length was 50 user units long --> <path d="m 0,30 h
100" pathlength="50"/> <!-- compute everything like if the path length was 30 user units long --> <path d="m 0,40 h
100" pathlength="30"/> <!-- compute everything like if the path length was
10 user units long --> <path d="m 0,50 h
100" pathlength="
10"/> </svg> circle for <circle>, pathlength lets authors specify a total length for the circle, in user units.
patternUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:
100% } <svg viewbox="0 0 200
100" xmlns="http://www.w3.org/2000/svg"> <!-- all geometry properties are relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternunits="userspaceonuse"> <circle cx="
10" cy="
10" r="
10" /> </pattern> <!-- all geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="
10" cy="
10" r="
10" /> </pattern> <!-- left square with user space tiles --> <rect x="
10" y="...
...
10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="1
10" y="
10" width="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patternunits defines the coordinate system in use for the geometry properties (x, y, width and height) of the element.
pointsAtZ - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="
100" y="
100" z="50" pointsatz="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic"> <fespotlig...
...ht x="
100" y="
100" z="50" pointsatz="80" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatz' in that specification.
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.05" 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.05" numoctave...
...s="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="
100" cy="
100" r="80" style="filter: url(#displacementfilter);""/> <circle cx="
100" cy="
100" r="80" style="filter: url(#displacementfilter2); transform: translatex(240px);""/> </svg> usage notes value <number> default value none animatable yes <number> this value defines the scale factor for the displacement.
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.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="
100%" height="
100%"> <feturbulence basefrequency="0.025" 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 val...
...ue 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.05" 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="m
10,90 q90,90 90,45 q90,
10 50,
10 q
10,
10 10,40 q
10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q2
10,90 2
10,45 q2
10,
10 170,
10 q130,
10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
...thus, 0% indicates the start point of the path and
100% indicates the end point of the path.
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.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="
100%" height="
100%"> <feturbulence basefrequency="0.025" 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: tran...
...slate(0,
100px);" /> <rect x="0" y="0" width="
100" height="
100" style="filter: url(#noise1); transform: translate(
100px,
100px);" /> <rect x="0" y="0" width="
100" height="
100" style="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="
100" height="
100" style="filter: url(#noise2); transform: translate(320px, 0);" /> <rect x="0" y="0" width="
100" height="
100" style="filter: url(#noise2); transform: translate(220px,
100px);" /> <rect x="0" y="0" width="
100" height="
100" style="filter: url(#noise2); transform: translate(320px,
100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions at...
stroke-miterlimit - 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 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.75,-3 l0.75,3 m2,0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of the smallest miter limit (1) --> ...
...ner of the miter) to stroke-width is directly related to 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.
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 id="componenttransfer2" x="0" y="0" width="
100%" height="
100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="1 0"/> <fefuncg type="table" tablevalues="1 0"/> <fefuncb type="table" tablevalues="1 0"/> </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 <list-of-numbers> default value empty list resulting in identity transfer animatable yes ...
target - SVG: Scalable Vector Graphics
this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height:
100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla.org" target="_blank"> <text x="0" y="60">open link in new tab or window<...
.../text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="
100">open link in this tab or window</text> </a> </svg> usage notes value _self | _parent | _top | _blank | <xml-name> default value _self animatable yes _replace the current svg image is replaced by the linked content in the same rectangular area in the same frame as the current svg image.
text-anchor - SVG: Scalable Vector Graphics
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 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,15 l60,1
10 m30,40 l90,40 m30,75 l90,75 m30,1
10 l90,1
10" stroke="grey" /> <!-- anchors in action --> <text text-anchor="start" x="60" y="40">a</text> <text text-anchor="middle" x="60" y="75">a</text> <text text-anchor="end" x="60" y="1
10">a</text> <!-- materialisat...
...ion of anchors --> <circle cx="60" cy="40" r="3" fill="red" /> <circle cx="60" cy="75" r="3" fill="red" /> <circle cx="60" cy="1
10" r="3" fill="red" /> <style><![cdata[ text { font: bold 36px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> usage notes default value start value start | middle | end animatable yes start the rendered characters are aligned such that the start of the text string is at the initial current text position.
unicode-range - SVG: Scalable Vector Graphics
the unicode-range attribute defines the range of iso
10646 characters possibly covered by the glyphs in a font.
... only one element is using this attribute: <font-face> usage notes value <urange># default value none animatable no <urange># this value is a comma-separated list of iso
10646 characters possibly covered by the glyphs in the font.
visibility - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the 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 n...
... 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.queryselector("button").addeventlistener("...
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height:
100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="
100%" height="
100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="
100%" height="
100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
... scale="30" xchannelselector="b"/> </filter> <text x="
10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="
10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height:
100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="
100%" height="
100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="
100%" height="
100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
... scale="30" ychannelselector="b"/> </filter> <text x="
10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="
10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
Content type - SVG: Scalable Vector Graphics
the following are examples of legal clock values: full clock values: 02:30:03 = 2 hours, 30 minutes and 3 seconds 50:00:
10.25 = 50 hours,
10 seconds and 250 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 45min = 45 minutes 30s = 30 seconds 5ms = 5 milliseconds 12.467 = 12 seconds and 467 milliseconds fractional values are just (base
10) floating point def...
...the integer value 255 corresponds to
100%, and to f or ff in the hexadecimal notation: rgb(255,255,255) = rgb(
100%,
100%,
100%) = #fff.
<feColorMatrix> - SVG: Scalable Vector Graphics
example svg <svg width="
100%" height="
100%" viewbox="0 0 150 500" preserveaspectratio="xmidymid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="r...
...1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#colormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 2
10)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="...
<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 235 235
100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255 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.
<feMergeNode> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> example <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" width="
100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur in="sourcegraphic" stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="
100" height="
100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> ...
... <rect x="40" y="40" width="
100" height="
100" style="stroke: #000000; fill: green;" /> </svg> result attributes global attributes core attributes » specific attributes in dom interface this element implements the svgfemergenodeelement interface.
<glyph> - SVG: Scalable Vector Graphics
example svg <svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <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="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-gly...
...ph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l
100,300l400,
100z"></glyph> </font> </defs> <text x="
100" y="
100" style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-style: normal">text using embe@dded font!</text> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<glyph>' in that specification.
<linearGradient> - 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> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system f...
... value type: <length> ; default value:
100%; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template.
<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="15,80 29,50 43,60 57,30 71,40 85,15" 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.
<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="m
100,250 c
100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="
100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="
100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <!-- here is a triangle which will be moved about the motion path.
<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="95%" 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.
...the gradient will be drawn such that the
100% <stop> is mapped to the perimeter of the end circle.
Linking - SVG: Scalable Vector Graphics
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.
...you would now have page2.html embedded inside a
100x50 pixel frame inside page1.html).
Example - SVG: Scalable Vector Graphics
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: 150px; display: block; float: left; margin-bottom:
10px; } label { text-align: right; width: 75px; 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='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles.
... if( num == 0 ) motes = []; else if( motes.length > num ) motes = motes.slice(0,num-1); // move a random mote if( motes.length > 0 ) motes[ rand( motes.length ) ].move(); // and do this again in 1/
100 sec settimeout('update()',
10); } ]]> </script> </body> </html> ...
Namespaces crash course - SVG: Scalable Vector Graphics
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="150" 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.
...for example: elt.setattributens('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg'); as a final example, here's a demonstration of how you should dynamically create an <image> element using script: var svg_ns = 'http://www.w3.org/2000/svg'; var xlink_ns = 'http://www.w3.org/1999/xlink'; var image = document.createelementns(svg_ns, 'image'); image.setattributens(null, 'width', '
100'); image.setattributens(null, 'height', '
100'); image.setattributens(xlink_ns, 'xlink:href', 'flower.png'); conclusion make sure you always declare the namespaces you use in your xml files.
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="150" cy="
100" r="80" fill="green" /> <text x="150" y="125" 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 150px to the right, and
100px downward from the top left corner).
Patterns - SVG: Scalable Vector Graphics
the pattern also had to be offset by
10 pixels so that it would start in the upper-left corner of our box, so the x and y attributes of the pattern had to be adjusted to
10÷200 = 0.05.
...to create something like this, both the pattern and its contents must be drawn in the current userspace, so they don't change shape if the object does: <pattern id="pattern" x="
10" y="
10" width="50" height="50" patternunits="userspaceonuse"> <rect x="0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="url(#gradient1)" fill-opacity="0.5"/> </pattern> of course, this means the pattern won't scale if you change your object size later.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
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%; position: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...
...in this case our picture is laid out in a
100 by
100 viewport.
SVG fonts - SVG: Scalable Vector Graphics
<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="350" 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"/></mi...
...the value
1000 sets a reasonable value to work with.
Types of attacks - Web security
in this situation, someone includes an image that isn’t really an image (for example in an unfiltered chat or forum), instead it really is a request to your bank’s server to withdraw money: <img src="https://bank.example.com/withdraw?account=bob&amount=
1000000&for=mallory"> now, if you are logged into your bank account and your cookies are still valid (and there is no other validation), you will transfer money as soon as you load the html that contains this image.
... for endpoints that require a post request, it's possible to programmatically trigger a <form> submit (perhaps in an invisible <iframe>) when the page is loaded: <form action="https://bank.example.com/withdraw" method="post"> <input type="hidden" name="account" value="bob"> <input type="hidden" name="amount" value="
1000000"> <input type="hidden" name="for" value="mallory"> </form> <script>window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to prevent this from happening: get endpoints should be idempotent—actions that enact a change and do not simply retrieve data should require sending a post (or other http method) request.
Understanding WebAssembly text format - WebAssembly
if we convert our module to binary now (see converting webassembly text format to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061 736d ; wasm_binary_magic 0000004: 0
100 0000 ; wasm_binary_version adding functionality to your module ok, that’s not very interesting, let’s add some executable code to this module.
... over on the javascript api side, the webassembly.memory() constructor's initialization object now has a shared property, which when set to true will create a shared memory: let memory = new webassembly.memory({initial:
10, maximum:
100, shared:true}); the memory's buffer property will now return a sharedarraybuffer, instead of the usual arraybuffer: memory.buffer // returns sharedarraybuffer over in the text format, you can create a shared memory using the shared keyword, like this: (memory 1 2 shared) unlike unshared memories, shared memories must specify a "maximum" size, in both the javascript api constru...
Using the WebAssembly JavaScript API - WebAssembly
now add the following line to the top of your script, to create a memory instance: var memory = new webassembly.memory({initial:
10, maximum:
100}); the unit of initial and maximum is webassembly pages — these are fixed to 64kb in size.
...add the following into your code, where indicated: var i32 = new uint32array(memory.buffer); for (var i = 0; i <
10; i++) { i32[i] = i; } var sum = results.instance.exports.accumulate(0,
10); console.log(sum); note how we create the uint32array view on the memory object’s buffer (memory.prototype.buffer), not on the memory itself.
Compiling an Existing C Module to WebAssembly - WebAssembly
the function takes a pointer to the input image and its dimensions, as well as a quality option between 0 and
100.
...free(result); } emscripten_keepalive int get_result_pointer() { return result[0]; } emscripten_keepalive int get_result_size() { return result[1]; } now with all of that in place, you can call the encoding function, grab the pointer and image size, put it in a javascript buffer of your own, and release all the wasm buffers allocated in the process: api.encode(p, image.width, image.height,
100); const resultpointer = api.get_result_pointer(); const resultsize = api.get_result_size(); const resultview = new uint8array(module.heap8.buffer, resultpointer, resultsize); const result = new uint8array(resultview); api.free_result(resultpointer); note: new uint8array(somebuffer) will create a new view onto the same memory chunk, while new uint8array(sometypedarray) will copy the data.
XUL Migration Guide - Archive of obsolete content
able the user to highlight the selected tab: function highlightactivetab() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(255,255,
100)','important'); } } require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", onclick: highlightactivetab }); security implications the sdk implements a security model in which an add-on only gets to access the apis it explicitly imports via require().
context-menu - Archive of obsolete content
if the total number of menu items in the main context menu from all add-ons exceeds a certain number (normally
10 but configurable with the extensions.addon-sdk.context-menu.overflowthreshold preference) all of the menu items will instead appear in an overflow menu to avoid making the context menu too large.
Disabling interruptible reflow - Archive of obsolete content
add the following variables to your environment to disable gecko interruptible reflow: gecko_reflow_interrupt_mode=counter gecko_reflow_interrupt_frequency=
1000000 gecko_reflow_interrupt_checks_to_skip=
1000000 now start firefox within this environment.
Layout FAQ - Archive of obsolete content
block(body)(1)@035ff490 {120,120,8820,600} [state=000000
10] sc=035ff264(i=2,b=0)< line 035ffc18: count=1 state=inline,clean,prevmarginclean,not impacted,not wrapped,before:nobr,after:linebr[0x5
100] {0,0,330,300} < inline(span)(0)@035ffa04 next=035ffc48 next-continuation=035ffc48 {0,7,330,285} [content=0359ed50] [sc=035ff990]< text(0)@035ffa8c[0,4,t] next=035ffb1c {0,0,330,285} [state=41600020] sc=035ffa3c pst=:-moz-non-element< "\na...
GRE Registration - Archive of obsolete content
linux on linux, registration information is kept in ini-style files of the following form: [1.7.
10] gre_path=/usr/lib/mozilla-1.7.
10 feature=value feature2=value2 these ini files can be in any of the following locations: /etc/gre.conf /etc/gre.d/*.conf ~/.gre.conf ~/.gre.d/*.conf mozilla has never officially shipped a linux gre based on the mozilla suite.
Java in Firefox Extensions - Archive of obsolete content
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.).
Twitter - Archive of obsolete content
3, success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); trends jetpack.lib.twitter.trends({ success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); searching jetpack.lib.twitter.search({ q: "#jetpack", lang: "ja", rpp:
10, page: 5, since_id: 1337, success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); ...
Settings - Archive of obsolete content
] }, { name: "facebook", type: "group", label: "facebook", settings: [ { name: "username", type: "text", label: "username", default: "jdoe" }, { name: "password", type: "password", label: "secret" } ] }, { name: "music", type: "boolean", label: "music", default: true }, { name: "volume", type: "range", label: "volume", min: 0, max:
10, default: 5 } ] }; // import after defining manifest!
Settings - Archive of obsolete content
] }, { name: "facebook", type: "group", label: "facebook", settings: [ { name: "username", type: "text", label: "username", default: "jdoe" }, { name: "password", type: "password", label: "secret" } ] }, { name: "music", type: "boolean", label: "music", default: true }, { name: "volume", type: "range", label: "volume", min: 0, max:
10, default: 5 } ] }; // import after defining manifest!
Clipboard Test - Archive of obsolete content
; font-weight: normal; } .method>.params{display: block; color:#555;} .method>.params>.param{display: block; margin-bottom:5px;} .method>.params>.param>.name{font-weight:bold; margin-right:.5em; min-width:80px; display:inline-block;} .method>.params>.param>.description{display:inline-block; width:300px; vertical-align:top;margin-right:30px} .method>.params>.param>.type{display:inline-block; width:
100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.type:before{content: "type "; color: #888; font-weight:normal;} .method>.params>.param>.default{display:inline-block; width:
100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.default:before{content: "default "; color: #888;font-weight:normal;} ]]></style> clipboard jetpack's clipboard support api provides a standa...
Menu - Archive of obsolete content
}, { label: "wikipedia", icon: "http://en.wikipedia.org/favicon.ico", data: "http://en.wikipedia.org/wiki/" } ]), command: function (menuitem) { context.window.location.href = menuitem.data + jetpack.selection.text; } }; }); create some div buttons (e.g., in a slidebar or status bar item) and specify their context menu: for (let i = 0; i <
10; i++) { var button = $('<div class="button" />', document); buttoncontainer.append(button); } jetpack.menu.context.on(".button").add(["do this", "do that"]); create a div button (e.g., in a slidebar or status bar item) and attach menus directly to it.
Makefile.mozextension.2 - Archive of obsolete content
e.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec8030f7-c20a-464f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640} #seamonkey {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} #sunbird {718e30fb-e89b-41dd-9da7-e25a45638b28} #netscape browser {3db
10fab-e461-4c80-8b97-957ad5f8ea47} ###### define install_rdf <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"> <id>$(project_id)</id> <name>$(project_name)</name> <version>$(project_version)</version> <description>$(project_desc)</description> <creator>$(project_author)</creator> <contributo...
Mozilla Crypto FAQ - Archive of obsolete content
original document information author(s): frank hecker last updated date: september
10, 2000 (version 2.11) copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
FAQ - Archive of obsolete content
microsoft windows 2000 xp vista mac os x
10.3.9+ (panther)
10.4 (tiger)
10.5 (leopard) linux kernel 2.2.14+ with glibc 2.3.2, xfree86-3.3.6, gtk+2.0, fontconfig/xft, and libstdc++5 ...
Debug.write - Archive of obsolete content
var counter = 42; debug.write("the value of counter is " + counter); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
Debug.writeln - Archive of obsolete content
var counter = 42; debug.writeln("the value of counter is " + counter); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
Debug - Archive of obsolete content
var counter = 42; debug.write("the value of counter is " + counter); requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
Error.description - Archive of obsolete content
& 0xffff)) document.write (" "); // prints "'y' is undefined": document.write(e.description); document.write (" "); // prints "'y' is undefined": document.write(e.message) } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
Error.number - Archive of obsolete content
error code: 5009 facility code:
10 error message: 'y' is undefined requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
ScriptEngine() - Archive of obsolete content
example the following example illustrates the use of the scriptengine function: if (window.scriptengine) { console.log(window.scriptengine()); } // output: jscript requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
ScriptEngineBuildVersion - Archive of obsolete content
illustrates the use of the scriptenginebuildversion function: if(window.scriptenginebuildversion) { console.log(window.scriptenginebuildversion()); } // output: <current build version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
ScriptEngineMajorVersion - Archive of obsolete content
owing example illustrates the use of the scriptenginemajorversion function: if (window.scriptenginemajorversion) { console.log(window.scriptengine()); } output: <current major version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
ScriptEngineMinorVersion - Archive of obsolete content
if (window.scriptengineminorversion) { console.log(window.scriptengineminorversion()); } //output: <current minor version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer
10 standards, internet explorer 11 standards.
VBArray.dimensions - Archive of obsolete content
+= a.ubound(i); s += ".<br />"; } return(s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
VBArray.getItem - Archive of obsolete content
{ document.writeln(a.getitem(i, j)); } } } --> </script> </head> <body> <script type="text/javascript"> <!-- getitemtest(createvbarray()); --> </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
VBArray.lbound - Archive of obsolete content
a.lbound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
VBArray.toArray - Archive of obsolete content
or (i = 0; i < 9; i++) { document.writeln(b[i]); } } --> </script> </head> <body> <script type="text/javascript"> <!-- vbarraytest(createvbarray()); --> </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
VBArray.ubound - Archive of obsolete content
a.ubound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
VBArray - Archive of obsolete content
requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer
10 standards.
Throttling - Firefox Developer Tools
selection download speed upload speed minimum latency (ms) gprs 50 kbps 20 kbps 500 regular 2g 250 kbps 50 kbps 300 good 2g 450 kbps 150 kbps 150 regular 3g 750 kbps 250 kbps
100 good 3g 1.5 mbps 750 kbps 40 regular 4g/lte 4 mbps 3 mbps 20 dsl 2 mbps 1 mbps 5 wi-fi 30 mbps 15 mbps 2 network monitor features the following articles cover different aspects of using the network monitor: toolbar network request list network request details network traffic recording performance analysis ...
Animation inspector example: CSS transitions - Firefox Developer Tools
lass="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.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 750ms ease-in, filter 750ms 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 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: ...
Page inspector keyboard shortcuts - Firefox Developer Tools
up arrow , down arrow up arrow , down arrow choose current auto-complete suggestion (rules view only, when a property or value is being edited) enter or tab return or tab enter or tab increment selected value by 1 up arrow up arrow up arrow decrement selected value by 1 down arrow down arrow down arrow increment selected value by
100 shift + page up shift + page up shift + page up decrement selected value by
100 shift + page down shift + page down shift + page down increment selected value by
10 shift + up arrow shift + up arrow shift + up arrow decrement selected value by
10 shift + down arrow shift + down arrow shift + down arrow increment selected val...
Allocations - Firefox Developer Tools
so in the example above: 8904 samples were taken in signallater(), which is 28.57% of the total number of samples taken those samples allocated 1
102888 bytes, which is 30.01% of the total memory allocated in all samples next to each function name is a disclosure arrow.
Flame Chart - Firefox Developer Tools
ed out that the program call graph in that profile, and the associated sample count, looked like this: sortall() // 8 -> sort() // 37 -> bubblesort() // 1345 -> swap() // 252 -> 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.
View Source - Firefox Developer Tools
for example view-source:https://www.mozilla.org/#line
100 view selection source if you select part of a web page and conext-click, you'll see a context menu item labeled "view selection source", that behaves just like "view page source", except you only see the source for the selection.
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=...
AnalyserNode.fftSize - Web APIs
must be a power of 2 between 252^5 and 2152^15, so one of: 32, 64, 128, 256, 512,
1024, 2048, 4096, 8192, 16384, and 32768.
AnalyserNode.getByteFrequencyData() - Web APIs
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(); parameters array the uint8array that the frequency domain data will be copied to.
AnalyserNode.getFloatFrequencyData() - Web APIs
e.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 web audio apithe definition of 'getfloatfrequencydata()' in that specification.
AnalyserNode.getFloatTimeDomainData() - Web APIs
analyser.fftsize =
1024; var bufferlength = analyser.fftsize; console.log(bufferlength); var dataarray = new float32array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.getfloattimedomaindata(dataarray); canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); canvasctx.linewidth = 2; canvasctx.str...
AnalyserNode - Web APIs
number of inputs 1 number of outputs 1 (but may be left unconnected) channel count mode "max" channel count 2 channel interpretation "speakers" inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width:
100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
Animation.currentTime - Web APIs
in firefox, you can also enabled privacy.resistfingerprinting, the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
Animation.playState - Web APIs
so they must be paused as soon as they are animated like so: // setting up the tear animations tears.foreach(function(el) { el.animate( tearsfalling, { delay: getrandommsrange(-
1000,
1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)' }); el.pause(); }); // play the tears falling when the ending needs to be shown.
Animation.startTime - Web APIs
in firefox, you can also enabled privacy.resistfingerprinting, the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><li...
AnimationPlaybackEvent.currentTime - Web APIs
in firefox, you can also enabled privacy.resistfingerprinting, the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
AnimationTimeline.currentTime - Web APIs
in firefox, you can also enable privacy.resistfingerprinting; the precision will be
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,mona...
AudioContext() - Web APIs
var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext({ latencyhint: 'interactive', samplerate: 44
100, }); specifications specification status comment web audio apithe definition of 'audiocontext()' in that specification.
AudioContext.createMediaStreamSource() - Web APIs
ideo.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value =
1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get new mouse pointer coordinates when mouse is moved ...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
AudioListener.dopplerFactor - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.forwardX - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.forwardY - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.forwardZ - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.positionX - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.positionY - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.positionZ - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.setOrientation() - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.setPosition() - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.speedOfSound - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.upX - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.upY - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener.upZ - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
AudioListener - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
AudioWorkletNode.port - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('ping-pong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'),
1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(audiocontext.destination) this will output "ping" and "pong" strings to the console every second.
AudioWorkletProcessor.port - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('ping-pong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'),
1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(audiocontext.destination) this will output "ping" and "pong" strings to the console every second.
BaseAudioContext.createBiquadFilter() - Web APIs
x.createconvolver(); // connect 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.setvalueattime(
1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioctx.currenttime); specifications specification status comment web audio apithe definition of 'createbiquadfilter()' in that specification.
BaseAudioContext.createPanner() - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
BaseAudioContext.createWaveShaper() - Web APIs
amount : 50, n_samples = 44
100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
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" fo...
Using the CSS properties and values API - Web APIs
ransition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width:
100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); 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 difference between a <custom-ident> and a number when trying to animate height.
CanvasGradient.addColorStop() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let gradient = ctx.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.7, 'white'); gradient.addcolorstop(1, 'pink'); ctx.fillstyle = gradient; ctx.fillrect(
10,
10, 200,
100); result specifications specification status comment html living standardthe definition of 'canvasgradient.addcolorstop' in that specification.
CanvasRenderingContext2D.createLinearGradient() - Web APIs
); // create a linear gradient // the start gradient point is at x=20, y=0 // the end gradient point is at x=220, y=0 var gradient = ctx.createlineargradient(20,0, 220,0); // add three color stops gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.5, 'cyan'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 200,
100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createlineargradient' in that specification.
CanvasRenderingContext2D.createRadialGradient() - Web APIs
html <canvas id="canvas" width="200" height="200"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a radial gradient // the inner circle is at x=1
10, y=90, with radius=30 // the outer circle is at x=
100, y=
100, with radius=70 var gradient = ctx.createradialgradient(1
10,90,30,
100,
100,70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160); result specification...
CanvasRenderingContext2D.currentTransform - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let matrix = ctx.currenttransform; matrix.a = 1; matrix.b = 1; matrix.c = 0; matrix.d = 1; matrix.e = 0; matrix.f = 0; ctx.currenttransform = matrix; ctx.fillrect(0, 0,
100,
100); result ...
CanvasRenderingContext2D.ellipse() - Web APIs
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, 75, 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.
CanvasRenderingContext2D.fillStyle - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(
10,
10,
100,
100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color.
CanvasRenderingContext2D.globalCompositeOperation - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalcompositeoperation = 'xor'; ctx.fillstyle = 'blue'; ctx.fillrect(
10,
10,
100,
100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50,
100,
100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.globalcompositeoperation' in that specification.
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
html <canvas id="canvas" width="460" height="2
10"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'center'; const img = new image(); img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.filltext('source', w * .5, 20); ctx.draw...
CanvasRenderingContext2D.isPointInPath() - Web APIs
html <canvas id="canvas"></canvas> <p>in path: <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.fill(); result.innertext = ctx.ispointinpath(30, 70); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in a circular path2d path.
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.
CanvasRenderingContext2D.putImageData() - Web APIs
mitbottom; 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]/255) + ')'; 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, 150, 0, 50, 50, 25, 25); result data loss due to browser optimization due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using pu...
CanvasRenderingContext2D.resetTransform() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * 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.
CanvasRenderingContext2D.restore() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(
10,
10,
100,
100); // restore the default state ctx.restore(); ctx.fillrect(150, 40,
100,
100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.restore' in that specification.
CanvasRenderingContext2D.rotate() - Web APIs
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(45 * 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.
CanvasRenderingContext2D.save() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(
10,
10,
100,
100); // restore the default state ctx.restore(); ctx.fillrect(150, 40,
100,
100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.save' in that specification.
CanvasRenderingContext2D.setTransform() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.settransform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0,
100,
100); result retrieving and passing a dommatrix object in the following example, we have two <canvas> elements.
CanvasRenderingContext2D.shadowBlur - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowblur = 15; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150,
100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowblur' in that specification.
CanvasRenderingContext2D.transform() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0,
100,
100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.transform' in that specification.
Basic usage of canvas - Web APIs
<!doctype html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(
10,
10, 50, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> this example looks like this: screenshotlive sample « previousnext » ...
Hit regions and accessibility - Web APIs
<canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(70, 80,
10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: 'circle'}); canvas.addeventlistener('mousemove', function(event) { if (event.region) { alert('hit region: ' + event.region); } }); </script> the addhitregion() method also takes a control option to route events to an element (that is a descendant of the canvas): ctx.addhitregion({control: element}); this can be useful for rout...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monac...
ChildNode.replaceWith() - Web APIs
with(node) { replacewith("foo"); } // referenceerror: replacewith is not defined polyfill you can polyfill the replacewith() method in internet explorer
10+ and higher with the following code: function replacewithpolyfill() { 'use-strict'; // for safari, and ie >
10 var parent = this.parentnode, i = arguments.length, currentnode; if (!parent) return; if (!i) // if there are no arguments parent.removechild(this); while (i--) { // i-- decrements i and returns the value of i before the decrement currentnode = arguments[i]; if (ty...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1=...
Console.table() - Web APIs
note that (in firefox) console.table is limited to displaying
1000 rows (first row is the labeled index).
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
DynamicsCompressorNode.attack - Web APIs
the attack property of the dynamicscompressornode interface is a k-rate audioparam representing the amount of time, in seconds, required to reduce the gain by
10 db.
DynamicsCompressorNode.release - Web APIs
the release property of the dynamicscompressornode interface is a k-rate audioparam representing the amount of time, in seconds, required to increase the gain by
10 db.
EXT_color_buffer_float - Web APIs
extended methods the following sized formats become color-renderable: gl.r16f, gl.rg16f, gl.rgba16f, gl.r32f, gl.rg32f, gl.rgba32f, gl.r11f_g11f_b
10f.
EffectTiming.delay - Web APIs
examples in the pool of tears example, each tear is passed a random delay via its timing object: // randomizer function var getrandommsrange = function(min, max) { return math.random() * (max - min) + min; } // loop through each tear tears.foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-
1000,
1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specifications specification status comment web animationsthe definition of 'delay' in that specification.
EffectTiming.direction - Web APIs
examples in the forgotten key example, alice waves her arm up and down by passing her an alternate value for her direction property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(
10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'direction' in that specification.
EffectTiming.duration - Web APIs
examples in the pool of tears example, each tear is passed a random duration via its timing object: // randomizer function var getrandommsrange = function(min, max) { return math.random() * (max - min) + min; } // loop through each tear tears.foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-
1000,
1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specifications specification status comment web animationsthe definition of 'duration' in that specification.
EffectTiming.iterations - Web APIs
examples in the forgotten key example, alice waves her arm up and down the entire time the page is open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(
10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'iterations' in that specification.
Element: DOMActivate event - Web APIs
http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var currentradius = circle.getfloattrait("r"); if (currentradius ==
100) circle.setfloattrait("r", currentradius * 2); else circle.setfloattrait("r", currentradius * 0.5); } ]]></script> <!-- act on each domactivate event --> <circle cx="300" cy="225" r="
100" fill="red"> <handler type="application/ecmascript" ev:event="domactivate"> change(evt); </handler> </circle> <text x="300" y="480" font-family="verdana" font-size="35" ...
Element.animate() - Web APIs
document.getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration:
1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e.
Element: auxclick event - Web APIs
html <button><h1>click me!</h1></button> css html { height:
100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width:
100%; height:
100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when ...
Element: mouseout event - Web APIs
<li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.addeventlistener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; },
1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result specifications specification status ...
Element: overflow event - Web APIs
listener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "
10px"; child.style.height = "
10px"; } }, false); </script> specifications not part of any specification.
Element.querySelectorAll() - Web APIs
examples dataset selector & attribute selectors <section class="box" id="sect1"> <div class="funnel-chart-percent1">
10.900%</div> <div class="funnel-chart-percent2">3700.00%</div> <div class="funnel-chart-percent3">0.00%</div> </section> // dataset selectors const refs = [...document.queryselectorall(`[data-name*="funnel-chart-percent"]`)]; // attribute selectors // const refs = [...document.queryselectorall(`[class*="funnel-chart-percent"]`)]; // const refs = [...document.queryselectorall(`[class^="funnel...
FileReader.readAsBinaryString() - Web APIs
example var canvas = document.createelement('canvas'); var height = 200; var width = 200; canvas.width = width; canvas.height = height; var ctx = canvas.getcontext('2d'); ctx.strokestyle = '#090'; ctx.beginpath(); ctx.arc(width/2, height/2, width/2 - width/
10, 0, math.pi*2); ctx.stroke(); canvas.toblob(function (blob) { var reader = new filereader(); reader.onload = function () { console.log(reader.result); } reader.readasbinarystring(blob); }); specifications specification status comment file apithe definition of 'readasbinarystring' in that specification.
FileReader.readAsDataURL() - Web APIs
w = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height =
100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); reader.readasdataurl(file); } } if (files) { [].foreach.call(files, readandpreview); } } note: the filereader() constructor was not supported by internet explorer for versions before
10.
FileSystemDirectoryEntry - Web APIs
function onfs(fs){ fs.root.getdirectory('documents', {create:true}, function(directoryentry){ //directoryentry.isfile === false //directoryentry.isdirectory === true //directoryentry.name === 'documents' //directoryentry.fullpath === '/documents' }, onerror); } // opening a file system with temporary storage window.requestfilesystem(temporary,
1024*
1024 /*1mb*/, onfs, onerror); properties this interface has no properties of its own, but inherits properties from its parent interface, filesystementry.
FileSystemEntry.getMetadata() - Web APIs
workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size >
1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); browser compatibility the compatibility table on this page is generated from structured data.
FileSystemEntry.moveTo() - Web APIs
workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size >
1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); browser compatibility the compatibility table on this page is generated from structured data.
FileSystemEntry - Web APIs
// opening a file system with temporary storage window.requestfilesystem(temporary,
1024*
1024 /*1mb*/, function(fs) { fs.root.getfile('log.txt', {}, function(fileentry) { fileentry.remove(function() { console.log('file removed.'); }, onerror); }, onerror); }, onerror); properties this interface provides the following properties.
FileSystemFileEntry - Web APIs
var bb = new blobbuilder(); bb.append('meow'); filewriter.write(bb.getblob('text/plain')); }, errorhandler); }, errorhandler); } window.requestfilesystem(window.temporary,
1024*
1024, oninitfs, errorhandler); specifications specification status comment file and directory entries apithe definition of 'filesystemfileentry' in that specification.
FileHandle API - Web APIs
var progress = document.queryselector('progress'); var myfile = myfilehandle.open('readonly'); // let's read a 1gb file var action = myfile.readasarraybuffer(
1000000000); action.onprogress = function (event) { if (progress) { progress.value = event.loaded; progress.max = event.total; } } action.onsuccess = function () { console.log('yeah \o/ just read a 1gb file'); } action.onerror = function () { console.log('oups :( unable to read a 1gb file') } file storage when a file handle is created, the associated file only exists as a "te...
Using the Gamepad API - Web APIs
j]; var d = document.getelementbyid("controller" + j); var buttons = d.getelementsbyclassname("button"); for (i = 0; i < controller.buttons.length; i++) { var b = buttons[i]; var val = controller.buttons[i]; var pressed = val == 1.0; if (typeof(val) == "object") { pressed = val.pressed; val = val.value; } var pct = math.round(val *
100) + "%"; b.style.backgroundsize = pct + " " + pct; if (pressed) { b.classname = "button pressed"; } else { b.classname = "button"; } } var axes = d.getelementsbyclassname("axis"); for (i = 0; i < controller.axes.length; i++) { var a = axes[i]; a.innerhtml = i + ": " + controller.axes[i].tofixed(4); a.setattribute("value", con...
GlobalEventHandlers.onmousedown - Web APIs
html <div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width:
100px; height:
100px; background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; event.preventdefault(); } function moveview(event) { view.style.left = event.clientx - 50 + 'px'; view.style.top = event.cli...
GlobalEventHandlers.onmousemove - Web APIs
padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty +
10 + 'px'; }; this.show = function(event) { node.textcontent = event.target.dataset.tooltip; node.removeattribute('hidden'); }; this.hide = function() { node.setattribute('hidden', ''); }; })(); const links = document.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; }); ...
GlobalEventHandlers.onmouseup - Web APIs
html <div class="container"> <div class="toaster"></div> <div class="toast">hello world!</div> </div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 1
10px; background: #bbb; border-radius:
10px
10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width:
100px; height: 50px; padding:
10px; background: #ed9; border-radius:
10px
10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classli...
GlobalEventHandlers.ontransitioncancel - Web APIs
.box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width:
100px; height:
100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; heig...
GlobalEventHandlers.ontransitionend - Web APIs
.box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width:
100px; height:
100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; transform: rotate(180deg); } javascript next, we need to establish our event han...
GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div> css body { min-height:
100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // re...
HTMLAreaElement.referrerPolicy - Web APIs
examples <img usemap="#maparound" width="
100" height="
100" src="/img/logo@2x.png" /> <map id="mymap" name="maparound" />> var elt = document.createelement("area"); elt.href = "/img2.png"; elt.shape = "rect"; elt.referrerpolicy = "no-referrer"; elt.coords = "0,0,
100,
100"; var map = document.getelementbyid("mymap"); map.appendchild(elt); // when clicked, the area's link will not send a referrer header.
HTMLDetailsElement - 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/htmldetailselement" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldetailsel...
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="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldialogelement</text></a></svg></div...
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="1
10" 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="#4d4e53" text-anchor="middle" alignment-baseli...
HTMLElement: animationcancel event - Web APIs
" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(
100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog...
HTMLElement: animationend event - Web APIs
s="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left:
100%; width: 300%; } to { margin-left: 0%; width:
100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeve...
HTMLElement: animationiteration event - Web APIs
" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(
100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog...
HTMLElement: animationstart event - Web APIs
" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(
100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog...
HTMLElement.offsetLeft - Web APIs
</span> <span id="longspan">long span that wraps within this div.</span> </div> <div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index:
10"> </div> <script type="text/javascript"> var box = document.getelementbyid("box"); var longspan = document.getelementbyid("longspan"); box.style.left = longspan.offsetleft + document.body.scrollleft + "px"; box.style.top = longspan.offsettop + document.body.scrolltop + "px"; box.style.width = longspan.offsetwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> sp...
HTMLElement.offsetParent - Web APIs
upport 8safari full support 3webview android full support 1chrome android full support 18firefox android full support 4opera android full support
10.1safari ios full support 1samsung internet android full support 1.0legend full support full support ...
HTMLElement: transitioncancel event - Web APIs
sitioncancel property instead of addeventlistener(): const transition = document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width:
100px; height:
100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
HTMLElement: transitionend event - Web APIs
}); the same, but using the ontransitionend: const transition = document.queryselector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width:
100px; height:
100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
HTMLElement: transitionrun event - Web APIs
rty instead of addeventlistener(): el.ontransitionrun = () => { console.log('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width:
100px; height:
100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.
HTMLElement: transitionstart event - Web APIs
transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width:
100px; height:
100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.
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="1...
Image() - Web APIs
examples var myimage = new image(
100, 200); myimage.src = 'picture.jpg'; document.body.appendchild(myimage); this would be the equivalent of defining the following html tag inside the <body>: <img width="
100" height="200" src="picture.jpg"> specifications specification status comment html living standardthe definition of 'image()' in that specification.
HTMLImageElement.crossOrigin - Web APIs
thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 37.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } output { background: rgba(
100,
100,
100, 0.1); font-family: courier, monospace; width: 95%; } result specifications specification status comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification.
HTMLImageElement.naturalHeight - Web APIs
css .box { width: 200px; height: 200px; } .image { width:
100%; } .output { padding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (
100%).
HTMLImageElement.naturalWidth - Web APIs
css .box { width: 200px; height: 200px; } .image { width:
100%; } .output { padding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (
100%).
HTMLImageElement.srcset - Web APIs
"header640.png 640w, header960.png 960w, header
1024.png
1024w, header.png" this string provides versions of a header image to use when the user agent's renderer needs an image of width 640px, 960px, or
1024px.
HTMLImageElement.useMap - Web APIs
consider a <map> that looks like this: <map name="mainmenu-map"> <area shape="circle" coords="25, 25, 75, 75" href="/index.html" alt="return to home page"> <area shape="rect" coords="25, 25,
100, 150" href="/index.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for additional examples (including interactive ones), see the articles about the <map> and <area> elements, as well as the guide to using image maps.
HTMLImageElement.x - Web APIs
css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(
100,
100,
100); font-family: sans-serif; } td, th { border: 1px solid rgb(
100,
100,
100); padding:
10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.x' in that specification.
HTMLImageElement.y - Web APIs
css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(
100,
100,
100); font-family: sans-serif; } td, th { border: 1px solid rgb(
100,
100,
100); padding:
10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.y' in that specification.
HTMLInputElement: invalid event - Web APIs
html <form action="#"> <ul> <li><label>enter an integer between 1 and
10: <input type="number" min="1" max="
10" required></label></li> <li><input type="submit" value="submit"></li> </ul> </form><p id="log"></p> javascript const input = document.queryselector('input') const log = document.getelementbyid('log') input.addeventlistener('invalid', logvalue) function logvalue(e) { log.textcontent += e.target.value } result specifications specificat...
HTMLInputElement.stepUp() - Web APIs
two week increments: <input type="week" min="2019-w23" step="2"> time 60 (seconds) 900 second (15 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-25t19: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.
HTMLInputElement.webkitdirectory - Web APIs
for example, consider this file system: photoalbums birthdays jamie's 1st birthday pic
1000.jpg pic
1004.jpg pic
1044.jpg don's 40th birthday pic2343.jpg pic2344.jpg pic2355.jpg pic2356.jpg vacations mars pic5533.jpg pic5534.jpg pic5556.jpg pic5684.jpg pic5712.jpg if the user chooses photoalbums, then the list report...
IntersectionObserver - Web APIs
if (entries[0].intersectionratio <= 0) return; loaditems(
10); console.log('loaded new items'); }); // start observing intersectionobserver.observe(document.queryselector('.scrollerfooter')); specifications specification status comment intersection observerthe definition of 'intersectionobserver' in that specification.
KeyboardEvent.key - Web APIs
-console">clear console</button> </div> <div class="flex"> <pre id="console-log"></pre> </div> </div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { padding-left: 20px; padding-right: 20px; } .fx > div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width:
100%; margin-bottom:
10px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(...
KeyframeEffect.KeyframeEffect() - Web APIs
examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(
100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animations level 2the definition of 'keyframeeffectoptions.iterationcomposite' in that specification.
KeyframeEffect.setKeyframes() - Web APIs
examples // passing an array of keyframe objects existingkeyframeeffect.setkeyframes( [ { color: 'blue' }, { color: 'green', left: '
10px' } ] ); // passing an object with arrays for values existingkeyframeeffect.setkeyframes( { color: ['blue', 'green'], left: [ '0', '
10px'] } ); // passing a single-member object existingkeyframeeffect.setkeyframes( { color: 'blue' } ); specifications specification status comment web animationsthe definition of 'keyframeeffect.setkeyframes()' in t...
KeyframeEffect.target - Web APIs
examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(
100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id="rabbit">click the rabbit's ears!</div> rabbitdownkeyframes.target; specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.
KeyframeEffect - Web APIs
examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(
100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.
LocalFileSystemSync - Web APIs
var fs = requestfilesystemsync(temporary,
1024*
1024 /*1mb*/); because you are using a synchronous api, you don't need success and error callbacks.
MediaCapabilities.encodingInfo() - Web APIs
example //create media configuration to be tested const mediaconfig = { type : 'record', // or 'transmission' video : { contenttype : "video/webm;codecs=vp8.0", // valid content type width : 1920, // width of the video height :
1080, // height of the video bitrate : 120000, // number of bits used to encode 1s of video framerate : 48 // number of frames making up that 1s.
MediaConfiguration - Web APIs
example //create a video configuration to be tested const videodecoderconfig = { type : 'file', // 'record', 'transmission', or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate :
10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
MediaDecodingConfiguration - Web APIs
examples //create media configuration to be tested const mediaconfig = { type : 'file', // or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate :
10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
MediaDevices.ondevicechange - Web APIs
let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 30 }, audio: { samplerate: 44
100, samplesize: 16, volume: 0.25 } }).then(stream => { videoelement.srcobject = stream; updatedevicelist(); }) .catch(err => log(err.name + ": " + err.message)); }, false); we set up global variables that contain references to the <ul> elements that are used to list the audio and video devices: let audiolist = document.getelementbyid("audiolist"); let videol...
MediaEncodingConfiguration - Web APIs
examples //create media configuration to be tested const mediaconfig = { type : 'record', // or 'transmission' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate :
10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">event<...
MediaKeySession.onkeystatuseschange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width:
100%; padding-bottom: 8.571428571428571%; 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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,...
MediaKeySession.onmessage - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width:
100%; padding-bottom: 8.571428571428571%; 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="1
10" 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="#4d4e53" ...
PannerNode.setOrientation() - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
PannerNode.setPosition() - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
PannerNode.setVelocity() - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
PannerNode - Web APIs
dth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance =
10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.lis...
Path2D.addPath() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create first path and add a rectangle let p1 = new path2d(); p1.rect(0, 0,
100, 150); // create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0,
100, 75); // create transformation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fil...
PaymentCurrencyAmount.value - Web APIs
examples representing prices this example represents the price of $42.95 in us dollars: let itemprice = { currency: "usd", value: "42.95" }; this example specifies a price of £7.77: let shippingcost = { currency: "gbp", value: "7.77" } this example specifies a price of
1000¥: let price = { currency: "jpy", value: "
1000" } verifying a properly formatted price you can ensure that the value entered as a price is formatted correctly prior to submission by matching it against a simple regular expression: function checkpriceformat(price) { let validregex = /^-?[0-9]+(\.[0-9]+)?$/; return validregex.test(price); } this function, checkpriceformat(), will r...
PaymentRequest.abort() - Web APIs
var request = new paymentrequest(supportedinstruments, details, options); var paymenttimeout = window.settimeout(() => { window.cleartimeout(paymenttimeout); request.abort().then(() => { print('payment timed out after 20 minutes.'); }).catch(() => { print('unable to abort, because the user is currently in the process ' + 'of paying.'); }); }, 20 * 60 *
1000); /* 20 minutes */ specifications specification status comment payment request apithe definition of 'abort()' in that specification.
PaymentRequest.onshippingoptionchange - Web APIs
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 = '65.00'; // shipping to elsewhere is unsupported } else { // empty array indicates rejection of the address details.shippingoptions = []; return promise.resolve(details); console.log(details.error); } // hardcode for simplicity if (details.displayitems.length === 2) { details.displayitems[2] = shippingoption...
performance.getEntries() - Web APIs
performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); performance.mark("begin"); do_work(
100000); performance.mark("end"); do_work(200000); performance.mark("end"); // use getentries() to iterate through the each entry let p = performance.getentries(); for (var i=0; i < p.length; i++) { console.log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (let i=0; ...
performance.getEntriesByName() - Web APIs
performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); performance.mark("begin"); do_work(
100000); performance.mark("end"); do_work(200000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentries(name, entrytype) to get specific entries p = performance.getentries({name : "begin", entrytype: "mar...
performance.getEntriesByType() - Web APIs
performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); dowork(50000); performance.mark("end"); performance.mark("begin"); dowork(
100000); performance.mark("end"); dowork(200000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); checkperformanceentry(p[i]); } // use getentries(name, entrytype) to get specific entries p = performance.getentries({name : "begin", entrytype: "mark"...
performance.measure() - Web APIs
performance.clearmarks(); performance.clearmeasures(); },
1000); },
1000); specifications specification status comment user timing level 2the definition of 'measure()' in that specification.
performance.now() - Web APIs
in firefox, you can also enable privacy.resistfingerprinting — this changes the precision to
100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whichever is larger.
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" ...
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="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#...
RTCIceCandidateStats.deleted - Web APIs
entially drop the ones we // sorted to the top above object.keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); },
1000); specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.deleted' in that specification.
RTCIceCandidateStats.networkType - Web APIs
entially drop the ones we // sorted to the top above object.keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); },
1000); ...
RTCPeerConnection.getStats() - Web APIs
this report; we intentially drop the ones we // sorted to the top above object.keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); }); document.queryselector(".stats-box").innerhtml = statsoutput; }); },
1000); this works by calling getstats(), then, when the promise is resolved, iterates over the rtcstats objects on the returned rtcstatsreport.
RTCPeerConnection.getStreamById() - Web APIs
// from: https://bugs.chromium.org/p/chromium/issues/detail?id=698163&desc=5#c
10 rtcpeerconnection.prototype.getstreambyid = function(id) { try { var localstreams = this.getlocalstreams(); var remotestreams = this.getremotestreams(); var i; for (i = 0; i < localstreams.length; i++) { if (localstreams[i].id == id) return localstreams[i]; } for (i = 0; i < remotestreams.length; i++) { if (remotestreams[i].id == id) return remote...
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="1
10" 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="#4...
RadioNodeList - 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/nodelist" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="n...
ReadableStream.ReadableStream() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); },
1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specificatio...
ReadableStreamDefaultController.close() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); },
1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specificatio...
ReadableStreamDefaultController.enqueue() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); },
1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specificatio...
ReadableStreamDefaultController - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); },
1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specificatio...
ResizeObserverEntry.borderBoxSize - Web APIs
examples const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.borderboxsize && entry.borderboxsize.length > 0) { entry.target.style.borderradius = math.min(
100, (entry.borderboxsize[0].inlinesize/
10) + (entry.borderboxsize[0].blocksize/
10)) + 'px'; } else { entry.target.style.borderradius = math.min(
100, (entry.contentrect.width/
10) + (entry.contentrect.height/
10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('di...
ResizeObserverEntry.contentBoxSize - Web APIs
const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.min(
100, (entry.contentboxsize.inlinesize/
10) + (entry.contentboxsize.blocksize/
10)) + 'px'; } else { entry.target.style.borderradius = math.min(
100, (entry.contentrect.width/
10) + (entry.contentrect.height/
10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div'))...
ResizeObserverEntry.target - Web APIs
const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.min(
100, (entry.contentboxsize.inlinesize/
10) + (entry.contentboxsize.blocksize/
10)) + 'px'; } else { entry.target.style.borderradius = math.min(
100, (entry.contentrect.width/
10) + (entry.contentrect.height/
10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div'))...
Resize Observer API - Web APIs
the code will usually follow this kind of pattern (taken from resize-observer-border-radius.html): const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.min(
100, (entry.contentboxsize.inlinesize/
10) + (entry.contentboxsize.blocksize/
10)) + 'px'; } else { entry.target.style.borderradius = math.min(
100, (entry.contentrect.width/
10) + (entry.contentrect.height/
10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div'))...
SVGAltGlyphDefElement - 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/svgaltglyphdefelement" target="_top"><rect x="1" y="1" width="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphdefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all...
SVGAltGlyphItemElement - 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/svgaltglyphitemelement" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events:...
SVGAnimateColorElement - 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/svganimatecolorelement" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatecolorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events...
SVGAnimatedAngle - Web APIs
opera full support yessafari full support
10webview android no support nochrome android full support yesfirefox android full support yesopera android full support yessafari ios full support 3samsung internet android ...
SVGAnimationElement: beginEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onbegin examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="
100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height:
100px; border: 1px solid #ddd; overflow-y: scroll; padding:
10px 30px; } let svgelem = document.queryselector('svg'); let...
SVGAnimationElement: endEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onend examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="
100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <button>stop animation</button> <ul> </ul> ul { height:
100px; border: 1px solid #ddd; overflow-y: scroll; padding:
10px 30px; } let svgelem = d...
SVGAnimationElement: repeatEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onrepeat examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="
100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height:
100px; border: 1px solid #ddd; overflow-y: scroll; padding:
10px 30px; } let svgelem = document.queryselector('svg'); let...
cx - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0
100
100" width="200" height="200"> <circle cx="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cx); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cx' in that specification.
cy - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0
100
100" width="200" height="200"> <circle cy="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cy); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cy' in that specification.
r - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0
100
100" width="200" height="200"> <circle r="50" r="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.r); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.r' in that specification.
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="#4d4e53" text-anchor="middle" alignment-baseline="mi...
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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterprimitivestan...
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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontelement</text>...
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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg...
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="#4d4e53" text-anchor="middle" alig...
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="#4d4e53" text-anchor="middle" alignment-ba...
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="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseli...
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="2
10" 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="#4d4e53" text-anchor="middle" alignment-baseli...
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="150" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphelement</te...
SVGGlyphRefElement - 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/svgglyphrefelement" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} pr...
SVGGraphicsElement: copy event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0
100 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <text x="5" y="
10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size:
10px; width:
100%; height: 90%; box-sizing: border-box; border: 1px s...
SVGGraphicsElement: paste event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <foreignobject x="5" y="-
10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size:
10px; width:
100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").addev...
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="150" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svghkernelement</...
SVGMeshElement - 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/svgmeshelement" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmeshelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;...
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="#4d4e53" text-anchor="middle" alignment-base...
SVGPoint - Web APIs
example // create an svgpoint in the user coordinate system let s = document.getelementbyid("svg-elementid").createsvgpoint(); // then, set the x and y values of the returned svgpoint object // (which is the variable `s`) s.y =
10; s.x =
10; ...
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="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12p...
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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hove...
SVGSolidcolorElement - 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/svgsolidcolorelement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsolidcolorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtrefelement</text>...
SVGURIReference - 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/svgurireference" target="_top"><rect x="1" y="1" width="150" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgurireference</text></a></svg></div> a:hover text { fill: #0095dd; poi...
StorageEstimate.quota - Web APIs
</label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota *
100).tofixed(2); }); result specifications specification status comment storagethe definition of 'quota' in that specification.
StorageEstimate.usage - Web APIs
</label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota *
100).tofixed(2); }); result specifications specification status comment storagethe definition of 'usage' in that specification.
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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4d...
StorageManager.estimate() - Web APIs
</label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota *
100).tofixed(2); }); result specifications specification status comment storagethe definition of 'estimate()' in that specification.
Using readable streams - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); },
1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); in the readstream() function itself, we...
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="#4d4e53" text-anchor="middle" alignment-baseline="middle">styleproperty...
SubtleCrypto.deriveBits() - Web APIs
*/ 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-256" }, keymaterial, 256 ); 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 = `${b...
SubtleCrypto.deriveKey() - Web APIs
your password"); let enc = 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-256" }, keymaterial, { "name": "aes-gcm", "length": 256}, 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 tha...
SyncEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width:
100%; padding-bottom: 8.571428571428571%; 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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></...
HTMLSlotElement.assignedSlot - Web APIs
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 androi...
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="1
10" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
TextDecoder.prototype.encoding - Web APIs
the legacy single-byte encodings: 'ibm866', 'iso-8859-2', 'iso-8859-3', 'iso-8859-4', 'iso-8859-5', 'iso-8859-6', 'iso-8859-7', 'iso-8859-8'', 'iso-8859-8i', 'iso-8859-
10', 'iso-8859-13', 'iso-8859-14', 'iso-8859-15', 'iso-8859-16', 'koi8-r', 'koi8-u', 'macintosh', 'windows-874', 'windows-1250', 'windows-1251', 'windows-1252', 'windows-1253', 'windows-1254', 'windows-1255', 'windows-1256', 'windows-1257', 'windows-1258', or 'x-mac-cyrillic'.
TextMetrics.fontBoundingBoxAscent - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.fontboundingboxascent; //
10; specifications specification html living standardthe definition of 'textmetrics.fontboundingboxascent' in that specification.
TimeEvent - 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="75" 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="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d...
Multi-touch interaction - Web APIs
if (point1 >=0 && point2 >= 0) { // calculate the difference between the start and move coordinates var diff1 = math.abs(tpcache[point1].clientx - ev.targettouches[0].clientx); var diff2 = math.abs(tpcache[point2].clientx - ev.targettouches[1].clientx); // this threshold is device dependent as well as application specific var pinch_threshhold = ev.target.clientwidth /
10; if (diff1 >= pinch_threshhold && diff2 >= pinch_threshhold) ev.target.style.background = "green"; } else { // empty tpcache tpcache = new array(); } } } touch start handler the touchstart event handler caches touch points to support 2-touch gestures.
Visual Viewport API - Web APIs
var viewport = event.target; var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width:
100% instead.
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment
10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl return value none.
WaveShaperNode.curve - Web APIs
amount : 50, n_samples = 44
100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
WaveShaperNode.oversample - Web APIs
amount : 50, n_samples = 44
100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
WaveShaperNode - Web APIs
amount : 50, n_samples = 44
100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
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.rgb565 gl.rgb5_a1 gl.rgb
10_a2 gl.rgba8ui gl.rgba8i gl.rgb
10_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.
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.rgb565 gl.r11f_g11f_b
10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_aplha8 gl.rgb5_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).
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.rgb565 gl.r11f_g11f_b
10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb5_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 gl.compressed_rgb8_...
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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospa...
WebGLRenderingContext.bufferData() - Web APIs
examples using bufferdata var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer,
1024, gl.static_draw); getting buffer information to check the current buffer usage and buffer size, use the webglrenderingcontext.getbufferparameter() method.
WebGLRenderingContext.bufferSubData() - Web APIs
examples using buffersubdata var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer,
1024, gl.static_draw); gl.buffersubdata(gl.array_buffer, 512, data); specifications specification status comment webgl 1.0the definition of 'buffersubdata' in that specification.
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
t.compressed_srgb8_alpha8_astc_6x5_khr ext.compressed_rgba_astc_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr ext.compressed_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_
10x5_khr ext.compressed_srgb8_alpha8_astc_
10x5_khr ext.compressed_rgba_astc_
10x6_khr ext.compressed_srgb8_alpha8_astc_
10x6_khr ext.compressed_rgba_astc_
10x
10_khr ext.compressed_srgb8_alpha8_astc_
10x
10_khr ext.compressed_rgba_astc_12x
10_khr ext.compressed_srgb8_alpha8_astc_12x
10_khr ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr ...
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
t.compressed_srgb8_alpha8_astc_6x5_khr ext.compressed_rgba_astc_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr ext.compressed_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_
10x5_khr ext.compressed_srgb8_alpha8_astc_
10x5_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_
10x
10_khr ext.compressed_srgb8_alpha8_astc_
10x
10_khr ext.compressed_rgba_astc_12x
10_khr ext.compressed_srgb8_alpha8_astc_12x
10_khr ...
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.
WebGLRenderingContext.stencilFunc() - Web APIs
gl.enable(gl.stencil_test); gl.stencilfunc(gl.less, 0, 0b11
10011); to get the current stencil function, reference value, or other stencil information, query the following constants with getparameter().
WebGLRenderingContext.stencilFuncSeparate() - Web APIs
gl.enable(gl.stencil_test); gl.stencilfuncseparate(gl.front, gl.less, 0.2, 11
10011); to get the current stencil function, reference value, or other stencil information, query the following constants with getparameter().
WebGLRenderingContext.texSubImage2D() - Web APIs
when using the oes_texture_float extension: 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.
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
examples const a_foobar = gl.getattriblocation(shaderprogram, 'foobar'); //either set each component individually: gl.vertexattrib3f(a_foobar,
10.0, 5.0, 2.0); //or provide a float32array: const floatarray = new float32array([
10.0, 5.0, 2.0]); gl.vertexattrib3fv(a_foobar, floatarray); // we want to load the following 3x3 matrix into attribute named "matrix3x3" // 0 1 2 // 3 4 5 // 6 7 8 const matrix3x3location = gl.getattriblocation(shaderprogram, 'matrix3x3'); gl.vertexattrib3f(matrix3x3location, 0, 3, 6); gl.vertexattrib3f(matrix3...
WebGLRenderingContext - Web APIs
" + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30,
10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.
A basic 2D WebGL animation example - Web APIs
, vertexbuffer); avertexposition = gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(avertexposition); gl.vertexattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); window.requestanimationframe(function(currenttime) { let deltaangle = ((currenttime - previoustime) /
1000.0) * degreespersecond; currentangle = (currentangle + deltaangle) % 360; previoustime = currenttime; animatescene(); }); } the first thing that needs to be done in order to draw a frame of the animation is to clear the background to the desired color.
Basic scissoring - Web APIs
<p>result of of scissoring.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // the drawing buffer...
Boilerplate 1 - Web APIs
]</button> <canvas>your browser does not seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getc...
Canvas size and WebGL - Web APIs
" + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30,
10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.
Clearing by clicking - Web APIs
rogram that still shows some color and user interaction.</p> <p>you can repeatedly click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
Clearing with colors - Web APIs
--> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the global scope.
Raining rectangles - Web APIs
you missed <strong>0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, se...
Scissor animation - Web APIs
<p>webgl animation by clearing the drawing buffer with solid color and applying scissor test.</p> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 2
10px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
Creating 3D objects using WebGL - Web APIs
const indices = [ 0, 1, 2, 0, 2, 3, // front 4, 5, 6, 4, 6, 7, // back 8, 9,
10, 8,
10, 11, // top 12, 13, 14, 12, 14, 15, // bottom 16, 17, 18, 16, 18, 19, // right 20, 21, 22, 20, 22, 23, // left ]; // now send the element array to gl gl.bufferdata(gl.element_array_buffer, new uint16array(indices), gl.static_draw); return { position: positionbuffer, color: colorbuffer, indices: indexbuffer, }; } the ind...
WebGL: 2D and 3D graphics for the web - Web APIs
support for webgl is present in firefox 4+, google chrome 9+, opera 12+, safari 5.1+, internet explorer 11+, and microsoft edge build
10240+; however, the user's device must also have hardware that supports these features.
attr() - CSS: Cascading Style Sheets
n | pt | pc | px | deg | grad | rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <color> value html <div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div> css .background { height:
100vh; } .background { background-color: red; } .background[data-background] { background-color: attr(data-background color, red); } specifications specification status comment css values and units module level 4the definition of 'attr()' in that specification.
backface-visibility - CSS: Cascading Style Sheets
</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: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width:
100%; height:
100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width:
100px; height:
100px; border: none; line-height:
100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3);...
background-color - CSS: Cascading Style Sheets
mber> | <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(153,
102,153); color: rgb(255,255,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-origin - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples setting background origins .example { border:
10px double; padding:
10px; background: url('image.jpg'); background-position: center left; background-origin: content-box; } #example2 { border: 4px solid black; padding:
10px; background: url('image.gif'); background-repeat: no-repeat; background-origin: border-box; } div { background-image: url('logo.jpg'), url('mainback.png'); /* applies two images to the background */ ...
<basic-shape> - CSS: Cascading Style Sheets
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%, 0% 0%); } } result specifications ...
border-block-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border:
10px solid blue; border-block-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-color' in that specification.
border-block-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border:
10px solid blue; border-block-end-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-color' in that specification.
border-block-start-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border:
10px solid blue; border-block-start-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-color' in that specification.
border-bottom-color - CSS: Cascading Style Sheets
syntax /* <color> values */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(
100%, 50%, 25%, 0.75); border-bottom-color: currentcolor; border-bottom-color: transparent; /* global values */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: unset; the border-bottom-color property is specified as a single value.
border-bottom-left-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-bottom-left-radius: radius */ border-bottom-left-radius: 3px; /* percentage values */ /* circle if 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.
border-bottom-right-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-bottom-right-radius: radius */ border-bottom-right-radius: 3px; /* percentage values */ border-bottom-right-radius: 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.
border-bottom - CSS: Cascading Style Sheets
</div> css div { border-bottom: 4px dashed blue; background-color: gold; height:
100px; width:
100px; font-weight: bold; text-align: center; } results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom' in that specification.
border-image-outset - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width:
10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-outset' in that specification.
border-image-width - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-width: auto; /* <length> value */ border-image-width: 1rem; /* <percentage> value */ border-image-width: 25%; /* <number> value */ border-image-width: 3; /* vertical | horizontal */ border-image-width: 2em 3em; /* top | horizontal | bottom */ border-image-width: 5% 15%
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 using one, two, three, or four values chosen from the list of values below.
<gradient> - CSS: Cascading Style Sheets
<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-area - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid areas html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height:
100px; grid-template: repeat(4, 1fr) / 50px
100px; } #item1 { background-color: lime; grid-area: 2 / 2 / auto / span 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } result specifications specification status comment css grid layoutthe definition of 'grid-area' in that specification.
grid-auto-flow - CSS: Cascading Style Sheets
<div id="item3"></div> <div id="item4"></div> <div id="item5"></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-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } #item4 { grid-column-start: 2; background-color: red; } #item5 { background-color: aqua; } function changegridautoflow() { va...
grid-column-end - CSS: Cascading Style Sheets
] | [ 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="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows:
100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8...
grid-column-start - CSS: Cascading Style Sheets
] | [ 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="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows:
100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8...
grid-column - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid column size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height:
100px; grid-template-columns: repeat(6, 1fr); grid-template-rows:
100px; } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-column: 2 / 4; } #item3 { background-color: blue; grid-column: span 2 / 7; } result specifications specification status comment css grid layoutthe definition of 'grid-column' in that specification.
grid-row-end - CSS: Cascading Style Sheets
] | [ 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="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows:
100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8...
grid-row-start - CSS: Cascading Style Sheets
] | [ 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="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows:
100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8...
grid-template-areas - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | <string>+ examples specifying named grid areas html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> css #page { display: grid; width:
100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } ...
grid - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: 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?
hyphens - CSS: Cascading Style Sheets
suggesting line break opportunities there are two unicode characters used to manually specify potential line break points within text: u+20
10 (hyphen) the "hard" hyphen character indicates a visible line break opportunity.
image-rendering - CSS: Cascading Style Sheets
for example, if the natural size of an image is
100×
100px, but its actual dimensions are 200×200px (or 50×50px), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering.
inline-size - CSS: Cascading Style Sheets
n initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 1
10px; } result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in that specification.
inset-block-end - CSS: Cascading Style Sheets
/* <length> values */ inset-block-end: 3px; inset-block-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-end:
10%; /* keyword value */ inset-block-end: auto; /* global values */ inset-block-end: inherit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property.
inset-block-start - CSS: Cascading Style Sheets
/* <length> values */ inset-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start:
10%; /* keyword value */ inset-block-start: auto; /* global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property.
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-inline-end - CSS: Cascading Style Sheets
/* <length> values */ inset-inline-end: 3px; inset-inline-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-end:
10%; /* keyword value */ inset-inline-end: auto; /* global values */ inset-inline-end: inherit; inset-inline-end: initial; inset-inline-end: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline.
inset-inline-start - CSS: Cascading Style Sheets
/* <length> values */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start:
10%; /* keyword value */ inset-inline-start: auto; /* global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline.
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: ins...
<integer> - CSS: Cascading Style Sheets
3.5safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support
10.1safari ios full support 1samsung internet android full support 1.0legend full support full support ...
isolation - CSS: Cascading Style Sheets
eferencing elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | isolate examples forcing a new stacking context for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 2
10px; } .c { width:
100px; height:
100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } result specifications specification status comment compositing and blending level 1the definition of 'isolation' in that specification.
justify-content - CSS: Cascading Style Sheets
ntent-position> | left | right ]where <content-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples setting flex item distribution css #container { display: flex; justify-content: space-between; /* can be changed in the live sample */ } #container > div { width:
100px; height:
100px; background: linear-gradient(-45deg, #788cff, #b4c8ff); } html <div id="container"> <div></div> <div></div> <div></div> </div> <select id="justifycontent"> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> ...
justify-items - CSS: Cascading Style Sheets
html <article class="container" tabindex="0"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap:
10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding:
10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module...
justify-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap:
10px; width: 300px; justify-items: stretch; } span:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding:
10px; border-radius: 7px; } article { margin: 20px; } result specifications ...
line-break - CSS: Cascading Style Sheets
��思わずつぶやいた。</p> <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> </div> css .wrapbox { width:
10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } .auto { line-break: auto; } .loose { line-break: loose; } .normal { line-break: normal; } .strict { line-break: strict; } .anywhere { line-break: anywhere; } result specifications specification status comment css text module level 3the definition of 'line-break' in that specifica...
line-height - CSS: Cascading Style Sheets
tter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise as specifiedanimation typeeither number or length formal syntax normal | <number> | <length> | <percentage> examples basic example /* all rules below have the same resultant line height */ div { line-height: 1.2; font-size:
10pt; } /* number/unitless */ div { line-height: 1.2em; font-size:
10pt; } /* length */ div { line-height: 120%; font-size:
10pt; } /* percentage */ div { font:
10pt/1.2 georgia,"bitstream charter",serif; } /* font shorthand */ it is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.
margin-block-end - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-block-end:
10px; /* an absolute length */ margin-block-end: 1em; /* relative to the text size */ margin-block-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-end: auto; /* global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property...
margin-block-start - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-block-start:
10px; /* an absolute length */ margin-block-start: 1em; /* relative to the text size */ margin-block-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-start: auto; /* global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-l...
margin-block - CSS: Cascading Style Sheets
/* <length> values */ margin-block:
10px 20px; /* an absolute length */ margin-block: 1em 2em; /* relative to the text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block:
10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
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>.
margin-inline-end - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-inline-end:
10px; /* an absolute length */ margin-inline-end: 1em; /* relative to the text size */ margin-inline-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-end: auto; /* global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset; it relates to margin-block-start, margin-block-end, and margin-inline-start, ...
margin-inline-start - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-inline-start:
10px; /* an absolute length */ margin-inline-start: 1em; /* relative to the text size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element.
margin-inline - CSS: Cascading Style Sheets
/* <length> values */ margin-inline:
10px 20px; /* an absolute length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline:
10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defin...
margin-right - CSS: Cascading Style Sheets
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-trim - CSS: Cascading Style Sheets
ke so: when you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: article { background-color: red; margin: 20px; padding: 20px; display: inline-block; } article > span { background-color: black; color: white; text-align: center; padding:
10px; margin-right: 20px; } the problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it: span:last-child { margin-right: 0; } it is a pain having to write another rule to achieve this, and it is also not very flexible.
mask-border-width - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15%
10%; /* top | right | bottom | left */ mask-border-width: 5% 2em
10% auto; /* global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset; the mask-border-width property may be specified using one, two, three, or four values chosen from the list of values below.
mask-border - CSS: Cascading Style Sheets
div { width: 200px; background-color: lavender; border: 18px solid salmon; padding:
10px; /* prefixed longhand properties currently supported in chromium -webkit-mask-box-image-source: url(https://udn.realityripple.com/samples/2d/fd08a3134c.png); -webkit-mask-box-image-slice: 30 fill; -webkit-mask-box-image-width: 20px; -webkit-mask-box-image-repeat: round; -webkit-mask-box-image-outset: 1px; */ /* prefixed shorthand property currently supported in chrom...
mask-clip - CSS: Cascading Style Sheets
iner elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width:
100px; height:
100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size:
100%
100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="pa...
mask-composite - CSS: Cascading Style Sheets
formal definition initial valueaddapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width:
100px; height:
100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size:
100%
100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtrac...
mask-image - CSS: Cascading Style Sheets
= <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width:
100px; height:
100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications specification status comment css masking module level 1the definition of 'mask-image' in that specification.
mask-repeat - CSS: Cascading Style Sheets
yntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom:
10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.gete...
mask-size - CSS: Cascading Style Sheets
<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> </select> javascript var masksize = document.getelementbyid("masksize"); mask...
mask - CSS: Cascading Style Sheets
inear-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.
max-block-size - CSS: Cascading Style Sheets
.standard-box { padding: 4px; background-color: #abcdef; color: #000; font: 16px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160px; min-block-size:
100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } result specifications specification status comment css logical properties and values level 1the definition of 'max-block-size' in that specification.
max-inline-size - CSS: Cascading Style Sheets
value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size:
100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
max-width - CSS: Cascading Style Sheets
</div> </div> css #parent { background: lightblue; width: 300px; } #child { background: gold; width:
100%; max-width: 150px; } result specifications specification status comment css box sizing module level 4the definition of 'max-width' in that specification.
min-block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ min-block-size:
100px; min-block-size: 5em; /* <percentage> values */ min-block-size:
10%; /* keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /* global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if the writing mode is vertically oriented, the value of min-block-size relates to the minimum width of the element...
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.
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 t...
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.
min() - CSS: Cascading Style Sheets
let's look at some css: input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 400px); background-color: pink; } form { margin: 4px; border: 1px solid black; padding: 4px; } here, the form itself, along with the margin, border, and padding, will be
100% of its parent's width.
<number> - CSS: Cascading Style Sheets
4.01 positive fraction -456.8 negative fraction 0.0 zero +0.0 zero, with a leading + -0.0 zero, with a leading - .60 fractional number without a leading zero
10e3 scientific notation -3.4e-2 complicated scientific notation invalid numbers 12.
offset-rotate - CSS: Cascading Style Sheets
al valueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%,
100% 50%, 70%
100%, 0%
100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-
10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30deg; } @keyframes move {
100% { offset-distance:
100%; } } result specifications specification ...
outline-offset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset:
10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-offset' in that specification.
outline - CSS: Cascading Style Sheets
danimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin:
10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; } result specifications specification status comment css basic user interface module level 3the definition of 'outline' in that specification.
overflow-block - CSS: Cascading Style Sheets
</div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; height:
100px; } #div1 { overflow-block: hidden; margin-bottom: 120px;} #div2 { overflow-block: scroll; margin-bottom: 120px;} #div3 { overflow-block: visible; margin-bottom: 120px;} #div4 { overflow-block: auto; margin-bottom: 120px;} result specifications specification status comment css overflow module level 3the definition of 'overflow-block' in that specification.
overflow-y - CSS: Cascading Style Sheets
</div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; height:
100px; } #div1 { overflow-y: hidden; margin-bottom: 12px;} #div2 { overflow-y: scroll; margin-bottom: 12px;} #div3 { overflow-y: visible; margin-bottom: 120px;} #div4 { overflow-y: auto; margin-bottom: 120px;} result specifications specification status comment css overflow module level 3the definition of 'overflow-y' in that specification.
overscroll-behavior-block - CSS: Cascading Style Sheets
v> </main> css main { height: 3000px; width: 500px; background-color: white; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width:
100%; background-color: yellow; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding:
10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 340px; position: relative; top:
10px; left:
10px; } result specifications specification status comment css overscroll behavio...
overscroll-behavior-inline - CSS: Cascading Style Sheets
</div> </div> </main> css main { height: 400px; width: 3000px; background-color: white; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height:
100%; width: 1500px; background-color: yellow; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding:
10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 360px; position: relative; top:
10px; left:
10px; } result specifications specification status comment css ov...
overscroll-behavior-x - CSS: Cascading Style Sheets
to avoid this, you can set overscroll-behavior-x: contain on the inner box: main > div { height: 300px; width: 500px; overflow: auto; position: relative; top:
100px; left:
100px; overscroll-behavior-x: contain; } specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-x' in that specification.
padding-block-end - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-block-end:
10px; /* an absolute length */ padding-block-end: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-block-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-le...
padding-block-start - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-block-start:
10px; /* an absolute length */ padding-block-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-block-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as th...
padding-block - CSS: Cascading Style Sheets
/* <length> values */ padding-block:
10px 20px; /* an absolute length */ padding-block: 1em 2em; /* relative to the text size */ padding-block:
10px; /* sets both start and end values */ /* <percentage> values */ padding-block: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-block: inherit; padding-block: initial; padding-block: unset; these values corresponds to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-o...
padding-inline-end - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-inline-end:
10px; /* an absolute length */ padding-inline-end: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-inline-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left ...
padding-inline-start - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-inline-start:
10px; /* an absolute length */ padding-inline-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the ...
padding-inline - CSS: Cascading Style Sheets
/* <length> values */ padding-inline:
10px 20px; /* an absolute length */ padding-inline: 1em 2em; /* relative to the text size */ padding-inline:
10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline pr...
page-break-inside - CSS: Cascading Style Sheets
it has a little bit more text than the third one.</p> </div> css .page { background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width:
100px; } .list, ol, ul, p { break-inside: avoid; } p { background-color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block; background-color: orange; } p:first-child { margin-top: 0; } result specifications specification status comment css paged media module level 3the definition of 'page-break-inside' in that specification.
paint-order - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="
10" y="75">stroke in front</text> <text x="
10" y="150" class="stroke-behind">stroke behind</text> </svg> css text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: stroke fill; } result specifications specification status comment scalable vector graphics (svg)...
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 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: pai...
place-items - CSS: Cascading Style Sheets
min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top:
10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div cla...
place-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap:
10px; width: 300px; } span:nth-child(2) { place-self: start center; } span:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding:
10px; border-radius: 7px; } article { margin: 20px; } result specifications specification...
<position> - CSS: Cascading Style Sheets
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 15px 20px 15px specifications specification status comment css values and units module level 3the definition of '<position>' in that specification.
rotate - CSS: Cascading Style Sheets
ble 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: 150px; margin: 0 auto; } p { padding:
10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; 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' in that specification.
scale - CSS: Cascading Style Sheets
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: 150px; margin: 0 auto; } p { padding:
10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; 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 specification.
scroll-behavior - CSS: Cascading Style Sheets
th: 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: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: center; justify-content: center; height:
100%; font-size: 5em; } result specifications specification status comment css object model (cssom) view modulethe definition of 'scroll-behavior' in that specification.
translateX() - CSS: Cascading Style Sheets
10t0
10001
10t0
10001
100t0
10000
100001 [1 0 0 1 t 0] formal syntax translatex(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatex(
10px); /* equal to translate(
10px) */ background-color: pink; } result spe...
translateY() - CSS: Cascading Style Sheets
10001t001
10001t001
10000
10t00
100001 [1 0 0 1 0 t] formal syntax translatey(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatey(
10px); background-color: pink; } result specifications specific...
url() - CSS: Cascading Style Sheets
formal syntax url( <string> <url-modifier>* ) examples content property html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); } result data-uri html <div class="background"></div> css .background { height:
100vh; } .background { background: yellow; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3e%3cpath d='m
10 10h60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m
10 20h60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m
10 30h60' stroke='red' stroke-width='5'/%3e%3c/svg%3e"); } specifications specification status comment...
white-space - CSS: Cascading Style Sheets
excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> .box { width: 300px; padding: 16px; border-radius:
10px; } #css-code { background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #results { background-color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var results = document.queryselector("#results p"); se...
word-break - CSS: Cascading Style Sheets
<code>word-break: break-word</code></p> <p class="breakword narrow">this is a long and honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> css .narrow { padding:
10px; border: 1px solid; width: 500px; margin: 0 auto; font-size: 20px; line-height: 1.5; letter-spacing: 1px; } .normal { word-break: normal; } .breakall { word-break: break-all; } .keepall { word-break: keep-all; } .breakword { word-break: break-word; } specifications specification status comment css text module level 3the definition of 'wor...
Getting Started - Developer guides
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.05 time: 312.07 time: 312.
10 time: 312.12 time: 312.14 time: 312.15 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.
Challenge solutions - Developer guides
solution the following rule achieves this effect: ul { border:
10px solid lightblue; width:
100px; } layout default image position fixed image position challenge change your sample document, doc2.html, adding this tag to it near the end, just before </body>: <img id="fixed-pin" src="yellow-pin.png" alt="yellow map pin"> predict where the image will appear in your document.
Rich-Text Editing in Mozilla - Developer guides
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=450,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 { font-size:
10px; } #textbo...
Making content editable - Developer guides
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=450,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 { font-size:
10px; } #textbo...
Constraint validation - Developer guides
the javascript reads the file selected, uses the file.size() method to get its size, compares it to the (hard coded) limit, and calls the constraint api to inform the browser if there is a violation: function checkfilesize() { var fs = document.getelementbyid("fs"); var files = fs.files; // if there is (at least) one file selected if (files.length > 0) { if (files[0].size > 75 *
1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event: window.onload = function () { document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint...
HTML attribute: pattern - HTML: Hypertext Markup Language
<form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" 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,...
HTML attribute: required - HTML: Hypertext Markup Language
note color and range don't support required, but type color defaults to #00000, and range defaults to the midpoint between min and max -- with min and max defaulting to 0 and
100 respectively in most browsers if not declared -- so always has a value.
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
• page structure • wai web accessibility tutorials mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.1 | w3c understanding wcag 2.0 understanding success criterion 2.4.6 | w3c understanding wcag 2.0 understanding success criterion 2.4.
10 | w3c understanding wcag 2.0 labeling section content another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.
<a>: The Anchor element - HTML: Hypertext Markup Language
<a href="" download="my_painting.png">download my painting</a> </p> <canvas width="300" height="300"></canvas> css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px
10px; } javascript var canvas = document.queryselector('canvas'), c = canvas.getcontext('2d'); c.fillstyle = 'hotpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y,
10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlistener('mousemove', event => draw(event.offsetx, event.offsety) ); canvas.addeventlistener('mousedown', () => isdrawing =...
<area> - HTML: Hypertext Markup Language
ication 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="75,75,75" href="left.html" alt="click to go left"> <area shape="circle" coords="275,75,75" href="right.html" alt="click to go right"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559
101b3.png" alt="350 x 150 pic"> result specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
</canvas> javascript then in the javascript code, call htmlcanvaselement.getcontext() to get a drawing context and start drawing onto the canvas: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(
10,
10,
100,
100); result accessibility concerns alternative content the <canvas> element on its own is just a bitmap and does not provide information about any drawn objects.
<del>: The Deleted Text element - HTML: Hypertext Markup Language
del::before, del::after { clip-path: inset(
100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } del::before { content: " [deletion start] "; } del::after { content: " [deletion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity.
<header> - HTML: Hypertext Markup Language
examples page header <header> <h1>main page title</h1> <img src="mdn-logo-sm.png" alt="mdn logo"> </header> article header <article> <header> <h2>the planet earth</h2> <p>posted on wednesday, <time datetime="2017-
10-04">4 october 2017</time> by jane smith</p> </header> <p>we live on a planet that's blue and green, with so many things still unseen.</p> <p><a href="https://janesmith.com/the-planet-earth/">continue reading....</a></p> </article> specifications specification status comment html living standardthe definition of '<header>' in that specification.
<input type="checkbox"> - HTML: Hypertext Markup Language
</div> <div> <input type="checkbox" id="other" name="interest" value="other"> <label for="other">other</label> <input type="text" id="othervalue" name="other"> </div> <div> <button type="submit">submit form</button> </div> </fieldset> </form> css html { font-family: sans-serif; } form { width: 600px; margin: 0 auto; } div { margin-bottom:
10px; } fieldset { background: cyan; border: 5px solid blue; } legend { padding:
10px; background: blue; color: cyan; } javascript var othercheckbox = document.queryselector('input[value="other"]'); var othertext = document.queryselector('input[id="othervalue"]'); othertext.style.visibility = 'hidden'; othercheckbox.addeventlistener('change', () => { if(othercheckbox.checked) { ...
<input type="color"> - HTML: Hypertext Markup Language
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...
<input type="date"> - HTML: Hypertext Markup Language
lect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } } } function populateyears() { // get this 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); } } // when the month or year <select> values are changed, rerun populatedays() // in case the change affected the number of available days yearselect.onchange = function() { populatedays(mont...
<input type="hidden"> - HTML: Hypertext Markup Language
</textarea> </div> <div> <button type="submit">update post</button> </div> <input type="hidden" id="postid" name="postid" value="34657"> </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 informat...
<input type="radio"> - HTML: Hypertext Markup Language
x; line-height: 32px; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right: 5px; position: relative; top: 4px; } input:checked { border: 6px solid black; } button, legend { color: white; background-color: black; padding: 5px
10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active { background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers).
<ins> - HTML: Hypertext Markup Language
ins::before, ins::after { clip-path: inset(
100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } ins::before { content: " [insertion start] "; } ins::after { content: " [insertion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity.
<map> - HTML: Hypertext Markup Language
examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html"> <area shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559
101b3.png" alt="350 x 150 pic"> result expected live example output the live example above should appear similar to the following images (when using your keyboard tab key): for the left.html link: for the right.html link specifications specification status comment html living standardthe definition of '<map>' in that specification.
<mark>: The Mark Text element - HTML: Hypertext Markup Language
mark::before, mark::after { clip-path: inset(
100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } mark::before { content: " [highlight start] "; } mark::after { content: " [highlight end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity.
Cache-Control - HTTP
cache-control: immutable cache-control: stale-while-revalidate=<seconds> cache-control: stale-if-error=<seconds> directives cacheability a response is normally cached by the browser if: it has a status code of 301, 302, 307, 308, or 4
10 and cache-control does not have no-store, or if proxy, does not have private and authorization is unset either has a status code of 301, 302, 307, 308, or 4
10 or has public, max-age or s-maxage in cache-control or has expires set public the response may be stored by any cache, even if the response is normally non-cacheable.
Content-Range - HTTP
examples content-range: bytes 200-
1000/67589 specifications specification title rfc 7233, section 4.2: content-range hypertext transfer protocol (http/1.1): range requests ...
CSP: report-uri - HTTP
'/csp-violations.log'; $log_file_size_limit =
1000000; // bytes - once exceeded no further entries are added $email_address = 'admin@example.com'; $email_subject = 'content-security-policy violation'; // end configuration $current_domain = preg_replace('/www\./i', '', $_server['server_name']); $email_subject = $email_subject .
CSP: style-src - HTTP
content-security-policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878
103ab7347e158f' when generating the hash, don't include the <style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace.
Content-Type - HTTP
post" enctype="multipart/form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myfile"> <button type="submit">submit</button> </form> the request looks something like this (less interesting headers are omitted here): post /foo http/1.1 content-length: 68137 content-type: multipart/form-data; boundary=---------------------------9747672998524989295316
10575 -----------------------------9747672998524989295316
10575 content-disposition: form-data; name="description" some text -----------------------------9747672998524989295316
10575 content-disposition: form-data; name="myfile"; filename="foo.txt" content-type: text/plain (content of the uploaded file foo.txt) -----------------------------9747672998524989295316
10575-- specifications sp...
Expect-CT - HTTP
builds of chrome are designed to stop enforcing the expect-ct policy
10 weeks after the installation's build date.
Forwarded - HTTP
examples using the forwarded header forwarded: for="_mdn" # case insensitive forwarded: for="[2001:db8:cafe::17]:4711" # separated by semicolon forwarded: for=192.0.2.60;proto=http;by=203.0.113.43 # multiple values can be appended using a comma forwarded: for=192.0.2.43, for=198.51.
100.17 transitioning from x-forwarded-for to forwarded if your application, server, or proxy supports the standardized forwarded header, the x-forwarded-for header can be replaced.
Keep-Alive - HTTP
examples a response containing a keep-alive header: http/1.1 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: thu, 11 aug 2016 15:23:13 gmt keep-alive: timeout=5, max=
1000 last-modified: mon, 25 jul 2016 04:32:39 gmt server: apache (body) specifications specification title http keep-alive header keep-alive header (ietf internet draft) rfc 7230, appendix a.1.2: keep-alive hypertext transfer protocol (http/1.1): message syntax and routing ...
Range - HTTP
range: bytes=200-
1000, 2000-6576, 19000- requesting the first 500 and last 500 bytes of the file.
Save-Data - HTTP
with save-data: on request: get /image.jpg http/1.0 host: example.com save-data: on response: http/1.0 200 ok content-length:
102832 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-length: 481770 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] specifications specification title d...
OPTIONS - HTTP
http/1.1 204 no content date: mon, 01 dec 2008 01:15: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 hypertext transfer protocol (http/1.1): semantics and content ...
PATCH - HTTP
request has body yes successful response has body yes safe no idempotent no cacheable no allowed in html forms no syntax patch /file.txt http/1.1 example request patch /file.txt http/1.1 host: www.example.com content-type: application/example if-match: "e0023aa4e" content-length:
100 [description of changes] response a successful response is indicated by any 2xx status code.
206 Partial Content - HTTP
status 206 partial content examples a response containing one single range: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-range: bytes 2
1010-47021/47022 content-length: 26012 content-type: image/gif ...
404 Not Found - HTTP
but if a resource is permanently removed, a 4
10 (gone) should be used instead of a 404 status.
411 Length Required - HTTP
status 411 length required specifications specification title rfc 7231, section 6.5.
10: 411 length required hypertext transfer protocol (http/1.1): semantics and content ...
CSS Houdini
li { background-image: paint(mycomponent, stroke,
10px); --highlights: blue; --lowlights: green; } note: with great power comes great responsibility!
JavaScript data types and data structures - JavaScript
-bit two's complement signed integer short int16_t uint16array 0 to 65535 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 4294967295 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.1234567) 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...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int6...
Concurrency model and the event loop - JavaScript
function foo(b) { let a =
10 return a + b + 11 } function bar(x) { let y = 3 return foo(x * y) } console.log(bar(7)) //returns 42 when calling bar, a first frame is created containing bar's arguments and local variables.
Meta programming - JavaScript
function.prototype.apply.call(math.floor, undefined, [1.75]) with reflect.apply this becomes less verbose and easier to understand: reflect.apply(math.floor, undefined, [1.75]) // 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 prop...
Working with objects - JavaScript
here's an example that defines the same getter and setter used in the previous example: var o = { a: 0 }; object.defineproperties(o, { 'b': { get: function() { return this.a + 1; } }, 'c': { set: function(x) { this.a = x / 2; } } }); o.c =
10; // runs the setter, which assigns
10 / 2 (5) to the 'a' property console.log(o.b); // runs the getter, which yields a + 1 or 6 which of the two forms to choose depends on your programming style and task at hand.
JavaScript language resources - JavaScript
the following ecmascript standards have been 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 pd...
Deprecated and obsolete features - JavaScript
getenumerablepropertykeys (bug 783829, firefox 37) getownpropertynames (bug
1007334, firefox 33) keys (bug
1007334, firefox 33) escape sequences octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.
RangeError: invalid array length - JavaScript
examples invalid cases new array(math.pow(2, 40)) new array(-1) new arraybuffer(math.pow(2, 32)) new arraybuffer(-1) let a = []; a.length = a.length - 1; // set -1 to the length property let b = new array(math.pow(2, 32) - 1); b.length = b.length + 1; // set 2^32 to the length property valid cases [ math.pow(2, 40) ] // [
1099511627776 ] [ -1 ] // [ -1 ] new arraybuffer(math.pow(2, 32) - 1) new arraybuffer(0) let a = []; a.length = math.max(0, a.length - 1); let b = new array(math.pow(2, 32) - 1); b.length = math.min(0xffffffff, b.length + 1); // 0xffffffff is the hexadecimal notation for 2^32 - 1 // which can also be written as (-1 >>> 0) ...
setter - JavaScript
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 definit...
Functions - JavaScript
a "source element" is a non-nested statement in the script or a function body: var x = 0; // source element if (x === 0) { // source element x =
10; // not a source element function boo() {} // not a source element } function foo() { // source element var y = 20; // source element function bar() {} // source element while (y ===
10) { // source element function blah() {} // not a source element y++; // not a source element } } examples // function declarat...
Array.prototype.flat() - JavaScript
eck: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 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 arr5 = [1, 2, , 4, 5]; arr5.flat(); // [1, 2, 4, 5] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.flat' in that specification.
Function - JavaScript
var x =
10; function createfunction1() { var x = 20; return new function('return x;'); // this |x| refers global |x| } function createfunction2() { var x = 20; function f() { return x; // this |x| refers local |x| above } return f; } var f1 = createfunction1(); console.log(f1()); //
10 var f2 = createfunction2(); console.log(f2()); // 20 while this code...
GeneratorFunction - JavaScript
examples creating a generator function from a generatorfunction() constructor var generatorfunction = object.getprototypeof(function*(){}).constructor var g = new generatorfunction('a', 'yield a * 2'); var iterator = g(
10); console.log(iterator.next().value); // 20 specifications specification ecmascript (ecma-262)the definition of 'generatorfunction' in that specification.
Infinity - JavaScript
examples using infinity console.log(infinity ); /* infinity */ console.log(infinity + 1 ); /* infinity */ console.log(math.pow(
10,
1000)); /* infinity */ console.log(math.log(0) ); /* -infinity */ console.log(1 / infinity ); /* 0 */ console.log(1 / 0 ); /* infinity */ specifications specification ecmascript (ecma-262)the definition of 'infinity' in that specification.
Intl.DateTimeFormat.prototype.formatRangeToParts() - JavaScript
let date1 = new date(date.utc(2007, 0,
10,
10, 0, 0)); let date2 = new date(date.utc(2007, 0,
10, 11, 0, 0)); // > 'wed,
10 jan 2007
10:00:00 gmt' // > 'wed,
10 jan 2007 11:00:00 gmt' let fmt = new intl.datetimeformat("en", { hour: 'numeric', minute: 'numeric' }); console.log(fmt.formatrange(date1, date2)); // > '
10:00 – 11:00 am' fmt.formatrangetoparts(date1, date2); // return value: // [ // { type: 'hour', value: '1...
Intl.DateTimeFormat - JavaScript
date)); // → "12/19/2012, 19:00:00" // to specify options but use the browser's default locale, use 'default' console.log(new intl.datetimeformat('default', options).format(date)); // → "12/19/2012, 19:00:00" // sometimes it's helpful to include the period of the day options = {hour: "numeric", dayperiod: "short"}; console.log(new intl.datetimeformat('en-us', options).format(date)); // →
10 at night the used calendar and numbering formats can also be set independently via options arguments: var options = {calendar: 'chinese', numberingsystem: 'arab'}; var dateformat = new intl.datetimeformat('default', options); var usedoptions = dateformat.resolvedoptions(); console.log(usedoptions.calendar); // → "chinese" console.log(usedoptions.numberingsystem); // → "arab" console.log...
Intl.Locale.prototype.calendar - JavaScript
5493 b.c.e) ethiopic ethiopic calendar, amete mihret (epoch approx, 8 c.e.) gregory gregorian calendar hebrew traditional hebrew calendar indian indian calendar islamic islamic calendar islamic-umalqura islamic calendar, umm al-qura islamic-tbla islamic calendar, tabular (intercalary years [2,5,7,
10,13,16,18,21,24,26,29] - astronomical epoch) islamic-civil islamic calendar, tabular (intercalary years [2,5,7,
10,13,16,18,21,24,26,29] - civil epoch) islamic-rgsa islamic calendar, saudi arabia sighting iso8601 iso calendar (gregorian calendar using the iso 8601 calendar week rules) japanese japanese imperial calendar persian persian cal...
Intl.NumberFormat() constructor - JavaScript
possible values are: "symbol" to use a localized currency symbol such as €, this is the default value, "narrowsymbol" to use a narrow format symbol ("$
100" rather than "us$
100"), "code" to use the iso currency code, "name" to use a localized currency name such as "dollar", currencysign in many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign.
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
examples using formattoparts const rtf = new intl.relativetimeformat("en", { numeric: "auto" }); // format relative time using the day unit rtf.formattoparts(-1, "day"); // > [{ type: "literal", value: "yesterday"}] rtf.formattoparts(
100, "day"); // > [{ type: "literal", value: "in " }, // > { type: "integer", value: "
100", unit: "day" }, // > { type: "literal", value: " days" }] specifications specification status comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat.formattoparts()' in that specification.
Intl.RelativeTimeFormat - JavaScript
rtf.formattoparts(-1, "day"); // > [{ type: "literal", value: "yesterday"}] rtf.formattoparts(
100, "day"); // > [{ type: "literal", value: "in " }, // > { type: "integer", value: "
100", unit: "day" }, // > { type: "literal", value: " days" }] specifications specification status comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat' in that specification.
JSON.parse() - JavaScript
value * 2 // return value * 2 for numbers : value // return everything else unchanged ); // { p:
10 } json.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) => { console.log(key); // log the current property name, the last is "".
Math.SQRT1_2 - JavaScript
examples using math.sqrt1_2 the following function returns 1 over the square root of 2: function getroot1_2() { return math.sqrt1_2; } getroot1_2(); // 0.707
1067811865476 specifications specification ecmascript (ecma-262)the definition of 'math.sqrt1_2' in that specification.
Math.cbrt() - JavaScript
-pow(-x, 1/3) : pow(x, 1/3); }; })(math.pow); // localize math.pow to increase efficiency } examples using math.cbrt() math.cbrt(nan); // nan math.cbrt(-1); // -1 math.cbrt(-0); // -0 math.cbrt(-infinity); // -infinity math.cbrt(0); // 0 math.cbrt(1); // 1 math.cbrt(infinity); // infinity math.cbrt(null); // 0 math.cbrt(2); // 1.25992
10498948732 specifications specification ecmascript (ecma-262)the definition of 'math.cbrt' in that specification.
Math.imul() - JavaScript
ffff7fc00001 + 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.log2() - JavaScript
if (!math.log2) math.log2 = function(x) { return math.log(x) * math.log2e; }; examples using math.log2() math.log2(3); // 1.584962500721156 math.log2(2); // 1 math.log2(1); // 0 math.log2(0); // -infinity math.log2(-2); // nan math.log2(
1024); //
10 specifications specification ecmascript (ecma-262)the definition of 'math.log2' in that specification.
Math.max() - JavaScript
examples using math.max() math.max(
10, 20); // 20 math.max(-
10, -20); // -
10 math.max(-
10, 20); // 20 getting the maximum element of an array array.reduce() can be used to find the maximum element in a numeric array, by comparing each value: var arr = [1,2,3]; var max = arr.reduce(function(a, b) { return math.max(a, b); }); the following function uses function.prototype.apply() to get the maximum of an array.
Math.min() - JavaScript
examples using math.min() this finds the min of x and y and assigns it to z: var x =
10, y = -20; var z = math.min(x, y); clipping a value with math.min() math.min() is often used to clip a value so that it is always less than or equal to a boundary.
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.4142135623730951 (square root of 2) math.pow(2, 1/3); // 1.25992
10498948732 (cube root of 2) // signed exponents math.pow(7, -2); // 0.02040816326530612 (1/49) math.pow(8, -1/3); // 0.5 // signed bases math.pow(-7, 2); // 49 (squares are positive) ma...
Number.MAX_VALUE - JavaScript
property attributes of number.max_value writable no enumerable no configurable no description the max_value property has a value of approximately 1.79e+308, or 2
1024.
Number.isInteger() - JavaScript
polyfill number.isinteger = number.isinteger || function(value) { return typeof value === 'number' && isfinite(value) && math.floor(value) === value; }; examples using isinteger number.isinteger(0); // true number.isinteger(1); // true number.isinteger(-
100000); // true number.isinteger(99999999999999999999999); // true number.isinteger(0.1); // false number.isinteger(math.pi); // false number.isinteger(nan); // false number.isinteger(infinity); // false number.isinteger(-infinity); // false number.isinteger('
10'); // false number.isinteger(true); // false number.isinteger(false); // false number.isinteger([1]); ...
Number.prototype.valueOf() - JavaScript
examples using valueof let numobj = new number(
10) console.log(typeof numobj) // object let num = numobj.valueof() console.log(num) //
10 console.log(typeof num) // number specifications specification ecmascript (ecma-262)the definition of 'number.prototype.valueof' in that specification.
Object.assign() - JavaScript
} }); const copy = object.assign({}, obj); console.log(copy); // { baz: 3 } primitives will be wrapped to objects const v1 = 'abc'; const v2 = true; const v3 =
10; const v4 = symbol('foo'); const obj = object.assign({}, v1, null, v2, undefined, v3, v4); // primitives will be wrapped, null and undefined will be ignored.
Object.create() - JavaScript
(note that the second parameter // maps keys 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 es2015 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 initia...
Object.defineProperty() - JavaScript
set: function(newvalue) { bvalue = newvalue; }, get() { return bvalue; }, set(newvalue) { bvalue = newvalue; }, enumerable: true, configurable: true }); o.b; // 38 // 'b' property exists in the o object and its value is 38 // the value of o.b is now always identical to bvalue, // unless o.b is redefined // you cannot try to mix both: object.defineproperty(o, 'conflict', { value: 0x9f91
102, get() { return 0xdeadbeef; } }); // throws a typeerror: value appears // only in data descriptors, // get appears only in accessor descriptors modifying a property when the property already exists, object.defineproperty() attempts to modify the property according to the values in the descriptor and the object's current configuration.
Object.is() - JavaScript
polyfill if (!object.is) { object.is = function(x, y) { // samevalue algorithm if (x === y) { // steps 1-5, 7-
10 // steps 6.b-6.e: +0 != -0 return x !== 0 || 1 / x === 1 / y; } else { // step 6.a: nan == nan return x !== x && y !== y; } }; } examples using object.is object.is('foo', 'foo'); // true object.is(window, window); // true object.is('foo', 'bar'); // false object.is([], []); // false var foo = { a: 1 }; var bar = { a: 1 }; object.is(foo, f...
Object.keys() - JavaScript
examples using object.keys // simple array const arr = ['a', 'b', 'c']; console.log(object.keys(arr)); // console: ['0', '1', '2'] // array-like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.keys(obj)); // console: ['0', '1', '2'] // array-like object with random key ordering const anobj = {
100: 'a', 2: 'b', 7: 'c' }; console.log(object.keys(anobj)); // console: ['2', '7', '
100'] // getfoo is a property which isn't enumerable const myobj = object.create({}, { getfoo: { value: function () { return this.foo; } } }); myobj.foo = 1; console.log(object.keys(myobj)); // console: ['foo'] if you want all properties—including non-enumerables—see object.getownpropertynames().
Object.prototype.toLocaleString() - JavaScript
lestring() date: date.prototype.tolocalestring() typedarray: typedarray.prototype.tolocalestring() bigint: bigint.prototype.tolocalestring() examples array tolocalestring() override on array objects, tolocalestring() can be used to print array values as a string, optionally with locale-specific identifiers (such as currency symbols) appended to them: for example: const testarray = [4, 7,
10]; let europrices = testarray.tolocalestring('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+0
100 (british summer time)" let dedate = tes...
Object.values() - JavaScript
mples using object.values const obj = { foo: 'bar', baz: 42 }; console.log(object.values(obj)); // ['bar', 42] // array-like object const arraylikeobj1 = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.values(arraylikeobj1 )); // ['a', 'b', 'c'] // array-like object with random key ordering // when using numeric keys, the values are returned in the keys' numerical order const arraylikeobj2 = {
100: 'a', 2: 'b', 7: 'c' }; console.log(object.values(arraylikeobj2 )); // ['b', 'c', 'a'] // getfoo is property which isn't enumerable const my_obj = object.create({}, { getfoo: { value: function() { return this.foo; } } }); my_obj.foo = 'bar'; console.log(object.values(my_obj)); // ['bar'] // non-object argument will be coerced to an object console.log(object.values('foo')); // ['f', 'o', 'o'] ...
Promise.any() - JavaScript
const perr = new promise((resolve, reject) => { reject("always fails"); }); const pslow = new promise((resolve, reject) => { settimeout(resolve, 500, "done eventually"); }); const pfast = new promise((resolve, reject) => { settimeout(resolve,
100, "done quick"); }); promise.any([perr, pslow, pfast]).then((value) => { console.log(value); // pfast fulfils first }) // expected output: "done quick" rejections with aggregateerror promise.any() rejects with an aggregateerror if no promise fulfils.
Promise.prototype.catch() - JavaScript
ng an error will call the catch method most of the time var p1 = new promise(function(resolve, reject) { throw new error('uh-oh!'); }); p1.catch(function(e) { console.error(e); // "uh-oh!" }); // errors thrown inside asynchronous functions will act like uncaught errors var p2 = new promise(function(resolve, reject) { settimeout(function() { throw new error('uncaught exception!'); },
1000); }); p2.catch(function(e) { console.error(e); // this is never called }); // errors thrown after resolve is called will be silenced var p3 = new promise(function(resolve, reject) { resolve(); throw new error('silenced exception!'); }); p3.catch(function(e) { console.error(e); // this is never called }); if it is resolved //create a promise which would not call onreject var p1 = p...
Promise.prototype.then() - JavaScript
function resolvelater(resolve, reject) { settimeout(function() { resolve(
10); },
1000); } function rejectlater(resolve, reject) { settimeout(function() { reject(new error('error')); },
1000); } var p1 = promise.resolve('foo'); var p2 = p1.then(function() { // return promise here, that will be resolved to
10 after 1 second return new promise(resolvelater); }); p2.then(function(v) { console.log('resolved', v); // "resolved",
10 }, function(e) { // not c...
handler.construct() - JavaScript
const p = new proxy(function() {}, { construct: function(target, argumentslist, newtarget) { console.log('called: ' + argumentslist.join(', ')); return { value: argumentslist[0] *
10 }; } }); console.log(new p(1).value); // "called: 1" //
10 the following code violates the invariant.
handler.defineProperty() - JavaScript
const p = new proxy({}, { defineproperty: function(target, prop, descriptor) { console.log('called: ' + prop); return true; } }); const desc = { configurable: true, enumerable: true, value:
10 }; object.defineproperty(p, 'a', desc); // "called: a" when calling object.defineproperty() or reflect.defineproperty(), the descriptor passed to defineproperty() trap has one restriction—only following properties are usable (non-standard properties will be ignored): enumerable configurable writable value get set const p = new proxy({}, { defineproperty(target, prop, descriptor) {...
handler.deleteProperty() - JavaScript
const p = new proxy({}, { deleteproperty: function(target, prop) { if (prop in target){ delete target[prop] console.log('property removed: ' + prop) return true } else { console.log('property not found: ' + prop) return false } } }) let result p.a =
10 console.log('a' in p) // true result = delete p.a // "property removed: a" console.log(result) // true console.log('a' in p) // false result = delete p.a // "property not found: a" console.log(result) // false specifications specification ecmascript (ecma-262)the definition of '[[delete]]' in that specification.
handler.has() - JavaScript
const obj = { a:
10 }; object.preventextensions(obj); const p = new proxy(obj, { has: function(target, prop) { return false; } }); 'a' in p; // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[hasproperty]]' in that specification.
handler.ownKeys() - JavaScript
const obj = {}; object.defineproperty(obj, 'a', { configurable: false, enumerable: true, value:
10 } ); const p = new proxy(obj, { ownkeys: function(target) { return [123, 12.5, true, false, undefined, null, {}, []]; } }); console.log(object.getownpropertynames(p)); // typeerror: proxy [[ownpropertykeys]] must return an array // with only string and symbol elements specifications specification ecmascript (ecma-262)the definition of '[[ownpropertykeys]]' in t...
handler.set() - JavaScript
const p = new proxy({}, { set: function(target, prop, value, receiver) { target[prop] = value; console.log('property set: ' + prop + ' = ' + value); return true; } }) console.log('a' in p); // false p.a =
10; // "property set: a =
10" console.log('a' in p); // true console.log(p.a); //
10 specifications specification ecmascript (ecma-262)the definition of '[[set]]' in that specification.
Proxy - JavaScript
if (prop === 'age') { if (!number.isinteger(value)) { throw new typeerror('the age is not an integer'); } if (value > 200) { throw new rangeerror('the age seems invalid'); } } // the default behavior to store the value obj[prop] = value; // indicate success return true; } }; const person = new proxy({}, validator); person.age =
100; console.log(person.age); //
100 person.age = 'young'; // throws an exception person.age = 300; // throws an exception extending constructor a function proxy could easily extend a constructor with a new constructor.
ReferenceError() constructor - JavaScript
le is not defined" console.log(e.name) // "referenceerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 6 console.log(e.stack) // "@scratchpad/2:2:7\n" } creating a referenceerror try { throw new referenceerror('hello', 'somefile.js',
10) } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "hello" console.log(e.name) // "referenceerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) //
10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scra...
ReferenceError - JavaScript
le is not defined" console.log(e.name) // "referenceerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 6 console.log(e.stack) // "@scratchpad/2:2:7\n" } creating a referenceerror try { throw new referenceerror('hello', 'somefile.js',
10) } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "hello" console.log(e.name) // "referenceerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) //
10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scra...
Reflect.apply() - JavaScript
examples using reflect.apply() reflect.apply(math.floor, undefined, [1.75]); // 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.
SharedArrayBuffer() constructor - JavaScript
var sab = sharedarraybuffer(
1024); // typeerror: calling a builtin sharedarraybuffer constructor // without new is forbidden var sab = new sharedarraybuffer(
1024); specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer constructor' in that specification.
SharedArrayBuffer.prototype.byteLength - JavaScript
examples using bytelength var sab = new sharedarraybuffer(
1024); sab.bytelength; //
1024 specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer.prototype.bytelength' in that specification.
SharedArrayBuffer.prototype.slice() - JavaScript
examples using slice var sab = new sharedarraybuffer(
1024); sab.slice(); // sharedarraybuffer { bytelength:
1024 } sab.slice(2); // sharedarraybuffer { bytelength:
1022 } sab.slice(-2); // sharedarraybuffer { bytelength: 2 } sab.slice(0, 1); // sharedarraybuffer { bytelength: 1 } specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer.prototype.slice' in that specification.
String.prototype.codePointAt() - JavaScript
ate pair first >= 0xd800 && first <= 0xdbff && // high surrogate size > index + 1 // there is a next code unit ) { second = string.charcodeat(index + 1); if (second >= 0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x
10000; } } 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'.codepoint...
String.prototype.indexOf() - JavaScript
'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.prototype.lastIndexOf() - JavaScript
let anystring = 'brave new world'; console.log('the index of the first w from the beginning is ' + anystring.indexof('w')); // logs 8 console.log('the index of the first w from the end is ' + anystring.lastindexof('w')); // logs
10 console.log('the index of "new" from the beginning is ' + anystring.indexof('new')); // logs 6 console.log('the index of "new" from the end is ' + anystring.lastindexof('new')); // logs 6 specifications specification ecmascript (ecma-262)the definition of 'string.prototype.lastindexof' in that specification.
String.prototype.localeCompare() - JavaScript
using options the results provided by localecompare() can be customized using the options argument: // in german, ä has a as the base letter console.log('ä'.localecompare('a', 'de', { sensitivity: 'base' })); // 0 // in swedish, ä and a are separate base letters console.log('ä'.localecompare('a', 'sv', { sensitivity: 'base' })); // a positive value numeric sorting // by default, "2" > "
10" console.log("2".localecompare("
10")); // 1 // numeric using options: console.log("2".localecompare("
10", undefined, {numeric: true})); // -1 // numeric using locales tag: console.log("2".localecompare("
10", "en-u-kn-true")); // -1 specifications specification ecmascript (ecma-262)the definition of 'string.prototype.localecompare' in that specification.
String.prototype.padEnd() - JavaScript
examples using padend 'abc'.padend(
10); // "abc " 'abc'.padend(
10, "foo"); // "abcfoofoof" 'abc'.padend(6, "123456"); // "abc123" 'abc'.padend(1); // "abc" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.padend' in that specification.
String.prototype.padStart() - JavaScript
examples basic examples 'abc'.padstart(
10); // " abc" 'abc'.padstart(
10, "foo"); // "foofoofabc" 'abc'.padstart(6,"123465"); // "123abc" 'abc'.padstart(8, "0"); // "00000abc" 'abc'.padstart(1); // "abc" fixed width string number conversion // javascript version of: (unsigned) // printf "%0*d" width num function leftfillnum(num, targetlength) { return num.tostring().padstart(targetlength, 0); } const nu...
String.prototype.split() - JavaScript
ave new world that has such people in it.' const monthstring = 'jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec' const space = ' ' const comma = ',' splitstring(tempeststring, space) splitstring(tempeststring) splitstring(monthstring, comma) this example produces the following output: the original string is: "oh brave new world that has such people in it." the separator is: " " the array has
10 elements: oh / brave / new / world / that / has / such / people / in / it.
String.prototype.startsWith() - JavaScript
examples using startswith() //startswith let str = 'to be, or not to be, that is the question.' console.log(str.startswith('to be')) // true console.log(str.startswith('not to be')) // false console.log(str.startswith('not to be',
10)) // true specifications specification ecmascript (ecma-262)the definition of 'string.prototype.startswith' in that specification.
String.prototype.substring() - JavaScript
g = 'mozilla' // displays 'm' console.log(anystring.substring(0, 1)) console.log(anystring.substring(1, 0)) // displays 'mozill' console.log(anystring.substring(0, 6)) // displays 'lla' console.log(anystring.substring(4)) console.log(anystring.substring(4, 7)) console.log(anystring.substring(7, 4)) // displays 'mozilla' console.log(anystring.substring(0, 7)) console.log(anystring.substring(0,
10)) using substring() with length property the following example uses the substring() method and length property to extract the last characters of a particular string.
String - JavaScript
\u{xxxxxx} (where x…xxxxxx is 1–6 hex digits; range of 0x0–0x
10ffff) 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-8859-1 character / unicode code point between u+0000 and u+00ff long literal strings sometimes, your code will include strings which are very long.
Symbol.toPrimitive - JavaScript
var obj2 = { [symbol.toprimitive](hint) { if (hint == 'number') { return
10; } if (hint == 'string') { return 'hello'; } return true; } }; console.log(+obj2); //
10 -- hint is "number" console.log(`${obj2}`); // "hello" -- hint is "string" console.log(obj2 + ''); // "true" -- hint is "default" specifications specification ecmascript (ecma-262)the definition of 'symbol.toprimitive' in that specification.
SyntaxError() constructor - JavaScript
e that caused the exception examples catching a syntaxerror try { eval('hoo bar'); } catch (e) { console.error(e instanceof syntaxerror); console.error(e.message); console.error(e.name); console.error(e.filename); console.error(e.linenumber); console.error(e.columnnumber); console.error(e.stack); } creating a syntaxerror try { throw new syntaxerror('hello', 'somefile.js',
10); } catch (e) { console.error(e instanceof syntaxerror); // true console.error(e.message); // hello console.error(e.name); // syntaxerror console.error(e.filename); // somefile.js console.error(e.linenumber); //
10 console.error(e.columnnumber); // 0 console.error(e.stack); // @debugger eval code:3...
SyntaxError - JavaScript
examples catching a syntaxerror try { eval('hoo bar'); } catch (e) { console.error(e instanceof syntaxerror); console.error(e.message); console.error(e.name); console.error(e.filename); console.error(e.linenumber); console.error(e.columnnumber); console.error(e.stack); } creating a syntaxerror try { throw new syntaxerror('hello', 'somefile.js',
10); } catch (e) { console.error(e instanceof syntaxerror); // true console.error(e.message); // hello console.error(e.name); // syntaxerror console.error(e.filename); // somefile.js console.error(e.linenumber); //
10 console.error(e.columnnumber); // 0 console.error(e.stack); // @debugger eval code:3...
TypeError() constructor - JavaScript
e.log(e.message) // "null has no properties" console.log(e.name) // "typeerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) // "@scratchpad/2:2:3\n" } creating a typeerror try { throw new typeerror('hello', "somefile.js",
10) } catch (e) { console.log(e instanceof typeerror) // true console.log(e.message) // "hello" console.log(e.name) // "typeerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) //
10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications ...
TypeError - JavaScript
e.log(e.message) // "null has no properties" console.log(e.name) // "typeerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) // "@scratchpad/2:2:3\n" } creating a typeerror try { throw new typeerror('hello', "somefile.js",
10) } catch (e) { console.log(e instanceof typeerror) // true console.log(e.message) // "hello" console.log(e.name) // "typeerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) //
10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications ...
TypedArray.prototype[@@iterator]() - JavaScript
examples iteration using for...of loop var arr = new uint8array([
10, 20, 30, 40, 50]); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of arr) { console.log(n); } alternative iteration var arr = new uint8array([
10, 20, 30, 40, 50]); var earr = arr[symbol.iterator](); 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 ec...
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, 3...
TypedArray.prototype.keys() - JavaScript
examples iteration using for...of loop var arr = new uint8array([
10, 20, 30, 40, 50]); var earray = arr.keys(); // 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.keys(); console.log(earr.next().value); // 0 console.log(earr.next().value); // 1 console.log(earr.next().value); // 2 console.log(earr.next...
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(ea...
TypedArray - JavaScript
-bit two's complement signed integer short int16_t uint16array 0 to 65535 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 4294967295 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.1234567) 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...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int6...
URIError() constructor - JavaScript
console.log(e.message) // "malformed uri sequence" console.log(e.name) // "urierror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) // "@scratchpad/2:2:3\n" } creating an urierror try { throw new urierror('hello', 'somefile.js',
10) } catch (e) { console.log(e instanceof urierror) // true console.log(e.message) // "hello" console.log(e.name) // "urierror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) //
10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications spe...
URIError - JavaScript
console.log(e.message) // "malformed uri sequence" console.log(e.name) // "urierror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) // "@scratchpad/2:2:3\n" } creating an urierror try { throw new urierror('hello', 'somefile.js',
10) } catch (e) { console.log(e instanceof urierror) // true console.log(e.message) // "hello" console.log(e.name) // "urierror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) //
10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scratchpad/2:2:9\n" } specifications spe...
WeakRef - JavaScript
k = () => { // get the element from the weak reference, if it still exists const element = this.ref.deref(); if (element) { element.textcontent = ++this.count; } else { // the element doesn't exist anymore console.log("the element is gone."); this.stop(); this.ref = null; } }; tick(); this.timer = setinterval(tick,
1000); } stop() { if (this.timer) { clearinterval(this.timer); this.timer = 0; } } } const counter = new counter(document.getelementbyid("counter")); counter.start(); settimeout(() => { document.getelementbyid("counter").remove(); }, 5000); specifications specification weakrefsthe definition of 'weakref' in that specification.
WebAssembly.CompileError() constructor - JavaScript
examples creating a new compileerror instance the following snippet creates a new compileerror instance, and logs its details to the console: try { throw new webassembly.compileerror('hello', 'somefile',
10); } catch (e) { console.log(e instanceof compileerror); // true console.log(e.message); // "hello" console.log(e.name); // "compileerror" console.log(e.filename); // "somefile" console.log(e.linenumber); //
10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location whe...
WebAssembly.CompileError - JavaScript
examples creating a new compileerror instance the following snippet creates a new compileerror instance, and logs its details to the console: try { throw new webassembly.compileerror('hello', 'somefile',
10); } catch (e) { console.log(e instanceof compileerror); // true console.log(e.message); // "hello" console.log(e.name); // "compileerror" console.log(e.filename); // "somefile" console.log(e.linenumber); //
10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location whe...
WebAssembly.Global() constructor - JavaScript
69chrome android full support 69firefox android full support 62opera android no support nosafari ios no support nosamsung internet android full support
10.0nodejs no support nolegend full support full support no support no support ...
WebAssembly.LinkError() constructor - JavaScript
examples creating a new linkerror instance the following snippet creates a new linkerror instance, and logs its details to the console: try { throw new webassembly.linkerror('hello', 'somefile',
10); } catch (e) { console.log(e instanceof linkerror); // true console.log(e.message); // "hello" console.log(e.name); // "linkerror" console.log(e.filename); // "somefile" console.log(e.linenumber); //
10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the...
WebAssembly.LinkError - JavaScript
examples creating a new linkerror instance the following snippet creates a new linkerror instance, and logs its details to the console: try { throw new webassembly.linkerror('hello', 'somefile',
10); } catch (e) { console.log(e instanceof linkerror); // true console.log(e.message); // "hello" console.log(e.name); // "linkerror" console.log(e.filename); // "somefile" console.log(e.linenumber); //
10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the...
Logical OR (||) - JavaScript
eturns true o2 = false || true // f || t returns true o3 = true || false // t || f returns true o4 = false || (3 == 4) // f || f returns false o5 = 'cat' || 'dog' // t || t returns "cat" o6 = false || 'cat' // f || t returns "cat" o7 = 'cat' || false // t || f returns "cat" o8 = '' || false // f || f returns false o9 = false || '' // f || f returns "" o
10 = false || varobject // f || object returns varobject note: if you use this operator to provide a default value to some variable, be aware that any falsy value will not be used.
Logical nullish assignment (??=) - JavaScript
y; examples using logical nullish assignment function config(options) { options.duration ??=
100; options.speed ??= 25; return options; } config({ duration: 125 }); // { duration: 125, speed: 25 } config({}); // { duration:
100, speed: 25 } specifications specification logical assignment operatorsthe definition of 'assignment operators' in that specification.
Multiplication assignment (*=) - JavaScript
syntax operator: x *= y meaning: x = x * y examples using multiplication assignment // assuming the following variable // bar = 5 bar *= 2 //
10 bar *= 'foo' // nan specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.
Right shift assignment (>>=) - JavaScript
syntax operator: x >>= y meaning: x = x >> y examples using right shift assignment let a = 5; // (00000000000000000000000000000
101) a >>= 2; // 1 (00000000000000000000000000000001) let b = -5; // (-00000000000000000000000000000
101) b >>= 2; // -2 (-000000000000000000000000000000
10) specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.
Unsigned right shift assignment (>>>=) - JavaScript
syntax operator: x >>>= y meaning: x = x >>> y examples using unsigned right shift assignment let a = 5; // (00000000000000000000000000000
101) a >>>= 2; // 1 (00000000000000000000000000000001) let b = -5; // (-00000000000000000000000000000
101) b >>>= 2; //
1073741822 (001111111111111111111111111111
10) specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.
await - JavaScript
function resolveafter2seconds(x) { return new promise(resolve => { settimeout(() => { resolve(x); }, 2000); }); } async function f1() { var x = await resolveafter2seconds(
10); console.log(x); //
10 } f1(); thenable objects thenable objects will be fulfilled just the same.
this - JavaScript
sion 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.
typeof - JavaScript
using new operator // all constructor functions, with the exception of the function constructor, will always be typeof 'object' let str = new string('string'); let num = new number(
100); typeof str; // it will return 'object' typeof num; // it will return 'object' let func = new function(); typeof func; // it will return 'function' need for parentheses in syntax // parentheses can be used for determining the data type of expressions.
yield - JavaScript
tes as a return value in this syntax [rv] = yield [expression] function* 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); // 15 console.log(generatorfunc.next(
10).value); // 26 specifications specification ecmascript (ecma-262)the definition of 'yield' in that specification.
for await...of - JavaScript
responsesize += chunk.length; } console.log(`response size: ${responsesize} bytes`); // expected output: "response size:
1071472" return responsesize; } getresponsesize('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators.
let - JavaScript
let foo = 2; } the temporal dead zone and typeof unlike with simply undeclared variables and variables that hold a value of undefined, using the 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.
with - JavaScript
var a, x, y; var r =
10; with (math) { a = pi * r * r; x = r * cos(pi); y = r * sin(pi / 2); } specifications specification ecmascript (ecma-262)the definition of 'with statement' in that specification.
Template literals (Template strings) - JavaScript
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 15 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 15 and // not 20." nesting templates in certain cases, nesting a te...
Trailing commas - JavaScript
f(p); f(p,); math.max(
10, 20); math.max(
10, 20,); illegal trailing commas function parameter definitions or function invocations only containing a comma will throw a syntaxerror.
JavaScript typed arrays - JavaScript
-bit two's complement signed integer short int16_t uint16array 0 to 65535 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 4294967295 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.123456) 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...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64...
attributeType - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height:
100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="
100" height="
100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable.
azimuth - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedistantlight> html, body, svg { height:
100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="
100" cy="
100" r="80" style="filter: url(#distantlight1);" /> <circle cx="
100" cy="
100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default ...
by - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height:
100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="
10" y="
10" width="
100" height="
100"> <animate attributename="width" fill="freeze" by="50" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that will...
class - SVG: Scalable Vector Graphics
css" > <![cdata[ rect.rectclass { stroke: #000066; fill: #00cc00; } circle.circleclass { stroke: #006600; fill: #cc0000; } ]]> </style> <rect class="rectclass" x="
10" y="
10" width="
100" height="
100"/> <circle class="circleclass" cx="40" cy="50" r="26"/> </svg> </body> </html> elements the following elements can use the class attribute: <a> <altglyph> <circle> <clippath> <defs> <desc> <ellipse> <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> ...
clip-path - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> html,body,svg { height:
100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a css basic shape on a fill-box geomet...
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="m50,0 21,90 98,35 2,35 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 --> ...
clip - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <svg>, <symbol>, <image>, <foreignobject>, <pattern>, <marker> html,body,svg { height:
100% } <svg viewbox="0 0 20
10" xmlns="http://www.w3.org/2000/svg"> <!-- auto clipping --> <svg x="0" width="
10" height="
10" clip="auto"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="
10" width="
10" height="
10" clip="rect(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> </svg> u...
clipPathUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <clippath> html,body,svg { height:
100% } <svg viewbox="0 0
100
100"> <clippath id="myclip1" clippathunits="userspaceonuse"> <circle cx="50" cy="50" r="35" /> </clippath> <clippath id="myclip2" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".35" /> </clippath> <!-- some reference rect to materialized to clip path --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are clipped with usespaceonuse units -...
color - SVG: Scalable Vector Graphics
usage notes value <color> | inherit default value depends on user agent animatable yes example html, body, svg { height:
100%; } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <g color="green"> <rect width="50" height="50" fill="currentcolor" /> <circle r="25" cx="70" cy="70" stroke="currentcolor" fill="none" stroke-width="5" /> </g> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'color' in that specifi...
diffuseConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fediffuselighting> html, body, svg { height:
100%; } <svg 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" diffuseconstant="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="2"> <fepointlight x="...
direction - SVG: Scalable Vector Graphics
html, body, svg { height:
100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications specification status comment ...
display - SVG: Scalable Vector Graphics
html, body, svg { height:
100%; } <svg viewbox="0 0 220
100" xmlns="http://www.w3.org/2000/svg"> <!-- here the yellow rectangle is displayed --> <rect x="0" y="0" width="
100" height="
100" fill="skyblue"></rect> <rect x="20" y="20" width="60" height="60" fill="yellow"></rect> <!-- here the yellow rectangle is not displayed --> <rect x="120" y="0" width="
100" height="
100" fill="skyblue"></rect> <rect x="140" y="...
divisor - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="
100%" height="
100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="
100%" height="
100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="/...
dominant-baseline - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on the text content elements, including: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height:
100%; } text { font: bold 14px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"> <path d="m20,20 l180,20 m20,50 l180,50 m20,80 l180,80" stroke="grey" /> <text dominant-baseline="baseline" x="30" y="20">baseline</text> <text dominant-baseline="middle" x="30" y="50">middle</text> <text dominant-baseline="hanging" x="30" y="80"...
dur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height:
100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="
100" height="
100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="
100" height="
100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value spec...
elevation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedistantlight> html, body, svg { height:
100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight elevation="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight elevation="45" /> </fediffuselighting> </filter> <circle cx="
100" cy="
100" r="80" style="filter: url(#distantlight1);" /> <circle cx="
100" cy="
100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /...
fill-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:
100% } <svg viewbox="0 0 400
100" xmlns="http://www.w3.org/2000/svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacity as a css property --> <cir...
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="150" cy="50" r="40" fill...
filter - SVG: Scalable Vector Graphics
html, body, svg { height:
100%; } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <fegaussianblur stddeviation="2" /> </filter> <rect x="
10" y="
10" width="80" height="80" filter="url(#blur)" /> </svg> usage notes value none | <filter-function-list> default value none animatable yes for a description of the values see the css filter...
flood-color - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="skyblue" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2...
font-family - 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 viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="arial, helvetica, sans-serif">sans serif</text> <text x="
100" y="20" font-family="monospace">monospace</text> </svg> usage notes value [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | mon...
font-size - 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 viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="
100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-siz...
font-style - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but only has an effect on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height:
100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-style="normal">normal font style</text> <text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal animatable yes for a description of the values, please refer to the css font-style...
font-variant - 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 viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-variant="normal">normal text</text> <text x="
100" y="20" font-variant="small-caps">small-caps text</text> </svg> usage notes value normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name...
from - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height:
100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="
10" y="
10" height="
100"> <animate attributename="width" fill="freeze" from="
100" to="150" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that will...
k1 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="
100%" height="
100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="
100%" height="
100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="
10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0...
k2 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="
100%" height="
100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="
100%" height="
100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="
10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0...
k3 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="
100%" height="
100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="
100%" height="
100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="
10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0...
k4 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="
100%" height="
100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="
100%" height="
100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="
10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x=...
kernelMatrix - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="
100%" height="
100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="
100%" height="
100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_onl...
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 150 125" 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="1
10" kerning="20px">length</text> </svg> usage notes value auto | <length> default value auto animatable yes aut...
keyPoints - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height:
100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="m
10,1
10 a120,120 -45 0,1 1
10 10 a120,120 -45 0,1
10,1
10" stroke="lightgrey" stroke-width="2" fill="none" id="motionpath"/> <circle cx="
10" cy="1
10" r="3" fill="lightgrey"/> <circle cx="1
10" cy="
10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemotion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calcmode="linear"> <mpath xlink:href="#motionpath"/> </animatemotion> </circle...
keyTimes - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height:
100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="
10" r="
10"> <animate attributename="cx" dur="4s" repeatcount="indefinite" values="60 ; 1
10 ; 60 ;
10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" repeatcount="indefinite" values="
10 ; 60 ; 1
10 ; 60 ;
10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <...
lang - SVG: Scalable Vector Graphics
<svg viewbox="0 0 200
100" xmlns="http://www.w3.org/2000/svg"> <text lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none animatable no <language-tag> this value specifies the language used for the element.
letter-spacing - 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 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-s...
lighting-color - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height:
100%; } <svg 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" lighting-color="white"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic" lighting-color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselig...
marker-mid - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height:
100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="circle" markerwidth="8" markerheight="8" refx="4" refy="4"> <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,
100 40,60 70,80
100,20" marker-mid="url(#circle)"/> </svg> usage notes value none ...
mask - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0 200
100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask" maskcontentunits="objectboundingbox"> <rect fill="white" x="0" y="0" width="
100%" height="
100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attri...
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="35" /> </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=".35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" />...
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="35" /> </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="35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" ...
max - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height:
100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="
10" r="
10"> <animate attributename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 1
10 ; 60 ;
10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="
10 ; 60 ; 1
10 ; 60 ;
10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifi...
media - SVG: Scalable Vector Graphics
only one element is using this attribute: <style> html, body, svg { height:
100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied.
min - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height:
100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="
10" r="
10"> <animate attributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 1
10 ; 60 ;
10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="
10 ; 60 ; 1
10 ; 60 ;
10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies ...
mode - SVG: Scalable Vector Graphics
only one element is using this attribute: <feblend> html, body, svg { height:
100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" x="0" y="0" width="
100%" height="
100%"> <feflood result="floodfill" x="0" y="0" width="
100%" height="
100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="
100%" height="
100%"> <feflood result="floodfill" x="0" y="0" width="
100%" height="
100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//develop...
onclick - SVG: Scalable Vector Graphics
<animate>, <animatemotion>, <animatetransform>, <circle>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height:
100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="
100" cy="
100" r="
100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none animatable no specifications specification status comment scalable vector graphics (svg) 2the def...
opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height:
100%; } <svg viewbox="0 0 200
100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="
100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="
100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="
100%" height="
100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="40" fi...
operator - SVG: Scalable Vector Graphics
two elements are using this attribute: <fecomposite> and <femorphology> html, body, svg { height:
100%; font: 20px arial, helvetica, sans-serif; } <svg viewbox="0 0 120 70" xmlns="http://www.w3.org/2000/svg"> <filter id="erode"> <femorphology operator="erode" radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be perf...
order - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="emboss1" x="0" y="0" width="
100%" height="
100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="
100%" height="
100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#e...
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="-65deg"> <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)" /> ...
overflow - 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: <foreignobject>, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <text> html, body, svg { height:
100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <text y="20">this text is wider than the svg, so there should be a scrollbar shown.</text> </svg> usage notes value visible | hidden | scroll | auto default value visible animatable yes for a description of the values, please see the css overflow property.
panose-1 - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <integer>{
10} default value 0 0 0 0 0 0 0 0 0 0 animatable no <integer>{
10} this value specifies a panose-1 number and consists of ten decimal integers, separated by whitespace.
path - SVG: Scalable Vector Graphics
two elements are using this attribute: <animatemotion> and <textpath> html, body, svg { height:
100%; } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <path id="mypath" fill="none" stroke="silver" d="m
10,90 q90,90 90,45 q90,
10 50,
10 q
10,
10 10,40 q
10,70 45,70 q70,70 75,50" /> <text> <textpath path="m
10,90 q90,90 90,45 q90,
10 50,
10 q
10,
10 10,40 q
10,70 45,70 q70,70 75,50"> quick brown fox jumps over the lazy dog.
patternTransform - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:
100% } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="
10" cy="
10" r="
10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="
10" y="
10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.
pointsAtX - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="2...
pointsAtY - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="2...
preserveAlpha - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="
100%" height="
100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="
100%" height="
100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/...
repeatCount - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height:
100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="
100" height="
100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="5"/> </rect> <rect x="120" y="0" width="
100" height="
100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none animatable no <number> this value specifies the nu...
repeatDur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height:
100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="
100" height="
100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="
100" height="
100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none animatable no <clock-value> this value specifies t...
restart - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height:
100%; } a { fill: blue; text-decoration: underline; cursor: pointer; } <svg viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="
100" height="
100"> <animate attributetype="xml" attributename="y" from="30" to="
100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="
100" height="
100"> <animate attributetype="xml" attributename="y" from="30" to="
100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.
result - SVG: Scalable Vector Graphics
seventeen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height:
100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" 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: ...
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="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </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="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape.
shape-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="
100" cy="
100" r="
100" shape-rendering="geometricprecision"/> <circle cx="320" cy="
100" r="
100" shape-rendering="crispedges"/> </svg> usage notes value auto | optimizespeed | crispedges | geometricprecision default value auto animatable yes auto this value indica...
side - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> html, body, svg { height:
100%; } text { font: 25px 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 ...
specularConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespecularlighting> html, body, svg { height:
100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="specularlighting1" x="0" y="0" width="
100%" height="
100%"> <fespecularlighting in="sourcegraphic" specularconstant="1.2"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="specularlighting2" x="0" y="0" width="
100%" height="
100%"> <fespecularlighting in="sourcegraphic" specularconstant="0.8"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </f...
specularExponent - SVG: Scalable Vector Graphics
two elements are using this attribute: <fespecularlighting> and <fespotlight> html, body, svg { height:
100%; } <svg viewbox="0 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: ur...
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: ...
stroke-dasharray - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <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" strok...
stroke-dashoffset - 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="-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-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="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" /> <!
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="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage 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 ...
style - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0
100 60" xmlns="http://www.w3.org/2000/svg"> <rect width="80" height="40" x="
10" y="
10" style="fill: skyblue; stroke: cadetblue; stroke-width: 2;"/> </svg> usage notes value <style> default value none animatable no <style> the syntax of style data depends on the style sheet language.
surfaceScale - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height:
100%; } <svg 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="15"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> ...
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="15" 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.
text-decoration - SVG: Scalable Vector Graphics
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 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value see individual properties ...
text-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following element: <text> html, body, svg { height:
100%; } <svg viewbox="0 0 140 40" xmlns="http://www.w3.org/2000/svg"> <text y="15" text-rendering="geometricprecision">geometric precision</text> <text y="35" text-rendering="optimizelegibility">optimized legibility</text> </svg> usage notes value auto | optimizespeed | optimizelegibility | geometricprecision default value auto animatable yes a...
to - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height:
100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="
10" y="
10" width="
100" height="
100"> <animate attributetype="xml" attributename="width" fill="freeze" from="
100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation.
unicode - SVG: Scalable Vector Graphics
for example, unicode="ffl" could be expressed as xml character references in hexadecimal notation as unicode="ffl" or in decimal notation as unicode="&#
102;&#
102;&#
108;".
units-per-em - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value
1000 animatable no <number> this value indicates the the number of coordinate units on the em square.
values - SVG: Scalable Vector Graphics
if type="matrix", identity matrix, if type="saturate", 1, resulting in identity matrix, if type="huerotate", 0, resulting in identity matrix animatable yes <list-of-numbers> the value is a list of numbers, which is interpreted differently depending on the value of the type attribute: for type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a
10 a11 ...
vector-effect - SVG: Scalable Vector Graphics
example example: vector-effect="non-scaling-stroke" <svg viewbox="0 0 500 240"> <!-- normal --> <path d="m
10,20l40,
100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- scaled --> <path transform="translate(
100,0)scale(4,1)" d="m
10,20l40,
100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- fixed--> <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="m
10,20l40,
100l39,200z" stroke="black" stroke-width="2px" fill="non...
version - SVG: Scalable Vector Graphics
<svg version="1.1" viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <rect x="
10" y="
10" width="80" height="80"/> </svg> usage notes value <number> default value none animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'version' in that specification.
widths - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no <number> this value is a comma-separated list of ucs range values as defined in iso
10646, each followed by one or more glyph widths.
word-spacing - SVG: Scalable Vector Graphics
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 250 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...
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height:
100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="
10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object.
xml:lang - SVG: Scalable Vector Graphics
<svg viewbox="0 0 200
100" xmlns="http://www.w3.org/2000/svg"> <text xml:lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none animatable no <language-tag> this value specifies the language used for the element.
xml:space - SVG: Scalable Vector Graphics
html, body, svg { height:
100%; } <svg viewbox="0 0 140 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" xml:space="default">default spacing</text> <text y="40" xml:space="preserve">preserved spacing</text> </svg> usage notes value default | preserve default value default animatable no default with this value set, whitespace characters will be processed in this...
z - SVG: Scalable Vector Graphics
two elements are using this attribute: <fepointlight> and <fespotlight> html, body, svg { height:
100%; } <svg 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"> <fepointlight x="60" y="60" z="
10" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic"> <fepointligh...
zoomAndPan - SVG: Scalable Vector Graphics
two elements are using this attribute: <svg> and <view> html, body, svg { height:
100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" zoomandpan="disable"> <filter id="diffuselighting" x="0" y="0" width="
100%" height="
100%"> <fediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting);" /> </svg> ...
Compatibility sources - SVG: Scalable Vector Graphics
attributes: https://developer.mozilla.org/en/svg_in_firefox together with its revision history for firefox http://www.webkit.org/projects/svg/status.xml together with its recorded archive for webkit, safari and chrome http://www.opera.com/docs/specs/opera9/svg/ and accompanying pages for opera >= 9, http://www.opera.com/docs/specs/opera8/ for opera 8 http://blogs.msdn.com/b/ie/archive/20
10/03/18/svg-in-ie9-roadmap.aspx for hints on ie9 support status the svg support charts at codedread.com for basic checks against the w3c test suite wikipedia for basic hints, not normative ...
<a> - SVG: Scalable Vector Graphics
@namespace svg url(http://www.w3.org/2000/svg); html,body,svg { height:
100% } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> <circle> </text> </a> </svg> /* as svg does not provide a default visual style for links, it's con...
<animate> - SVG: Scalable Vector Graphics
html,body,svg { height:
100%; margin:0; padding:0; } <svg viewbox="0 0
10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="
10" height="
10"> <animate attributename="rx" values="0;5;0" dur="
10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style even...
<animateMotion> - SVG: Scalable Vector Graphics
html,body,svg { height:
100%; margin: 0; padding: 0; display:block; } <svg viewbox="0 0 200
100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="lightgrey" d="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> <circle r="5" fill="red"> <animatemotion dur="
10s" repeatcount="indefinite" path="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> </circle> </svg> usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<mpath> attributes ...
<animateTransform> - SVG: Scalable Vector Graphics
nts example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="
10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute target attributes » animation timing attributes » animation value attributes » animation addition attributes » externalresourcesrequire...
<circle> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle.
<defs> - 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"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> <...
<desc> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0
10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <desc> i'm a circle and that description is here to demonstrate how i can be described, but is it really necessary to describe a simple circle like me?
<ellipse> - SVG: Scalable Vector Graphics
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.
<feBlend> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="
100%" height="
100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="
10%" y="
10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status c...
<feDisplacementMap> - SVG: Scalable Vector Graphics
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.05" 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 '<fedisplacementmap>' in that specification.
<feDropShadow> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0 30
10" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="shadow"> <fedropshadow dx="0.2" dy="0.4" stddeviation="0.2"/> </filter> <filter id="shadow2"> <fedropshadow dx="0" dy="0" stddeviation="0.5" flood-color="cyan"/> </filter> <filter id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviation="0" flood-color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#...
<feFlood> - SVG: Scalable Vector Graphics
example html content <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="
100" height="
100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter: url(#floodfilter);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feflood>' in that specification.
<feImage> - SVG: Scalable Vector Graphics
example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="
10%" y="
10%" width="80%" height="80%" style="filter:url(#image);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feimage>' in that specification.
<feMerge> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<femergenode> example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="feoffset" x="-40" y="-20" width="
100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="
100" height="
100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> </svg> result attributes global attri...
<feOffset> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="
100" height="
100" stroke="black" fill="green"/> <rect x="0" y="0" width="
100" height="
100" stroke="black" fill="green" filter="url(#offset)"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feoffset>' in that specification.
<fePointLight> - SVG: Scalable Vector Graphics
<fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="
10%" y="
10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fepointlight>' in that specification.
<feSpecularLighting> - SVG: Scalable Vector Graphics
th="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id = "filter"> <fespecularlighting result="specout" specularexponent="20" lighting-color="#bbbbbb"> <fepointlight x="50" y="75" z="200"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circle cx="1
10" cy="1
10" r="
100" style="filter:url(#filter)"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fespecularlighting>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
lighting result="spotlight" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="
10%" y="
10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fespotlight>' in that specification.
<feTile> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="
100%" height="
100%"> <fetile in="sourcegraphic" x="50" y="50" width="
100" height="
100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="
10%" y="
10%" width="80%" height="80%" style="filter:url(#tile);"/> </svg> result specifications specification status comment filter effects module le...
<feTurbulence> - SVG: Scalable Vector Graphics
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.05" 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 '<feturbulence>' in that specification.
<foreignObject> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> div { color: white; font: 18px serif; height:
100%; overflow: auto; } </style> <polygon points="5,5 195,
10 185,185
10,195" /> <!-- common use case: embed html text into svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the context of svg embedded in an html document, the xhtml namespace could be omitted, but it is mandatory in the context of an svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipisci...
<g> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <!-- using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextens...
<hatch> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="
10%" y="
10%" width="80%" height="80%" /> </svg> result ...
<hatchpath> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="
10%" y="
10%" width="80%" height="80%" /> </svg> result ...
<line> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="
100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point.
<path> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0
100
100" xmlns="http://www.w3.org/2000/svg"> <path 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> attributes d this attribute defines the shape of the path.
<pattern> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0 230
100" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="star" viewbox="0,0,
10,
10" width="
10%" height="
10%"> <polygon points="0,0 2,5 0,
10 5,8
10,
10 8,5
10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile.
<polygon> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0 200
100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polygon with the default fill --> <polygon points="0,
100 50,25 50,75
100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="
100,
100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
<polyline> - SVG: Scalable Vector Graphics
html,body,svg { height:
100% } <svg viewbox="0 0 200
100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polyline with the default fill --> <polyline points="0,
100 50,25 50,75
100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="
100,
100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; defau...