Search completed in 0.91 seconds.
Self-hosted builtins in SpiderMonkey
since firefox 17, spidermonkey has the ability to self
-host built-in functions in javascript.
... differences from normal javascript all self
-hosted code is strict, so self
-hosted functions invoked in a null or undefined scope won't be run in the scope of the global object.
... self
-hosted code has access to some functionality that's not available to normal js code.
...And 14 more matches
max-height - CSS: Cascading Style Sheets
the max
-height css property sets the maximum height of an element.
... it prevents the used value of the height property from becoming larger than the value specified for max
-height.
... max
-height overrides height, but min
-height overrides max
-height.
...And 13 more matches
line-height - CSS: Cascading Style Sheets
the line
-height css property sets the height of a line box.
... syntax /* keyword value */ line
-height: normal; /* unitless values: use this number multiplied by the element's font size */ line
-height: 3.5; /* <length> values */ line
-height: 3em; /* <percentage> values */ line
-height: 34%; /* global values */ line
-height: inherit; line
-height: initial; line
-height: unset; the line
-height property is specified as any one of the following: a <number> a <length> a <percentage> the ke...
...in most cases, this is the preferred way to set line
-height and avoid unexpected results due to inheritance.
...And 10 more matches
Using the aria-hidden attribute - Accessibility
this technique demonstrates how to use the aria
-hidden attribute.
... the aria
-hidden attribute can either expose or hide non-interactive content from the accessibility api.
... description adding aria
-hidden="true" to an element removes that element and all of its children from the accessibility tree.
...And 8 more matches
min-height - CSS: Cascading Style Sheets
the min
-height css property sets the minimum height of an element.
... it prevents the used value of the height property from becoming smaller than the value specified for min
-height.
... the element's height is set to the value of min
-height whenever min
-height is larger than max
-height or height.
...And 8 more matches
Access-Control-Allow-Headers - HTTP
the access-control-allow
-headers response header is used in response to a preflight request which includes the access-control-request
-headers to indicate which http headers can be used during the actual request.
... this header is required if the request has an access-control-request
-headers header.
... header type response header forbidden header name no syntax access-control-allow
-headers: <header-name>[, <header-name>]* access-control-allow
-headers: * directives <header-name> the name of a supported request header.
...And 7 more matches
-ms-high-contrast - CSS: Cascading Style Sheets
the -ms
-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.
... syntax the -ms
-high-contrast media feature is specified as one of the following values.
... @media screen and (-ms
-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms
-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms
-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system...
...And 3 more matches
Access-Control-Expose-Headers - HTTP
the access-control-expose
-headers response header indicates which headers can be exposed as part of the response by listing their names.
... by default, only the 7 cors-safelisted response headers are exposed: cache-control content-language content-length content-type expires last-modified pragma if you want clients to be able to access other headers, you have to list them using the access-control-expose
-headers header.
... header type response header forbidden header name no syntax access-control-expose
-headers: <header-name>, <header-name>, ...
...And 3 more matches
device-height - CSS: Cascading Style Sheets
the device
-height css media feature can be used to test the height of an output device's rendering surface.
... syntax the device
-height feature is specified as a <length> value.
... it is a range feature, meaning that you can also use the prefixed min-device
-height and max-device
-height variants to query minimum and maximum values, respectively.
...And 2 more matches
Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ - HTTP
reason reason: invalid token ‘xyz’ in cors header ‘access-control-allow
-headers’ what went wrong?
... the response to the cors request that was sent by the server includes an access-control-allow
-headers header which includes at least one invalid header name.
... the access-control-allow
-headers header is sent by the server in response to a preflight request; it lets the client know which http headers are permitted in cors requests.
... this is a problem that most likely can only be fixed on the server side, by modifying the server's configuration to no longer send the invalid or unknown header name with the access-control-allow
-headers header.
Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel - HTTP
reason reason: missing token ‘xyz’ in cors header ‘access-control-allow
-headers’ from cors preflight channel what went wrong?
... the access-control-allow
-headers header is sent by the server to let the client know which headers it supports for cors requests.
... the value of access-control-allow
-headers should be a comma-delineated list of header names, such as "x-custom-information" or any of the standard but non-basic header names (which are always allowed).
... this error occurs when attempting to preflight a header that is not expressly allowed (that is, it's not included in the list specified by the access-control-allow
-headers header sent by the server).
X-Forwarded-Host - HTTP
the x-forwarded
-host (xfh) header is a de-facto standard header for identifying the original host requested by the client in the host http request header.
... host names and ports of reverse proxies (load balancers, cdns) may differ from the origin server handling the request, in that case the x-forwarded
-host header is useful to determine which host was originally used.
... header type request header forbidden header name no syntax x-forwarded
-host: <host> directives <host> the domain name of the forwarded server.
... examples x-forwarded
-host: id42.example-cdn.com specifications not part of any current specification.
glyph-orientation-horizontal - SVG: Scalable Vector Graphics
the glyph-orientation
-horizontal attribute affects the amount that hte current text position advances as each glyph is rendered.
... when the reference orientation direction is horizontal and the glyph-orientation
-horizontal results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.
... note: as a presentation attribute, glyph-orientation
-horizontal can be used as a css property.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'glyph-orientation
-horizontal' in that specification.
Plug-n-Hack Phase1 - Archive of obsolete content
plug-n
-hack (pnh) phase 1 allows easier integration and defines how security tools can advertise their capabilities to browsers.
...for testing); plug-n
-hack requires tool and service manifests to be served from the same origin as the api endpoints but, for testing purposes, ringleader (the firefox addon implementation of the browser component) allows you to set a preference to relax or disable origin checks.
... related links plug-n
-hack overview ...
-ms-scrollbar-highlight-color - Archive of obsolete content
the -ms-scrollbar
-highlight-color css property is a microsoft extension that specifies the color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar
-highlight-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <div> objects with different scroll bar color schemes.
... div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar
-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar
-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
any-hover - CSS: Cascading Style Sheets
the any
-hover css media feature can be used to test whether any available input mechanism can hover over elements.
... syntax the any
-hover feature is specified as a keyword value chosen from the list below.
... examples testing whether input methods can hover html <a href="#">try hovering over me!</a> css @media (any
-hover: hover) { a:hover { background: yellow; } } result specifications specification status comment media queries level 4the definition of 'any
-hover' in that specification.
max-height - CSS: Cascading Style Sheets
the max
-height css descriptor specifies the maximum height of the viewport of a document defined via the @viewport at-rule.
... syntax /* keyword value */ max
-height: auto; /* <length> values */ max
-height: 400px; max
-height: 50em; max
-height: 20cm; /* <percentage> value */ max
-height: 75%; values auto the used value is calculated from the other css descriptors' values.
...percentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in pixels @viewport { max
-height: 600px; } specifications specification status comment css device adaptationthe definition of '"max
-height" descriptor' in that specification.
min-height - CSS: Cascading Style Sheets
the min
-height css descriptor specifies the minimum height of the viewport of a document defined via the @viewport at-rule.
... syntax /* keyword value */ min
-height: auto; /* <length> values */ min
-height: 120px; min
-height: 20em; min
-height: 10cm; /* <percentage> value */ min
-height: 25%; values auto the used value is calculated from the other css descriptors' values.
...percentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in pixels @viewport { min
-height: 200px; } specifications specification status comment css device adaptationthe definition of '"min
-height" descriptor' in that specification.
line-height-step - CSS: Cascading Style Sheets
the line
-height-step css property sets the step unit for line box heights.
... /* point values */ line
-height-step: 18pt; syntax the line
-height-step property is specified as any one of the following: a <length>.
... :root { font-size: 12pt; --my-grid: 18pt; line
-height-step: var(--my-grid); } h1 { font-size: 20pt; margin-top: calc(2 * var(--my-grid)); } the result of these rules is shown below in the following screenshot: specifications specification status comment css rhythmic sizingthe definition of 'line
-height-step' in that specification.
Access-Control-Request-Headers - HTTP
the access-control-request
-headers request header is used by browsers when issuing a preflight request, to let the server know which http headers the client might send when the actual request is made.
... header type request header forbidden header name yes syntax access-control-request
-headers: <header-name>, <header-name>, ...
... examples access-control-request
-headers: x-pingother, content-type specifications specification status comment fetchthe definition of 'access-control-request
-headers' in that specification.
ReferenceError: invalid assignment left-hand side - JavaScript
the javascript exception "invalid assignment left
-hand side" occurs when there was an unexpected assignment somewhere.
... message referenceerror: invalid assignment left
-hand side error type referenceerror.
... examples typical invalid assignments if (math.pi = 3 || math.pi = 4) { console.log('no way!'); } // referenceerror: invalid assignment left
-hand side var str = 'hello, ' += 'is it me ' += 'you\'re looking for?'; // referenceerror: invalid assignment left
-hand side in the if statement, you want to use a comparison operator ("=="), and for the string concatenation, the plus ("+") operator is needed.
accent-height - SVG: Scalable Vector Graphics
the accent
-height attribute defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system.
... only one element is using this attribute: <font-face> font-face for <font-face>, accent
-height defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system.
... value <number> default value value of ascent animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'accent
-height' in that specification.
cap-height - SVG: Scalable Vector Graphics
the cap
-height attribute defines the height of uppercase glyphs of the font within the font coordinate system.
... note: it was specified to share the syntax and semantics of the obsolete cap
-height descriptor of the @font-face at-rule defined in an early version of css 2.
... only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'cap
-height' in that specification.
Plug-n-Hack - Archive of obsolete content
overview plug-n
-hack (pnh) is a proposed standard from the mozilla security team for defining how security tools can interact with browsers in a more useful and usable way.
...plug-n
-hack topics phase 1 this provides simplified integration and allows tools to advertize their capabilities to browsers phase 2 this will allow browsers to advertize their capabilities to security tools tools supporting pnh the browsers and tools known to support or be working on support for pnh get involved how to implement pnh in your tool or...
-ms-high-contrast-adjust - Archive of obsolete content
the -ms
-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.
... remarks the -ms
-high-contrast-adjust property works with the -ms
-high-contrast media feature.
-ms-hyphenate-limit-zone - Archive of obsolete content
the -ms
-hyphenate-limit-zone css property is a microsoft extension specifying the width of the hyphenation zone.
... remarks the -ms
-hyphenate-limit-zone property enables you to control the amount of trailing whitespace permitted during hyphenation.
-webkit-tap-highlight-color - CSS: Cascading Style Sheets
-webkit-tap
-highlight-color is a non-standard css property that sets the color of the highlight that appears over a link while it's being tapped.
... -webkit-tap
-highlight-color: red; -webkit-tap
-highlight-color: transparent; /* for removing the highlight */ syntax values a <color value>.
:-moz-handler-blocked - CSS: Cascading Style Sheets
the :-moz
-handler-blocked css pseudo-class is a mozilla extension that matches elements that can't be displayed because their handlers have been blocked.
... syntax :-moz
-handler-blocked specifications not part of any standard.
:-moz-handler-crashed - CSS: Cascading Style Sheets
the :-moz
-handler-crashed css pseudo-class is a mozilla extension that matches elements that can't be displayed because the plugin responsible for drawing them has crashed.
... syntax :-moz
-handler-crashed specifications not part of any standard.
:-moz-handler-disabled - CSS: Cascading Style Sheets
the :-moz
-handler-disabled css pseudo-class is a mozilla extension that matches elements that can't be displayed because their handlers have been disabled by the user.
... syntax :-moz
-handler-disabled specifications not part of any standard.
v-hanging - SVG: Scalable Vector Graphics
the v
-hanging attribute indicates the alignment coordinate for glyphs to achieve hanging baseline alignment.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v
-hanging' in that specification.
x-height - SVG: Scalable Vector Graphics
the x
-height attribute indicates the height of lowercase glyphs in the font within the font coordinate system.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'x
-height' in that specification.
Index
once the key agreement is done, a symmetric encryption will be used (until a potential re
-handshake on an existing channel).
...
-h num generate email headers with info about cms message (decode only).
...." -e envfile decode example cmsutil -d [-i infile] [-o outfile] [-d dbdir] [-p password] [-c content] [-n] [
-h num] envelope example cmsutil -e [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, ..." certificate-only example cmsutil -o [-i infile] [-o outfile] [-d dbdir] [-p password] -r "cert1,cert2, .
...And 33 more matches
Border-image generator - CSS: Cascading Style Sheets
</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-slider" data-topic="preview-area
-height" data-min="400" data-max="1000"> </div> </div> </div> <div id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <div class=...
... </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview
-height" data-info="height" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> </div> </div> </div> <div id="output" class="category"> <div class="title"> css code </div> <div class="css-property"> <span class="name"> border-image-slice: </span> ...
...================================== */ .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 { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line
-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; curso...
...And 18 more matches
Border-radius generator - CSS: Cascading Style Sheets
id="radius-ui-sliders"> <div id="tlr" class="ui-input-slider" data-topic="top-left" data-unit=" px" data-sensivity="2"></div> <div id="tlw" class="ui-input-slider" data-topic="top-left-w" data-unit=" px" data-sensivity="2"></div> <div id="tlh" class="ui-input-slider" data-topic="top-left
-h" data-unit=" px" data-sensivity="2"></div> <div id="trr" class="ui-input-slider" data-topic="top-right" data-unit=" px" data-sensivity="2"></div> <div id="trw" class="ui-input-slider" data-topic="top-right-w" data-unit=" px" data-sensivity="2"></div> <div id="tr...
...h" class="ui-input-slider" data-topic="top-right
-h" data-unit=" px" data-sensivity="2"></div> <div id="brr" class="ui-input-slider" data-topic="bottom-right" data-unit=" px" data-sensivity="2"></div> <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" data-unit=" px" data-sensivity="2"></div> <div id="brh" class="ui-input-slider" data-topic="bottom-right
-h" data-unit=" px" data-sensivity="2"></div> <div id="blr" class="ui-input-slider" data-topic="bottom-left" data-unit=" px" data-sensivity="2"></div> <div id="blw" class="ui-input-slider" data-topic="bot...
...tom-left-w" data-unit=" px" data-sensivity="2"></div> <div id="blh" class="ui-input-slider" data-topic="bottom-left
-h" data-unit=" px" data-sensivity="2"></div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="group section"> <div id="dimensions"> <div class="ui-input-slider" data-topic="width" data-info="width" data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> </div> <di...
...And 15 more matches
Color picker tool - CSS: Cascading Style Sheets
r: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line
-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: ...
...id #ddd; background-color: #eee; left: -12px; top: -1px; z-index: 1; transition: all 0.5s; } .ui-color-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line
-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; curso...
...rows.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; } /* * color picker tool */ body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; box-shadow: 0 0 5px 0 #999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webk...
...And 13 more matches
Index - Archive of obsolete content
the "document - dom nodes" pane on the left
-hand side of the inspector window displays a tree representation of the browser window's xul file.
...thus de
-hydra can be thought of as a decapitating tool for slaying cfgs.
... 600 plug-n
-hack security, plugnhack plug-n
-hack (pnh) is a proposed standard from the mozilla security team for defining how security tools can interact with browsers in a more useful and usable way.
...And 12 more matches
Starting our Svelte Todo list app - Learn web development
</label> </h2> <input type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled="" class="btn btn__primary btn__lg"> add </button> </form> <!-- filter --> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <span class="visually
-hidden">show</span> <span>all</span> <span class="visually
-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually
-hidden">show</span> <span>active</span> <span class="visually
-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually
-hidden">show</sp...
...an> <span>completed</span> <span class="visually
-hidden">tasks</span> </button> </div> <!-- todosstatus --> <h2 id="list
-heading">2 out of 3 items completed</h2> <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list
-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <div class="stack-small"> <form class="stack-small"> <div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' </label> <input type="text" id="todo-1" autocomplete="off" class="todo-text" /> </div> <div class="btn-group"> <button class="btn todo-cancel" type="button"> cancel <...
...span class="visually
-hidden">renaming create a svelte starter app</span> </button> <button class="btn btn__primary todo-edit" type="submit"> save <span class="visually
-hidden">new name for create a svelte starter app</span> </button> </div> </form> </div> </li> <!-- todo-2 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-2" checked/> <label for="todo-2" class="todo-label"> create your first component </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually
-hidden">create your first component</sp...
...And 12 more matches
certutil
run the command option and
-h to see the arguments available for each command option.
...you can display the public key with the command certutil -k
-h tokenname.
...
-h display a list of the options and arguments used by the certificate database tool.
...And 12 more matches
NSS tools : certutil
the command option
-h will list all the command options available and their relevant arguments.
...you can display the public key with the command certutil -k
-h tokenname.
...
-h display a list of the options and arguments used by the certificate database tool.
...And 11 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
at meets all the following conditions: one of the allowed methods: get head post apart from the headers automatically set by the user agent (for example, connection, user-agent, or the other headers defined in the fetch spec as a “forbidden header name”), the only headers which are allowed to be manually set are those which the fetch spec defines as a “cors-safelisted request
-header”, which are: accept accept-language content-language content-type (but note the additional requirements below) dpr downlink save-data viewport-width width the only allowed values for the content-type header are: application/x-www-form-urlencoded multipart/form-data text/plain no event listeners are registered on any xmlhttprequestupload object used in ...
... the following is an example of a request that will be preflighted: const xhr = new xmlhttprequest(); xhr.open('post', 'https://bar.other/resources/post
-here/'); xhr.setrequestheader('x-pingother', 'pingpong'); xhr.setrequestheader('content-type', 'application/xml'); xhr.onreadystatechange = handler; xhr.send('<person><name>arun</name></person>'); the example above creates an xml body to send with the post request.
...light request/response: options /doc http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:71.0) gecko/20100101 firefox/71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: http://foo.example access-control-request-method: post access-control-request
-headers: x-pingother, content-type http/1.1 204 no content date: mon, 01 dec 2008 01:15:39 gmt server: apache/2 access-control-allow-origin: https://foo.example access-control-allow-methods: post, get, options access-control-allow
-headers: x-pingother, content-type access-control-max-age: 86400 vary: accept-encoding, origin keep-alive: timeout=2, max=100 connection: keep-alive once the prefligh...
...And 11 more matches
Beginning our React todo list - Learn web development
ew-todo-input" classname="input input__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> <div classname="filters btn-group stack-exception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually
-hidden">show </span> <span>all</span> <span classname="visually
-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually
-hidden">show </span> <span>active</span> <span classname="visually
-hidden"> tasks</span> </button> <button type="button" class...
...name="btn toggle-btn" aria-pressed="false"> <span classname="visually
-hidden">show </span> <span>completed</span> <span classname="visually
-hidden"> tasks</span> </button> </div> <h2 id="list
-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list
-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span ...
...classname="visually
-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually
-hidden">eat</span> </button> </div> </li> <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-1" type="checkbox" /> <label classname="todo-label" htmlfor="todo-1"> sleep </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually
-hidden">sleep</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually
-hidden">sleep</span> ...
...And 10 more matches
Box-shadow generator - CSS: Cascading Style Sheets
============================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line
-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; bo...
...tn-set:hover { background-color: #379b4a; cursor: pointer; } .ui-slider-input > input { margin: 0 10px; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line
-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line
-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-pos...
...-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .container { height: 100%; width: 100%; position: absolute; left: 100%; transition-property: left; transition-duration: 0.5s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .title { text-align: center; font-weight: bold; line
-height: 2em; border-bottom: 1px solid #43a6e1; color: #666; } /* * stack of layers for shadow */ #layer_manager { width: 17%; background-color: #fefefe; margin: 0 1% 0 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } #layer_manager .button { width: 30%; height: 25px; margin:0 0 10px; color: #333; background-color: #eee; te...
...And 10 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
r: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line
-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: ...
...none; user-select: none; } .ui-input-slider * { float: left; height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; line
-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("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; backgrou...
...nd-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 slider */ .ui-slider { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-slider > * { float: left; height: 100%; line
-height: 100%; } /* slider */ .ui-slider-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 12px; height:...
...And 8 more matches
font - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: font-family font-size font-stretch font-style font-variant font-weight line
-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.
... if font is specified as a shorthand for several font-related properties, then: it must include values for: <font-size> <font-family> it may optionally include values for: <font-style> <font-variant> <font-weight> <font-stretch> <line
-height> font-style, font-variant and font-weight must precede font-size font-variant may only specify the values defined in css 2.1, that is normal and small-caps font-stretch may only be a single keyword value.
... line
-height must immediately follow font-size, preceded by "/", like this: "16px/3" font-family must be the last value specified.
...And 8 more matches
Bytecode Descriptions
self
-hosted code uses it by calling the intrinsic hasown(id, obj).
...otherwise, the caller is self
-hosted code using resumegenerator.) in async generators: ...
...this instruction is emitted only for the resumegenerator self
-hosting intrinsic.
...And 7 more matches
HTTP Index - HTTP
34 reason: invalid token ‘xyz’ in cors header ‘access-control-allow
-headers’ cors, corsinvalidallowheader, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting the response to the cors request that was sent by the server includes an access-control-allow
-headers header which includes at least one invalid header name.
... 36 reason: missing token ‘xyz’ in cors header ‘access-control-allow
-headers’ from cors preflight channel cors, corsmissingallowheaderfrompreflight, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting the access-control-allow
-headers header is sent by the server to let the client know which headers it supports for cors requests.
... the value of access-control-allow
-headers should be a comma-delineated list of header names, such as "x-custom-information" or any of the standard but non-basic header names (which are always allowed).
...And 7 more matches
Componentizing our Svelte app - Learn web development
add the following content into the file: <script> export let filter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually
-hidden">show</span> <span>all</span> <span class="visually
-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={()=> filter = 'active'} > <span class="visually
-hidden">show</span> <span>active</span> <span class="visually
-hidden">tasks</span> </button> <button class="btn toggle...
...-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={()=> filter = 'completed'} > <span class="visually
-hidden">show</span> <span>completed</span> <span class="visually
-hidden">tasks</span> </button> </div> back in our todos.svelte component, we want to make use of our filterbutton component.
...ript> export let todo </script> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" on:click={() => todo.completed = !todo.completed} checked={todo.completed} /> <label for="todo-{todo.id}" class="todo-label">{todo.name}</label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually
-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger" on:click={() => alert('not implemented')}> delete <span class="visually
-hidden">{todo.name}</span> </button> </div> </div> now we need to import our todo component into todos.svelte.
...And 6 more matches
NSS Tools certutil
to see a usage string, issue the command without options, or with the
-h option.
...you can display the public key with the command certutil -k
-htokenname .
... use the
-htokenname argument to specify the certificate database on a particular hardware or software token.
...And 6 more matches
Places Developer Guide
var history = cc["@mozilla.org/browser/nav
-history-service;1"] .getservice(ci.nsinavhistoryservice); var query = history.getnewquery(); query.setfolders([myfolderid], 1); var result = history.executequery(query, history.getnewqueryoptions()); // the root property of a query result is an object representing the folder you specified above.
...var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var history = cc["@mozilla.org/browser/nav
-history-service;1"] .getservice(ci.nsinavhistoryservice); var query = history.getnewquery(); // specify folders to be searched var folders = [bookmarks.toolbarfolder, bookmarks.bookmarksmenufolder, bookmarks.unfiledbookmarksfolder]; query.setfolders(folders, folders.length); // specify terms to search for, matches against title, url and tags query.searchterms = "fire...
...); jsonfile.create(ci.nsilocalfile.normal_file_type, 0600); // export bookmarks in json format to file placesutils.backupbookmarkstofile(jsonfile); // restore bookmarks from the json file // note: this *overwrites* all pre-existing bookmarks placesutils.restorebookmarksfromjsonfile(jsonfile); history the toolkit history service is nsinavhistoryservice: var history = cc["@mozilla.org/browser/nav
-history-service;1"] .getservice(ci.nsinavhistoryservice); the history service provides methods for adding, editing, deleting browser history.
...And 6 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
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-dimensions-1x1...
... background: url(100px-wide-no
-height-or-ratio.svg); background-size: contain; the rendered output looks like this: source: one specified dimension with intrinsic ratio things change when you specify an intrinsic ratio.
... contain case background: url(100px
-height-3x4-ratio.svg); background-size: contain; the rendered output looks like this: notice how the entire image is rendered, fitting as best as possible into the box without clipping any of it away.
...And 6 more matches
NSS tools : ssltab
-h turn on hex/ascii printing.
...if the -s option is used with
-h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output.
...this option uses the same output format as the
-h option.
...And 5 more matches
NSS tools : ssltap
-h turn on hex/ascii printing.
...if the -s option is used with
-h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output.
...this option uses the same output format as the
-h option.
...And 5 more matches
NSS Tools ssltap
-h turn on hex/ascii printing.
... if the -s option is used with
-h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output.
...this option uses the same output format as the
-h option.
...And 5 more matches
NSS tools : ssltap
-h turn on hex/ascii printing.
... if the -s option is used with
-h, two separate parts are printed for each record: the plain hex/ascii output, and the parsed ssl output.
...this option uses the same output format as the
-h option.
...And 5 more matches
An overview of accessible web applications and widgets - Accessibility
visibility changes when content visibility is changed (i.e., an element is hidden or shown), developers should change the aria
-hidden property value.
... here is an example of a tooltip that uses aria
-hidden to control the visibility of the tooltip.
...line 9 sets the aria
-hidden state to true.
...And 5 more matches
<color> - CSS: Cascading Style Sheets
a <color> can be defined in any of the following ways: using a keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #
-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <color> data type in detail.
...see also -moz
-html-cellhighlight.
...see also -moz
-html-cellhighlighttext.
...And 5 more matches
HTTP headers - HTTP
hop-by
-hop headers these headers are meaningful only for a single transport-level connection, and must not be retransmitted by proxies or cached.
... note that only hop-by
-hop headers may be set using the connection general header.
... access-control-allow
-headers used in response to a preflight request to indicate which http headers can be used when making the actual request.
...And 5 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
<overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="xulschoolhello
-hello-world-button" class="toolbarbutton-1 chromeclass-toolbar-additional" label="&xulschoolhello.helloworld.label;" tooltiptext="&xulschoolhello.helloworld.tooltip;" oncommand="xulschoolchrome.browseroverlay.dosomething(event);" /> <!-- more buttons here.
... setting the image for a toolbar button is done with css: #xulschoolhello
-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.
... <window id="main-window"> <toolbox id="navigator-toolbox"> <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarname.label;" accesskey="&xulschoolhello.toolbar.accesskey;" customizable="true" mode="icons" context="toolbar-context-menu" defaultset="xulschoolhello
-hello-world-button" insertbefore="personaltoolbar" /> </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser window.
...And 4 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
find the <h2> heading with an id of list
-heading and replace the hardcoded number of active and completed tasks with dynamic expressions: <h2 id="list
-heading">{completedtodos} out of {totaltodos} items completed</h2> go to the app, and you should see the "2 out of 3 items completed" message as before, but this time the information is coming from the todos array.
...replace your existing <ul> block with the following: <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list
-heading"> {#each todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> <div class="btn-group"> <button type="button" class="btn"> ...
... edit <span class="visually
-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger"> delete <span class="visually
-hidden">{todo.name}</span> </button> </div> </div> </li> {:else} <li>nothing to do here!</li> {/each} </ul> notice how we are using curly braces to embed javascript expressions in html attributes, like we did with the checked and id attributes of the checkbox.
...And 4 more matches
Styling Vue components with CSS - Learn web development
file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line
-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line
-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max...
...-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line
-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
...een; } .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, 1px, 1px); clip-path: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px...
...And 4 more matches
Setting HTTP request headers
// adds "x
-hello: world" header to the request httpchannel.setrequestheader("x
-hello", "world", false); in the example code above we have a variable named httpchannel which points to an object implementing nsihttpchannel.
...in our example code, the http request header that we added is named x
-hello and the value of this http request header is world.
...(in our example, our made up http header is x
-hello and not hello because we correctly added the x- in front of our name.) no longer the case: http://tools.ietf.org/html/rfc6648 notifications the question that may be coming to your mind right now is, how do you get the nsihttpchannel when an http request is made.
...And 4 more matches
PannerNode - Web APIs
it is an audionode audio-processing module describing its position with right
-hand cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
... pannernode.orientationx represents the horizontal position of the audio source's vector in a right
-hand cartesian coordinate system.
... pannernode.orientationy represents the vertical position of the audio source's vector in a right
-hand cartesian coordinate system.
...And 4 more matches
Text.wholeText - Web APIs
syntax str = textnode.wholetext; notes and example suppose you have the following simple paragraph within your webpage (with some whitespace added to aid formatting throughout the code samples here), whose dom node is stored in the variable para: <p>thru
-hiking is great!
... <strong>no insipid election coverage!</strong> however, <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> you decide you don’t like the middle sentence, so you remove it: para.removechild(para.childnodes[1]); later, you decide to rephrase things to, “thru
-hiking is great, but casting a ballot is tricky.” while preserving the hyperlink.
... so you try this: para.firstchild.data = "thru
-hiking is great, but "; all set, right?
...And 4 more matches
Inputs and input sources - Web APIs
it can also be set to none if the controller isn't hand
-held, or if it's unknown which hand the controller is in.
...not only would this controller then take the responsibility of clicking through the user interface of your app, but it would also be considered the "main hand," while other controllers would then be off
-hand or additional controllers.
...in this example, we interpret that as releasing the currently
-held object, dropping it into the scene at the targeted location.
...And 4 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
ebkit-background-composite -webkit-border-after** -webkit-border-after-color** -webkit-border-after-style** -webkit-border-after-width** -webkit-border-before** -webkit-border-before-color** -webkit-border-before-style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit -webkit-border
-horizontal-spacing -webkit-border-start** -webkit-border-start-color** -webkit-border-start-style** -webkit-border-start-width** -webkit-border-vertical-spacing -webkit-box-align** -webkit-box-direction** -webkit-box-flex-group** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -webkit-box-pack** -webkit-box-reflect** c -webkit-column-axis ...
...-webkit-column-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-column-progression -webkit-cursor-visibility d-i -webkit-dashboard-region -webkit-font-size-delta -webkit-font-smoothing -webkit
-highlight -webkit
-hyphenate-character -webkit
-hyphenate-limit-after -webkit
-hyphenate-limit-before -webkit
-hyphenate-limit-lines -webkit-initial-letter l -webkit-line-align -webkit-line-box-contain -webkit-line-clamp -webkit-line-grid -webkit-line-snap -webkit-locale -webkit-logical
-height -webkit-logical-width m -webkit-margin-after-collapse -webkit-margin-after -webkit-margin-before-collapse -webkit-margin-before -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-end** -webkit-margin-start** -webkit-margin-top-col...
...ee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style -webkit-marquee -webkit-mask-box-image-outset -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-source -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical
-height -webkit-max-logical-width -webkit-min-logical
-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap
-highlight-color -webkit-...
...And 4 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider
-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-b...
... searchfield div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; } <div>lorem</div> firefox chrome safari edge slider
-horizontal div{ color: black; -webkit-appearance: slider
-horizontal; } <div>lorem</div> chrome safari edge square-button div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; } <div>lorem</div> chrome safari edge textarea div{ color: black; -webkit-appearance: te...
...-indicator div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; } <div>lorem</div> safari relevancy-level-indicator div{ color: black; -moz-appearance: relevancy-level-indicator; -webkit-appearance: relevancy-level-indicator; } <div>lorem</div> safari scale
-horizontal div { color: transparent; -moz-appearance: scale
-horizontal; -webkit-appearance: scale
-horizontal; } <div>lorem</div> firefox scalethumbend div { color: black; -moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; } <div>lorem</div> firefox scalethumb
-horizontal div { co...
...And 4 more matches
<input type="time"> - HTML: Hypertext Markup Language
appearance chrome and opera in chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 24
-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component.
... 12
-hour 24
-hour chrome 83 in chrome 83, the ui controls have been updated with a new look and feel.
... 24
-hour firefox firefox's time control is very similar to chrome's, except that it doesn't have the up and down arrows.
...And 4 more matches
Web video codec guide - Web media technologies
a fairly typical 30 minute video conference would need about 447.9 gb of storage, and a 2
-hour movie would take almost 1.79 tb (that is, 1790 gb).
...reyscale) and 4:2:0 high 10 (hi10p) 8 to 10 4:0:0 (greyscale) and 4:2:0 high 4:2:2 (hi422p) 8 to 10 4:0:0 (greyscale), 4:2:0, and 4:2:2 high 4:4:4 predictive 8 to 14 4:0:0 (greyscale), 4:2:0, 4:2:2, and 4:4:4 hdr support yes; hybrid log-gamma or advanced hdr/sl
-hdr; both are part of atsc variable frame rate (vfr) support yes browser compatibility feature chrome edge firefox internet explorer opera safari avc/h.264 support 4 12 35[1] 9 25 3.2 container support 3gp, mp4, ...
...webm rtp / webrtc compatible yes supporting/maintaining organization mpeg / itu specification https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding https://www.itu.int/rec/t-rec
-h.264 licensing proprietary with numerous patents.
...And 4 more matches
WAI-ARIA basics - Learn web development
e="tablist"> <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">tab 1</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">tab 2</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">tab 3</li> </ul> <div class="panels"> <article class="active-panel" role="tabpanel" aria
-hidden="false"> ...
... </article> <article role="tabpanel" aria
-hidden="true"> ...
... </article> <article role="tabpanel" aria
-hidden="true"> ...
...And 3 more matches
Fundamental text and font styling - Learn web development
but it was a rare occasion such as this that he did.</p> html { font-size: 10px; } h1 { font-size: 5rem; text-transform: capitalize; text-shadow: 1px 1px 1px red, 2px 2px 1px red; text-align: center; } h1 + p { font-weight: bold; } p { font-size: 1.5rem; color: red; font-family: helvetica, arial, sans-serif; } line height the line
-height property sets the height of each line of text — this can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the font-size is multiplied to get the line
-height.
... body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) so to set our lines of text to 1.6 times the height of the font, you'd use this: line
-height: 1.6; applying this to the <p> elements in our example would give us this result: hidden example2 <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat.
...but it was a rare occasion such as this that he did.</p> html { font-size: 10px; } h1 { font-size: 5rem; text-transform: capitalize; text-shadow: 1px 1px 1px red, 2px 2px 1px red; text-align: center; } h1 + p { font-weight: bold; } p { font-size: 1.5rem; color: red; font-family: helvetica, arial, sans-serif; line
-height: 1.6; } letter and word spacing the letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text.
...And 3 more matches
Styling lists - Learn web development
raph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <dl> <dt>hummus</dt> <dd>a thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> <dt>pita</dt> <dd>a soft, slightly leavened flatbread.</dd> <dt>halloumi</dt> <dd>a semi
-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a ...
...ometimes 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.
... rule 4 sets the same line
-height on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines.
...And 3 more matches
Example 1 - Learn web development
tion">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...
...order-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="...
...tion">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max
-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : ...
...And 3 more matches
Componentizing our React app - Learn web development
export default function todo() { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually
-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually
-hidden">eat</span> </button> </div> </li> ); } note: components must always return something.
...your <ul> should read like this: <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list
-heading" > <todo /> <todo /> <todo /> </ul> when you look back at your browser, you'll notice something unfortunate: your list now repeats the first task three times!
... function todo(props) { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually
-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually
-hidden">{props.name}</span> </button> </div> </li> ); } now your browser should show three unique tasks.
...And 3 more matches
Index
364 nsibrowserhistory developing mozilla, extensions, interfaces, javascript, places, xpcom, xpcom api reference, xpcom interface reference implemented by: @mozilla.org/browser/nav
-history-service;1.
... 409 nsicommandlinehandler command line, interfaces, interfaces:scriptable, xpcom api reference, xpcom interface reference each command line handler is registered in the category "command-line
-handler".
... 592 nsiextensionmanager disambiguation, needscontent, needshelp, xpcom, xpcom interface reference unfortunately, at the time of this writing there are two nsiextensionmanager interfaces: 593 nsiexternalhelperappservice interfaces, mime implemented by: @mozilla.org/uriloader/external
-helper-app-service;1.
...And 3 more matches
@media - CSS: Cascading Style Sheets
name summary notes any
-hover does any available input mechanism allow the user to hover over elements?
... aspect-ratio width-to
-height aspect ratio of the viewport color number of bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4.
... color-index number of entries in the output device's color lookup table, or zero if the device does not use such a table device-aspect-ratio width-to
-height aspect ratio of the output device deprecated in media queries level 4.
...And 3 more matches
Mozilla CSS extensions - CSS: Cascading Style Sheets
ccepted] -moz-column-rule-width [prefixed version still accepted] -moz-column-rule-style [prefixed version still accepted] -moz-column-rule-color [prefixed version still accepted] -moz-context-properties f–m filter [applying to more than svg] -moz-font-feature-settings [prefixed version still accepted] -moz-font-language-override [prefixed version still accepted] -moz
-hyphens [prefixed version still accepted] -moz-margin-end [superseded by the standard version margin-inline-end] -moz-margin-start [superseded by the standard version margin-inline-start] mask [applying to more than svg] o -moz-opacityobsolete since gecko 1.9.1 -moz-outlineobsolete since gecko 1.9.2 -moz-outline-colorobsolete since gecko 1.9.2 -moz-outline-offsetobsolete since ...
...win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale
-horizontal scalethumb
-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb
-horizontal scrollbarthumb-vertical scrollbartrack
-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels t...
... border-style and outline-style -moz-bg-insetobsolete since gecko 1.9 -moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsolete since gecko 1.9 <color> keywords -moz-activehyperlinktext -moz
-hyperlinktext -moz-visitedhyperlinktext -moz-buttondefault -moz-buttonhoverface -moz-buttonhovertext -moz-default-background-color -moz-default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-dragtargetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-...
...And 3 more matches
list-style-type - CSS: Cascading Style Sheets
a, b, c, … z upper-latin is unsupported in ie7 and earlier arabic-indic -moz-arabic-indic example armenian traditional armenian numbering (ayb/ayp, ben/pen, gim/keem… bengali -moz-bengali example cambodian * example is a synonym for khmer cjk-earthly-branch -moz-cjk-earthly-branch example cjk
-heavenly-stem -moz-cjk
-heavenly-stem example cjk-ideographic identical to trad-chinese-informal e.g.
... khmer -moz-khmer example korean
-hangul-formal korean hangul numbering.
... e.g., 일만 일천일백일십일 korean
-hanja-formal formal korean han numbering.
...And 3 more matches
max-block-size - CSS: Cascading Style Sheets
that is, if the writing direction is horizontal, then max-block-size is equivalent to max
-height; if the writing direction is vertical, max-block-size is the same as max-width.
... this is useful because the max-width is always used for horizontal sizes and max
-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.
... any time you would normally use max
-height or max-width, you should instead use max-block-size to set the maximum "height" of the content (even though this may not be a vertical value) and max-inline-size to set the maximum "width" of the content (although this may instead be vertical rather than horizontal).
...And 3 more matches
Using HTML sections and outlines - Developer guides
authors are advised to use heading rank (h1
-h6) to convey document structure.
... using html5 elements in non
-html5 browsers sections and headings elements can be made to work in most non
-html5 browsers with a couple of extra steps, and in this section we'll show you how.
...unknown elements are styled as display: inline by default, so you'll want to set them to display: block: article, aside, footer, header, nav, section { display: block; } of course the web developer can style them differently, but keep in mind that in a non
-html5 browser, the default styling is different from what is expected for such elements.
...And 3 more matches
Index - HTTP
8 access-control-allow
-headers cors, http, reference, header the access-control-allow
-headers response header is used in response to a preflight request which includes the access-control-request
-headers to indicate which http headers can be used during the actual request.
... 11 access-control-expose
-headers cors, http, reference, header the access-control-expose
-headers response header indicates which headers can be exposed as part of the response by listing their names.
... 12 access-control-max-age cors, http, reference, header the access-control-max-age response header indicates how long the results of a preflight request (that is the information contained in the access-control-allow-methods and access-control-allow
-headers headers) can be cached.
...And 3 more matches
Destructuring assignment - JavaScript
const x = [1, 2, 3, 4, 5]; the destructuring assignment uses similar syntax, but on the left
-hand side of the assignment to define what values to unpack from the sourced variable.
...sole.log(c); // 1 you can also ignore all returned values: [,,] = f(); assigning the rest of an array to a variable when destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest pattern: const [a, ...b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // [2, 3] be aware that a syntaxerror will be thrown if a trailing comma is used on the left
-hand side with a rest element: const [a, ...b,] = [1, 2, 3]; // syntaxerror: rest element may not have a trailing comma // always consider using rest operator as the last element unpacking values from a regular expression match when the regular expression exec() method finds a match, it returns an array containing first the entire matched portion of the string and then the portions of the str...
... {a, b} = {a: 1, b: 2} is not valid stand-alone syntax, as the {a, b} on the left
-hand side is considered a block and not an object literal.
...And 3 more matches
SVG documentation index - SVG: Scalable Vector Graphics
19 accent
-height deprecated, needsexample, svg, svg attribute the accent
-height attribute defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system.
... 38 cap
-height deprecated, svg, svg attribute the cap
-height attribute defines the height of uppercase glyphs of the font within the font coordinate system.
... 81 font-size-adjust svg, svg attribute the font-size-adjust attribute allows authors to specify an aspect value for an element that will preserve the x
-height of the first choice font in a substitute font.
...And 3 more matches
In-Depth - Archive of obsolete content
listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack
-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb
-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper
-horizontal -moz-border-bottom-colors defines a series of colours.
...then it contains a xul:hbox with the class .toolbar
-holder.
... this .toolbar
-holder class is also defined in the toolbarbindings.xml.
...And 2 more matches
-ms-scroll-translation - Archive of obsolete content
the -ms-scroll-translation css property is a microsoft extension that specifies whether vertical-to
-horizontal scroll wheel translation occurs on the specified element.
... initial valuenoneapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values vertical-to
-horizontal vertical to horizontal translation, as described in remarks, will take place when appropriate.
... formal syntax none | vertical-to
-horizontal specifications not part of any specification.
...And 2 more matches
Styling links - Learn web development
now let's add some more information to get this styled properly: body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line
-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #265301; } a:visited { color: #437a16; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px solid; background: #cdfeaa; } a:active { background: #265301; color: #cdfeaa; } we'll also provide some sample html to apply the css to: <p>there a...
...leelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line
-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437a16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #bae498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #cdfeaa;\n}\n\na:active {\n background: #265301;\n color: #cdfeaa;\n}'; drawoutput(); }); htmlinput.addeve...
...first, some simple html to style: <p>for more information on the weather, visit our <a href="#">weather page</a>, look at <a href="http://#">weather on wikipedia</a>, or check out <a href="http://#">weather on extreme science</a>.</p> next, the css: body { width: 300px; 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; } ...
...And 2 more matches
CSS property compatibility table for form controls - Learn web development
line
-height this property is supported inconsistently across browsers and you should avoid it.
... font yes yes see the note about line
-height letter-spacing yes yes text-align yes yes text-decoration partial partial see the note about opera text-indent partial[1] partial[1] ie9 supports this property only on <textarea>s, whereas opera only supports it on single line text fields.
... text and font color yes yes font yes yes see the note about line
-height.
...And 2 more matches
Your first form - Learn web development
the <form> element all forms start with a <form> element, like this: <form action="/my
-handling-form-page" method="post"> </form> this element formally defines a form.
... in terms of html code we need something like the following to implement these form widgets: <form action="/my
-handling-form-page" method="post"> <ul> <li> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </li> <li> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </li> <li> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> </form> update your form code to loo...
...let's look at some of our form code again: <form action="/my
-handling-form-page" method="post"> <ul> <li> <label for="name">name:</label> <input type="text" id="name" name="user_name" /> </li> <li> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email" /> </li> <li> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </li> ...
...And 2 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.
... 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"> <...
... playable code <h2>live output</h2> <div class="output" style="min
-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min
-height: 200px; width: 95%">drive to the end of the road turn right go straight across the first two roundabouts turn left at the third roundabout the school is on your right, 300 meters up the road</text...
...And 2 more matches
Getting started with React - Learn web development
this file contains our first component, app, and a few other lines of code: import react from 'react'; import logo from './logo.svg'; import './app.css'; function app() { return ( <div classname="app"> <header classname="app
-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload.
... function app() { return ( <div classname="app"> <header classname="app
-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload.
... your app component should now look like this: function app() { return ( <div classname="app"> <header classname="app
-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> hello, world!
...And 2 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
tingtemplate = ( <form classname="stack-small"> <div classname="form-group"> <label classname="todo-label" htmlfor={props.id}> new name for {props.name} </label> <input id={props.id} classname="todo-text" type="text" /> </div> <div classname="btn-group"> <button type="button" classname="btn todo-cancel"> cancel <span classname="visually
-hidden">renaming {props.name}</span> </button> <button type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually
-hidden">new name for {props.name}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <input id={props.id} type="checkbox" ...
... defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually
-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger" onclick={() => props.deletetask(props.id)} > delete <span classname="visually
-hidden">{props.name}</span> </button> </div> </div> ); we've now got the two different template structures — "edit" and "view" — defined inside two separate constants.
... update the "edit" button in the viewtemplate like so: <button type="button" classname="btn" onclick={() => setediting(true)}> edit <span classname="visually
-hidden">{props.name}</span> </button> now we'll add the same onclick handler to the "cancel" button in the editingtemplate, but this time we'll set isediting to false so that it switches us back to the view template.
...And 2 more matches
NSS tools : pk12util
nss tools : pk12util name pk12util — export and import keys and certificate to or from a pkcs #12 file and the nss database synopsis pk12util [-i p12file|-l p12file|-o p12file] [-d [sql:]directory] [
-h tokenname] [-p dbprefix] [-r] [-v] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] description the pkcs #12 utility, pk12util, enables sharing certificates among any server that supports pkcs#12.
...
-h tokenname specify the name of the token to import into or export from.
...ontext error o 26 - pkcs12 add password itegrity error o 27 - cert and key safes creation error o 28 - pkcs12 add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or
-h for a token).
...And 2 more matches
NSS tools : pk12util
name pk12util — export and import keys and certificate to or from a pkcs #12 file and the nss database synopsis pk12util [-i p12file [
-h tokenname] [-v] [common-options] ] [ -l p12file [
-h tokenname] [-r] [common-options] ] [ -o p12file -n certname [-c keycipher] [-c certcipher] [-m|--key_len keylen] [-n|--cert_key_len certkeylen] [common-options] ] [ common-options are: [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] ] description the pkcs #12 utility, pk12util, enables sharing certificates among any server that supports pkcs#12.
...
-h tokenname specify the name of the token to import into or export from.
...12 add password itegrity error o 27 - cert and key safes creation error o 28 - pkcs12 add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or
-h for a token).
...And 2 more matches
Edit fonts - Firefox Developer Tools
the fonts tab the fonts tab is located on the right
-hand side of the page inspector when it is docked to the bottom of the screen.
... select the fonts tab; the last of the tabs shown in the right
-hand side of the css pane.
... note: if you want to use a different unit such as pt for font-size or line
-height, you can set the property value applied to the currently inspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.
...And 2 more matches
Using the CSS Painting API - Web APIs
to programmatically create an image used by a css stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint() css function to elaborate over these steps, we're going to start by creating a half
-highlight background, like on this header: css paint worklet in an external script file, we employ the registerpaint() function to name our css paint worklet.
... css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/01partone/header
-highlight.js'); reference the paint worklet in css once we have a registered paint worklet, we can use it in css.
... css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/02parttwo/header
-highlight.js'); .fancy { background-image: paint(headerhighlight); } .half { width: 50%; } <h1 class="fancy">largest header</h1> <h6 class="fancy">smallest header</h6> <h3 class="fancy half">50% width header</h3> while you can't play with the worklet's script, you can alter the element's font-size and width to change the size of the background image.
...And 2 more matches
Using media queries - CSS: Cascading Style Sheets
name summary notes any
-hover does any available input mechanism allow the user to hover over elements?
... aspect-ratio width-to
-height aspect ratio of the viewport color number of bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4.
... color-index number of entries in the output device's color lookup table, or zero if the device does not use such a table device-aspect-ratio width-to
-height aspect ratio of the output device deprecated in media queries level 4.
...And 2 more matches
font-variant-ligatures - CSS: Cascading Style Sheets
atures; /* <common-lig-values> */ font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */ font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */ font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */ font-variant-ligatures: no
-historical-ligatures; /* <historical-lig-values> */ font-variant-ligatures: contextual; /* <contextual-alt-values> */ font-variant-ligatures: no-contextual; /* <contextual-alt-values> */ /* global values */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligatures: unset; the font-variant-ligatures property is specified as one of the...
... no
-historical-ligatures deactivating the ligatures.
...dyescomputed valueas specifiedanimation typediscrete formal syntax normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no
-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ] examples setting font ligatures and contextual forms html <link href="//fonts.googleapis.com/css?family=lora" rel="stylesheet"> <p class="normal"> normal<br> if fi ff tf ft jf fj </p> <p class="none"> none<br> if fi ff tf ft jf fj </p> <p class="common-ligatures"> common-ligatures<br> if fi ff tf ft jf fj...
...And 2 more matches
OPTIONS - HTTP
the access-control-request
-headers header tells the server that when the actual request is sent, it will have the x-pingother and content-type headers.
... options /resources/post
-here/ http/1.1 host: bar.example accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example access-control-request-method: post access-control-request
-headers: x-pingother, content-type the server now can respond if it will accept a request under these circumstances.
... in this example, the server response says that: access-control-allow-origin the https://foo.example origin is permitted to request the bar.example/resources/post
-here/ url via the following: access-control-allow-methods post, get, and options are permitted methods for the url.
...And 2 more matches
cfx - Archive of obsolete content
cfx usage is: cfx [options] command [command-specific options] "options" are global options applicable to the tool itself or to all commands (for example -
-help).
... cfx supports the following global options:
-h, -
-help - show a help message and exit -v, --verbose - enable lots of output "command-specific options" are documented alongside the commands.
...defaults to test
-harness.
... experimental options -
-harness-option=key=value extra properties added to harness-options.json.
JavaScript Daemons Management - Archive of obsolete content
", orecompose = new daemon(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line
-height: 20px; } </style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button onclick="orecompose.skipto(11);">skipto(11)</button> <button onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <button onclick="orec...
... : this.pool[parseint(math.random() * this.pool.length)]; } } }, 33, 30); onload = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line
-height: 20px; } </style> </head> <body> <h1>daemon.buildaround()</h1> <p><button onclick="ounhide.skipto(11);">skipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fixposition(-13)</button> <button onclick="ounhide.play();">play</button> <button onclick="ounhide.turn();">turn</button> <button onclick="ounhide.pause();">pa...
...orecompose = new daemon.safe(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line
-height: 20px; } </style> </head> <body> <h1>new daemon.safe(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button onclick="orecompose.skipto(11);">skipto(11)</button> <button onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <button onclick=...
... : this.pool[parseint(math.random() * this.pool.length)]; } } }, 33, 30); onload = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line
-height: 20px; } </style> </head> <body> <h1>daemon.safe.buildaround()</h1> <p><button onclick="ounhide.skipto(11);">skipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fixposition(-13)</button> <button onclick="ounhide.play();">play</button> <button onclick="ounhide.turn();">turn</button> <button onclick="ounhide.pause()...
The Essentials of an Extension - Archive of obsolete content
we'll skip some code that is covered in the locale section, moving on to the most important part of the content: <menubar id="main-menubar"> <menu id="xulschoolhello
-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="helpmenu"> <menupopup> <menuitem id="xulschoolhello
-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menub...
...ar> <vbox id="appmenusecondarypane"> <menu id="xulschoolhello
-hello-menu-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="appmenu_addons"> <menupopup> <menuitem id="xulschoolhello
-hello-menu-item-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </vbox> this is the code that adds the hello world menu to the browser window.
... one recommended location for menus in the classic menu vase is under the tools menu, so the code should really look like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello
-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertbefore="devtoolsendseparator"> <menupopup> <menuitem id="xulschoolhello
-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> ...
...you cannot dynamically change an attribute value with a new dtd key, you have to set the new value directly: let helloitem = document.getelementbyid("xulschoolhello
-hello-menu-item"); // the alert will say "hello world!" alert(helloitem.getattribute("label")); // wrong helloitem.setattribute("label", "&xulschoolhello.hello2.label;"); // better helloitem.setattribute("label", "alternate message"); // right!
Common Firefox theme issues and solutions - Archive of obsolete content
operating system specific issues windows 7 windows 7 aero missing right
-hand title bar buttons when tabs are on top and the menu bar is disabled, firefox is missing the min/max/restore/close button on the right side of the title bar.
...to fix this issue, you need to copy the files chrome://browser/skin/identity-icons-generic.png, chrome://browser/skin/identity-icons
-https.png and chrome://browser/skin/identity-icons
-https-ev.png to your browser folder.
...fied as necessary: /* page proxy icon */ #page-proxy-favicon { width: 16px; height: 16px; margin: 1px 3px; list-style-image: url(chrome://browser/skin/identity-icons-generic.png); -moz-image-region: rect(0, 16px, 16px, 0); } .verifieddomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons
-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons
-https-ev.png); } #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #identity-box-inner > #page-proxy-stack >...
...browser/preferences/aboutpermissions.css: .site-favicon { height: 16px; width: 16px; -moz-margin-end: 4px; list-style-image: url("chrome://mozapps/skin/places/defaultfavicon.png"); } web developer tools web developer toolbar {to be added} web console web console buttons do not change appearance on the web console (tools > web developer > web console), the toolbar buttons on the left
-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determine which buttons are enabled.
-ms-overflow-style - Archive of obsolete content
"traditional" scrollbars don't auto
-hide and never overlap the element's content.
... -ms-autohiding-scrollbar auto
-hiding scrollbars are used if the element's content overflows.
... auto
-hiding scrollbars are displayed during scrolling or shortly after the pointer interacts with the page, and are hidden shortly after scrolling and pointer interaction stops.
... when they are visible, auto
-hiding scrollbars overlap the element's content.
CSS - Archive of obsolete content
applied to an object.-ms-flow-fromthe -ms-flow-from css property is a microsoft extension that gets or sets a value identifying a region container in the document that accepts the content flow from the data source.-ms-flow-intothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.-ms
-high-contrast-adjustthe -ms
-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.-ms
-hyphenate-limit-charsthe -ms
-hyphenate-limit-chars css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated wor...
...if the word does not meet the required minimum number of characters in the word, before the hyphen, or after the hyphen, then the word is not hyphenated.-ms
-hyphenate-limit-linesthe -ms
-hyphenate-limit-lines css property is a microsoft extension specifying the maximum number of consecutive lines in an element that may be ended with a hyphenated word.-ms
-hyphenate-limit-zonethe -ms
-hyphenate-limit-zone css property is a microsoft extension specifying the width of the hyphenation zone.-ms-ime-alignthe -ms-ime-align css property is a microsoft extension aligning the input method editor (ime) candidate window box relative to the element on which the ime composition is active.
...extension that specifies values for the -ms-scroll-snap-type and -ms-scroll-snap-points-x properties.-ms-scroll-snap-ythe -ms-scroll-snap-x css shorthand property is a microsoft extension that specifies values for the -ms-scroll-snap-type and -ms-scroll-snap-points-y properties.-ms-scroll-translationthe -ms-scroll-translation css property is a microsoft extension that specifies whether vertical-to
-horizontal scroll wheel translation occurs on the specified element.-ms-scrollbar-3dlight-colorthe -ms-scrollbar-3dlight-color css property is a microsoft extension specifying the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-arrow-colorthe -ms-scrollbar-arrow-color css property is a microsoft extension that specifies the color of the arrow elemen...
...hat specifies the base color of the main elements of a scroll bar.-ms-scrollbar-darkshadow-colorthe -ms-scrollbar-darkshadow-color css property is a microsoft extension that specifies the color of a scroll bar's gutter.-ms-scrollbar-face-colorthe -ms-scrollbar-face-color css property is a microsoft extension that specifies the color of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar
-highlight-colorthe -ms-scrollbar
-highlight-color css property is a microsoft extension that specifies the color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.-ms-scrollbar-shadow-colorthe -ms-scrollbar-shadow-color css property is a microsoft extension that specifies the color of the bottom and right edges of the scroll box and scroll arrows of ...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
cors, fetch a cors-safelisted request header is one of the following http headers: 50 cors-safelisted response header cors, fetch, glossary, http a cors-safelisted response header is an http header which has been safelisted so that it will not be filtered when responses are processed by cors, since they're considered safe (as the headers listed in access-control-expose
-headers).
... 381 sctp glossary, infrastructure, sctp, webrtc sctp (stream control transmission protocol) is an ietf standard for a transport protocol which enables the reliable, in-order transmission of messages while offering congestion control, multi
-homing, and other features to improve reliability and stability of the connection.
... 447 tcp handshake glossary, networking, ssl, security, tcp, tcp handshake, tls, web performance tcp uses a three-way handshake (aka tcp
-handshake, three message handshake, and/or syn-syn-ack) to set up a tcp/ip connection over an ip based network.
... 460 transmission control protocol (tcp) glossary, networking, ssl, security, tcp, tls, web performance tcp (transmission control protocol) is a transport layer host-to
-host protocol for connection-oriented communication between two computers on an ip network.
Introduction to automated testing - Learn web development
a reasonable set of basic functionalities to run on our project is as follows: html-tidy, css-lint, and js
-hint to lint and report/fix common html/css/js errors (see gulp
-htmltidy, gulp-csslint, gulp-jshint).
... html-tidy install using the following line: npm install --save-dev gulp
-htmltidy note: --save-dev adds the package as a dependency to your project.
... add the following dependency to gulpfile.js: const htmltidy = require('gulp
-htmltidy'); add the following test to the bottom of gulpfile.js: function html(cb) { return gulp.src('src/index.html') .pipe(htmltidy()) .pipe(gulp.dest('build')); cb(); } here we are grabbing our development index.html file with gulp.src(), which allows us to grab a source file to do something with.
... js
-hint and babel install using the following lines: npm install --save-dev gulp-babel @babel/preset-env npm install --save-dev @babel/core npm install jshint gulp-jshint --save-dev add the following dependencies to gulpfile.js: const babel = require('gulp-babel'); const jshint = require('gulp-jshint'); add the following test to the bottom of gulpfile.js: function js(cb) { return ...
Debugging on Mac OS X
in the left
-hand pane in xcode you should see a tree item where the root item has the project name.
...(these will then be progressively added under the root item <project-name> in the left
-hand pane.
...(if not, then open its settings from the product > edit scheme menu.) select "run" on the left
-hand side of the settings window, then select the "info" tab.
...these directions were written using xcode 6.3.1 complete all the steps above under "creating the project" from the "product" menu, ensure the scheme you created is selected under "scheme", then choose "scheme > edit scheme" in the resulting popup, click "duplicate scheme" give the resulting scheme a more descriptive name than "copy of scheme" select "run" on the left
-hand side of the settings window, then select the "info" tab.
Profiling with Xperf
capturing heap data the "
-heap" option is used to set up heap tracing.
...it's possible to get around that by doing a simultaneous capture of non
-heap data.
... to start a trace session, launching a new firefox instance: xperf -on base xperf -start heapsession
-heap -pidnewprocess "./firefox.exe -p test -no-remote" -stackwalk heapalloc+heaprealloc -buffersize 512 -minbuffers 128 -maxbuffers 512 to stop a session and merge the resulting files: xperf -stop heapsession -d heap.etl xperf -d main.etl xperf -merge main.etl heap.etl result.etl "result.etl" will contain your merged data; you can delete main.etl and heap.etl.
... note that it's possible to capture even more data for the non
-heap profile; for example, you might want to be able to correlate heap events with performance data, so you can do "xperf -on base -stackwalk profile".
SpiderMonkey Build Documentation
you can test it with dist/bin/js -
-help, which displays a help page.
... for a list of other available build options, type (assuming the current working directory is one of the above-created build directories): /bin/sh ../configure.in -
-help generating a compilation database some tools (like ides, static analyzers and refactoring tools) consume a file called compile_commands.json which contains a description of all the pieces required to build a piece of software so that tools don't have to also understand a build system.
...to create a 64-bit build, note that you must configure with --target=x86_64-pc-mingw32 -
-host=x86_64-pc-mingw32.
...mac os x 10.5), you can use the following: ar=ar cc="gcc -m64" cxx="g++ -m64" ../configure --target=x86_64-apple-darwin10.0.0 to build a 64-bit windows version, you can use the following: $src/configure -
-host=x86_64-pc-mingw32 --target=x86_64-pc-mingw32 note: you must have started your mozillabuild shell with the proper -x64.bat script in order for the 64-bit compilers to be in your path.
Index
46 js::getselfhostedfunction jsapi reference, reference, référence(2), spidermonkey js::getselfhostedfunction creates a new javascript function implemented in self
-hosted javascript.
...if parentruntime is specified, the resulting runtime shares significant amounts of read-only state (the self
-hosting and initial atoms compartments).
... 535 self
-hosted builtins in spidermonkey javascript, spidermonkey all self
-hosted code is strict, so self
-hosted functions invoked in a null or undefined scope won't be run in the scope of the global object.
... 543 spidermonkey 1.8.8 spidermonkey spidermonkey 1.8.8 is supported on all the platforms where firefox insert-actual-firefox-version-number
-here runs.
SpiderMonkey Internals
(otherwise, spidermonkey converts primitive values to objects before invoking their methods, per ecma 262-3 §11.2.1.) error handling spidermonkey has two interdependent error
-handling systems: javascript exceptions (which are not implemented with, or even compatible with, any kind of native c/c++ exception handling) and error reporting.
... self
-hosting of built-in functions in js starting with firefox 17, spidermonkey has the ability to implement built-in functions in self
-hosted js code.
... all self
-hosted code lives in .js files under builtin/.
... for details on implementing self
-hosted built-ins, see self
-hosting.
Zombie compartments
-graned representation may look like this │ ├───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%) -- script...
...s │ │ │ │ │ ├──0.72 mb (00.14%) ── gc
-heap [2] │ │ │ │ │ └──0.31 mb (00.06%) ── malloc
-heap/data [2] │ │ │ │ ├──0.80 mb (00.16%) -- type-inference │ │ │ │ │ ├──0.66 mb (00.13%) ── type-scripts [2] │ │ │ │ │ ├──0.13 mb (00.03%) ── allocation-site-tables [2] │ │ │ │ │ └──0.02 mb (00.00%) ── object-type-tables [2] │ │ │ │ └──0.01 mb (00.00%) -- sundries │ │ │ │ ├──0.01 mb (00.00%) ── malloc
-heap [2] │ │ │ │ └──0.00 mb (00.00%) ── gc
-heap [2] │ │ │ └───5.83 mb (01.17%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ layout │ │ │ ...
...0%) ── orphan-nodes │ │ │ │ └──0.00 mb (00.00%) ── event-targets │ │ │ └──0.00 mb (00.00%) ── property-tables │ │ └───5.93 mb (01.19%) -- js-zone(0x13ffa0000) │ │ ├──1.92 mb (00.39%) ── unused-gc-things │ │ ├──1.28 mb (00.26%) -- lazy-scripts │ │ │ ├──1.03 mb (00.21%) ── gc
-heap │ │ │ └──0.25 mb (00.05%) ── malloc
-heap │ │ ├──1.24 mb (00.25%) ── type-pool │ │ ├──1.07 mb (00.21%) -- type-objects │ │ │ ├──1.04 mb (00.21%) ── gc
-heap │ │ │ └──0.03 mb (00.01%) ── malloc
-heap │ │ ├──0.23 mb (00.05%) ++ strings │ │ └──0.18 mb (00.04...
...%) ── gc
-heap-arena-admin the first line says that the window from www.google.de is taking up 28.45 mb and futher breaks it down into zones, compartments, dom etc.
Network request list - Firefox Developer Tools
scheme:http has-response
-header shows resources that contain the specified http response header.
... has-response
-header:cache-control has-response
-header:x-firefox-spdy set-cookie-domain shows the resources that have a set-cookie header with a domain attribute that matches the specified value.
... copy as curl the command may include the following options: -x [method] if the method is not get or post --data for url encoded request parameters --data-binary for multipart request parameters -
-http/version if the http version is not 1.1 -i if the method is head
-h one for each request header.
... if the "accept-encoding" header is present, the curl command includes --compressed instead of
-h "accept-encoding: gzip, deflate".
Index - Web APIs
if you want to set the width and height of an element, use width and height or the overriding min-width and max-width, and min
-height and max
-height properties.
... 703 domconfiguration api, dom, obsolete, reference pre-defined parameters: "canonical-form", "cdata-sections", "check-character-normalization", "comments", "datatype-normalization", "element-content-whitespace", "entities", "error
-handler", "infoset", "namespaces", "namespace-declarations", "normalize-characters","schema-location", "schema-type", "split-cdata-sections", "validate", "validate-if-schema", "well-formed" 704 domerror api, dom, domerror, deprecated, interface, reference the domerror interface describes an error object that contains an error name.
...in particular, hand
-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.
... 2655 web-based protocol handlers advanced, html5, web-based protocol handlers it's fairly common to find web pages link to resources using non
-http protocols.
height - CSS: Cascading Style Sheets
the height css descriptor is a shorthand descriptor for setting both min
-height and max
-height of the viewport.
... formal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min
-height: automax
-height: nonepercentagesas each of the properties of the shorthand:min
-height: the percentage is calculated with respect to the height of the generated box's containing block.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.max
-height: the percentage is calculated with respect to the height of the generated box's containing block.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.computed valueas each of the properties of the shorthand:min
-height: the percentage as specified or the absolute lengthmax
-height: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum height @viewport { height: 500px; } specifications specification status comment css device adaptationthe definition of '"height" descriptor' in that specification.
Logical properties for sizing - CSS: Cascading Style Sheets
logical property physical property inline-size width block-size height min-inline-size min-width min-block-size min
-height max-inline-size max-width max-block-size max
-height width and height example the logical mappings for width and height are inline-size, which sets the length in the inline dimension and block-size, which sets the length in the block dimension.
... min-width and min
-height example there are also mappings for min-width and min
-height — these are min-inline-size and min-block-size.
...i am using min
-height in the first example and min-block-size in the second.
... max-width and max
-height example finally you can use max-inline-size and max-block-size as logical replacements for max-width and max
-height.
<length> - CSS: Cascading Style Sheets
ex represents the x
-height of the element's font.
... lh equal to the computed value of the line
-height property of the element on which it is used, converted to an absolute length.
... rlh equal to the computed value of the line
-height property on the root element (typically <html>), converted to an absolute length.
... when used on the font-size or line
-height properties of the root element, it refers to the properties' initial value.
mask - CSS: Cascading Style Sheets
ed as mask extending to the box enclosed by the stroke */ mask: url(masks.svg#star) exclude; /* element within svg graphic used as mask and combined with background using non-overlapping parts */ /* global values */ mask: inherit; mask: initial; mask: unset; /* multiple masks */ mask: url(masks.svg#star) left / 16px repeat-y, /* element within svg graphic is used as a mask on the left
-hand side with a width of 16px */ url(masks.svg#circle) right / 16px repeat-y; /* element within svg graphic is used as a mask on the right
-hand side with a width of 16px */ values <mask-reference> sets the mask image source.
...)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
... ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color
-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples masking an image .target { mask: url(#c1) luminance; } .anothertarget { mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude; } specifications specification status comment css masking module level 1the definition of 'mask' in that specification.
Intl.DisplayNames - JavaScript
ames of region in english let regionnames = new intl.displaynames(['en'], {type: 'region'}); regionnames.of('419'); // "latin america" regionnames.of('bz'); // "belize" regionnames.of('us'); // "united states" regionnames.of('ba'); // "bosnia & herzegovina" regionnames.of('mm'); // "myanmar (burma)" // get display names of region in traditional chinese regionnames = new intl.displaynames(['zh
-hant'], {type: 'region'}); regionnames.of('419'; // "拉丁美洲" regionnames.of('bz'); // "貝里斯" regionnames.of('us'); // "美國" regionnames.of('ba'); // "波士尼亞與赫塞哥維納" regionnames.of('mm'); // "緬甸" language display names to create an intl.displaynames for a locale and get the display name for a language-script-region sequence.
... // get display names of language in english let languagenames = new intl.displaynames(['en'], {type: 'language'}); languagenames.of('fr'); // "french" languagenames.of('de'); // "german" languagenames.of('fr-ca'); // "canadian french" languagenames.of('zh
-hant'); // "traditional chinese" languagenames.of('en-us'); // "american english" languagenames.of('zh-tw'); // "chinese (taiwan)"] // get display names of language in traditional chinese languagenames = new intl.displaynames(['zh
-hant'], {type: 'language'}); languagenames.of('fr'); // "法文" languagenames.of('zh'); // "中文" languagenames.of('de'); // "德文" script code display names to create an intl.displaynames for a locale and get the display name for a script code.
... // get display names of script in english let scriptnames = new intl.displaynames(['en'], {type: 'script'}); // get script names scriptnames.of('latn'); // "latin" scriptnames.of('arab'); // "arabic" scriptnames.of('kana'); // "katakana" // get display names of script in traditional chinese scriptnames = new intl.displaynames(['zh
-hant'], {type: 'script'}); scriptnames.of('latn'); // "拉丁文" scriptnames.of('arab'); // "阿拉伯文" scriptnames.of('kana'); // "片假名" currency code display names to create an intl.displaynames for a locale and get the display name for currency code.
...ay names of currency code in english let currencynames = new intl.displaynames(['en'], {type: 'currency'}); // get currency names currencynames.of('usd'); // "us dollar" currencynames.of('eur'); // "euro" currencynames.of('twd'); // "new taiwan dollar" currencynames.of('cny'); // "chinese yuan" // get display names of currency code in traditional chinese currencynames = new intl.displaynames(['zh
-hant'], {type: 'currency'}); currencynames.of('usd'); // "美元" currencynames.of('eur'); // "歐元" currencynames.of('twd'); // "新台幣" currencynames.of('cny'); // "人民幣" specifications specification intl.displaynamesthe definition of 'displaynames' in that specification.
SVG Attribute reference - SVG: Scalable Vector Graphics
svg attributes a to z a accent
-height accumulate additive alignment-baseline allowreorder alphabetic amplitude arabic-form ascent attributename attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap
-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d deceler...
... display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation
-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m ...
... stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex tablevalues target targetx targety text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v
-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w width widths word-spacing writing-mode x x x
-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z ...
... alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation
-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transfor...
jpm - Archive of obsolete content
jpm usage is: jpm [command] [options] jpm supports the following global options:
-h, -
-help - show a help message and exit -v, --version - print the jpm version number --addon-dir - directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm.
...this allows you to self
-host your add-on so that users can install it without error when signed add-ons are required.
... supporting updates for self
-hosted add-ons this feature is only supported from jpm 1.0.3 onwards.
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
xul can also use these event handlers, but xul also offers the oncommand special event handler to deal with actions that often have specific meanings, such as selection by a left-click (or right-click on systems set up as left
-handed) on the mouse or selection by the enter key.
...if you want to use the location bar history, set the value for this to history; if you want it to be the search bar history, use search
-history; and if you want it to be another form’s input history, use form
-history; this attribute can take one value or multiple space-delimited values.
... the tabbrowser element is even more capable than the browser element because it includes the basic tab
-handling features from firefox.
Adding Events and Commands - Archive of obsolete content
then you need to identify which of your xul elements will be linked to this broadcaster, using the observes attribute: <menuitem id="xulschoolhello
-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" observes="xulschoolhello-online-broadcaster" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> the attribute value is set to be the id of the broadcaster element, indicating that this element will observe all attribute changes that happen in the broadcaster.
... <commandset id="xulschoolhello-commandset"> <command id="xulschoolhello
-hello-command" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> <!-- more commands.
...--> <menuitem id="xulschoolhello
-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" command="xulschoolhello
-hello-command" /> commands allow you to keep your javascript calls in a single place, avoiding code repetition and possible bugs.
Session store API - Archive of obsolete content
var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; var datatoattach = "i want to attach this"; ss.settabvalue(currenttab, "key-name
-here", datatoattach); this code sets the value of the key "key-name
-here" to datatoattach.
...ed value you can fetch a value associated with a tab at any time (whether the tab is in the process of being restored or not), using code similar to the following: var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; var retrieveddata = ss.gettabvalue(currenttab, "key-name
-here"); after this code executes, the variable retrieveddata contains the value saved for the key "key-name
-here".
... deleting a value associated with a tab to delete a value from a tab, you can use code similar to the following: var ss = components.classes["@mozilla.org/browser/sessionstore;1"] .getservice(components.interfaces.nsisessionstore); var currenttab = gbrowser.selectedtab; ss.deletetabvalue(currenttab, "key-name
-here"); remarks the window value save and restore functions work exactly like the tab-based functions by similar names.
splitter - Archive of obsolete content
<splitter class="tree-splitter"/> <treecol id="date" label="date" flex="1"/> <splitter class="tree-splitter"/> </treecols> <treechildren/> </tree> splitter resizing and overflow the degree to which a splitter will resize a box, and what happens during the resize and after the limit is reached, depends on the height (or width) specified for the box as an attribute or in css, the min
-height (or min-width), the intrinsic height of the box contents, and the presence or absence of a collapse attribute on the splitter.
... for: <vbox/> <splitter/> <vbox height="500" style="min
-height: 50"> <vbox height="100"/> </vbox> ...the splitter can be dragged down below the 100px intrinsic height of the lower box, causing the child box to overflow, until reaching the min
-height, at which point it will stop or collapse.
...(however, because of bug 513597, only specifying both minheight and minwidth attributes, or specifying min
-height or min-width in css, actually works to allow overflow.) ...
timepicker - Archive of obsolete content
to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-event
-handler-function, 0); to queue up your event handler to run after the rest of the picker's change event handlers.
... is24hourclock type: boolean a read only value indicating whether a 12
-hour or 24
-hour clock is used to display times.
... with a 12
-hour clock, an extra field allows the user to pick between am and pm.
CORS - MDN Web Docs Glossary: Definitions of Web-related terms
access-control-allow
-headers used in response to a preflight request to indicate which http headers can be used when making the actual request.
... access-control-expose
-headers indicates which headers can be exposed as part of the response by listing their names.
... access-control-request
-headers used when issuing a preflight request to let the server know which http headers will be used when the actual request is made.
Advanced styling effects - Learn web development
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 1...
...e'll show a couple of simple <div>s, so you can compare the original with the blended version: <div> </div> <div class="multiply"> </div> now some css — we are adding to the <div> one background image and a green background color: div { width: 250px; height: 130px; padding: 10px; margin: 10px; display: inline-block; background: url(https://mdn.mozillademos.org/files/13090/colorful
-heart.png) no-repeat center 20px; background-color: green; } .multiply { background-blend-mode: multiply; } the result we get is this — you can see the original on the left, and the multiply blend mode on the right: mix-blend-mode now let's look at mix-blend-mode.
... </div> <div> </div> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position: relative; display: inline-block; } div { width: 250px; height: 130px; padding: 10px; margin: 10px; } article div:first-child { position: absolute; top: 10px; left: 0; background: url(https://mdn.mozillademos.org/files/13090/colorful
-heart.png) no-repeat center 20px; background-color: green; } article div:last-child { background-color: purple; position: absolute; bottom: -10px; right: 0; z-index: -1; } .multiply-mix { mix-blend-mode: multiply; } this gives us the following results: you can see here that the multiply mix blend has blended together not only the two background images, but also the color from th...
How to build custom form controls - Learn web development
.select .optlist.hidden { /* this is a simple way to hide the list in an accessible way; we will talk more about accessibility in the end */ max
-height: 0; visibility: hidden; } note: we could also have used transform: scale(1, 0) to give the optionlist no height and full width.
... if it can't, the content will be truncated) */ max
-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); background: #f0f0f0; } for the options, we need to add a highlight class to be able to identify the value the user will pick (or has picked).
...ing of the radio button list (not the legend/fieldset) to make it look somewhat like the earlier example, just to show that it can be done: .styledselect { display: inline-block; padding: 0; } .styledselect li { list-style-type: none; padding: 0; display: flex; } .styledselect [type=radio] { position: absolute; left: -100vw; top: -100vh; } .styledselect label { margin: 0; line
-height: 2; padding: 0 0 0 4px; } .styledselect:not(:focus-within) input:not(:checked) + label { height: 0; outline: none; overflow: hidden; } .styledselect:not(:focus-within) input:checked + label { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:not(:focus-within) input:checked + label::after { content : "▼"; background: bl...
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.
... 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: 150px; width: 95%"> <p>hello and welcome to my motivation page.
... 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: 50px; width: 95%"> <p>nasa sure does some exciting work.</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" valu...
Creating hyperlinks - Learn web development
let's look at an example of a directory structure, see the creating
-hyperlinks directory.
... the root of this directory structure is called creating
-hyperlinks.
... linking to non
-html resources — leave clear signposts when linking to a resource that will be downloaded (like a pdf or word document), streamed (like video or audio), or has another potentially unexpected effect (opens a popup window, or loads a flash movie), you should add clear wording to reduce any confusion.
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.
... 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="bu...
... playable code3 <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>this is my page</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="sh...
Third-party APIs - Learn web development
you'll find a line similar to the following in the mapquest api example: l.mapquest.key = 'your-api-key
-here'; this line specifies an api or developer key to use in your application — the developer of the application must apply to get a key, and then include it in their code to be allowed access to the api's functionality.
... so, a complete url would end up looking something like this: https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=your-api-key
-here&page=0&q=cats &fq=document_type:("article")&begin_date=20170301&end_date=20170312 note: you can find more details of what url parameters can be included at the nytimes developer docs.
... find the string enter-api-key
-here in the source code, and replace it with your api key.
Useful string methods - Learn web development
playable code <h2>live output</h2> <div class="output" style="min
-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 290px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let greetings = ['happy birthday!', 'merry christmas my love', ...
... playable code 2 <h2>live output</h2> <div class="output" style="min
-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 250px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let cities = ['london', 'manchester', 'birmingham', 'liverpool']; for (let i = 0; i...
... playable code 3 <h2>live output</h2> <div class="output" style="min
-height: 125px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 285px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let stations = ['man675847583748sjt567654;manchester piccadilly', 'g...
TypeScript support in Svelte - Learn web development
e following: <!-- components/filterbutton.svelte --> <script lang='ts'> import { filter } from '../types/filter.enum' export let filter: filter = filter.all </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === filter.all} aria-pressed={filter === filter.all} on:click={()=> filter = filter.all} > <span class="visually
-hidden">show</span> <span>all</span> <span class="visually
-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.active} aria-pressed={filter === filter.active} on:click={()=> filter = filter.active} > <span class="visually
-hidden">show</span> <span>active</span> <span class="visually
-hidden">tasks</span> </button> <button cl...
...ass="btn toggle-btn" class:btn__primary={filter === filter.completed} aria-pressed={filter === filter.completed} on:click={()=> filter = filter.completed} > <span class="visually
-hidden">show</span> <span>completed</span> <span class="visually
-hidden">tasks</span> </button> </div> here we are just importing the filter enum, and using it instead of the string values we used previously.
... to fix it, replace tabindex="-1" with tabindex={-1}, like this: <h2 id="list
-heading" bind:this={headingel} tabindex={-1}>{completedtodos} out of {totaltodos} items completed</h2> this way typescript can prevent us from incorrectly assigning it to a string variable.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
the edit button editing = true // enter editing mode } below it, add the following definition for focuseditbutton(): const focuseditbutton = (node) => editbuttonpressed && node.focus() finally, we use the focuseditbutton action on the edit button, like so: <button type="button" class="btn" on:click={onedit} use:focuseditbutton> edit<span class="visually
-hidden"> {todo.name}</span> </button> go back and try your app again.
... add the following contents to it: <script> export let todos $: totaltodos = todos.length $: completedtodos = todos.filter(todo => todo.completed).length </script> <h2 id="list
-heading">{completedtodos} out of {totaltodos} items completed</h2> import the file at the beginning of todos.svelte, adding the following import statement below the others: import todosstatus from './todosstatus.svelte' replace the <h2> status heading inside todos.svelte with a call to the todosstatus component, passing todos to it as a prop, like so: <todosstatus {todos} /> ...
... update the contents of todosstatus.svelte like so: <script> export let todos $: totaltodos = todos.length $: completedtodos = todos.filter(todo => todo.completed).length let headingel export function focus() { // shorter version: export const focus = () => headingel.focus() headingel.focus() } </script> <h2 id="list
-heading" bind:this={headingel} tabindex="-1">{completedtodos} out of {totaltodos} items completed</h2> note that we've added a tabindex attribute to the <h2> to allow the element to receive focus programmatically.
Vue conditional rendering: editing existing todos - Learn web development
de into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for "{{label}}"</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually
-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__primary"> save <span class="visually
-hidden">edit for {{label}}</span> </button> </div> </form> </template> <script> export default { props: { label: { type: string, required: true }, id: { type: string, required: true } }, data() { ...
...it("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min
-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } form { display: flex; flex-direction: row; flex-wrap: wrap; } form > * { flex: 0 0 100%; } </style> note: walk through the above code then read the below description to make sure you understand everything the component is doing before moving on.
...te> <div class="stack-small"> <div class="custom-checkbox"> <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> <label :for="id" class="checkbox-label">{{label}}</label> </div> <div class="btn-group"> <button type="button" class="btn" @click="toggletoitemeditform"> edit <span class="visually
-hidden">{{label}}</span> </button> <button type="button" class="btn btn__danger" @click="deletetodo"> delete <span class="visually
-hidden">{{label}}</span> </button> </div> </div> </template> we’ve added a wrapper <div> around the whole template for layout purposes.
Handling common JavaScript problems - Learn web development
on windows/linux) and choose the install option in the left
-hand menu.
... the right
-hand panel shows useful details pertaining to the current environment — breakpoints, callstack and currently active scopes.
...at this point, the right
-hand side will update to show some very useful information.
Accessibility API cross-reference
banner a portion of quoted content which is 'too long' to appear 'inline' n/a blockquote <blockquote> entire window border as 1 object border n/a n/a n/a specific kind of button that drops down a list of items, msaa only buttondropdown n/a n/a expressed with aria
-haspopup on an element with a button role specific kind of button that drops down a grid, msaa only buttondropdowngrid n/a n/a specific kind of button that drops down a menu, msaa only buttonmenu n/a n/a expressed with aria
-haspopup on an element with a button role represents the system's caret caret ...
...supported for anything that's not a menu is poor n/a n/a aria
-haspopup the item can get the keyboard focus focusable focusable focusable tabindex attribute with value of 0 or more the item has focus for text input.
...note the reversed logic in some apis invisible visible visible aria
-hidden hidden (boolean attribute) indicates whether the object is in an iconified or minimized state.
Displaying Places information using views
<tree type="places" place="place:terms=mozilla&onlybookmarked=1&querytype=1"> <treecols> <treecol id="title" label="my bookmarks" flex="1" primary="true" /> </treecols> <treechildren /> </tree> the next example does the same as the last but uses javascript to set the tree's place attribute: var histserv = cc["@mozilla.org/browser/nav
-history-service;1"].
... getservice(components.interfaces.nsinavbookmarksservice); var histserv = components.classes["@mozilla.org/browser/nav
-history-service;1"].
... getservice(components.interfaces.nsinavbookmarksservice); var histserv = components.classes["@mozilla.org/browser/nav
-history-service;1"].
JS::GetSelfHostedFunction
this article covers features introduced in spidermonkey 31 create a new javascript function that is implemented in self
-hosted javascript.
... selfhostedname const char* function name in the self
-hosted javascript.
... description js::getselfhostedfunction creates a new javascript function implemented in self
-hosted javascript.
Parser API
since the left
-hand side of an assignment may be any expression in general, an expression can also be a pattern.
...the left
-hand sides of assignment expressions can be arbitrary expressions, but in the case where the expression is an object or array literal, it is interpreted by spidermonkey as a destructuring pattern.
... since the left
-hand side of an assignment can in general be any expression, in an assignment context, a pattern can be any expression.
SpiderMonkey 1.8.8
you can download full source code here: insert-actual-link-when-the-release
-happens (md5 checksum: insert-actual
-hash
-here).
... —insert-actual-release-date
-here platform support spidermonkey 1.8.8 is supported on all the platforms where firefox insert-actual-firefox-version-number
-here runs.
...future direction include-followup-on-experimental-library-versioning-scheme
-here spidermonkey embedders should also be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi stable for embedders.
Redis Tips
related commands - an ever-growing list of related commands is given on the right
-hand side of the page.
... the r in rpush means to push on the right
-hand side of the list.
... an l is the left
-hand side.
nsICommandLineHandler
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) each command line handler is registered in the category "command-line
-handler".
...example: category entry value command-line
-handler b-jsdebug @mozilla.org/venkman/clh;1 command-line
-handler c-extensions @mozilla.org/extension-manager/clh;1 command-line
-handler m-edit @mozilla.org/composer/clh;1 command-line
-handler m-irc @mozilla.org/chatzilla/clh;1 command-line
-handler y-final @mozilla.org/browser/clh-final;1 method overview void handle(in nsicommandline acommandlin...
...e); attributes attribute type description helpinfo autf8string when the application is launched with the
-help argument, this attribute is retrieved and displayed to the user (on stdout).
nsIWebContentHandlerRegistrar
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/embeddor.implemented/web-content
-handler-registrar;1 as a service: var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content
-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); method overview void registercontenthandler(in domstring mimetype, in domstring uri, in domstring title, in nsidomwindow contentwindow) void registerprotocolhandler(in domstring protocol,in ...
... cu.import('resource://gre/modules/services.jsm'); var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content
-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); var htmlcontentwindow = undefined; var registeruri = 'http://mail.live.com/secure/start?action=compose&to=%s'; var myurihostname = services.io.newuri(registeruri, null, null).host; // this section here is long and daunting, but its just finding a suitable contentwindow var domwindows = services.wm.getenumerator(n...
...dler] if the host names do match then a confirmation like this will be seen: this domain check can be bypassed by setting the preference of gecko.handlerservice.allowregisterfromdifferenthost to true as in this code here: var {classes: cc, interfaces: ci, utils: cu} = components; cu.import("resource://gre/modules/services.jsm"); var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content
-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); var allowregisterfromdifferenthost = services.prefs.getboolpref('gecko.handlerservice.allowregisterfromdifferenthost'); if (!allowregisterfromdifferenthost) { services.prefs.setboolpref('gecko.handlerservice.allowregisterfromdifferenthost', true); } var htmlcontentwindow = services.wm.getmostrecentwindow('navig...
Accessibility Inspector - Firefox Developer Tools
features of the accessibility panel the enabled accessibility panel looks like so: on the left
-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page.
... on the right
-hand side, you can see further information about the currently selected item.
...note, however, that if you hold the shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right
-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the shift key.
Waterfall - Firefox Developer Tools
filtering markers you can control which markers are displayed using a button in the toolbar: waterfall patterns exactly what you'll see in the waterfall is very dependent on the kind of thing your site is doing: javascript
-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green.
... // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } console.timeend("calculating..."); return primes; } the waterfall's output will look something like this: the marker is labeled with the argument you passed to console.time(), and when you select the marker, you can see the program stack in the right
-hand sidebar.
... starting in firefox 41, the right
-hand sidebar will also show the stack at the end of the period: that is, at the point console.timeend() was called.
AudioListener - Web APIs
audiolistener.positionx represents the horizontal position of the listener in a right
-hand cartesian coordinate sytem.
... audiolistener.positiony represents the vertical position of the listener in a right
-hand cartesian coordinate sytem.
... audiolistener.positionz represents the longitudinal (back and forth) position of the listener in a right
-hand cartesian coordinate sytem.
ARIA Test Cases - Accessibility
if it has a submenu (aria
-haspopup), the screen reader should indicate that as well.
... markup used: role="menubar", role="menu", role="menuitem", role="menuitemcheckbox", role="menuitemradio" aria
-haspopup="true" aria-disabled="true" notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - ...
... zoomtext - (al) should ensure that tooltip is visible (not scrolled off) when it appears, and should read it aloud markup used: role="tooltip" aria-describedby aria
-hidden notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - -...
ARIA: switch role - Accessibility
text in these elements remains visible to the user agent and may be read or otherwise delivered to the user, unless it's expressly hidden using display: none or aria
-hidden="true".
... button.switch { margin: 0; padding: 0; width: 70px; height: 26px; border: 2px solid black; display: inline-block; margin-right: 0.25em; line
-height: 20px; vertical-align: middle; text-align: center; font: 12px "open sans", "arial", serif; } button.switch span { padding: 0 4px; pointer-events: none; } [role="switch"][aria-checked="false"] :first-child, [role="switch"][aria-checked="true"] :last-child { background: #262; color: #eef; } [role="switch"][aria-checked="false"] :last-child, [role="switch"][aria-checked="true"]...
... :first-child { color: #bbd; } label.switch { font: 16px "open sans", "arial", sans-serif; line
-height: 20px; user-select: none; vertical-align: middle; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; } the most interesting part is probably the use of attribute selectors and the :first-child and :last-child pseudo-classes to do all the heavy lifting of changing the appearance of the switch based on whether it's on or off.
Text labels and names - Accessibility
headings must be labeled make sure that your headings have non-empty text content, and are not hidden, such as with css display:none or aria
-hidden=true.
...screen reader users typically "skim" a page's headings, much like sighted users; non
-heading text that is marked-up with heading elements can cause confusion.
... headings should have visible text content make sure that your headings have non-empty text content, and are not hidden, such as with css display:none or aria
-hidden=true.
-webkit-box-reflect - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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> specifications not part of any standard.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
css properties can be used with the ::first-letter pseudo-element: all font properties : font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line
-height and font-family all background properties : background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bott...
...om, padding-left all border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line
-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the <h2>.
...stet clita kasd gubergren, no sea takimata sanctus est.</p> <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> css p { width: 500px; line
-height: 1.5; } h2 + p::first-letter { color: white; background-color: black; border-radius: 2px; box-shadow: 3px 3px 0 red; font-size: 250%; padding: 6px 3px; margin-right: 6px; float: left; } result effect on special punctuation and non-latin characters this example illustrates the effect of ::first-letter on special punctuation and non-latin characters.
:left - CSS: Cascading Style Sheets
the :left css pseudo-class, used with the @page at-rule, represents all left
-hand pages of a printed document.
... /* selects any left
-hand pages when printing */ @page :left { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the document.
... syntax :left examples setting a margin for left
-hand pages @page :left { margin: 2in 3in; } specifications specification status comment css paged media module level 3the definition of ':left' in that specification.
:right - CSS: Cascading Style Sheets
the :right css pseudo-class, used with the @page at-rule, represents all right
-hand pages of a printed document.
... /* selects any right
-hand pages when printing */ @page :right { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the document.
... syntax :right examples setting margins for right
-hand pages @page :right { margin: 2in 3in; } specifications specification status comment css paged media module level 3the definition of ':right' in that specification.
additive-symbols - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 specifying additive symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style additive-symbols-example { system: additive; additive-symbols: v 5, iv 4, i 1; } .list { list-style: additive-symbols-example; } result specifications ...
negative - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 rendering negative counters html <ul class="list" start="-3"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-style: neg; } result specificatio...
pad - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 padding a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style pad-example { system: numeric; symbols: "0" "1" "2" "3" "4" "5"; pad: 2 "0"; } .list { list-style: pad-example; } result specifications specification ...
prefix - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 adding a prefix to a counter html <ul class="index"> <li>the boy who lived</li> <li>the vanishing glass</li> <li>the letters from no one</li> <li>the keeper of the keys</li> <li>diagon alley</li> </ul> css @counter-style chapters { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; pref...
suffix - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 suffix for a counter html <ul class="choices"> <li>one</li> <li>two</li> <li>three</li> <li>none of the above</li> </ul> css @counter-style options { system: fixed; symbols: a b c d; suffix: ") "; } .choices { list-style: options; } result specifications specification status ...
symbols - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 counter symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style symbols-example { system: fixed; symbols: a "1" "\24b7" d e; } .list { list-style: symbols-example; } result specifications specification status ...
@viewport - CSS: Cascading Style Sheets
min
-height used in the determination of the height of the viewport when the document is first displayed.
... max
-height used in the determination of the height of the viewport when the document is first displayed.
... height a shorthand descriptor for setting both min
-height and max
-height.
Introduction to the CSS basic box model - CSS: Cascading Style Sheets
if the box-sizing property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the width, min-width, max-width, height, min
-height, and max
-height properties.
...if the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width, max-width, height, min
-height, and max
-height properties.
... finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line
-height property, even though the borders and padding are still displayed around the content.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
as a concession for older browsers, i have set a min
-height on the items, and hope that my content editors won’t add too much content and make a mess of the layout!
...i then do my grid code on the <ul>, set my width and min
-height on the <li> to auto.
... { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width: auto; min
-height: auto; margin: 0; } } <div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>two</h2> <p>we can use css grid to overwrite older methods.</p> <p>we can use css grid to overwrite older methods.</p> </li> <li class="car...
Layout using named grid lines - CSS: Cascading Style Sheets
multiple lines with the same name with repeat() if you want to give all of the lines in your grid a unique name then you will need to write out the track definition long
-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the tracks.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > * { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <header class="main
-header">i am the header</header> <aside class="side1">i am sidebar 1</aside> <article class="content">i am the main article</article> <aside class="side2">i am sidebar 2</aside> <footer class="main-footer">i am the footer</footer> </div> i could then place this on my grid layout framework like this.
... .main
-header, .main-footer { grid-column: col-start / span 12; } .side1 { grid-column: col-start / span 3; grid-row: 2; } .content { grid-column: col-start 4 / span 6; grid-row: 2; } .side2 { grid-column: col-start 10 / span 3; grid-row: 2; } once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
in a left to right language such as english line 1 is on the left
-hand side of the grid.
...this means that our initial, long
-hand, example would look like this: * {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; colo...
...our inline-start is the left
-hand column line as inline-start is always the point from which text would be written in the current writing mode, inline-end is the final column line of our grid.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
rapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main
-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> <h1>main article area</h1> <p>in this layout, we display the areas in source order for any screen ...
... .main
-head { grid-area: header; } .content { grid-area: content; } .main-nav { grid-area: nav; } .side { grid-area: sidebar; } .ad { grid-area: ad; } .main-footer { grid-area: footer; } this will not create any layout, however our items now have names we can use to do so.
...rapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main
-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"><h1>main article area</h1> <p>in this layout, we display the areas in source order for any screen less that 500 pix...
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
html <div class="animation">animated box</div> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast mode the -ms
-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.
... syntax the -ms
-high-contrast media feature is specified as one of the following values.
... @media screen and (-ms
-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms
-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms
-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } ...
background-image - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 layering background images note that the star image is partially transparent and is layered over the cat image.
background - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color
-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting backgrounds with color keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p> css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; } result specifications ...
border-image-source - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 please see border-image for examples.
content - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop><counter-style-name> = <custom-ident>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 headings and quotes this example inserts quotation marks around quotes, and adds the word "chapter" before headings.
cross-fade() - CSS: Cascading Style Sheets
[ at <position> ]?, <angular-color-stop-list> )<alpha-value> = <number> | <percentage><hue> = <number> | <angle>where <side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 older syntax for cross-fade html <div class="crossfade"></div> css .crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543...
mask-border-source - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 basic usage this property doesn't appear to be supported anywhere yet.
mask-image - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <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 ...
max-inline-size - CSS: Cascading Style Sheets
it corresponds to the max-width or the max
-height property depending on the value defined for writing-mode.
...0px; max-inline-size: 25em; /* <percentage> values */ max-inline-size: 75%; /* keyword values */ max-inline-size: auto; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content(20em); /* global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset; values the max-inline-size property takes the same values as the max-width and max
-height properties.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max
-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
min-block-size - CSS: Cascading Style Sheets
it corresponds to either the min-width or the min
-height property, depending on the value of writing-mode.
... values the min-block-size property takes the same values as the min-width and min
-height properties.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min
-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-inline-size - CSS: Cascading Style Sheets
it corresponds to either the min-width or the min
-height property, depending on the value of writing-mode.
... values the min-inline-size property takes the same values as the min-width and min
-height properties.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min
-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.
overflow - CSS: Cascading Style Sheets
-moz-scrollbars
-horizontal [1] use overflow-x: scroll and overflow-y: hidden, or overflow: hidden scroll instead.
... -moz
-hidden-unscrollable intended mainly for internal use and by themes.
... in order for overflow to have an effect, the block-level container must have either a set height (height or max
-height) or white-space set to nowrap.
repeating-linear-gradient() - CSS: Cascading Style Sheets
<color
-hint> th color
-hint is an interpolation hint defining how the gradient progresses between adjacent color stops.
...<color-stop-list> ) \---------------------------------/ \---------------/ definition of the gradient line list of color stops where <side-or-corner> = [left | right] || [top | bottom] and <color-stop-list> = [ <linear-color-stop> [, <color
-hint>?
... 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 las...
shape-outside - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color
-hint>]?
... ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color
-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color
-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color
-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples funneling text html <div class="main"> <div class="left"></div> <div class="right"></div> <p> sometimes a web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link.
Used value - CSS: Cascading Style Sheets
the used values of dimensions (e.g., width, line
-height) are in pixels.
...for css properties that don't depend on layout (e.g., display, font-size, or line
-height), the computed values and used values are the same.
... the following are the css 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from css 2.1 changes: specified, computed, and actual values): background-position bottom, left, right, top height, width margin-bottom, margin-left, margin-right, margin-top min
-height, min-width padding-bottom, padding-left, padding-right, padding-top text-indent specification specification status comment css level 2 (revision 2)the definition of 'used value' in that specification.
vertical-align - CSS: Cascading Style Sheets
middle aligns the middle of the element with the baseline plus half the x
-height of the parent.
... <percentage> aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line
-height property.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the line
-height of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <div>an <img src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" heig...
Challenge solutions - Developer guides
use domi's right
-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.
... solution in the menu above the right
-hand pane, choose css rules.
... solution move the position of the :hover pseudo-class from a specific petal, to all petals #inner-petals { --segment-fill-fill
-hover: pink; } /* non-standard way for some older browsers */ #inner-petals:hover .segment-fill { fill: pink; stroke: none; } ...
Standard metadata names - HTML: Hypertext Markup Language
height a positive integer, or the text device
-height defines the height of the viewport.
... 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.
... some crawler robots, like google, yahoo and bing, support the same values for the http header x-robots-tag; this allows non
-html documents like images to use these rules.
Set-Cookie - HTTP
browsers block frontend javascript code from accessing the set cookie header, as required by the fetch spec, which defines set-cookie as a forbidden response
-header name that must be filtered out from any response exposed to frontend code.
... header type response header forbidden header name no forbidden response
-header name yes syntax set-cookie: <cookie-name>=<cookie-value> set-cookie: <cookie-name>=<cookie-value>; expires=<date> set-cookie: <cookie-name>=<cookie-value>; max-age=<non-zero-digit> set-cookie: <cookie-name>=<cookie-value>; domain=<domain-value> set-cookie: <cookie-name>=<cookie-value>; path=<path-value> set-cookie: <cookie-name>=<cookie-value>; secure set-cookie: <cookie-name>=<cookie-value>; httponly set-cookie: <cookie-name>=<cookie-value>; samesite=strict set-cookie: <cookie-name>=<cookie-value>; samesite=lax set-cookie: <cookie-name>=<cookie-value>; samesite=none // multiple attributes are also possible, for ...
... // rejected due to missing secure attribute set-cookie: __secure-id=1 // rejected due to the missing path=/ attribute set-cookie: __host-id=1; secure // rejected due to setting a domain set-cookie: __host-id=1; secure; path=/; domain=example.com specifications specification title rfc 6265, section 4.1: set-cookie http state management mechanism draft-ietf
-httpbis-rfc6265bis-05 cookie prefixes, same-site cookies, and strict secure cookies ...
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.
Expressions and operators - JavaScript
for example, when catching exceptions, you can branch to different exception
-handling code depending on the type of exception thrown.
... left
-hand-side expressions: left values are the destination of an assignment.
... var a = 1; var b = 2; var c = 3; // default precedence a + b * c // 7 // evaluated by default like this a + (b * c) // 7 // now overriding precedence // addition before multiplication (a + b) * c // 9 // which is equivalent to a * c + b * c // 9 left
-hand-side expressions left values are the destination of an assignment.
TypeError: cannot use 'in' operator to search for 'x' in 'y' - JavaScript
the javascript exception "right
-hand side of 'in' should be an object" occurs when the in operator was used to search in strings, or in numbers, or other primitive types.
... message typeerror: invalid operand to 'in' (edge) typeerror: right
-hand side of 'in' should be an object, got 'x' (firefox) typeerror: cannot use 'in' operator to search for 'x' in 'y' (firefox, chrome) error type typeerror what went wrong?
... var foo = null; "bar" in foo; // typeerror: cannot use 'in' operator to search for 'bar' in 'foo' (chrome) // typeerror: right
-hand side of 'in' should be an object, got null (firefox) the in operator always expects an object.
Media - Progressive web apps (PWAs)
px 10px; } .green-button[disabled] { background-color:#cdc; color:#777; } .green-button:active, .green-button.active { border-style: inset; } <table> <tbody> <tr> <td><button class="green-button" disabled>click me</button></td> <td><button class="green-button">click me</button></td> <td><button class="green-button active">click me</button></td> </tr> <tr style="line
-height:25%;"> <td> </td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>normal</td> <td>active</td> </tr> </tbody> </table> live sample a fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus.
...copy and paste the content from here: <!doctype html> <html> <head> <title>print sample</title> <link rel="stylesheet" href="style4.css"> </head> <body> <h1>section a</h1> <p>this is the first section...</p> <h1>section b</h1> <p>this is the second section...</p> <div id="print
-head"> heading for paged media </div> <div id="print-foot"> page: </div> </body> </html> make a new stylesheet, style4.css.
... copy and paste the content from here: /*** print sample ***/ /* defaults for screen */ #print
-head, #print-foot { display: none; } /* print only */ @media print { h1 { page-break-before: always; padding-top: 2em; } h1:first-child { page-break-before: avoid; counter-reset: page; } #print
-head { display: block; position: fixed; top: 0pt; left:0pt; right: 0pt; font-size: 200%; text-align: center; } #print-foot { display: block; position: fixed; bottom: 0pt; right: 0pt; font-size: 200%; } #print-foot:after { content: counter(page); counter-increment: page; } } /* end print only */ view this document in your browser.
The building blocks of responsive design - Progressive web apps (PWAs)
all buttons in the app have been set to have a line
-height of 2.5, in the default css at the top of the stylesheet (check if you don't believe me.) and 6.8 x 2.5 = 17.
...let's look at a quick example: header { height: 300px; width: 100%; background: url(images/small
-header.jpg) center; } @media all and (min-width: 480px) { header { background: url(images/large
-header.jpg) center; } } this means that mobile browsers only download the mobile background image asset — not the desktop mobile assets — because they fail the media query tests and therefore ignore the media queries.
... you can also serve a larger graphic to a higher resolution device using a resolution media query, like so: button { background: url(images/low-res
-header.jpg) 1rem center ; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { button { background: url(images/high-res
-header.jpg) 1rem center ; } } this looks rather complicated, but really it's not — we are providing a number of media query options, as at this time different browsers support different resolution media query types and even units.
font-size-adjust - SVG: Scalable Vector Graphics
« svg attribute reference home the font-size-adjust attribute allows authors to specify an aspect value for an element that will preserve the x
-height of the first choice font in a substitute font.
... <number> choose the size of the font so that its lowercase letters (as determined by the x
-height of the font) are the specified number times the font-size.
... the number specified should generally be the aspect ratio (ratio of x
-height to font size) of the first choice font-family.
SVG and CSS - SVG: Scalable Vector Graphics
ight: bold; } #caption { font-size: 12px; } /* flower */ #flower:hover { cursor: crosshair; } /* gradient */ #fade-stop-1 { stop-color: blue; } #fade-stop-2 { stop-color: white; } /* petals */ .segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width); } .segment-fill:hover { fill: var(--segment-fill-fill
-hover); stroke: var(--segment-fill-stroke
-hover); } .segment-edge { fill: var(--segment-edge-fill); stroke: var(--segment-edge-stroke); stroke-width: var(--segment-edge-stroke-width); } .segment-edge:hover { stroke: var(--segment-edge-stroke
-hover); } /* outer petals */ #outer-petals { opacity: .75; --segment-fill-fill: azure; --segment-fill-stroke: lightsteelblue; --segment-fil...
...l-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill
-hover: plum; --segment-fill-stroke
-hover: none; --segment-edge-stroke
-hover: slateblue; } /* non-standard way of styling elements referenced via <use> elements, supported by some older browsers */ #outer-petals .segment-fill { fill: azure; stroke: lightsteelblue; stroke-width: 1; } #outer-petals .segment-edge { fill: none; stroke: deepskyblue; stroke-width: 3; } #outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none; } #outer-petals .segment:hover > .segment-edge { stroke: slateblue; } /* inner petals */ #inner-petals { --segment-fill-fill: yellow; --segment-fill-stroke: yellow; --segment-fill-stroke-...
...width: 1; --segment-edge-fill: none; --segment-edge-stroke: yellowgreen; --segment-edge-stroke-width: 9; --segment-fill-fill
-hover: darkseagreen; --segment-fill-stroke
-hover: none; --segment-edge-stroke
-hover: green; } /* non-standard way of styling elements referenced via <use> elements, supported by some older browsers */ #inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1; } #inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; } open the document in your svg-enabled browser.
Localization - Archive of obsolete content
eference localized strings from html, add a data-l10n-id attribute to the html tag where you want the localized string to appear, and assign the identifier to it: <html> <body> <h1 data-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized
-hello", label: "localized hello", icon: "./icon-16.png", onclick: function() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 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 curren...
...izing element attributes this feature is new in firefox 39 you can localize certain attributes of elements with an l10n-id by setting its value with l10n-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 your main add-on code, you do this: var _ = require("sdk/l10n").get; console.log(_("hello_id")); assigning to "_" in particular is not required, but is a convention from the gettext tools and will make it possible to work ...
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
in real life such code is often far more complex) the code might break in the future, as certain assumptions might not longer be true, for example the function signature may change (auri from above becomes aurl) or the function is replaced by a short
-hand/arrow function: function addtab(auri) tabbrowser.addtab(auri); var addtab = (auri) => tabbrowser.addtab(auri); same as with "passing functions/code as strings" above, patching a function to with fragments of externally retrieved data will create security vulnerabilities.
... you don't have to care about parameter naming (or changes in naming in future application versions) or short
-hand/arrow functions.
Drag and Drop Example - Archive of obsolete content
<stack id="board" style="width:300px; height: 300px; max-width: 300px; max
-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> the board only needs to respond to the dragdrop and dragover events.
... below: <window title="widget dragger" id="test-window" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> <stack id="board" style="width:300px; height: 300px; max-width: 300px; max
-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> <vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="checkbox" ondraggesture="nsdraganddrop.startdr...
Running Tamarin acceptance tests - Archive of obsolete content
for help on runtests.py options, see below or use python runtests.py
-h.
...c:/python26/python.exe ./runtests.py --threads=3 other flags of interest (for a list of all flags, run runtests.py with
-h/-
-help) --nohtml : will suppress the creation of an html output file --rebuildtests : will only rebuild test .abc's, will not attempt to run them.
Running Tamarin performance tests - Archive of obsolete content
performance test options there are a variety of options available with runtests.py - here is the help text followed by explanations for some options: $ ./runtests.py
-h usage: runtests.py [options] [tests] -v --verbose enable additional output -e --avm avmplus command to use -a --asc compiler to use -g --globalabc deprecated but still works - use builtin.abc (used to be location of global.abc) -b --builtinabc location of builtin.abc -s --shellabc location of shell_toplevel.abc -x --exclude comma separated list of direc...
...tories to skip
-h -
-help display help and exit -t --notime do not generate timestamps (cleaner diffs) -f --forcerebuild force rebuild all test files -c --config sets the config string [default os-tvm] -q --quiet display minimum output during testrun -l --log also log all output to given logfile --summaryonly only display final summary --rebuildtests rebuild the tests only - do not run against vm --showtimes shows the time for each test --ascargs args to pass to asc on rebuild of test files --vmargs args to pass to vm --timeout max time to run all tests --testtimeout max time to let a test run, in sec (default -1 = never timeout) -
-html also create an html output file --notimeche...
Tamarin build documentation - Archive of obsolete content
a prototype self
-hosting ecmascript edition 4 compiler, esc, is provided with tamarin but it is not yet capable of bootstrapping itself or building applications.
... $ cd tamarin-central $ echo 'print("hello, world")' > hello.as $ java -jar ./utils/asc.jar -import ./core/builtin.abc hello.as hello.abc, 86 bytes written use the avmplus standalone executable (avmshell) built previously to run the application: $ avmshell hello.abc hello, world use the
-help options of asc.jar and avmshell for more details.
Tamarin mercurial commit hook - Archive of obsolete content
the hook is located in the tamarin-redux repository in the file utils/hooks/tamarin-commit
-hook.py this is a simple mercurial hook that checks the following filetypes ('.cpp', '.h', '.as', '.abs', '.py') for the following: tabs anywhere in the line trailing whitespace windows line endings (\r\n) "mark_security_change" - looks for this text and warns user as security changes should not be checked into the public tamarin-redux repository.
... installing the commit hook the easiest way to implement the hook is to sync to the tip of tamarin-redux then add the following to your tamarin-redux/.hg/hgrc file (or to ~/.hgrc to implement for all local repos): [hooks] pretxncommit.commit = python:/path/to/tamarin-redux/utils/hooks/tamarin-commit
-hook.py:master_hook once added, all commits will run the commit hook.
Anonymous Content - Archive of obsolete content
when specified on the left
-hand side of the pair it indicates that the attribute on the right
-hand side should be stored as text nodes underneath the anonymous element.
... when used on the right
-hand side, it indicates that any raw text nodes that are explicit children of the bound element should be coalesced and the resulting value should be stored as the attribute on the left
-hand side.
Positioning - Archive of obsolete content
leftcenter the popup will be aligned with the center of the left
-hand edge of the anchor.
... rightcenter the popup will be aligned with the center of the right
-hand edge of the anchor.
is24HourClock - Archive of obsolete content
« xul reference is24hourclock type: boolean a read only value indicating whether a 12
-hour or 24
-hour clock is used to display times.
... with a 12
-hour clock, an extra field allows the user to pick between am and pm.
Providing Command-Line Options - Archive of obsolete content
using the example to use this sample code, save the commandline.js file into the components directory and add the following lines to your chrome.manifest file: component {2991c315-b871-42cd-b33f-bfee4fcbf682} components/commandline.js contract @mozilla.org/commandlinehandler/general-startup;1?type=myapp {2991c315-b871-42cd-b33f-bfee4fcbf682} category command-line
-handler m-myapp @mozilla.org/commandlinehandler/general-startup;1?type=myapp the javascript code const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); components.utils.import("resource://gre/modules/services.jsm"); // changeme: to the chrome uri of your extension or application const chrome_uri = "chrome://myapp/conte...
...handler() { }; commandlinehandler.prototype = { classdescription: "myapphandler", // changeme: generate a unique id classid: components.id('{2991c315-b871-42cd-b33f-bfee4fcbf682}'), // changeme: change the type in the contractid to be unique to your application contractid: "@mozilla.org/commandlinehandler/general-startup;1?type=myapp", _xpcom_categories: [{ category: "command-line
-handler", // changeme: // category names are sorted alphabetically.
Box Model Details - Archive of obsolete content
more layout details the style properties such as min-width and max
-height can be applied to any element.
... id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width: 150px;" flex="1" align="start"> <checkbox id="c1" label="ignore case"/> <spacer flex="1" style="max
-height: 30px;"/> <button label="find"/> </vbox> </window> here, two vertical boxes are created, one for the textbox and the other for the check box and button.
Element Positioning - Archive of obsolete content
you can also use the corresponding css properties, min-width, min
-height, max-width and max
-height.
... examples of setting widths and heights <button label="1" style="width: 100px;"/> <button label="2" style="width: 100em; height: 10px;"/> <button label="3" flex="1" style="min-width: 50px;"/> <button label="4" flex="1" style="min
-height: 2ex; max-width: 100px"/> <textbox flex="1" style="max-width: 10em;"/> <description style="max-width: 50px">this is some boring but simple wrapping text.</description> example 1 the first button will be displayed with a width of 100 pixels (px means pixels).
CommandLine - Archive of obsolete content
, alocation, atype) { var compreg = acompmgr.queryinterface(nsicomponentregistrar); compreg.registerfactorylocation(class_id, class_name, contract_id, afilespec, alocation, atype); var catman = components.classes["@mozilla.org/categorymanager;1"] .getservice(nsicategorymanager); catman.addcategoryentry("command-line
-handler", cld_category, contract_id, true, true); }, unregisterself : function mod_unreg(acompmgr, alocation, atype) { var compreg = acompmgr.queryinterface(nsicomponentregistrar); compreg.unregisterfactorylocation(class_id, alocation); var catman = components.classes["@mozilla.org/categorymanager;1"] .getservice(nsicategory...
...manager); catman.deletecategoryentry("command-line
-handler", cld_category); }, canunload : function (acompmgr) { return true; } }; function nsgetmodule(acompmgr, afilespec) { return apphandlermodule; } create an observer that will get notified when arguments change: chrome/content/cmdline.js function commandlineobserver() { this.register(); } commandlineobserver.prototype = { observe: function(asubject, atopic, adata) { var cmdline = asubject.queryinterface(components.interfaces.nsicommandline); var test = cmdline.handleflagwithparam("test", false); alert("test = " + test); }, register: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interface...
XULRunner Hall of Fame - Archive of obsolete content
vivipos integrated point-of-sales software
-hardware solution with customized xul application as the device front-end.
...python
-hulahop is required python
-hulahop from the olpc sugarlabs a python gtk widget with xulrunner embedded, providing full access to nsi dom and all other xulrunner interfaces, in a gtk window.
Opening a Link in the Default Browser - Archive of obsolete content
to suppress this warning for particular protocols that are safe to open in the default application, you must set default prefs (thunderbird sets the following prefs): // suppress external-load warning for standard browser schemes pref("network.protocol
-handler.warn-external.http", false); pref("network.protocol
-handler.warn-external.https", false); pref("network.protocol
-handler.warn-external.ftp", false); you can also check whether an external handler for a scheme exists.
...org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); if (extps.externalprotocolhandlerexists("http")) { // handler for http:// urls exists } link within an iframe to enable a link inside an html document that is the "src" of an iframe to be opened in the default browser, setting the preference: pref("network.protocol
-handler.expose-all", false); seems to work.
2006-09-29 - Archive of obsolete content
details can be located at frame reflow issues related to the ongoing implementation of mathml-in
-html into mozilla, which include: exposing the mathml implementation to tag soup.
... details can be located at mathml-in
-html5 meetings no meetings for this week.
Create Your Own Firefox Background Theme - Archive of obsolete content
the upper right
-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the left
-hand side of the image.
... the left
-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the right
-hand side of the image.
display-outside - Archive of obsolete content
/* keyword values */ display-outside: block-level; display-outside: inline-level; display-outside: run-in; display-outside: contents; display-outside: none; display-outside: table-row-group; display-outside: table
-header-group; display-outside: table-footer-group; display-outside: table-row; display-outside: table-cell; display-outside: table-column-group; display-outside: table-column; display-outside: table-caption; display-outside: ruby-base; display-outside: ruby-text; display-outside: ruby-base-container; display-outside: ruby-text-container; /* global values */ display-outside: inherit; display-outsid...
... table-row-group, table
-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption the element is an internal table element, and participates in a table layout context.
Implementation Status - Archive of obsolete content
xforms-revalidate supported 4.3.4 xforms-refresh supported 4.3.5 xforms-reset supported 4.3.6 xforms-next xforms-previous supported 4.3.7 xforms-focus supported 4.3.8 xforms
-help xforms
-hint supported 4.3.9 xforms-submit partial see section 11.2 for more details 4.3.10 xforms-submit-serialize supported 4.4 notification events supported 4.4.1 xforms-insert supported ...
... 297083; 343443; 8.3.4 help supported 8.3.5 hint partial problems with hints in xul
-hosted documents and ephemeral message positioning 349667; 8.3.6 alert supported 9.
Game distribution - Game development
publishing the game there are three main options when it comes to publishing a game: self
-hosting publishers stores remember that the name of your game should be unique enough to be quickly promoted later on, but also catchy enough, so people don't forget it.
... self
-hosting if you are a front-end developer, you may already know what to do.
CORS-safelisted response header - MDN Web Docs Glossary: Definitions of Web-related terms
a cors-safelisted response header is an http header which has been safelisted so that it will not be filtered when responses are processed by cors, since they're considered safe (as the headers listed in access-control-expose
-headers).
... by default, the safelist includes the following response headers: cache-control content-language content-type expires last-modified pragma examples extending the safelist you can extend the list of cors-safelisted response headers by using the access-control-expose
-headers header: access-control-expose
-headers: x-custom
-header, content-length ...
Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms
it is an options request, using three http request headers: access-control-request-method, access-control-request
-headers, and the origin header.
... for example, a client might be asking a server if it would allow a delete request, before sending a delete request, by using a preflight request: options /resource/foo access-control-request-method: delete access-control-request
-headers: origin, x-requested-with origin: https://foo.bar.org if the server allows it, then it will respond to the preflight request with an access-control-allow-methods response header, which lists delete: http/1.1 204 no content connection: keep-alive access-control-allow-origin: https://foo.bar.org access-control-allow-methods: post, get, options, delete access-control-max-age: 86400 the pre...
TCP handshake - MDN Web Docs Glossary: Definitions of Web-related terms
tcp (transmission control protocol) is a transport layer host-to
-host protocol for connection-oriented communication between two computers on an ip network.
... tcp uses a three-way handshake (aka tcp
-handshake, three message handshake, and/or syn-syn-ack) to set up a tcp/ip connection over an ip based network.
HTML: A good basis for accessibility - Learn web development
external links and linking to non
-html resources links that open in a new tab or window via the target="_blank" declaration and links to whose href value points to a file resource should include an indicator about the behavior that will occur when the link is activated.
... link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non
-html resource <a target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description.
HTML: A good basis for accessibility - Learn web development
external links and linking to non
-html resources links that open in a new tab or window via the target="_blank" declaration and links to whose href value points to a file resource should include an indicator about the behavior that will occur when the link is activated.
... link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non
-html resource <a target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description.
Overflowing content - Learn web development
in the past, some sites were built with fixed
-height containers to align bottoms of boxes.
...ideally, you will refactor the layout to not rely on fixed
-height containers.
CSS values and units - Learn web development
ex x
-height of the element's font.
...it can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2d box, along with lengths, which represent offsets from the top and left
-hand edges of the box.
Flexbox - Learn web development
the third one has two units, so it takes up 2/4 of the available space (or one
-half).
... button { flex: 1 auto; margin: 5px; font-size: 18px; line
-height: 1.5; } cross browser compatibility flexbox support is available in most new browsers — firefox, chrome, opera, microsoft edge and ie 11, newer versions of android/ios, etc.
Floats - Learn web development
font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin-right: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } so let's think about how the float works — the element with the float set on it (the <div> element in this case) is taken out of the normal layout flow of the document and stuck to the left
-hand side of its parent container (<body>, in this case).
... any content that comes below the floated element in the normal layout flow will now wrap around it, filling up the space to the right
-hand side of it as far up as the top of the floated element.
Practical positioning examples - Learn web development
this includes information
-heavy apps like strategy/war games, mobile versions of websites where the screen is narrow and space is limited, and compact information boxes where you might want to make lots of information available without having it fill the whole ui.
... 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.
Web fonts - Learn web development
note: under the "find fonts" section in the right
-hand column, you can click on the different tags and classifications to filter the displayed choices.
... use the filters on the left
-hand side to display the kinds of fonts you want to choose and choose a couple of fonts you like.
What are browser developer tools? - Learn web development
opera: developer ➤ developer tools context menu: press-and
-hold/right-click an item on a webpage (ctrl-click on the mac), and choose inspect element from the context menu that appears.
... watch expressions and breakpoints the right
-hand pane shows a list of the watch expressions you have added and breakpoints you have set.
Example 2 - Learn web development
on : 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...
... border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max
-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form c...
Example 3 - Learn web development
on : 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...
... border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max
-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // ---...
Example 4 - Learn web development
on : 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...
... border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max
-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // ---...
Example 5 - Learn web development
on : 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...
... border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max
-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // ---...
Adding vector graphics to the Web - Learn web development
note: the images above are actually all pngs — with the left
-hand star in each case representing a raster image, and the right
-hand star representing a vector image.
... playable code <h2>live output</h2> <div class="output" style="min
-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min
-height: 200px;"> <svg width="100%" height="100%"> <rect width="100%" height="100%" fill="red" /> <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> <polygon points...
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 { ...
...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-...
Arrays - Learn web development
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: 410px;width: 95%"> const list = document.queryselector('.output ul'); const totalbox = document.queryselector('.output p'); let total = 0; list.innerhtml = ''; totalb...
... playable code 2 <h2>live output</h2> <div class="output" style="min
-height: 150px;"> <input type="text"><button>search</button> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 370px; width: 95%"> const list = document.queryselector('.output ul'); const searchinput = document.queryselector('.output input')...
Server-side web frameworks - Learn web development
for example, the django template system allows you to specify variables using a "double
-handlebars" syntax (e.g.
...deno aims to fill in some of the loop
-holes in node.js by providing a mechanism that naturally maintains better security.
Ember resources and troubleshooting - Learn web development
there have been a coupleof new ideas put together into the form of addons that use the public apis, ember-set
-helper and ember-box.
... with ember-set
-helper: <checkbox @value={{this.somedata}} @ontoggle={{set this "somedata" (not this.somedata)}} /> with ember-box: {{#let (box this.somedata) as |somedata|}} <checkbox @value={{unwrap somedata}} @ontoggle={{update somedata (not this.somedata)}} /> {{/let}} note that none of these solutions are particularly common among members of the community, and as a whole, people are still trying to figure out an ergonomic and simple api for setting data in a template-only context, without backing js.
Accessibility in React - Learn web development
e textbox <input> in your editing template should be updated like this: <input id={props.id} classname="todo-text" type="text" value={newname} onchange={handlechange} ref={editfieldref} /> the "edit" button in your view template should read like this: <button type="button" classname="btn" onclick={() => setediting(true)} ref={editbuttonref} > edit <span classname="visually
-hidden">{props.name}</span> </button> focusing on our refs with useeffect to use our refs for their intended purpose, we need to import another react hook: useeffect().
... let's add the tabindex attribute — written as tabindex in jsx — to the heading above our list of tasks, along with our headingref: <h2 id="list
-heading" tabindex="-1" ref={listheadingref}> {headingtext} </h2> note: the tabindex attribute is great for accessibility edge-cases, but you should take great care to not overuse it.
React interactivity: Events and state - Learn web development
update your <h2> like so: <h2 id="list
-heading">{headingtext}</h2> completing a task you might notice that, when you click on a checkbox, it checks and unchecks appropriately.
...deletetask() needs to know the id of the task that called it, so it can delete the correct task from the state update the "delete" button inside todo.js, like so: <button type="button" classname="btn btn__danger" onclick={() => props.deletetask(props.id)} > delete <span classname="visually
-hidden">{props.name}</span> </button> now when you click on any of the "delete" buttons in the app, your browser console should log the id of the related task.
Implementing feature detection - Learn web development
the dive into html5 detecting html5 features page has a lot more useful feature detection tests besides the ones listed above, and you can generally find a feature detection test for most things by searching for "detect support for your-feature
-here" in your favorite search engine.
...if you look at the dom inspector of your browser's developer tools, you'll see that modernizr has updated your <html> class value like so: <html class="js no
-htmlimports sizes flash transferables applicationcache blobconstructor blob-constructor cookies cors ...and loads more values!> it now contains a large number of classes that indicate the support status of different technology features.
Package management basics - Learn web development
in the case of parcel (prior to parcel version 2), there's a special flag required — --experimental-scope
-hoisting — which will tree shake while building.
...try running the following command: parcel build index.html --experimental-scope
-hoisting you’ll see that this makes a huge difference: ✨ built in 7.87s.
The Firefox codebase: CSS Guidelines
using variables use the variable according to its naming do this: xul|tab:hover { background-color: var(--in-content-box-background
-hover); } not this: #certificateerrordebuginformation { background-color: var(--in-content-box-background
-hover); } localization text direction for margins, padding and borders, use inline-start/inline-end rather than left/right.
... 99% theme 70% theme 70% content 99% content font-*, color, *-color, border-*, -moz-appearance [1] line
-height, padding, margin cursor, width, max-width, top, bottom [2], etc overflow, direction, display, *-align, align-*, *-box-*, flex-*, order if some css is layout or functionality related, then it is likely content css.
Eclipse CDT
to do a c++ symbol search select "search > c/c++" from the menubar, or use ctrl
-h and select the "c/c++" search tab.
...parser errors/warnings are indicated by red/yellow markers on files in the project explorer tab, and in the gutter down the right
-hand side of open source files.
Localization content best practices
for example, suppose this string needs to be changed from "event" to "add new event": new-event
-header = event add-new-event
-header is definitely a better choice for the new string than new-event
-header1.
...as a general rule, it's recommended to fix strings on the trunk/master repository, and create ad
-hoc patches for string frozen repositories that don't involve string changes.
Mozilla Quirks Mode Behavior
the css parser interprets unitless numbers as px (except for line
-height and any other properties where they have distinct meaning, and except in shorthands).
... block and inline layout [this quirk is present in almost standards mode.] line height (not line
-height) calculations are different to fix bug 5821 and bug 24186 (some other issues are described in bug 22274).
about:memory
explicit allocations this section contains a single tree, called "explicit", that measures all the memory allocated via explicit calls to heap allocation functions (such as malloc and new) and to non
-heap allocations functions (such as mmap and virtualalloc).
...waste 0 ── ghost-windows 109.22 mb ── heap-allocated 164 ── heap-chunks 1.00 mb ── heap-chunksize 114.51 mb ── heap-committed 164.00 mb ── heap-mapped 4.84% ── heap-overhead-ratio 1 ── host-object-urls 0.00 mb ── imagelib-surface-cache 5.27 mb ── js-main-runtime-temporary-peak 0 ── page-faults
-hard 203,349 ── page-faults-soft 274.99 mb ── resident 251.47 mb ── resident-unique 1,103.64 mb ── vsize some measurements of note are as follows.
NSS 3.19.1 release notes
nss 3.19.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_1_rtm/src/ security fixes in nss 3.19.1 bug 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 karthikeyan bhargavan for responsibly disclosing th...
NSS 3.43 release notes
new in nss 3.43 new functionality new functions in sechash.h hash_gethashoidtagbyhashtype - convert type hash_hashtype to type secoidtag in sslexp.h ssl_sendcertificaterequest - allow server to request post
-handshake client authentication.
...note that while the mechanism is present, post
-handshake authentication is currently not tls 1.3 compliant due to bug 1532312 notable changes in nss 3.43 the following ca certificates were added: cn = emsign root ca - g1 sha-256 fingerprint: 40f6af0346a99aa1cd1d555a4e9cce62c7f9634603ee406615833dc8c8d00367 cn = emsign ecc root ca - g3 sha-256 fingerprint: 86a1ecba089c4a8d3bbe2734c612ba341d813e043cf9e8a862cd5c57a36bbe6b cn = emsign root ca - c1 sha-256 fingerprint: 125609aa301da0a249b97a8239cb6a34216f44dcac9f3954b14292f2e8c8608f cn = emsign ecc root ca - c3 sha-256 fingerprint: bc4d809b15189d78db3e1d8cf4f9726a795da1643ca5f1358e1ddb0edc0d7eb3 ...
Overview of NSS
rsa standard that governs implementation of diffie
-hellman key agreement.
... rsa, dsa, ecdsa, diffie
-hellman, ec diffie
-hellman, aes, triple des, des, rc2, rc4, sha-1, sha-256, sha-384, sha-512, md2, md5, hmac: common cryptographic algorithms used in public-key and symmetric-key cryptography.
NSS tools : cmsutil
-h num generate email headers with info about cms message (decode only).
...." -e envfile decode example cmsutil -d [-i infile] [-o outfile] [-d dbdir] [-p password] [-c content] [-n] [
-h num] envelope example cmsutil -e [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, ..." certificate-only example cmsutil -o [-i infile] [-o outfile] [-d dbdir] [-p password] -r "cert1,cert2, .
NSS tools : vfychain
prints root cert subject(double the argument for whole root cert info) -w password database password -w pwfile password file revocation options for pkix api (invoked with -pp options) is a collection of the following flags: [-g type [
-h flags] [-m type [-s flags]] ...] ...
...
-h test flags sets revocation flags for the test type it follows.
NSS Tools cmsutil
-h num generate email headers with info about cms message (decode only).
...." -e envfile cmsutil -d [-i infile] [-o outfile] [-d dbdir] [-p password] [-c content] [-n] [
-h num] cmsutil -e [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, .
NSS Tools pk12util
synopsis pk12util -i p12file [
-h tokenname] [-v] [common-options] or pk12util -o p12file -n certname [-c keycipher] [-c certcipher] [-m | --key_len keylen] [-n | --cert_key_len certkeylen] [common-options] or pk12util -l p12file [
-h tokenname] [-r] [common-options] where [common-options] = [-d dir] [-p dbprefix] [-k slotpasswordfile | -k slotpassword] [-w p12filepasswordfile | -w p12filepassword] syntax to run the pkc...
...
-h tokenname specify the name of the token to import into or export from -v enable debug logging when importing -k slotpasswordfile specify the text file containing the slot's password -k slotpassword specify a slot's password -w p12filepasswordfile specify the text file containing the pkcs 12 file's password -w p12filepassword specify the pkcs 12 file's password -c key-cipher spe...
NSS tools : cmsutil
-h num generate email headers with info about cms message (decode only).
...." -e envfile decode example cmsutil -d [-i infile] [-o outfile] [-d dbdir] [-p password] [-c content] [-n] [
-h num] envelope example cmsutil -e [-i infile] [-o outfile] [-d dbdir] [-p password] -r "recipient1,recipient2, ..." certificate-only example cmsutil -o [-i infile] [-o outfile] [-d dbdir] [-p password] -r "cert1,cert2, .
NSS tools : vfychain
prints root cert subject(double the argument for whole root cert info) -w password database password -w pwfile password file revocation options for pkix api (invoked with -pp options) is a collection of the following flags: [-g type [
-h flags] [-m type [-s flags]] ...] ...
...
-h test flags sets revocation flags for the test type it follows.
JSAPI Cookbook
catch // javascript try { // try some stuff here; for example: foo(); bar(); } catch (exc) { // do error
-handling stuff here } /* jsapi */ /* try some stuff here; for example: */ if (!js_callfunctionname(cx, global, "foo", 0, null, &r)) goto catch_block; /* instead of returning false */ if (!js_callfunctionname(cx, global, "bar", 0, null, &r)) goto catch_block; /* instead of returning false */ return true; catch_block: js::rootedvalue exc(cx); if (!js_getpe...
...ndingexception(cx, &exc)) return false; js_clearpendingexception(cx); /* do error
-handling stuff here */ return true; finally // javascript try { foo(); bar(); } finally { cleanup(); } if your c/c++ cleanup code doesn't call back into the jsapi, this is straightforward: /* jsapi */ bool success = false; if (!js_callfunctionname(cx, global, "foo", 0, null, &r)) goto finally_block; /* instead of returning false immediately */ if (!js_callfunctionname(cx, global, "bar", 0, null, &r)) goto finally_block; success = true; /* intentionally fall through to the finally block.
JS::CompileOptions
selfhostingmode bool true iff the code is self
-hosted.
... the following are used in js shell: "js shell file" "js shell interactive" "js shell load" "js shell evaluate" "js shell run" "js shell disfile" "js shell compfile" "js shell parse" "js shell syntaxparse" "js shell offthreadcompilescript" and the following are used in self
-hosted code and debugger: "self
-hosted" "debugger eval" introductionlineno unsigned line number in the source code which introduces this source code.
JS_FS
selfhostedname const char * the function's name in self
-hosted javascript code.
...js_self_hosted_fn declares a self
-hosted function.
JS_PSGS
gettername const char * the function's name in self
-hosted javascript code for getter function.
... settername const char * the function's name in self
-hosted javascript code for setter function.
JS_SetOptions
mxr id search for jsoption_atline jsoption_xml obsolete since jsapi 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment
-hiding hack used in html script tags.
... mxr id search for jsoption_allow_xml jsoption_moar_xml added in spidermonkey 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment
-hiding hack used in html script tags.
Shell global objects
getselfhostedvalue() get a self
-hosted value by its name.
...if shouldignoreselfhosted is given, control whether self
-hosted frames are considered when checking principals.
Thread Sanitizer
# note: the use of this flag causes clang to automatically link the tsan runtime :) export ldflags="-fsanitize=thread -fpic -pie" # these three are required by tsan ac_add_options --disable-jemalloc ac_add_options --disable-crashreporter ac_add_options --disable-elf
-hack # keep symbols to symbolize tsan traces export moz_debug_symbols=1 ac_add_options --enable-debug-symbols ac_add_options --disable-install-strip # settings for an opt build ac_add_options --enable-optimize="-o2 -gline-tables-only" ac_add_options --disable-debug starting the build process now you start the build process using the regular make -f client.mk command.
...ready exists" else autoconf2.13 mkdir $1 cd $1 llvm_root="/path/to/llvm" cc="$llvm_root/build/bin/clang" \ cxx="$llvm_root/build/bin/clang++" \ cflags="-fsanitize=thread -fpic -pie" \ cxxflags="-fsanitize=thread -fpic -pie" \ ldflags="-fsanitize=thread -fpic -pie" \ ../configure --disable-debug --enable-optimize="-o2 -gline-tables-only" --enable-llvm
-hacks --disable-jemalloc make -j 8 fi using llvm symbolizer for faster/better traces by default, tsan traces are symbolized because otherwise, the runtime suppression list wouldn't work.
Retrieving part of the bookmarks tree
first, you need to get an empty query and options objects from the history service: var historyservice = components.classes["@mozilla.org/browser/nav
-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); var options = historyservice.getnewqueryoptions(); var query = historyservice.getnewquery(); find the folder you want to get known folder ids are retrieved from the bookmarks service.
...complete code listing var historyservice = components.classes["@mozilla.org/browser/nav
-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); var options = historyservice.getnewqueryoptions(); var query = historyservice.getnewquery(); var bookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); var toolbarfolder...
Using the Places history service
creating the history service the places history service's contract id is "@mozilla.org/browser/nav
-history-service;1": var historyservice = components.classes["@mozilla.org/browser/nav
-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); it also responds to the old contract id for url bar autocomplete "@mozilla.org/autocomplete/search;1?name=history" and the contract id for the old history system (since it is backwards-compatible) "@mozil...
...la.org/browser/global
-history;2".
Creating the Component Code
in this case, the long
-hand implementation gives us an opportunity to talk about various features of xpcom.
...you can run regxpcom with the
-h option to see full usage options.
Observer Notifications
topic description browser:purge-session
-history sent when the sanitizer runs to purge all history and other information.
... inspector
-highlighting - sent every time a different node in the page gets highlighted.
nsIBrowserHistory
inherits from: nsiglobalhistory2 last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/nav
-history-service;1.
... to use this service, use: var browserhistory = components.classes["@mozilla.org/browser/nav
-history-service;1"] .getservice(components.interfaces.nsibrowserhistory); method overview void addpagewithdetails(in nsiuri auri, in wstring atitle, in long long alastvisited); obsolete since gecko 15.0 void markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 void markpageastyped(in nsiuri auri); obsolete since gecko 22.0 void registeropenpage(in nsiuri auri); obsolete since gecko 9.0 void removeallpages(); void removepage(in nsiuri auri); void removepages([array, size_is(alength)] in nsiuri auris, in unsigned long alength, in boolean adobatchnotify); void removepagesbytimeframe(in long l...
nsIExternalHelperAppService
inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/uriloader/external
-helper-app-service;1.
... to access this service, use: var externalhelperappservice = components.classes["@mozilla.org/uriloader/external
-helper-app-service;1"] .getservice(components.interfaces.nsiexternalhelperappservice); method overview boolean applydecodingforextension(in autf8string aextension, in acstring aencodingtype); nsistreamlistener docontent(in acstring amimecontenttype, in nsirequest arequest, in nsiinterfacerequestor awindowcontext, in boolean aforcesave); methods applydecodingforextension() determines whether or not data whose filename has the specified extension should be decoded from the specified encoding type before being saved or delivered to helper applications.
nsINavHistoryService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) implemented by: "@mozilla.org/browser/nav
-history-service;1".
... to use this service, use: var historyservice = components.classes["@mozilla.org/browser/nav
-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); method overview astring getpagetitle(in nsiuri auri); void markpageasfollowedbookmark(in nsiuri auri); void markpageasfollowedlink(in nsiuri auri); void markpageastyped(in nsiuri auri); boolean canadduri(in nsiuri auri); long long addvisit(in nsiuri auri, in prtime atime, in nsiuri areferringuri, in long atransitiontype, in boolean aisredirect, in long long asessionid); obsolete since gecko 22.0 nsinavhistoryquery getnewquery(); nsinavhistoryqueryoptions getnewqueryoptions(); nsinavhistoryresult executequery(...
nsISHEntry
inherits from: nsihistoryentry last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) implemented by: @mozilla.org/browser/session
-history-entry;1.
... to create an instance, use: var shentry = components.classes["@mozilla.org/browser/session
-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview void addchildshell(in nsidocshelltreeitem shell); nsidocshelltreeitem childshellat(in long index); void clearchildshells(); nsishentry clone(); void create(in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation); native code only!
WebIDL bindings
values other than everything, when used in combination with [affects=nothing], can used by the jit to perform loop
-hoisting and common subexpression elimination on the return values of idl attributes and methods.
... the nothing value, when used with [dependson] values other than everything, can used by the jit to perform loop
-hoisting and common subexpression elimination on the return values of idl attributes and methods, as well as code motion past dom methods that might depend on system state but have no side effects.
UI Tour - Firefox Developer Tools
toolbar at the top of the right
-hand pane, there's a toolbar: the toolbar consists of: four buttons to control the debugger's movement through the script: play/pause (f8): pauses or resumes execution of the script you're debugging.
... scopes in the right
-hand pane you'll see a label "scopes" with a disclosure arrow next to it.
Debugger-API - Firefox Developer Tools
the debugger api cannot currently observe self
-hosted javascript.
... this is not inherent in the api’s design, but simply that the self
-hosting infrastructure isn’t prepared for the kind of invasions the debugger api can perform.
Aggregate view - Firefox Developer Tools
on the right
-hand side is a pane that just says "select an item to view its retaining paths".
...so it's good for getting an overview of where your program is memory
-hungry.
Network request details - Firefox Developer Tools
network request details clicking on a row displays a new pane in the right
-hand side of the network monitor, which provides more detailed information about the request.
... clicking the icon at the right
-hand end of the toolbar closes the details pane and returns you to the list view.
Toolbox - Firefox Developer Tools
docking mode by default, the toolbox appears docked to the bottom of the browser window, but you can also dock it to the right
-hand side of the window, or make it a standalone window, using buttons in the toolbar.
... toolbox
-hosted tools then there is an array of labeled buttons which enables you to switch between the different tools hosted by the toolbox.
Using Fetch - Web APIs
a headers object is a simple multi-map of names to values: const content = 'hello world'; const myheaders = new headers(); myheaders.append('content-type', 'text/plain'); myheaders.append('content-length', content.length.tostring()); myheaders.append('x-custom
-header', 'processthisimmediately'); the same can be achieved by passing an array of arrays or an object literal to the constructor: const myheaders = new headers({ 'content-type': 'text/plain', 'content-length': content.length.tostring(), 'x-custom
-header': 'processthisimmediately' }); the contents can be queried and retrieved: console.log(myheaders.has('content-type')); // true console...
....log(myheaders.has('set-cookie')); // false myheaders.set('content-type', 'text/html'); myheaders.append('x-custom
-header', 'anothervalue'); console.log(myheaders.get('content-length')); // 11 console.log(myheaders.get('x-custom
-header')); // ['processthisimmediately', 'anothervalue'] myheaders.delete('x-custom
-header'); console.log(myheaders.get('x-custom
-header')); // [ ] some of these operations are only useful in serviceworkers, but they provide a much nicer api for manipulating headers.
Using files from web applications - Web APIs
use the visually
-hidden technique instead.
... consider this html: <input type="file" id="fileelem" multiple accept="image/*" class="visually
-hidden"> <label for="fileelem">select some files</label> and this css: .visually
-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibility, :focus-within is required on modern firefox and chrome */ input.visually
-hidden:focus + label { outline: thin dotted; } input.visually
-hidden:focus-within + label { outline: thin dotted; } there is no need to add javascript code to call fileelem.click().
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.
Web-based protocol handlers - Web APIs
background it's fairly common to find web pages link to resources using non
-http protocols.
...the data sent:</p> <textarea> <?php echo(htmlspecialchars($value, ent_quotes, 'utf-8')); ?> </textarea> </body> </html> references http://www.w3.org/tr/2011/wd
-html5-20110525/timers.html#custom
-handlers see also window.navigator.registercontenthandler nsiprotocolhandler (xul only) registerprotocolhandler enhancing the federated web at mozilla webdev register a custom protocolhandler at google developers.
WebGL model view projection - Web APIs
the reason to flip the z axis is that the clip space coordinate system is a left
-handed coordinate system (wherein the z-axis points away from the viewer and into the screen), while the convention in mathematics, physics and 3d modeling, as well as for the view/eye coordinate system in opengl, is to use a right
-handed coordinate system (z-axis points out of the screen towards the viewer) .
... more on that in the relevant wikipedia articles: cartesian coordinate system, right
-hand rule.
Basic concepts behind Web Audio API - Web APIs
the panner's position is described with right
-hand cartesian coordinates; its movement using a velocity vector, necessary for creating doppler effects, and its directionality using a directionality cone.the cone can be very large, e.g.
... the listener's position is described using right
-hand cartesian coordinates; its movement using a velocity vector and the direction the listener's head is pointing using two direction vectors: up and front.
XMLHttpRequest.setRequestHeader() - Web APIs
note: for your custom fields, you may encounter a "not allowed by access-control-allow
-headers in preflight response" exception when you send requests across domains.
... in this situation, you need to set up the access-control-allow
-headers in your response header at server side.
XRInputSource.handedness - Web APIs
this may indicate, for example, an input source which isn't hand
-held, such as controls built into a headset or an input device attached to the head or body.
...if a gripspace is present, that means the input source is a hand
-held device of some sort, so it should be rendered visibly if possible.
Using the link role - Accessibility
html <h1>role="link" example</h1> <span data
-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryse...
...e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data
-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
Using the slider role - Accessibility
<label id="day-label">days</label> <div class="day-slider"> <div id="day
-handle" class="day-slider
-handle" role="slider" aria-labelledby="day-label" aria-valuemin="1" aria-valuemax="7" aria-valuenow="2" aria-valuetext="monday"> </div> </div> the code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes: var daynames = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday...
...", "saturday"]; var updateslider = function (newvalue) { var handle = document.getelementbyid("day
-handle"); handle.setattribute("aria-valuenow", newvalue.tostring()); handle.setattribute("aria-valuetext", daynames[newvalue]); }; working examples: slider example notes aria attributes used aria-valuemin aria-valuemax aria-valuenow aria-valuetext aria-orientation related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the slider role ...
ARIA: button role - Accessibility
a menu button is a button that controls a menu and has an aria
-haspopup property attribute set to either menu or true.
... working draft notes aria attributes used button aria-pressed aria-expanded aria
-haspopup additional resources strong native semantics in html5 notes on using aria in html official wai-aria example code aria menubutton role ...
ARIA: textbox role - Accessibility
if list or both is set, the aria-controls and aria
-haspopup attributes should also be included.
...additionally, either the textbox or a containing element with role combobox has a value for aria
-haspopup that matches the role of the element that contains the list of suggested values.
Accessibility documentation index - Accessibility
19 using the aria
-hidden attribute aria, accessibility, attribute, codingscripting, html, javascript, needscontent, role(2), agent, alert, user, useragent this technique demonstrates how to use the aria
-hidden attribute.
... the aria
-hidden attribute can either expose or hide non-interactive content from the accessibility api.
::placeholder - CSS: Cascading Style Sheets
<label for="user-email">your email address</label> <span id="user-email
-hint" class="input
-hint">example: jane@sample.com</span> <input id="user-email" aria-describedby="user-email
-hint" name="email" type="email"> placeholders in form fields are harmful — nielsen norman group windows high contrast mode placeholder text will appear with the same styling as user-entered text content when rendered in windows high contrast mode.
... greg whitworth — how to use -ms
-high-contrast labels placeholders are not a replacement for the <label> element.
height - CSS: Cascading Style Sheets
it is a range feature, meaning that you can also use the prefixed min
-height and max
-height variants to query minimum and maximum values, respectively.
... examples html <div>watch this element as you resize your viewport's height.</div> css /* exact height */ @media (height: 360px) { div { color: red; } } /* minimum height */ @media (min
-height: 25rem) { div { background: yellow; } } /* maximum height */ @media (max
-height: 40rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'height' in that specification.
Mastering margin collapsing - CSS: Cascading Style Sheets
no content separating parent and descendants if there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, min
-height, or max
-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse.
... empty blocks if there is no border, padding, inline content, height, or min
-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
the wrapper min
-height is set, so it defines the height of the flex container.
... 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 class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> .wrapper { display: flex; align-items: flex-end; min
-height: 200px; } .box1 { align-self: stretch; } .box2 { align-self: flex-start; } alignment in css grids this second example uses a grid to create the same layout.
Using CSS gradients - CSS: Cascading Style Sheets
you can include a color
-hint to move the midpoint of the transition value to a certain point along the gradient.
... <div class="color
-hint"></div> <div class="simple-linear"></div> div { width: 120px; height: 120px; float: left; margin-right: 10px; } .color
-hint { background: linear-gradient(blue, 10%, pink); } .simple-linear { background: linear-gradient(blue, pink); } creating color bands & stripes to include a solid, non-transitioning color area within a gradient, include two positions for the color stop.
Using CSS transforms - CSS: Cascading Style Sheets
} /* 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, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg)...
...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 each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) t...
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.
Microsoft CSS extensions - CSS: Cascading Style Sheets
-ms-accelerator -ms-block-progression -ms-content-zoom-chaining -ms-content-zooming -ms-content-zoom-limit -ms-content-zoom-limit-max -ms-content-zoom-limit-min -ms-content-zoom-snap -ms-content-zoom-snap-points -ms-content-zoom-snap-type -ms-filter -ms-flow-from -ms-flow-into -ms
-high-contrast-adjust -ms
-hyphenate-limit-chars -ms
-hyphenate-limit-lines -ms
-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar
-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-track-color -ms-scroll-chaining -...
...snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms
-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...
CSS reference - CSS: Cascading Style Sheets
e-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline
-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-comp...
...ositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-block-sizemax
-heightmax
-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin
-heightmin
-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-rotate:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-blockoverflow-inlineoverflow-wrapoverflow-xover...
align-content - CSS: Cascading Style Sheets
stretch if the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max
-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.
...center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min
-height: 30px; } #item2 { background-color: #a0c8ff; min
-height: 50px; } #item3 { background-color: #ffa08c; min
-height: 40px; } #item4 { background-color: #ffff8c; min
-height: 60px; } #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; } ...
aspect-ratio - CSS: Cascading Style Sheets
aluesfirefox partial support 71notes partial support 71notes notes firefox 71 adds internal support only for mapped values no support 69 — 71notes disabled notes firefox 69 adds internal support only for mapped valuesdisabled from version 69 until version 71 (exclusive): this feature is behind the layout.css.width-and
-height-map-to-aspect-ratio.enabled preference (needs to be set to true).
... full support 79edge full support 79firefox full support 71 full support 71 no support 69 — 71disabled disabled from version 69 until version 71 (exclusive): this feature is behind the layout.css.width-and
-height-map-to-aspect-ratio.enabled preference (needs to be set to true).
display - CSS: Cascading Style Sheets
table
-header-group these elements behave like <thead> html elements.
...&& list-item<display-internal> = table-row-group | table
-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid examples display value comparison in this example we have two block-level container elements, e...
fit-content() - CSS: Cascading Style Sheets
the function can also be used as laid out box size for width, height, min-width, min
-height, max-width and max
-height, where the maximum and minimum sizes refer to the content size.
... working draft defines the function as laid out box size for width, height, min-width, min
-height, max-width and max
-height.
font-size-adjust - CSS: Cascading Style Sheets
<number> choose the size of the font so that its lowercase letters (as determined by the x
-height of the font) are the specified number times the font-size.
... the number specified should generally be the aspect ratio (ratio of x
-height to font size) of the first choice font-family.
font-variant - CSS: Cascading Style Sheets
the possible values are: common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no
-historical-ligatures, contextual, and no-contextual.
...se | titling-caps ] | <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero | <east-asian-variant-values> | <east-asian-width-values> | ruby ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no
-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ]<feature-value-name> = <custom-ident><numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-...
place-items - CSS: Cascading Style Sheets
stretch if the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max
-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
... examples placing items in a flex container div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min
-height: 30px; } #item2 { background-color: #a0c8ff; min
-height: 50px; } #item3 { background-color: #ffa08c; min
-height: 40px; } #item4 { background-color: #ffff8c; min
-height: 60px; } #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; } ...
repeating-radial-gradient() - CSS: Cascading Style Sheets
at <position> , <color-stop-list> ) \---------------------------------------------------------------/\-----------------/ contour, size and position of the ending shape list of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color
-hint>?
... 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%); } ...
Adding captions and subtitles to HTML5 video - Developer guides
for this article we will refer to the text tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of
-hearing people.
...there are only a handful of css properties that can be applied to a text cue: color opacity visibility text-decoration text-shadow background shorthand properties outline shorthand properties font shorthand properties, including line
-height white-space for example, to change the text colour of the text track cues you can write: ::cue { color:#ccc; } if the webvtt file uses voice spans, which allow cues to be defined as having a particular "voice": 0 00:00:00.000 --> 00:00:12.000 <v test>[test]</v> then this specific 'voice' will be stylable like so: ::cue(v[voice='test']) { color:#fff; background:#0095dd; } n...
<a>: The Anchor element - HTML: Hypertext Markup Language
external links and linking to non
-html resources links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.
... link that opens a new tab/window <a target="_blank" href="https://www.wikipedia.org"> wikipedia (opens in new tab) </a> link to a non
-html resource <a href="2017-annual-report.ppt"> 2017 annual report (powerpoint) </a> if an icon is used to signify link behavior, make sure it has alt text: <a target="_blank" href="https://www.wikipedia.org"> wikipedia <img alt="(opens in new tab)" src="newtab.svg"> </a> <a href="2017-annual-report.ppt"> 2017 annual report <img alt="(powerpoint file)" src="ppt-icon.svg"> </a> we...
<tr>: The Table Row element - HTML: Hypertext Markup Language
table { border: 1px solid black; } th, td { border: 1px solid black; } result row and column spanning now, let's introduce another column that shows the date the user's membership ended, along with a super
-heading above the "joined" and "canceled" dates called "membership dates".
... result let's actually look at the output first this time: notice how the heading area here is actually two rows, one with "name", "id", "membership dates", and "balance" headings, and the other with "joined" and "canceled", which are sub
-headings below "membership dates".
Evolution of HTTP - HTTP
post
-http/2 evolution http didn't stop evolving upon the release of http/2.
... the introduction of client
-hints allows the browser, or client, to proactively communicate information about its requirements, or hardware constraints, to the server.
CORS errors - HTTP
it will probably look like this: the text of the error message will be something similar to the following: cross-origin request blocked: the same origin policy disallows reading the remote resource at https://some-url
-here.
...-control-allow-origin’ is ‘*’ reason: did not find method in cors header ‘access-control-allow-methods’ reason: expected ‘true’ in cors header ‘access-control-allow-credentials’ reason: cors preflight channel did not succeed reason: invalid token ‘xyz’ in cors header ‘access-control-allow-methods’ reason: invalid token ‘xyz’ in cors header ‘access-control-allow
-headers’ reason: missing token ‘xyz’ in cors header ‘access-control-allow
-headers’ from cors preflight channel reason: multiple cors header ‘access-control-allow-origin’ not allowed ...
Compression in HTTP - HTTP
hop-by
-hop compression hop-by
-hop compression, though similar to end-to-end compression, differs by one fundamental element: the compression doesn't happen on the resource in the server, creating a specific representation that is then transmitted, but on the body of the message between any two nodes on the path between the client and the server.
... in practice, hop-by
-hop compression is transparent for the server and the client, and is rarely used.
Connection management in HTTP/1.x - HTTP
it's important point to note that connection management in http applies to the connection between two consecutive nodes, which is hop-by
-hop and not end-to-end.
...the http headers involved in defining the connection model, like connection and keep-alive, are hop-by
-hop headers with their values able to be changed by intermediary nodes.
Connection - HTTP
except for the standard hop-by
-hop headers (keep-alive, transfer-encoding, te, connection, trailer, upgrade, proxy-authorization and proxy-authenticate), any hop-by
-hop headers used by the message must be listed in the connection header, so that the first proxy knows it has to consume them and not forward them further.
... standard hop-by
-hop headers can be listed too (it is often the case of keep-alive, but this is not mandatory).
Date.prototype.toLocaleString() - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: let date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses month-day-year order and 12
-hour time with am/pm console.log(date.tolocalestring('en-us')); // → "12/19/2012, 7:00:00 pm" // british english uses day-month-year order and 24
-hour time without am/pm console.log(date.tolocalestring('en-gb')); // → "20/12/2012 03:00:00" // korean uses year-month-day order and 12
-hour time with am/pm console.log(date.tolocalestring('ko-kr')); // → "2012.
...dezember 2012" // an application may want to use utc and make that visible options.timezone = 'utc'; options.timezonename = 'short'; console.log(date.tolocalestring('en-us', options)); // → "thursday, december 20, 2012, gmt" // sometimes even the us needs 24
-hour time console.log(date.tolocalestring('en-us', { hour12: false })); // → "12/19/2012, 19:00:00" avoid comparing formatted date values to static values most of the time, the formatting returned by tolocalestring() is consistent.
Date.prototype.toLocaleTimeString() - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses 12
-hour time with am/pm console.log(date.tolocaletimestring('en-us')); // → "7:00:00 pm" // british english uses 24
-hour time without am/pm console.log(date.tolocaletimestring('en-gb')); // → "03:00:00" // korean uses 12
-hour time with am/pm console.log(date.tolocaletimestring('ko-kr')); // → "오후 12:00:00" // arabic in most arabic speaking countries uses real arabic digits console.log(dat...
...00" using options the results provided by tolocaletimestring() can be customized using the options argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // an application may want to use utc and make that visible var options = { timezone: 'utc', timezonename: 'short' }; console.log(date.tolocaletimestring('en-us', options)); // → "3:00:00 am gmt" // sometimes even the us needs 24
-hour time console.log(date.tolocaletimestring('en-us', { hour12: false })); // → "19:00:00" // show only hours and minutes, use options with the default locale - use an empty array console.log(date.tolocaletimestring([], { hour: '2-digit', minute: '2-digit' })); // → "20:01" specifications specification ecmascript (ecma-262)the definition of 'date.prototype.tolocaleti...
Intl.Locale.prototype.hourCycle - JavaScript
next, add the
-hc extension key to indicate that you are adding an hour cycle.
... let fr24hour = new intl.locale("fr-fr-u
-hc
-h23"); console.log(fr24hour.hourcycle); // prints "h23" adding an hour cycle via the configuration object argument the intl.locale constructor has an optional configuration object argument, which can contain any of several extension types, including hour cycle types.
Intl.Locale.prototype.maximize() - JavaScript
examples using maximize let mylocale = new intl.locale("fr", {hourcycle: "h24", calendar: "gregory"}); console.log(mylocale.basename); // prints "fr" console.log(mylocale.tostring()); // prints "fr-u-ca-gregory
-hc
-h24" let mylocmaximized = mylocale.maximize(); // prints "fr-latn-fr".
...console.log(mylocmaximized.basename); // prints "fr-latn-fr-u-ca-gregory
-hc
-h24".
Intl.Locale.prototype.minimize() - JavaScript
examples using minimize let mylocale = new intl.locale("fr-latn-fr", {hourcycle: "h24", calendar: "gregory"}); console.log(mylocale.basename); // prints "fr-latn-fr" console.log(mylocale.tostring()); // prints "fr-latn-fr-u-ca-gregory
-hc
-h24" let mylocminimized = mylocale.minimize(); // prints "fr", since french is only written in the latin script // and is most likely to be spoken in france.
... console.log(mylocminimized.basename); // prints "fr-u-ca-gregory
-hc
-h24".
Intl.NumberFormat - JavaScript
chinese decimal console.log(new intl.numberformat('zh
-hans-cn-u-nu
-hanidec').format(number)); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(new intl.numberformat(['ban', 'id']).format(number)); // → 123.456,789 using options the results can be customized using the options argument: var number = 123456.789; // re...
...n doesn't use a minor unit console.log(new intl.numberformat('ja-jp', { style: 'currency', currency: 'jpy' }).format(number)); // → ￥123,457 // limit to three significant digits console.log(new intl.numberformat('en-in', { maximumsignificantdigits: 3 }).format(number)); // → 1,23,000 using style and unit console.log(new intl.numberformat("pt-pt", { style: 'unit', unit: "mile-per
-hour" }).format(50)); // → 50 mi/h console.log((16).tolocalestring('en-gb', { style: "unit", unit: "liter", unitdisplay: "long" })); // → 16 litres specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat' in that specification.
Nullish coalescing operator (??) - JavaScript
the nullish coalescing operator (??) is a logical operator that returns its right
-hand side operand when its left
-hand side operand is null or undefined, and otherwise returns its left
-hand side operand.
...'hi neighborhood'; console.log(preservingfalsy); // '' (as mytext is neither undefined nor null) short-circuiting like the or and and logical operators, the right
-hand side expression is not evaluated if the left
-hand side proves to be neither null nor undefined.
Digital audio concepts - Web media technologies
192000 hz ultra
-high resolution audio.
... high-resolution (96 khz) audio is used in some high-end audio systems, and it and ultra
-high resolution (192 khz) audio are useful for audio mastering, where you need as much quality as possible while manipulating and editing the sound before downsampling to the sample rate you will use for the final product.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
alignment-baseline baseline-shift clip clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering cursor direction display dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation
-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decorati...
... value: normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; animatable: yes glyph-orientation
-horizontal deprecated since svg 2 it controls glyph orientation when the inline-progression-direction is horizontal.
rotate - SVG: Scalable Vector Graphics
if the value of rotate is auto, the element turns to align its right
-hand side in the current direction of motion.
... if the value is auto-reverse, it turns its left
-hand side in the current direction of motion.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation
-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented.
... various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation
-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtspanelement recently implemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 273171).
Transport Layer Security - Web security
numerous mechanisms have been disabled: renegotiation, generic data compression, digital signature algorithm (dsa) certificates, static rsa key exchange, and key exchange with custom diffie
-hellman (dh) groups.
...the timeout value can be varied by editing the network.http.tls
-handshake-timeout pref in about:config.
ui/toolbar - Archive of obsolete content
toolbars get a close button at the right
-hand side, and users can show or hide the toolbar using the firefox "view/toolbars" menu, alongside built-in toolbars like the bookmarks toolbar.
cfx to jpm - Archive of obsolete content
permanently removed options jpm has dropped support for: --extra-packages --use-config --package-path --pkgdir --no-strip-xpi -
-harness-option --manifest-overload --output-file --templatedir --keydir --profiledir --overload-modules --static-args --app --no-run --addons --e10s --logfile --dependencies --force-mobile --test-runner-pkg instead of --profiledir and --overload-modules, use --profile and --overload.
jpm-mobile - Archive of obsolete content
jpm usage is: jpm-mobile [command] [options] jpm supports the following global options:
-h, -
-help - show a help message and exit -v, --version - print the jpm version number installation jpm-mobile is distributed using the node package manager npm, so to get jpm-mobile you need to have npm installed, if you haven't already.
Unit Testing - Archive of obsolete content
the second function tests the module's error
-handling code by passing an empty string into atob() and using assert.throws() to check that the expected exception is raised.
NP_GetMIMEDescription - Archive of obsolete content
#include <libgnomevfs/gnome-vfs-mime
-handlers.h> #include <libgnomevfs/gnome-vfs-mime-info.h> #include <libgnomevfs/gnome-vfs-utils.h> // const char* gnome_vfs_mime_get_description (const char *mime_type); const char* desc = gnome_vfs_mime_get_description ("audio/ogg"); if you use gnome gio (gio-2.0), you can get the mime type description too.
TCP/IP Security - Archive of obsolete content
newer applications of transport layer security protocols protect both http and non
-http application communications, including client/server applications and other network traffic.
-ms-scrollbar-track-color - Archive of obsolete content
div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar
-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar
-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut...
::-ms-browse - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms
-high-contrast-adjust background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-s...
::-ms-check - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms
-high-contrast-adjust background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-r...
::-ms-clear - Archive of obsolete content
-ms
-high-contrast-adjust background-clip background-color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-ri...
::-ms-expand - Archive of obsolete content
-ms
-high-contrast-adjust background-clip background-color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color bord...
::-ms-fill-lower - Archive of obsolete content
lor border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms
-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width specifications not part of any specification.
::-ms-fill-upper - Archive of obsolete content
lor border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms
-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-fill-upper specifications not part of any specification.
::-ms-fill - Archive of obsolete content
animation-name background-clip, background-color, background-image, background-origin, background-repeat, 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: ...
::-ms-reveal - Archive of obsolete content
lor border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms
-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-reveal specifications not part of any specification.
::-ms-thumb - Archive of obsolete content
lor border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms
-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-thumb specifications not part of any specification.
::-ms-ticks-after - Archive of obsolete content
lor border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms
-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-after ...
::-ms-ticks-before - Archive of obsolete content
lor border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms
-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-before ...
::-ms-track - Archive of obsolete content
lor border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms
-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: ...
TimerFirings logging
.js?v=12086:3:3389 94 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] https://ad.doubleclick.net/ddm/adi/n7921.1283839cadreon.com.au/b9038144.122190976;sz=300x600;click=http://pixel.mathtag.com/click/img?mt_aid=2744535504761193354&mt_id=1895890&mt_adid=148611&mt_sid=973379&mt_exid=9&mt_inapp=0&mt_uuid=353d5460-19f6-4400-9bbd-d0fcc3bcf595&mt_3pck=http%3a//beacon-apac
-hkg1.rubiconproject.com/beacon/t/d1f9921d-4e47-448f-b6ba-36cae1c31b65/&redirect=;ord=2744535504761193354?:83:0 94 801266240[7f7c1f248000]: [7163] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler 92 -495057024[7f74e105ba00]: [7108] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler the first column shows how many times the particular line appeared...
powermetrics
also note that powermetrics
-h is a better guide to the the command-line options than man powermetrics.
Performance
see also the documentation on leak
-hunting strategies and tips.
An overview of NSS Internals
once the key agreement is done, a symmetric encryption will be used (until a potential re
-handshake on an existing channel).
NSS Key Log Format
it has been superseded by client_random which also works with other key-agreement algorithms (such as those based on diffie
-hellman) and is supported since wireshark 1.8.0.
NSS_3.11.10_release_notes.html
bug 398680: assertion botch in ssl3_registerserverhelloextensionsender doing second handshake with ssl_forcehandshake bug 403240: threads hanging in nss_initlock bug 403888: memory leak in trustdomain.c bug 416067: certutil -l
-h token doesn't report token authentication failure bug 417637: tstclnt crashes if -p option is not specified bug 421634: don't send an sni client hello extension bearing an ipv6 address bug 422918: add verisign class 3 public primary ca - g5 to nss bug 424152: add thawte primary root ca to nss bug 424169: add geotrust primary certification authority root to nss bug 425469: add multiple...
NSS 3.12.4 release notes
bug 321755: implement crldistributionpoint extension in libpkix bug 391434: avoid multiple encoding/decoding of pkix_pl_oid to and from ascii string bug 405297: problems building nss/lib/ckfw/capi/ with mingw gcc bug 420991: libpkix returns wrong nss error code bug 427135: add super
-h (sh3,4) architecture support bug 431958: improve des and sha512 for x86_64 platform bug 433791: win16 support should be deleted from nss bug 449332: secu_parsecommandline does not validate its inputs bug 453735: when using cert9 (sqlite3) db, set or change master password fails bug 463544: warning: passing enum* for an int* argument in pkix_validate.c bug 469588: coverity errors reported for soft...
NSS_3.12_release_notes.html
337361: leaks in jar_parse_any (security/nss/lib/jar/jarver.c) bug 338453: leaks in security/nss/lib/jar/jarfile.c bug 351408: leaks in jar_jar_sign_archive (security/nss/lib/jar/jarjart.c) bug 351443: remove unused code from mozilla/security/nss/lib/jar bug 351510: remove use_moz_thread code from mozilla/security/lib/jar bug 118830: nss public header files should be c++ safe bug 123996: certutil
-h doesn't document certutil -c -a bug 178894: quick decoder updates for lib/certdb and lib/certhigh bug 220115: ckm_invalid_mechanism should be an unsigned long constant.
NSS 3.20 release notes
nss embeds fixed dhe parameters sized 2048, 3072, 4096, 6144 and 8192 bits, which were copied from version 08 of the internet-draft "negotiated finite field diffie
-hellman ephemeral parameters for tls", appendix a.
NSS 3.21 release notes
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.
NSS 3.32 release notes
:b5:af:7e:78:99:c8:a2:66:d9:2e cn = swisscom root ev ca 2 sha-256 fingerprint: d9:5f:ea:3c:a4:ee:dc:e7:4c:d7:6e:75:fc:6d:1f:f6:2c:44:1f:0f:a8:bc:77:f0:34:b1:9e:5d:b2:58:01:5d cn = trusted certificate services sha-256 fingerprint: 3f:06:e5:56:81:d4:96:f5:be:16:9e:b5:38:9f:9f:2b:8f:f6:1e:17:08:df:68:81:72:48:49:cd:5d:27:cb:69 cn = utn-userfirst
-hardware sha-256 fingerprint: 6e:a5:47:41:d0:04:66:7e:ed:1b:48:16:63:4a:a3:a7:9e:6e:4b:96:95:0f:82:79:da:fc:8d:9b:d8:81:21:37 cn = utn-userfirst-object sha-256 fingerprint: 6f:ff:78:e4:00:a7:0c:11:01:1c:d8:59:77:c4:59:fb:5a:f9:6a:3d:f0:54:08:20:d0:f4:b8:60:78:75:e5:8f bugs fixed in nss 3.32 nss versions 3.28.x, 3.29.x.
NSS 3.44 release notes
1533216 - cert_decodecertpackage() crash with netscape certificate sequences 1533616 - sdb_getattributevaluenolock should make at most one sql query, rather than one for each attribute 1531236 - provide accessor for certcertificate.dercert 1536734 - lib/freebl/crypto_primitives.c assumes a big endian machine 1532384 - in nss test certificates, use @example.com (not @bogus.com) 1538479 - post
-handshake messages after async server authentication break when using record layer separation 1521578 - x25519 support in pk11pars.c 1540205 - freebl build fails with -dnss_disable_chachapoly 1532312 - post
-handshake auth doesn't interoperate with openssl 1542741 - certutil -f crashes with segmentation fault 1546925 - allow preceding text in try comment 1534468 - expose chacha20 primitive 14...
NSS 3.49 release notes
bsan issue in softoken ckm_nss_chacha20_ctr initialization bug 1590001 - additional hrr tests (cve-2019-17023) bug 1600144 - treat clienthello with message_seq of 1 as a second clienthello bug 1603027 - test that esni is regenerated after helloretryrequest bug 1593167 - intermittent mis-reporting potential security risk sec_error_unknown_issuer bug 1535787 - fix automation/release/nss-release
-helper.py on macos bug 1594933 - disable building dbm by default bug 1562548 - improve gcm perfomance on aarch32 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49 shared libraries are backward compatible with all older ns...
NSS API Guidelines
it also provides general certificate
-handling routines (create a certificate, verify, add/check certificate extensions).
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
s %s\n --for generating cert request (for ca also)\n\n", progname, "-g -s <subject> -r <csr>"); fprintf(stderr, "%s %s\n --to input and store cert (for ca also)\n\n", progname, "-a -n <nickname> -t <trust> -c <cert> [ -r <csr> -u <issuernickname> [-x <\"\">] -m <serialnumber> ]"); fprintf(stderr, "%s %s\n --to put cert in header\n\n", progname, "
-h -n <nickname> -b <headerfilename> [-v <\"\">]"); fprintf(stderr, "%s %s\n --to find public key from cert in header and encrypt\n\n", progname, "-e -b <headerfilename> -i <ipfilename> -e <encryptfilename> "); fprintf(stderr, "%s %s\n --decrypt using corresponding private key \n\n", progname, "-d -b <headerfilename> -e <encryptfilename> -o <opfilename>"); ...
sample2
fprintf(stderr, "commands:\n\n"); fprintf(stderr, "%s %s\n --for generating cert request (for ca also)\n\n", progname, "-g -s <subject> -r <csr>"); fprintf(stderr, "%s %s\n --to input and store cert (for ca also)\n\n", progname, "-a -n <nickname> -t <trust> -c <cert> [ -r <csr> -u <issuernickname> [-x <\"\">] -m <serialnumber> ]"); fprintf(stderr, "%s %s\n --to put cert in header\n\n", progname, "
-h -n <nickname> -b <headerfilename> [-v <\"\">]"); fprintf(stderr, "%s %s\n --to find public key from cert in header and encrypt\n\n", progname, "-e -b <headerfilename> -i <ipfilename> -e <encryptfilename> "); fprintf(stderr, "%s %s\n --decrypt using corresponding private key \n\n", progname, "-d -b <headerfilename> -e <encryptfilename> -o <opfilename>"); fprintf(stderr, "%s %s\n --sign using priva...
FIPS mode of operation
fc_wrapkey: rsa key wrapping fc_unwrapkey: rsa key wrapping fc_derivekey: diffie
-hellman, ec diffie
-hellman random number generation functions fc_seedrandom fc_generaterandom: performs continuous random number generator test.
NSS tools : crlutil
to see a usage string, issue the command without options, or with the
-h option.
NSS Tools crlutil
to see a usage string, issue the command without options, or with the
-h option.
NSS tools : crlutil
to see a usage string, issue the command without options, or with the
-h option.
NSS tools : signtool
synopsis signtool [-k keyname]
-h -h -l -l -m -v -w -g nickname -s size -b basename [[-c compression level] ] [[-d cert-dir] ] [[-i installer script] ] [[-m metafile] ] [[-x name] ] [[-f filename] ] [[-t|--token tokenname] ] [[-e extension] ] [[-o] ] [[-z] ] [[-x] ] [[--outfile] ] [[--verbose value] ] [[--norecurse] ] [[--leavearc] ] [[-j directory] ] [[-z jarfile] ] [[-o] ] [[-p password] ] [directory-tree] [archive] description the signing tool, signtool, creates digital signatures and uses a java archive (jar) file to associate the signatures with files in a directory.
Rhino shell
runcommand("sort", {input: "c\na\nb"}) a b c 0 js> // demo of output and err options js> var opt={input: "c\na\nb", output: 'sort output:\n'} js> runcommand("sort", opt) 0 js> print(opt.output) sort output: a b c js> var opt={input: "c\na\nb", output: 'sort output:\n', err: ''} js> runcommand("sort", "--bad-arg", opt) 2 js> print(opt.err) /bin/sort: unrecognized option `--bad-arg' try `/bin/sort -
-help' for more information.
Hacking Tips
(gdb) continue compiling self
-hosted:650:20470-21501 bailout from self
-hosted:20:403-500 invalidate self
-hosted:20:403-500 note: the line 3196, listed above, corresponds to the location of the jit spew inside jit::invalidate function.
Invariants
the public api for compartment
-hopping, jsautoentercompartment, and the internal api, js::autocompartment, both make sure the invariant is maintained.
JSAPI User Guide
most errors, including those raised by js_reporterror, are represented as javascript exceptions and thus interact with the javascript exception
-handling language features, try, catch, and finally.
JSFunctionSpec
selfhostedname const char * the function's name in self
-hosted javascript code.
Animation inspector example: CSS transitions - Firefox Developer Tools
html content <div class="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 { filte...
Animation inspector example: Web Animations API - Firefox Developer Tools
html content <div 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.33...
about:debugging - Firefox Developer Tools
when about:debugging opens, on the left
-hand side, you'll see a sidebar with two options and information about your remote debugging setup: setup use the setup tab to configure the connection to your remote device.
Firefox Developer Tools
the ellipsis menu on the right
-hand side of developer tools contains several commands that let you perform actions or change tool settings.
CSSImageValue - Web APIs
examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min
-height: 100px; min-width: 100px; background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map.
CSSStyleDeclaration.setProperty() - Web APIs
"color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; margin: 20px; height: 30px; line
-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line
-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; } javascript const borderbtn = document.queryselector('.border'); c...
CSSStyleSheet - Web APIs
object getting the cssstylesheet object from the owner <style> and <link> elements in the document yes .ownernode htmllinkelement, htmlstyleelement, or svgstyleelement .sheet css @import rule in other style sheets applied to the document yes .ownerrule cssimportrule .stylesheet <?xml-stylesheet ?> processing instruction in the (non
-html) document yes .ownernode processinginstruction .sheet http link header yes n/a n/a n/a user agent (default) style sheets no n/a n/a n/a specifications specification status comment css object model (cssom)the definition of 'cssstylesheet' in that specification.
CanvasRenderingContext2D - Web APIs
basic example to get a canvasrenderingcontext2d instance, you must first have an html <canvas> element to work with: <canvas id="my
-house" width="300" height="300"></canvas> to get the canvas' 2d rendering context, call getcontext() on the <canvas> element, supplying '2d' as the argument: const canvas = document.getelementbyid('my
-house'); const ctx = canvas.getcontext('2d'); with the context in hand, you can draw anything you like.
Basic animations - Web APIs
©</div> <div> score :<span id="score">0</span> </div> <div class="touch off" onclick="touch(this)">touch</div> </div> <canvas id="main"></canvas> </body> <style> body { margin: 0; overflow: hidden; background: #000 } .banner { text-align: center; color: #fff; background: #3f51b5; line
-height: 29px; position: fixed; left: 0; top: 0; right: 0; font-family: monospace; height: 30px; opacity: .4; display: flex; transition: .5s } .banner:hover { opacity: 1 } div#selector>div { flex-basis: 30% } @keyframes diss { from { opacity: 1 } to ...
console - Web APIs
border and its longhand equivalents border-radius box-decoration-break box-shadow clear and float color cursor display font and its longhand equivalents line
-height margin outline and its longhand equivalents padding text-* properties such as text-transform white-space word-spacing and word-break writing-mode note: the console message behaves like an inline element by default.
DOMConfiguration - Web APIs
pre-defined parameters: "canonical-form", "cdata-sections", "check-character-normalization", "comments", "datatype-normalization", "element-content-whitespace", "entities", "error
-handler", "infoset", "namespaces", "namespace-declarations", "normalize-characters","schema-location", "schema-type", "split-cdata-sections", "validate", "validate-if-schema", "well-formed" properties domconfiguration.parameternames read only is a domstringlist methods domconfiguration.cansetparameter() returns a boolean domconfiguration.getparameter() returns a domuserdata domconfiguration.setparameter() sets a parameter specification http://www.w3.org/tr/dom-level-3-cor...mconfiguratio...
Detecting device orientation - Web APIs
in particular, hand
-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.
Document.head - Web APIs
example <!doctype html> <head id="my-document
-head"> <title>example: using document.head</title> </head> <script> var thehead = document.head; console.log(thehead.id); // "my-document
-head"; console.log( thehead === document.queryselector("head") ); // true </script> notes document.head is read-only.
Document: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min
-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.mi...
Element: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min
-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } le...
Comparison of Event Targets - Web APIs
ml> <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">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is be...
Event - Web APIs
event
-handlers are usually connected (or "attached") to various html elements (such as <button>, <div>, <span>, etc.) using eventtarget.addeventlistener(), and this generally replaces using the old html event handler attributes.
EventSource - Web APIs
additionally, the event source itself may send messages with an event field, which will create ad
-hoc events keyed to that value.
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; }...
HTMLOListElement - Web APIs
this property reflects the compact attribute only, it doesn't consider the line
-height css property used for that behavior in modern pages.
HTMLTableElement.frame - Web APIs
"above" top side "below" bottom side "hsides" top and bottom only "vsides" right and left sides only "lhs" left
-hand side only "rhs" right
-hand side only "box" all four sides "border" all four sides example // set the frame of tablea to 'border' var t = document.getelementbyid('tablea'); t.frame = "border"; t.border = "2px"; specification w3c dom 2 html specification ...
HTMLTimeElement.dateTime - Web APIs
valid local date and time string yyyy-mm-dd hh:mm yyyy-mm-dd hh:mm:ss yyyy-mm-dd hh:mm:ss.mmm yyyy-mm-ddthh:mm yyyy-mm-ddthh:mm:ss yyyy-mm-ddthh:mm:ss.mmm 2013-12-25 11:12 1972-07-25 13:43:07 1941-03-15 07:06:23.678 2013-12-25t11:12 1972-07-25t13:43:07 1941-03-15t07:06:23.678 valid time-zone offset string z +hhmm +hh:mm
-hhmm
-hh:mm z +0200 +04:30 -0300 -08:00 valid global date and time string any combination of a valid local date and time string followed by a valid time-zone offset string 2013-12-25 11:12+0200 1972-07-25 13:43:07+04:30 1941-03-15 07:06:23.678z 2013-12-25t11:12-08:00 valid week string yyyy-www 2013-w46 four or more ascii digi...
HTMLUListElement - Web APIs
this property reflects the compact attribute only, it doesn't consider the line
-height css property used for that behavior in modern pages.
Dragging and Dropping Multiple Items - Web APIs
output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<<error>>\n"); dump(ex); } } } } function output(text) { document.getelementbyid("output").textcontent += text; dump(text); } </script> </head> <body> <div id="output" style="min
-height: 100px; white-space: pre; border: 1px solid black;" ondragenter="document.getelementbyid('output').textcontent = ''; event.stoppropagation(); event.preventdefault();" ondragover="event.stoppropagation(); event.preventdefault();" ondrop="event.stoppropagation(); event.preventdefault(); dodrop(event);"> <div> fix</div> </div> </body> </html> this example cancels both the dr...
Headers() - Web APIs
in the following snippet we create a new headers object, adding some headers by passing the constructor an init object as an argument: var httpheaders = { 'content-type' : 'image/jpeg', 'accept-charset' : 'utf-8', 'x-my-custom
-header' : 'zeke are cool' }; var myheaders = new headers(httpheaders); you can now create another headers object, passing it the first headers object as its init object: var secondheadersobj = new headers(myheaders); secondheadersobj.get('content-type'); // would return 'image/jpeg' — it inherits it from the first headers object specifications specification status comment ...
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.
Location - Web APIs
="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:...
MouseEvent.relatedTarget - Web APIs
html <body id="body"> <div id="outer"> <div id="red"></div> <div id="blue"></div> </div> <p id="log"></p> </body> css #outer { width: 250px; height: 125px; display: flex; } #red { flex-grow: 1; background: red; } #blue { flex-grow: 1; background: blue; } #log { max
-height: 120px; overflow-y: scroll; } javascript const mouseoutlog = document.getelementbyid('log'), red = document.getelementbyid('red'), blue = document.getelementbyid('blue'); red.addeventlistener('mouseover', overlistener); red.addeventlistener('mouseout', outlistener); blue.addeventlistener('mouseover', overlistener); blue.addeventlistener('mouseout', outlistener); function ou...
MouseEvent.which - Web APIs
syntax var buttonpressed = instanceofmouseevent.which return value a number representing a given button: 0: no button 1: left button 2: middle button (if present) 3: right button for a mouse configured for left
-handed use, the button actions are reversed.
PannerNode.coneInnerAngle - Web APIs
to help us visualise how the orientation vector affects, we can use the right
-hand rule: first, let's start by writing a utility function to figure out our orientation vector.
PannerNode.coneOuterAngle - Web APIs
to help us visualise how the orientation vector affects, we can use the right
-hand rule: first, let's start by writing a utility function to figure out our orientation vector.
PannerNode.coneOuterGain - Web APIs
to help us visualise how the orientation vector affects, we can use the right
-hand rule: first, let's start by writing a utility function to figure out our orientation vector.
PannerNode.orientationX - Web APIs
to help us visualise how the orientation vector affects, we can use the right
-hand rule: first, let's start by writing a utility function to figure out our orientation vector.
PannerNode.orientationY - Web APIs
to help us visualise how the orientation vector affects, we can use the right
-hand rule: first, let's start by writing a utility function to figure out our orientation vector.
PannerNode.orientationZ - Web APIs
to help us visualise how the orientation vector affects, we can use the right
-hand rule: first, let's start by writing a utility function to figure out our orientation vector.
PannerNode.setPosition() - Web APIs
the setposition() method of the pannernode interface defines the position of the audio source relative to the listener (represented by an audiolistener object stored in the audiocontext.listener attribute.) the three parameters x, y and z are unitless and describe the source's position in 3d space using the right
-hand cartesian coordinate system.
Permissions - Web APIs
opera android full support 30safari ios no support nosamsung internet android full support 4.0payment
-handler permissionchrome full support 66edge full support 79firefox ?
RTCIceCandidatePairStats.state - Web APIs
each time a candidate pair is done being checked, the next
-highest priority candidate pair remaining on the check list moves from the waiting state to the in-progress state, and its check begins.
Using the Resource Timing API - Web APIs
start until response end time = " + t); } } resource size measurements the size of an application's resources can affect an application's performance so getting accurate data on resource size can be important (especially for non
-hosted resources).
The 'X' property - Web APIs
its syntax is the same as that for <length> // rect draws a rectangle with upper left
-hand corner at x,y, with width w, and height h, with optional style // standard reference: http://www.w3.org/tr/svg11/shapes.html#rectelement func (svg *svg) rect(x float64, y float64, w float64, h float64, s ...string) { svg.printf(`<rect %s %s`, dim(x, y, w, h, svg.decimals), endstyle(s, emptyclose)) } ...
SpeechSynthesisErrorEvent.error - Web APIs
audio-busy the operation couldn't be completed at this time because the user-agent couldn't access the audio output device (for example, the user may need to correct this by closing another application.) audio
-hardware the operation couldn't be completed at this time because the user-agent couldn't identify an audio output device (for example, the user may need to connect a speaker or configure system settings.) network the operation couldn't be completed at this time because some required network communication failed.
StylePropertyMapReadOnly - Web APIs
</p> <dl id="output"></dl> we add a touch of css with a custom property to better demonstrate the output: p { --somevariable: 1.6em; --someothervariable: translatex(33vw); --anothervariable: 42; line
-height: var(--somevariable); } we add javascript to grab our paragraph and return back a definition list of all the default css property values using computedstylemap().
SubtleCrypto.digest() - Web APIs
hint: if you are looking here for how to create an keyed
-hash message authentication code (hmac), you need to use the subtlecrypto.sign() instead.
TextDecoder() - Web APIs
", "x-cp1257" 'windows-1257' "cp1258", "windows-1258", "x-cp1258" 'windows-1258' "x-mac-cyrillic", "x-mac-ukrainian" 'x-mac-cyrillic' "chinese", "csgb2312", "csiso58gb231280", "gb2312", "gb_2312", "gb_2312-80", "gbk", "iso-ir-58", "x-gbk" 'gbk' "gb18030" 'gb18030' "hz-gb-2312" 'hz-gb-2312' "big5", "big5
-hkscs", "cn-big5", "csbig5", "x-x-big5" 'big5' "cseucpkdfmtjapanese", "euc-jp", "x-euc-jp" 'euc-jp' "csiso2022jp", "iso-2022-jp" note: firefox used to accept iso-2022-jp-2 sequences silently when an iso-2022-jp decoder was instantiated, however this was removed in version 56 to simplify the api, as no other browsers support it and no pages seem to u...
Window.getComputedStyle() - Web APIs
html <p>hello</p> css p { width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif; text-align: center; background: purple; color: white; } javascript let para = document.queryselector('p'); let compstyles = window.getcomputedstyle(para); para.textcontent = 'my computed font-size is ' + compstyles.getpropertyvalue('font-size') + ',\nand my computed line
-height is ' + compstyles.getpropertyvalue('line
-height') + '.'; result description the returned object is the same cssstyledeclaration type as the object returned from the element's style property.
Window.getDefaultComputedStyle() - Web APIs
see http://blog.mozilla.com/security/2010/03/31/plugging-the-css
-history-leak/ and http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented.
::cue-region - CSS: Cascading Style Sheets
| ::cue-region( <selector> ) permitted properties rules whose selectors include this element may only use the following css properties: background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size color font font-family font-size font-stretch font-style font-variant font-weight line
-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space specifications specification status comment webvtt: the web video text tracks formatthe definition of 'the ::cue-reg...
::cue - CSS: Cascading Style Sheets
::cue | ::cue( <selector> ) permitted properties rules whose selectors include this element may only use the following css properties: background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size color font font-family font-size font-stretch font-style font-variant font-weight line
-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space examples styling webvtt cues as white-on-black the following css sets the cue style so that the text is white and the background is a trans...
::first-line (:first-line) - CSS: Cascading Style Sheets
t-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line
-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
:active - CSS: Cascading Style Sheets
note: on systems with multi-button mice, css3 specifies that the :active pseudo-class must only apply to the primary button; on right
-handed mice, this is typically the leftmost button.
forced-colors - CSS: Cascading Style Sheets
color fill stroke text-decoration-color text-emphasis-color border-color outline-color column-rule-color scrollbar-color -webkit-tap
-highlight-color box-shadow text-shadow you can use system color keywords with any property other than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode.
CSS Box Alignment - CSS: Cascading Style Sheets
if you were using arabic, a right to left language, then the same value of start would result in the items moving to the right, as sentences in arabic start on the right
-hand side of the page.
CSS Basic Box Model - CSS: Cascading Style Sheets
reference properties properties controlling the flow of content in a box overflow overflow-x overflow-y properties controlling the size of a box height width max
-height max-width min
-height min-width properties controlling the margins of a box margin margin-bottom margin-left margin-right margin-top margin-trim properties controlling the paddings of a box padding padding-bottom padding-left padding-right padding-top other properties visibility guides introduction to the css box model explains one of the fundamental concept of css: the ...
CSS Fonts - CSS: Cascading Style Sheets
reference properties font font-family font-feature-settings font-kerning font-language-override font-optical-sizing font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-variation-settings font-weight line
-height at-rules @font-face font-family font-feature-settings font-style font-variant font-weight font-stretch src unicode-range @font-feature-values guides fundamental text and font styling in this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shortha...
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
rder-radius: 5px; background-color: #fff4e6; } <div class="wrapper"> <dl> <dt>mammals</dt> <dd>cat</dd> <dd>dog</dd> <dd>mouse</dd> <dt>fish</dt> <dd>guppy</dd> <dt>birds</dt> <dd>pied wagtail</dd> <dd>owl</dd> </dl> </div> dl { display: grid; grid-template-columns: auto 1fr; max-width: 300px; margin: 1em; line
-height: 1.4; } dt { grid-column: 1; font-weight: bold; } dd { grid-column: 2; } what can’t we do with auto-placement (yet)?
CSS Properties Reference - CSS: Cascading Style Sheets
clip color color cursor cursor display display filter filter float cssfloat font font font-family fontfamily font-size fontsize font-variant fontvariant font-weight fontweight height height left left letter-spacing letterspacing line
-height lineheight list-style liststyle list-style-image liststyleimage list-style-position liststyleposition list-style-type liststyletype margin margin margin-bottom marginbottom margin-left marginleft margin-right marginright margin-top margintop overflow overflow pa...
CSS data types - CSS: Cascading Style Sheets
index the data types defined by the set of css specifications include the following: <angle> <angle-percentage> <angular-color
-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <po...
CSS Writing Modes - CSS: Cascading Style Sheets
reference properties direction glyph-orientation
-horizontal text-combine-upright text-orientation unicode-bidi writing-mode specifications specification status comment css writing modes module level 3 proposed recommendation css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
Animatable CSS properties - CSS: Cascading Style Sheets
st font-stretch font-variation-settings font-weight gap grid-column-gap grid-gap grid-row-gap grid-template-columns grid-template-rows height inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start left letter-spacing line-clamp line
-height margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start margin-left margin-right margin-top mask mask-border mask-position mask-size max-block-size max
-height max-inline-size max-lines max-width min-block-size min
-height min-inline-size min-widt...
Pagination - CSS: Cascading Style Sheets
we have also added some additional content that would be read by a screenreader but is hidden visually, and set the aria
-hidden attribute on the paging arrows.
align-items - CSS: Cascading Style Sheets
center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min
-height: 30px; } #item2 { background-color: #a0c8ff; min
-height: 50px; } #item3 { background-color: #ffa08c; min
-height: 40px; } #item4 { background-color: #ffff8c; min
-height: 60px; } #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; } ...
align-self - CSS: Cascading Style Sheets
stretch if the combined size of the items along the cross axis is less than the size of the alignment container and the item is auto-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by max
-height/max-width (or equivalent functionality), so that the combined size of all auto-sized items exactly fills the alignment container along the cross axis.
backdrop-filter - CSS: Cascading Style Sheets
)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-siz...
backface-visibility - CSS: Cascading Style Sheets
: 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); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg)...
bottom - CSS: Cascading Style Sheets
html <p>this<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>fixed</p></div> <div class="absolute"><p>absolute</p></div> css p { font-size: 30px; line
-height: 2em; } div { width: 48%; text-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status comment css positioned layout module level 3the definition of 'bottom' in that specificat...
box-decoration-break - CSS: Cascading Style Sheets
slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: solid; margin-left: 10px; font: 24px sans-serif; line
-height: 2; } ...
break-after - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line
-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification.
break-before - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line
-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification.
break-inside - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } body { width: 80%; margin: 0 auto; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line
-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-in...
clamp() - CSS: Cascading Style Sheets
</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.
<custom-ident> - CSS: Cascading Style Sheets
also, quite a few predefined values are implemented by the different browsers: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk
-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean
-hangul-formal, korean
-hanja-formal, korean
-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai...
float - CSS: Cascading Style Sheets
es the computed value of the display values, in some cases: specified value computed value inline block inline-block block inline-table table table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table
-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using styleflo...
font-style - CSS: Cascading Style Sheets
telvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is used here under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max
-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max
-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.querysel...
font-weight - CSS: Cascading Style Sheets
ans is created by letterror (https://github.com/letterror/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max
-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max
-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let wei...
hyphens - CSS: Cascading Style Sheets
sh word</dd> <dt><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)</dt> <dd lang="en" class="manual">an extreme­ly long english word</dd> <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt> <dd lang="en" class="auto">an extreme­ly long english word</dd> </dl> css dd { width: 55px; border: 1px solid black; } dd.none { -webkit
-hyphens: none; -ms
-hyphens: none; hyphens: none; } dd.manual { -webkit
-hyphens: manual; -ms
-hyphens: manual; hyphens: manual; } dd.auto { -webkit
-hyphens: auto; -ms
-hyphens: auto; hyphens: auto; } result specifications specification status comment css text module level 3the definition of 'hyphens' in that specification.
inset-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical
-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-...
inset-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical
-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writin...
inset-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical
-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .examplet...
inset - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical
-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position:...
justify-content - CSS: Cascading Style Sheets
stretch if the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max
-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
justify-items - CSS: Cascading Style Sheets
stretch if the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max
-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
justify-self - CSS: Cascading Style Sheets
stretch if the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max
-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
<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.
padding-left - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements, except table-row-group, table
-header-group, table-footer-group, table-row, table-column-group and table-column.
padding-top - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements, except table-row-group, table
-header-group, table-footer-group, table-row, table-column-group and table-column.
padding - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:padding-bottom: 0padding-left: 0padding-right: 0padding-top: 0applies toall elements, except table-row-group, table
-header-group, table-footer-group, table-row, table-column-group and table-column.
perspective-origin - CSS: Cascading Style Sheets
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 each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) t...
perspective - CSS: Cascading Style Sheets
} /* 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, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg)...
place-content - CSS: Cascading Style Sheets
stretch if the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max
-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container formal definition initial valuenormalapplies tomulti-line flex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'align-content'> <'justify-content'>?
place-self - CSS: Cascading Style Sheets
stretch if the combined size of the items along the cross axis is less than the size of the alignment container and the item is auto-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by max
-height/max-width (or equivalent functionality), so that the combined size of all auto-sized items exactly fills the alignment container along the cross axis.
scroll-margin-inline-end - CSS: Cascading Style Sheets
are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right
-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin-inline-start - CSS: Cascading Style Sheets
styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left
-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-margin-inline - CSS: Cascading Style Sheets
are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right
-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin - CSS: Cascading Style Sheets
styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left
-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-snap-coordinate - CSS: Cascading Style Sheets
<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-coordinate: 50px 0; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; } result specifications...
scroll-snap-destination - CSS: Cascading Style Sheets
to; 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: inline-block; line
-height: 100px; text-align: center; font-size: 50px; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-points-x - CSS: Cascading Style Sheets
<length> | <percentage> examples setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line
-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-points-y - CSS: Cascading Style Sheets
ntage> examples setting vertical scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line
-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-stop - CSS: Cascading Style Sheets
/* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line
-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line
-height: 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:...
scroll-snap-type - CSS: Cascading Style Sheets
/* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line
-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line
-height: 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: ...
text-combine-upright - CSS: Cascading Style Sheets
html <p lang="zh
-hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p> css html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } results screenshotlive sample specifications specification status comment css writing modes level 4the definition of 'text-combine-upright' in that specification.
perspective() - CSS: Cascading Style Sheets
cm):</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 perspective (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(30de...
url() - CSS: Cascading Style Sheets
und-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short
-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as par...
var() - CSS: Cascading Style Sheets
examples :root { --main-bg-color: pink; } body { background-color: var(--main-bg-color); } /* fallback */ /* in the component’s style: */ .component .header { color: var(-
-header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */ } .component .text { color: var(--text-color, black); } /* in the larger application’s style: */ .component { --text-color: #080; } specifications specification status comment css custom properties for cascading variables module level 1the definition of 'var()' in that...
word-break - CSS: Cascading Style Sheets
rd 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 'word-break' in that specification.
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 precise!) percenta...
Audio and Video Delivery - Developer guides
javascript audio var myaudio = document.createelement('audio'); if (myaudio.canplaytype('audio/mpeg')) { myaudio.setattribute('src','audiofile.mp3'); } else if (myaudio.canplaytype('audio/ogg')) { myaudio.setattribute('src','audiofile.ogg'); } myaudio.currenttime = 5; myaudio.play(); we set the source of the audio depending on the type of audio file the browser supports, then set the play
-head 5 seconds in and attempt to play it.
Block formatting context - Developer guides
anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table
-header-group, table-footer-group (which is the default for html tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table.
Rich-Text Editing in Mozilla - Developer guides
"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; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min
-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <opt...
Making content editable - Developer guides
"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; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min
-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <opt...
HTML5 - Developer guides
connectivity web sockets allows creating a permanent connection between the page and the server and to exchange non
-html data through that means.
<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.
<input type="datetime-local"> - HTML: Hypertext Markup Language
the y2k38 problem (often server-side) javascript uses double precision floating points to store dates, as with all numbers, meaning that javascript code will not suffer from the y2k38 problem unless integer coercion/bit
-hacks are used because all javascript bit operators use 32-bit signed 2s-complement integers.
<input type="email"> - HTML: Hypertext Markup Language
let's see how: body { font: 16px sans-serif; } .emailbox { padding-bottom: 20px; } .messagebox { padding-bottom: 20px; } label { line
-height: 22px; } label::after { content: ":"; } <form> <div class="emailbox"> <label for="emailaddress">your e-mail address</label><br> <input id="emailaddress" type="email" size="64" maxlength="64" required placeholder="username@beststartupever.com" pattern=".+@beststartupever.com" title="please provide only a best startup ever corporate e-mail address"> </div> <d...
<input type="file"> - HTML: Hypertext Markup Language
ml { 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: white; } form label:active, form button:active { background-color: #0d3f8f; color: white; } this is similar to wha...
<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 information when the form is returned to k...
<input type="radio"> - HTML: Hypertext Markup Language
the css involved is a bit more significant: html { font-family: sans-serif; } div:first-of-type { display: flex; align-items: flex-start; margin-bottom: 5px; } label { margin-right: 15px; 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; bor...
Network Error Logging - HTTP
{ "age": 20, "type": "network-error", "url": "https://example.com/previous-page", "body": { "elapsed_time": 18, "method": "post", "phase": "dns", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "", "status_code": 0, "type": "dns.name_not_resolved", "url": "https://example
-host.com/" } } the type of the network error may be one of the following pre-defined values from the specification, but browsers can add and send their own error types: dns.unreachable the user's dns server is unreachable dns.name_not_resolved the user's dns server responded but was unable to resolve an ip address for the requested uri.
HTTP Public Key Pinning (HPKP) - HTTP
setenv.add-response
-header = ( "public-key-pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includesubdomains") note: this requires the mod_setenv server.module loaded which can be included by the following if not already loaded.
CSS Houdini
li { background-image: paint(mycomponent, stroke, 10px); -
-highlights: blue; --lowlights: green; } note: with great power comes great responsibility!
Text formatting - JavaScript
const gasprice = new intl.numberformat('en-us', { style: 'currency', currency: 'usd', minimumfractiondigits: 3 }); console.log(gasprice.format(5.259)); // $5.259 const handecimalrmbinchina = new intl.numberformat('zh-cn-u-nu
-hanidec', { style: 'currency', currency: 'cny' }); console.log(handecimalrmbinchina.format(1314.25)); // ￥ 一,三一四.二五 collation the collator object is useful for comparing and sorting strings.
TypeError: invalid 'instanceof' operand 'x' - JavaScript
message typeerror: invalid 'instanceof' operand "x" (firefox) typeerror: "x" is not a function (firefox) typeerror: right
-hand side of 'instanceof' is not an object (chrome) typeerror: right
-hand side of 'instanceof' is not callable (chrome) error type typeerror what went wrong?
JavaScript error reference - JavaScript
is out of rangerangeerror: radix must be an integerrangeerror: repeat count must be less than infinityrangeerror: repeat count must be non-negativereferenceerror: "x" is not definedreferenceerror: assignment to undeclared variable "x"referenceerror: can't access lexical declaration "x" before initializationreferenceerror: deprecated caller or arguments usagereferenceerror: invalid assignment left
-hand sidereferenceerror: reference to undefined property "x"syntaxerror: "0"-prefixed octal literals and octal escape seq.
BigInt.prototype.toLocaleString() - JavaScript
chinese decimal console.log(bigint.tolocalestring('zh
-hans-cn-u-nu
-hanidec')); // → 一二三,四五六,七八九,一二三,四五六,七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(bigint.tolocalestring(['ban', 'id'])); // → 123.456.789.123.456.789 using options the results provided by tolocalestring can be customized using the options arg...
Intl.DateTimeFormat - JavaScript
nute: 'numeric', second: 'numeric', timezone: 'australia/sydney', timezonename: 'short' }; console.log(new intl.datetimeformat('en-au', options).format(date)); // → "2:00:00 pm aedt" // sometimes you want to be very precise options.fractionalseconddigits = 3; console.log(new intl.datetimeformat('en-au', options).format(date)); // → "2:00:00.200 pm aedt" // sometimes even the us needs 24
-hour time options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false, timezone: 'america/los_angeles' }; console.log(new intl.datetimeformat('en-us', options).format(date)); // → "12/19/2012, 19:00:00" // to specify options but use the browser's default locale, use 'default' console.log(new intl.datetimeformat('def...
Intl.Locale.prototype.baseName - JavaScript
example let myloc = new intl.locale("fr-latn-ca"); // sets locale to canadian french console.log(myloc.tostring()); // prints out "fr-latn-ca-u-ca-gregory" console.log(myloc.basename); // prints out "fr-latn-ca" example with options in the input string // sets language to japanese, region to japan, // calendar to gregorian, hour cycle to 24 hours let japan = new intl.locale("ja-jp-u-ca-gregory
-hc-24"); console.log(japan.tostring()); // prints out "ja-jp-u-ca-gregory
-hc
-h24" console.log(japan.basename); // prints out "ja-jp" example with options that override input string // input string indicates language as dutch and region as belgium, // but options object overrides the region and sets it to the netherlands let dutch = new intl.locale("nl-latn-be", {region: "nl"}); console.log(dutc...
Intl.Locale.prototype.toString() - JavaScript
examples using tostring let mylocale = new intl.locale("fr-latn-fr", {hourcycle: "h24", calendar: "gregory"}); console.log(mylocale.basename); // prints "fr-latn-fr" console.log(mylocale.tostring()); // prints "fr-latn-fr-u-ca-gregory
-hc
-h24" specifications specification ecmascript internationalization api (ecma-402) ...
Intl - JavaScript
for example: "hi": hindi (language) "de-at": german (language) as used in austria (region) "zh
-hans-cn": chinese (language) written in simplified characters (script) as used in china (region) "en-emodeng": english (language) in the "early modern english" dialect (variant) the subtags identifying languages, scripts, regions (including countries), and (rarely used) variants in unicode bcp 47 locale identifiers are registered in the iana language subtag registry.
Web Performance
mobile performance checklist a concise checklist of performance considerations impacting mobile network users on hand
-held, battery operated devices.
display - SVG: Scalable Vector Graphics
&& list-item<display-internal> = table-row-group | table
-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid animatable yes for a description of the values, please refer to the css display...
visibility - SVG: Scalable Vector Graphics
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("click", function (evt) { this.queryselector("svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specifications specification status comment css level 2 (revi...
<a> - SVG: Scalable Vector Graphics
ty, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<circle> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<ellipse> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<font-face> - SVG: Scalable Vector Graphics
attributes global attributes core attributes specific attributes font-family font-style font-variant font-weight font-stretch font-size unicode-range units-per-em panose-1 stemv stemh slope cap
-height x
-height accent
-height ascent descent widths bbox ideographic alphabetic mathematical hanging v-ideographic v-alphabetic v-mathematical v
-hanging underline-position underline-thickness strikethrough-position strikethrough-thickness overline-position overline-thickness dom interface this element implements the svgfontfaceelement interface.
<foreignObject> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<g> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<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-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyp...
<line> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<marker> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<path> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<polygon> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<polyline> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<rect> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<svg> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<symbol> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<text> - SVG: Scalable Vector Graphics
stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<textPath> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<tspan> - SVG: Scalable Vector Graphics
stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
<use> - SVG: Scalable Vector Graphics
oke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria
-haspopup, aria
-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, a...
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"/></missing-glyph> <glyph unicode="!" horiz-adv-x="300"><!-- outline of exclam.
Using templates and slots - Web Components
a way that, when used in documents, it is rendered from composing the element’s content together with content from its shadow root—that is, pieces of the element’s content are used to fill in named slots in its shadow root note that it is technically possible to use <slot> element without a <template> element, e.g., within say a regular <div> element, and still take advantage of the place
-holder features of <slot> for shadow dom content, and doing so may indeed avoid the small trouble of needing to first access the template element's content property (and clone it).