Search completed in 0.93 seconds.
radial-gradient() - CSS: Cascading Style Sheets
the
radial-g
radient() css function creates an image consisting of a progressive transition between two or more colors that
radiate from an origin.
...the function's result is an object of the <g
radient> data type, which is a special kind of <image>.
... syntax /* a g
radient at the center of its container, starting red, changing to blue, and finishing green */
radial-g
radient(circle at center, red 0, blue, green 100%) values <position> the position of the g
radient, interpreted in the same way as background-position or transform-origin.
...And 21 more matches
repeating-radial-gradient() - CSS: Cascading Style Sheets
the repeating-
radial-g
radient() css function creates an image consisting of repeating g
radients that
radiate from an origin.
... it is similar to
radial-g
radient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-g
radient() .
... the function's result is an object of the <g
radient> data type, which is a special kind of <image>.
...And 19 more matches
<radialGradient> - SVG: Scalable Vector Graphics
the <
radialg
radient> element lets authors define
radial g
radients that can be applied to fill or stroke of graphical elements.
... don't be confused with css
radial-g
radient() as css g
radients can only apply to html elements where svg g
radient can only apply to svg elements.
... html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <
radialg
radient id="myg
radient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </
radialg
radient> </defs> <!-- using my linear g
radient --> <circle cx="5" cy="5" r="4" fill="url('#myg
radient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the
radial g
radient.
...And 13 more matches
CanvasRenderingContext2D.createRadialGradient() - Web APIs
the canvasrenderingcontext2d.create
radialg
radient() method of the canvas 2d api creates a
radial g
radient using the size and coordinates of two circles.
... this method returns a canvasg
radient.
... to be applied to a shape, the g
radient must first be assigned to the fillstyle or strokestyle properties.
...And 9 more matches
SVGRadialGradientElement - Web APIs
the svg
radialg
radientelement interface corresponds to the <
radialg
radient> element.
...naco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgg
radientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgg
radientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291"...
... y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
radialg
radientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
radialg
radientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgg
radientelement.
...And 8 more matches
Using CSS gradients - CSS: Cascading Style Sheets
css g
radients are represented by the <g
radient> data type, a special type of <image> made of a progressive transition between two or more colors.
... you can choose between three types of g
radients: linear (created with the linear-g
radient() function),
radial (created with
radial-g
radient()), and conic (created with the conic-g
radient() function).
... you can also create repeating g
radients with the repeating-linear-g
radient(), repeating-
radial-g
radient(), and repeating-conic-g
radient() functions.
...And 63 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
« previousnext » perhaps more exciting than just fills and strokes is the fact that you can also create and apply g
radients as either fills or strokes.
... there are two types of g
radients: linear and
radial.
... you must give the g
radient an id attribute; otherwise it can't be referenced by other elements inside the file.
...And 45 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
linear-g
radient generator html content <div id="container"> <div id="g
radient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> ...
...v id="tool-section" class="section"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> </div> <div id="order"> <div id="g
radient-axes"></div> <div id="g
radient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker ...
...e; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-g
radient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-g
radient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-g
radient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-g
radient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-g
radient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-g
radient(left, #fff 0%, rgba(255, 255, 255, ...
...And 43 more matches
conic-gradient() - CSS: Cascading Style Sheets
the conic-g
radient() css function creates an image consisting of a g
radient with color transitions rotated around a center point (rather than
radiating from the center).
... example conic g
radients include pie charts and color wheels.
... the result of the conic-g
radient() function is an object of the <g
radient> data type, which is a special kind of <image>.
...And 39 more matches
repeating-conic-gradient() - CSS: Cascading Style Sheets
the repeating-conic-g
radient() css function creates an image consisting of a repeating g
radient (rather than a single g
radient) with color transitions rotated around a center point (rather than
radiating from the center).
... {{embedinteractiveexample("pages/css/function-repeating-conic-g
radient.html")}} the source for this interactive example is stored in a github repository.
... syntax /* starburst: a a blue on blue starburst: the g
radient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */ background: repeating-conic-g
radient( from 3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%, 60%) 10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the g
radient rotation in clockwise direction.
...And 38 more matches
<input type="radio"> - HTML: Hypertext Markup Language
<input> elements of type
radio are generally used in
radio groups—collections of
radio buttons describing a set of related options.
... only one
radio button in a given group can be selected at the same time.
...
radio buttons are typically rendered as small circles, which are filled or highlighted when selected.
...And 37 more matches
linear-gradient() - CSS: Cascading Style Sheets
the linear-g
radient() css function creates an image consisting of a progressive transition between two or more colors along a straight line.
... its result is an object of the <g
radient> data type, which is a special kind of <image>.
... syntax /* a g
radient tilted 45 degrees, starting blue and finishing red */ linear-g
radient(45deg, blue, red); /* a g
radient going from the bottom right to the top left corner, starting blue and finishing red */ linear-g
radient(to left top, blue, red); /* color stop: a g
radient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */ linear-g
radient(0deg, blue, green 40%, red); /* color hint: a g
radient going from the left to right, starting red, getting to the midpoint color 10% of the way across the l...
...And 26 more matches
Border-radius generator - CSS: Cascading Style Sheets
this tool can be used to generate css3 border-
radius effects.
... border-
radius html content <div id="container"> <div class="group section"> <div id="preview" class="col span_12"> <div id="subject"> <div id="top-left" class="
radius-container" data-x="left" data-y="top"> </div> <div id="top-right" class="
radius-container" data-x="right" data-y="top"> </div> <div id="bottom-right" class="
radius-container" data-x="right" data-y="bottom"> </div> <div id="bottom-left" class="
radius-container" data-x="left" data-y="bottom"> </div> <div id="
radius-ui-sliders"> <div id="tlr" class="ui-input-slid...
..." data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group section"> <div id="
radius-lock"> <div class="info"> rounded corner </div> <div class="ui-checkbox" data-topic='top-left'></div> <div class="ui-checkbox" data-topic='top-right'></div> <div class="ui-checkbox" data-topic='bottom-right'></div> <div class="ui-checkbox" data-topic='bottom-left'></div> </div> <div id="uni...
...And 23 more matches
border-radius - CSS: Cascading Style Sheets
the border-
radius css property rounds the corners of an element's outer border edge.
... you can set a single
radius to make circular corners, or two
radii to make elliptical corners.
... the
radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.
...And 21 more matches
repeating-linear-gradient() - CSS: Cascading Style Sheets
the repeating-linear-g
radient() css function creates an image consisting of repeating linear g
radients.
... it is similar to linear-g
radient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.
... the function's result is an object of the <g
radient> data type, which is a special kind of <image>.
...And 19 more matches
Protocol upgrade mechanism - HTTP
the http/1.1 protocol provides a special mechanism that can be used to upg
rade an already established connection to a different protocol, using the upg
rade header field.
...implementations can choose not to take advantage of an upg
rade even if they support the new protocol, and in practice, this mechanism is used mostly to bootstrap a websockets connection.
... upg
rading http/1.1 connections the upg
rade header field is used by clients to invite the server to switch to one of the listed protocols, in descending preference order.
...And 16 more matches
<gradient> - CSS: Cascading Style Sheets
the <g
radient> css data type is a special type of <image> that consists of a progressive transition between two or more colors.
... a css g
radient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio.
... syntax the <g
radient> data type is defined with one of the function types listed below.
...And 15 more matches
gradientUnits - SVG: Scalable Vector Graphics
the g
radientunits attribute defines the coordinate system used for attributes specified on the g
radient elements.
... two elements are using this attribute: <linearg
radient> and <
radialg
radient> linearg
radient for <linearg
radient>, g
radientunits defines the coordinate system used for the attributes x1, y1, x2, and y2.
... value userspaceonuse | objectboundingbox default value objectboundingbox animatable yes userspaceonuse this value indicates that the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the g
radient element is referenced (i.e., the user coordinate system for the element referencing the g
radient element via a fill or stroke property) and then applying the transform specified by attribute g
radienttransform.
...And 13 more matches
Upgrade - HTTP
the http 1.1 (only) upg
rade header can be used to upg
rade an already established client/server connection to a different protocol (over the same transport protocol).
... for example, it can be used by a client to upg
rade a connection from http 1.1 to http 2.0, or an http or https connection into a websocket.
... header type request header, response header forbidden header name yes overview the upg
rade header field may be used by clients to invite a server to switch to one (or more) of the listed protocols, in descending preference order.
...And 9 more matches
<linearGradient> - SVG: Scalable Vector Graphics
the <linearg
radient> element lets authors define linear g
radients that can be applied to fill or stroke of graphical elements.
... don't be confused with css linear-g
radient() as css g
radients can only apply to html elements where svg g
radient can only apply to svg elements.
... html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearg
radient id="myg
radient" g
radienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </linearg
radient> </defs> <!-- using my linear g
radient --> <circle cx="5" cy="5" r="4" fill="url('#myg
radient')" /> </svg> attributes g
radientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes g
radienttransform this attribute provides additional transformation to the g
radient coordinate system.
...And 9 more matches
radiogroup - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a group of
radio buttons.
... only one
radio button inside the group can be selected at a time.
... the
radio buttons may either direct children of the
radiogroup or descendants.
...And 8 more matches
radio - Archive of obsolete content
radio buttons are almost always listed together in groups.
... only one
radio button within the same
radiogroup may be selected at a time.
... the user can switch which
radio button is turned on by selecting it with the mouse or keyboard.
...And 7 more matches
CanvasRenderingContext2D.createLinearGradient() - Web APIs
the canvasrenderingcontext2d.createlinearg
radient() method of the canvas 2d api creates a g
radient along the line connecting two given coordinates.
... this method returns a linear canvasg
radient.
... to be applied to a shape, the g
radient must first be assigned to the fillstyle or strokestyle properties.
...And 7 more matches
SVGLinearGradientElement - Web APIs
the svglinearg
radientelement interface corresponds to the <linearg
radient> element.
...naco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgg
radientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgg
radientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291"...
... y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglinearg
radientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglinearg
radientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgg
radientelement.
...And 7 more matches
Touch.radiusX - Web APIs
summary returns the x
radius of the ellipse that most closely circumscribes the area of contact with the touch surface.
... this value, in combination with touch.
radiusy and touch.rotationangle constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen.
... syntax var x
radius = touchitem.
radiusx; return value x
radius the x
radius of the ellipse that most closely circumscribes the area of contact with the touch surface.
...And 6 more matches
border-bottom-left-radius - CSS: Cascading Style Sheets
the border-bottom-left-
radius css property rounds the bottom-left corner of an element by specifying the
radius (or the
radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-
radius shorthand property that is applied to the element after the border-bottom-left-
radius css property, the value of this property is then reset to its initial value by the shorthand property.
... syntax /* the corner is a circle */ /* border-bottom-left-
radius:
radius */ border-bottom-left-
radius: 3px; /* percentage values */ /* circle if box is a square or ellipse if box is a rectangle */ border-bottom-left-
radius: 20%; /* same as above: 20% of horizontal(width) and vertical(height) */ border-bottom-left-
radius: 20% 20%; /* 20% of horizontal(width) and 10% of vertical(height) */ border-bottom-left-
radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-
radius: horizontal vertical */ border-bottom-left-
radius: 0.5em 1em; border-bottom-left-
radius: inherit; with one value: the value is a <length> or a <percentage> denoting the
radius of the circle to use for the border in that corner.
...And 6 more matches
border-bottom-right-radius - CSS: Cascading Style Sheets
the border-bottom-right-
radius css property rounds the top-left corner of an element by specifying the
radius (or the
radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-
radius shorthand property that is applied to the element after the border-bottom-right-
radius css property, the value of this property is then reset to its initial value by the shorthand property.
... syntax /* the corner is a circle */ /* border-bottom-right-
radius:
radius */ border-bottom-right-
radius: 3px; /* percentage values */ border-bottom-right-
radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */ border-bottom-right-
radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */ border-bottom-right-
radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */ /*the corner is an ellipse */ /* border-bottom-right-
radius: horizontal vertical */ border-bottom-right-
radius: 0.5em 1em; border-bottom-right-
radius: inherit; with one value: the value is a <length> or a <percentage> denoting the
radius of the circle to use for the border in that corner.
...And 6 more matches
gradientTransform - SVG: Scalable Vector Graphics
the g
radienttransform attribute contains the definition of an optional additional transformation from the g
radient coordinate system onto the target coordinate system (i.e., userspaceonuse or objectboundingbox).
... this allows for things such as skewing the g
radient.
... two elements are using this attribute: <linearg
radient> and <
radialg
radient> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <
radialg
radient id="g
radient1" g
radientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </
radialg
radient> <
radialg
radient id="g
radient2" g
radientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100"...
...And 6 more matches
IDBOpenDBRequest.onupgradeneeded - Web APIs
the onupg
radeneeded property of the idbopendbrequest interface is the event handler for the upg
radeneeded event, triggered when a database of a bigger version number than the existing stored database is loaded.
... inside the event handler function you can include code to upg
rade the database structure, as shown in the example below.
... syntax idbopendbrequest.onupg
radeneeded = function(event) { ...
...And 5 more matches
RadioNodeList - Web APIs
the
radionodelist interface represents a collection of
radio elements in a <form> or a <fieldset> element.
...0" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the
radiono...
...
radionodelist.value if the underlying element collection contains
radio buttons, the value property represents the checked
radio button.
...And 5 more matches
SVGGradientElement - Web APIs
the svgg
radient interface is a base interface used by svglinearg
radientelement and svg
radialg
radientelement.
...naco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgg
radientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgg
radientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants ...
... svgg
radientelement.g
radientunits read only returns an svganimatedenumeration corresponding to the g
radientunits attribute on the given element.
...And 4 more matches
-moz-outline-radius - CSS: Cascading Style Sheets
in mozilla applications like firefox, the -moz-outline-
radius css shorthand property can be used to give an element's outline rounded corners.
... /* one value */ -moz-outline-
radius: 25px; /* two values */ -moz-outline-
radius: 25px 1em; /* three values */ -moz-outline-
radius: 25px 1em 12%; /* four values */ -moz-outline-
radius: 25px 1em 12% 4mm; /* global values */ -moz-outline-
radius: inherit; -moz-outline-
radius: initial; -moz-outline-
radius: unset; constituent properties this property is a shorthand for the following css properties: -moz-outline-
radius-bottomleft -moz-outline-
radius-bottomright -moz-outline-
radius-topleft -moz-outline-
radius-topright syntax values elliptical outlines and <percentage> values follow the syntax described in border-
radius.
... one, two, three or four <outline-
radius> values, represents one of: <length> see <length> for possible values.
...And 4 more matches
CSP: upgrade-insecure-requests - HTTP
the http content-security-policy (csp) upg
rade-insecure-requests directive instructs user agents to treat all of a site's insecure urls (those served over http) as though they have been replaced with secure urls (those served over https).
... the upg
rade-insecure-requests directive is evaluated before block-all-mixed-content and if it is set, the latter is effectively a no-op.
... the upg
rade-insecure-requests directive will not ensure that users visiting your site via links on third-party sites will be upg
raded to https for the top-level navigation and thus does not replace the strict-transport-security (hsts) header, which should still be set with an appropriate max-age to ensure that users are not subject to ssl stripping attacks.
...And 4 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
the first one looks like a t
raditional dhtml ticker application and uses hidden iframes and javascript to provide updates inside the webpage's ticker headlines section.
...extending t
raditional hypertext navigation the hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page.
...of course, this t
raditional approach is useful and easy to implement, which is why it is still so widely used.
...And 3 more matches
CanvasGradient.addColorStop() - Web APIs
the canvasg
radient.addcolorstop() method adds a new color stop, defined by an offset and a color, to a given canvas g
radient.
... syntax void g
radient.addcolorstop(offset, color); parameters offset a number between 0 and 1, inclusive, representing the position of the color stop.
... 0 represents the start of the g
radient and 1 represents the end; an index_size_err is raised if the number is outside that range.
...And 3 more matches
-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-
radius-bottomleft css property can be used to round the bottom-left corner of an element's outline.
... syntax the value of -moz-outline-
radius-bottomleft is either a css <length> or a percentage of the corresponding dimensions of the border box.
... values <length> the
radius of the circle defining the curvature of the bottom and left edges of the element, specified as a css <length>.
...And 3 more matches
-moz-outline-radius-topleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-
radius-topleft css property can be used to round the top-left corner of an element's outline.
... syntax the value of -moz-outline-
radius-topleft is either a css <length> or a percentage of the corresponding dimensions of the border box.
... values <length> the
radius of the circle defining the curvature of the top and left edges of the element, specified as a css <length>.
...And 3 more matches
border-top-left-radius - CSS: Cascading Style Sheets
the border-top-left-
radius css property rounds the top-left corner of an element by specifying the
radius (or the
radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-
radius shorthand property that is applied to the element after the border-top-left-
radius css property, the value of this property is then reset to its initial value by the shorthand property.
... syntax /* the corner is a circle */ /* border-top-left-
radius:
radius */ border-top-left-
radius: 3px; /* the corner is an ellipse */ /* border-top-left-
radius: horizontal vertical */ border-top-left-
radius: 0.5em 1em; border-top-left-
radius: inherit; with one value: the value is a <length> or a <percentage> denoting the
radius of the circle to use for the border in that corner.
...And 3 more matches
border-top-right-radius - CSS: Cascading Style Sheets
the border-top-right-
radius css property rounds the top-right corner of an element by specifying the
radius (or the
radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-
radius shorthand property that is applied to the element after the border-top-right-
radius css property, the value of this property is then reset to its initial value by the shorthand property.
... syntax /* the corner is a circle */ /* border-top-right-
radius:
radius */ border-top-right-
radius: 3px; /* the corner is an ellipse */ /* border-top-right-
radius: horizontal vertical */ border-top-right-
radius: 0.5em 1em; border-top-right-
radius: inherit; with one value: the value is a <length> or a <percentage> denoting the
radius of the circle to use for the border in that corner.
...And 3 more matches
nsIRadioInterfaceLayer
dom/system/gonk/nsi
radiointerfacelayer.idlscriptable used to implement the interface between the telephony api and the
radio hardware in a telephone.
...to create an instance, use: var
radiointerfacelayer = components.classes["@mozilla.org/telephony/system-worker-manager;1"] .getservice(components.interfaces.nsiinterfacerequestor) .createinstance(components.interfaces.nsi
radiointerfacelayer); method overview void answercall(in unsigned long callindex); void deactivatedatacall(in domstring cid, in domstring reason); void dial(in domstring number); void enumeratecalls(in nsiriltelephonycallback callback); void getdatacalllist(); unsigned short getnumberofm...
...essagesfortext(in domstring text); void hangup(in unsigned long callindex); void registercallback(in nsiriltelephonycallback callback); void registerdatacallcallback(in nsirildatacallback callback); void rejectcall(in unsigned long callindex); void sendsms(in domstring number, in domstring message, in long requestid, in unsigned long long processid); void setupdatacall(in long
radiotech, in domstring apn, in domstring user, in domstring passwd, in long chappap, in domstring pdptype); void starttone(in domstring dtmfchar); void stoptone(); void unregistercallback(in nsiriltelephonycallback callback); void unregisterdatacallcallback(in nsirildatacallback callback); attributes attribute type description currentstate jsval read only.
...And 2 more matches
CustomElementRegistry.upgrade() - Web APIs
the upg
rade() method of the customelementregistry interface upg
rades all shadow-containing custom elements in a node subtree, even before they are connected to the main document.
... syntax customelements.upg
rade(root); parameters root a node instance with shadow-containing descendant elements that are to be upg
raded.
... if there are no descendant elements that can be upg
raded, no error is thrown.
...And 2 more matches
RadioNodeList.value - Web APIs
if the underlying element collection contains
radio buttons, the
radionodelist.value property represents the checked
radio button.
... on retrieving the value property, the value of the currently checked
radio button is returned as a string.
... if the collection does not contain any
radio buttons or none of the
radio buttons in the collection is in checked state, the empty string is returned.
...And 2 more matches
-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-
radius-bottomright css property can be used to round the bottom-right corner of an element's outline.
... syntax the value of -moz-outline-
radius-bottomright is either a css <length> or a percentage of the corresponding dimensions of the border box.
... values <length> the
radius of the circle defining the curvature of the bottom and right edges of the element, specified as a css <length>.
...And 2 more matches
-moz-outline-radius-topright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-
radius-topright css property can be used to round the top-right corner of an element's outline.
... syntax the value of -moz-outline-
radius-topright is either a css <length> or a percentage of the corresponding dimensions of the border box.
... values <length> the
radius of the circle defining the curvature of the top and right edges of the element, specified as a css <length>.
...And 2 more matches
border-end-end-radius - CSS: Cascading Style Sheets
the border-end-end-
radius css property defines a logical border
radius on an element, which maps to a physical border
radius that depends on on the element's writing-mode, direction, and text-orientation.
... /* <length> values */ /* with one value the corner will be a circle */ border-end-end-
radius: 10px; border-end-end-
radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-
radius: 1em 2em; /* global values */ border-end-end-
radius: inherit; border-end-end-
radius: initial; border-end-end-
radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-
radius property.
... syntax values <length-percentage> denotes the size of the circle
radius or the semi-major and semi-minor axes of the ellipse.
...And 2 more matches
border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-
radius css property defines a logical border
radius on an element, which maps to a physical border
radius depending on the element's writing-mode, direction, and text-orientation.
... /* <length> values */ /* with one value the corner will be a circle */ border-end-start-
radius: 10px; border-end-start-
radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-
radius: 1em 2em; /* global values */ border-end-start-
radius: inherit; border-end-start-
radius: initial; border-end-start-
radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-
radius property.
... syntax values <length-percentage> denotes the size of the circle
radius or the semi-major and semi-minor axes of the ellipse.
...And 2 more matches
border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-
radius css property defines a logical border
radius on an element, which maps to a physical border
radius depending on the element's writing-mode, direction, and text-orientation.
... /* <length> values */ /* with one value the corner will be a circle */ border-start-end-
radius: 10px; border-start-end-
radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-
radius: 1em 2em; /* global values */ border-start-end-
radius: inherit; border-start-end-
radius: initial; border-start-end-
radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-
radius property.
... syntax values <length-percentage> denotes the size of the circle
radius or the semi-major and semi-minor axes of the ellipse.
...And 2 more matches
border-start-start-radius - CSS: Cascading Style Sheets
the border-start-start-
radius css property defines a logical border
radius on an element, which maps to a physical border
radius that depends on the element's writing-mode, direction, and text-orientation.
... /* <length> values */ /* with one value the corner will be a circle */ border-start-start-
radius: 10px; border-start-start-
radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-
radius: 1em 2em; /* global values */ border-start-start-
radius: inherit; border-start-start-
radius: initial; border-start-start-
radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-
radius property.
... syntax values <length-percentage> denotes the size of the circle
radius or the semi-major and semi-minor axes of the ellipse.
...And 2 more matches
RangeError: radix must be an integer - JavaScript
the javascript exception "
radix must be an integer at least 2 and no greater than 36" occurs when the optional
radix parameter of the number.prototype.tostring() or the bigint.prototype.tostring() method was specified and is not between 2 and 36.
... message rangeerror: invalid argument (edge) rangeerror:
radix must be an integer at least 2 and no greater than 36 (firefox) rangeerror: tostring()
radix argument must be between 2 and 36 (chrome) error type rangeerror what went wrong?
... the optional
radix parameter of the number.prototype.tostring() or the bigint.prototype.tostring() method was specified.
...And 2 more matches
nsIHttpUpgradeListener
netwerk/protocol/http/nsihttpchannelinternal.idlscriptable the callback interface for nsihttpchannelinternal.httpupg
rade; this is called when an http protocol upg
rade is finished.
... 1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this is used, for example, by websockets in order to upg
rade an http channel to use the websocket protocol.
... method overview void ontransportavailable(in nsisockettransport atransport, in nsiasyncinputstream asocketin, in nsiasyncoutputstream asocketout); methods ontransportavailable() called when an http protocol upg
rade attempt is completed, passing in the information needed by the protocol handler to take over the channel that is no longer being used by http.
... note: to begin a protocol upg
rade, call nsihttpchannelinternal.httpupg
rade().
CanvasGradient - Web APIs
the canvasg
radient interface represents an opaque object describing a g
radient.
... it is returned by the methods canvasrenderingcontext2d.createlinearg
radient() or canvasrenderingcontext2d.create
radialg
radient().
... canvasg
radient.addcolorstop() adds a new stop, defined by an offset and a color, to the g
radient.
... specifications specification status comment html living standardthe definition of 'canvasg
radient' in that specification.
IDBOpenDBRequest: upgradeneeded event - Web APIs
the upg
radeneeded event is fired when an attempt was made to open a database with a version number higher than its current version.
... bubbles no cancelable no interface event event handler onupg
radeneeded examples this example opens a database and handles the upg
radeneeded event by making any necessary updates to the object store.
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upg
radeneeded', event => { const db = event.target.result; console.log(`upg
rading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); this is the same example, but uses the onupg
radeneeded event handl...
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = event => { const db = event.target.result; console.log(`upg
rading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; ...
Touch.radiusY - Web APIs
summary returns the y
radius of the ellipse that most closely circumscribes the area of contact with the touch surface.
... this value, in combination with touch.
radiusx and touch.rotationangle constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen.
... syntax var y
radius = touchitem.
radiusy; return value y
radius the y
radius of the ellipse that most closely circumscribes the area of contact with the screen.
... example the touch.
radiusx example includes an example of this property's usage.
Upgrade-Insecure-Requests - HTTP
the http upg
rade-insecure-requests request header sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upg
rade-insecure-requests csp directive.
... header type request header forbidden header name no syntax upg
rade-insecure-requests: 1 examples a client's request signals to the server that it supports the upg
rade mechanisms of upg
rade-insecure-requests: get / http/1.1 host: example.com upg
rade-insecure-requests: 1 the server can now redirect to a secure version of the site.
... a vary header can be used so that the site isn't served by caches to clients that don’t support the upg
rade mechanism.
... location: https://example.com/ vary: upg
rade-insecure-requests specifications specification status comment upg
rade insecure requeststhe definition of 'upg
rade-insecure-requests' in that specification.
radius - SVG: Scalable Vector Graphics
the
radius attribute represents the
radius (or
radii) for the operation on a given <femorphology> filter primitive.
... if two numbers are provided, the first number represents the x-
radius and the second one the y-
radius.
... usage notes value <number-optional-number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of '
radius' in that specification.
... working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '
radius' in that specification.
Using the radio role - Accessibility
description this technique demonstrates how to use the
radio role and describes the effect it has on browsers and assistive technology.
... <h3 id="rg1_label">lunch options</h3> <ul class="
radiogroup" id="rg1" role="
radiogroup" aria-labelledby="rg1_label"> <li id="r1" tabindex="-1" role="
radio" aria-checked="false"> <img role="presentation" src="
radio-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="
radio" aria-checked="false"> <img role="presentation" src="
radio-unchecked.gif" /> subway </li> <li id="r3" tabindex="0" role="
radio" aria-checked="true"> <img role="presentation" src="
radio-checked.gif" /> ...
...
radio maria </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
426 Upgrade Required - HTTP
the http 426 upg
rade required client error response code indicates that the server refuses to perform the request using the current protocol but might be willing to do so after the client upg
rades to a different protocol.
... the server sends an upg
rade header with this response to indicate the required protocol(s).
... status 426 upg
rade required examples http/1.1 426 upg
rade required upg
rade: http/2.0 connection: upg
rade content-length: 53 content-type: text/plain this service requires use of the http/2.0 protocol specifications specification title rfc 7231, section 6.5.15: 426 upg
rade required hypertext transfer protocol (http/1.1): semantics and content ...
PRAddrInfo
typically, a p
raddrinfo object will be found via pr_getaddrinfobyname, iterated through using pr_enumerateaddrinfo, and finally freed with pr_freeaddrinfo.
... to get the canonical hostname of a p
raddrinfo object, use pr_getcanonnamefromaddrinfo.
Index - Web APIs
174 audioparam.settargetattime() api, audioparam, method, reference, web audio api, settargetattime the settargetattime() method of the audioparam interface schedules the start of a g
radual change to the audioparam value.
... 537 canvasg
radient api, canvas, canvasg
radient, g
radients, interface, reference the canvasg
radient interface represents an opaque object describing a g
radient.
... it is returned by the methods canvasrenderingcontext2d.createlinearg
radient() or canvasrenderingcontext2d.create
radialg
radient().
...And 35 more matches
SVG documentation index - SVG: Scalable Vector Graphics
45 color-interpolation needsexample, svg, svg attribute the color-interpolation attribute specifies the color space for g
radient interpolations, color animations, and alpha compositing.
...for shapes and text it's a presentation attribute that defines the color (or any svg paint servers like g
radients or patterns) used to paint the element; for animation it defines the final state of the animation.
... 72 fill-opacity svg, svg attribute the fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, g
radient, pattern, etc) applied to a shape.
...And 30 more matches
Applying styles and colors - Web APIs
you will learn how to add different colors, line styles, g
radients, patterns and shadows to your drawings.
... color is a string representing a css <color>, a g
radient object, or a pattern object.
... we'll look at g
radient and pattern objects later.
...And 26 more matches
Index - Archive of obsolete content
perhaps your target audience is people that are using older hardware, for example, and can't upg
rade to the latest and greatest browsers.
...what's worse, though, is that these components don't have a mechanism for specifying the versions of firefox with which they are compatible, leading to poor integration and instability as users upg
rade their firefox installations.
...it doesn’t have the menus, toolbars and other accoutrements of a t
raditional web browser.
...And 24 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="password" name="password"/>
radio a
radio button, allowing a single value to be selected out of multiple choices with the same name value.
... <input type="
radio" name="
radio"/> range a control for entering a number whose exact value is not important.
...required for accessibility autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked
radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with a form element formaction image, submit url to use for form submission formenct...
...And 24 more matches
Box-shadow generator - CSS: Cascading Style Sheets
<div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="colorpicker" class="group"> <div id="g
radient" class="g
radient"> <div id="g
radient_picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_selector"> </div> </div> <div class="info"> <div class="input" data-topic="hue" data-title='h:' data-action="hsv"></div> ...
... data-type="add"></div> <div class="ui-slider-input" data-topic="height" data-unit="px"></div> </div> </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-
radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[""] position=[absolute] width height top le...
...rowsers 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; border: 1px solid #2c9fc9; border-
radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color...
...And 20 more matches
parseInt() - JavaScript
the parseint() function parses a string argument and returns an integer of the specified
radix (the base in mathematical numeral systems).
... syntax parseint(string [,
radix]) parameters string the value to parse.
...
radix optional an integer between 2 and 36 that represents the
radix (the base in mathematical numeral systems) of the string.
...And 19 more matches
UI pseudo-classes - Learn web development
:checked, :indeterminate, and :default: respectively target checkboxes and
radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g.
... note: if one
radio button in a same-named group of
radio buttons has the required attribute, all the
radio buttons will be invalid until one is selected, but only the one with the attribute assigned will actually match :required.
...for example, in our custom
radio buttons example, we use generated content to handle the placement and animation of the inner circle when a
radio button is selected: input[type="
radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-
radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in...
...And 18 more matches
Using IndexedDB - Web APIs
if the database doesn't already exist, it is created by the open operation, then an onupg
radeneeded event is triggered and you create the database schema in the handler for this event.
... if the database does exist but you are specifying an upg
raded version number, an onupg
radeneeded event is triggered straight away, allowing you to provide an updated schema in its handler.
...it also means that you can't use a float, otherwise it will be converted to the closest lower integer and the transaction may not start, nor the upg
radeneeded event trigger.
...And 16 more matches
shape-outside - CSS: Cascading Style Sheets
e-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <g
radient> value */ shape-outside: linear-g
radient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the list below, which define the float area for float elements.
...the shape includes any curvature created by the border-
radius property (behavior which is similar to background-clip).
...the corner
radii of this shape are determined by the corresponding border-
radius and margin values.
...And 15 more matches
Strategies for carrying out testing - Learn web development
by coding defensively, we mean trying to build in intelligent fallbacks so that if a feature or style doesn't work in a browser, the site will be able to downg
rade to something less exciting that still provides an acceptable user experience — the core information is still accessible, for example, even if it doesn't look quite as nice.
...you can make this as simple or as complex as you like — for example a common approach is to have multiple g
rades of support level, something like: a g
rade: common/modern browsers — known to be capable.
... b g
rade: older/less capable browsers — known not to be capable.
...And 14 more matches
Bootstrapped extensions - Archive of obsolete content
t
raditional extensions include overlays, wherein the application can load up xul from the extension's package and automatically apply it on top its own ui.
... backward compatibility because older versions of firefox don't know about the bootstrap property or bootstrap.js file, it's not overly difficult to create an xpi that will work on both as a bootstrappable extension and as a t
raditional extension.
... create your extension as a bootstrappable extension, then add the t
raditional overlays as well.
...And 13 more matches
Enhanced Extension Installation - Archive of obsolete content
the system for installation, upg
rade and uninstall is not robust enough.
...there are not enough guards in the upg
rade and uninstall process to handle failure and abort the operation, restoring the previous state.
... the last modified time of that path, used to detect out of process upg
rades.
...And 13 more matches
nsIMsgHeaderParser
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to create an instance, use: var msgheaderparser = components.classes["@mozilla.org/messenger/headerparser;1"] .createinstance(components.interfaces.nsimsgheaderparser); method overview string extractheade
raddressmailboxes(in string line); void extractheade
raddressname(in string line, out string name); void extractheade
raddressnames(in string line, out string usernames); astring makefulladdress(in astring aname, in astring aaddress); string makefulladdressstring(in string aname, in string aaddress); wstring makefulladdresswstring(in wstring name, in wstrin...
...g addr); obsolete since gecko 1.9 void parseheade
raddresses(in string line, out string names, out string addresses, out pruint32 numaddresses); void parseheaderswitharray(in wstring aline, [array, size_is(count)] out wstring aemailaddresses, [array, size_is(count)] out wstring anames, [array, size_is(count)] out wstring afullnames, [retval] out unsigned long count); void reformatheade
raddresses(in string line, out string reformattedaddress); wstring reformatunquotedaddresses(in wstring line); void removeduplicateaddresses(in string addrs, in string other_addrs, in prbool removealiasestome, out string newaddress); string unquotephraseo
raddr(in string line, in boolean preserveintegrity); wstring unquotephraseo
raddrwstring(in wstring...
... line, in boolean preserveintegrity); methods extractheade
raddressmailboxes() given a string which contains a list of header addresses, returns a comma-separated list of just the 'mailbox' portions.
...And 13 more matches
spreadMethod - SVG: Scalable Vector Graphics
the spreadmethod attribute determines how a shape is filled beyond the defined edges of a g
radient.
... two elements are using this attribute: <linearg
radient> and <
radialg
radient> context notes value pad | reflect | repeat initial value pad animatable yes pad this value indicates that the final color of the g
radient fills the shape beyond the g
radient's edges.
... reflect this value indicates that the g
radient repeats in reverse beyond its edges.
...And 13 more matches
CSS property compatibility table for form controls - Learn web development
s that the property is applied as it is t (tweaked) indicates that the property is applied with the extra rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables global behaviors some behaviors are common to many browsers at a global level: border, background, border-
radius, height using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers.
... border-
radius partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields.
... on opera the border-
radius property is applied only if an explicit border is set.
...And 12 more matches
Color picker tool - CSS: Cascading Style Sheets
-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-g
radient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-g
radient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-g
radient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-g
radient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-g
radient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-g
radient(left, #fff 0%, rgba(255, 255, 255, ...
...0) 100%); background: -o-linear-g
radient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-g
radient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-g
radient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-g
radient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-g
radient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-g
radient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -ms-linear-g
radient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, ...
... hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-g
radient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-g
radient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-g
radient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-
radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-
radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } ...
...And 12 more matches
Index - Archive of obsolete content
802
radio.control xul properties, xul reference no summary!
... 803
radiogroup xul properties, xul reference no summary!
... 983
radiostatechange event, events the
radiostatechange event is executed when the state of a <
radio> element has changed.
...And 11 more matches
Backgrounds and borders - Learn web development
from adding g
radients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css.
... .box { background: linear-g
radient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties.
... g
radient backgrounds a g
radient — when used for a background — acts just like an image and is also set by using the background-image property.
...And 11 more matches
create fancy boxes - Learn web development
it starts to get interesting when you push the properties to the limit by having negative padding and/or- margin by having border-
radius larger than the actual size of the box.
...the border-
radius property is made to create a rounded corner applied to boxes, but what happens if the
radius size is equal or larger than the actual width of the box?
... you could also use a background, as backgrounds are clipped by border
radius */ border : 0.5em solid black; /* let's make sure we have a square.
...And 10 more matches
Advanced form styling - Learn web development
to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and
radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css.
... for example, let's take the following controls: <form> <p> <label for="search">search: </label> <input id="search" name="search" type="search"> </p> <p> <label for="text">text: </label> <input id="text" name="text" type="text"> </p> <p> <label for="date">date: </label> <input id="date" name="date" type="datetime-local"> </p> <p> <label for="
radio">
radio: </label> <input id="
radio" name="
radio" type="
radio"> </p> <p> <label for="checkbox">checkbox: </label> <input id="checkbox" name="checkbox" type="checkbox"> </p> <p><input type="submit" value="submit"></p> <p><input type="button" value="button"></p> </form> applying the following css to them removes system-level styling.
...in a couple of cases — search and
radio buttons/checkboxes, it becomes way more useful.
...And 10 more matches
<basic-shape> - CSS: Cascading Style Sheets
inset() inset( <shape-arg>{1,4} [round <border-
radius>]?
... the optional <border-
radius> argument(s) define rounded corners for the inset rectangle using the border-
radius shorthand syntax.
... circle() circle( [<shape-
radius>]?
...And 10 more matches
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <linearg
radient>, <mpath>, <pattern>, <
radialg
radient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object.
... value <iri> default value none animatable yes linearg
radient for <linearg
radient>, xlink:href defines the reference to a different <linearg
radient> or <
radialg
radient> element within the current svg document fragment.
... any <linearg
radient> attributes which are defined on the referenced element which are not defined on this element are inherited by this element.
...And 10 more matches
Input Controls - Archive of obsolete content
checkboxes and
radio buttons two additional elements are used for creating check boxes and
radio buttons.
...
radio buttons can be used for a similar purpose when there are a set of them and only one can be selected at once.
... you can use most of the same attributes on checkboxes and
radio buttons as with buttons.
...And 9 more matches
Basic native form controls - Learn web development
this article covers: the common input types button, checkbox, file, hidden, image, password,
radio, reset, submit, and text.
...it is used for creating most types of form widgets including single line text fields, time and date controls, controls without text input like checkboxes,
radio buttons, and color pickers, and buttons.
... checkable items: checkboxes and
radio buttons checkable items are controls whose state you can change by clicking on them or their associated labels.
...And 9 more matches
How to build custom form controls - Learn web development
with px to em conversion, try http://riddle.pl/emcalc/ */ font-size : 0.625em; /* this (10px) is the new font size context for em value in this context */ font-family : verdana, arial, sans-serif; box-sizing : border-box; /* we need extra room for the down arrow we will add */ padding : .1em 2.5em .2em .5em; width : 10em; /* 100px */ border : .2em solid #000; border-
radius : .4em; box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* the first declaration is for browsers that do not support linear g
radients.
... */ background : #f0f0f0; background : linear-g
radient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width.
... .select:after { content : "▼"; /* we use the unicode character u+25bc; make sure to set a charset meta tag */ position: absolute; z-index : 1; /* this will be important to keep the arrow from overlapping the list of options */ top : 0; right : 0; box-sizing : border-box; height : 100%; width : 2em; padding-top : .1em; border-left : .2em solid #000; border-
radius: 0 .1em .1em 0; background-color : #000; color : #fff; text-align : center; } next, let's style the list of options: .select .optlist { z-index : 2; /* we explicitly said the list of options will always be on top of the down arrow */ /* this will reset the default style of the ul element */ list-style: none; margin : 0; padding: 0; box-sizing : border-box; /* if the v...
...And 9 more matches
Drawing graphics - Learn web development
this converts degree values to
radians, which is useful because whenever you need to provide an angle value in javascript, it will nearly always be in
radians, but humans usually think in degrees.
... function degto
rad(degrees) { return degrees * math.pi / 180; }; next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything.
... ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ctx.moveto(50, 50); now add the following lines at the bottom of your script: ctx.lineto(150, 50); let triheight = 50 * math.tan(degto
rad(60)); ctx.lineto(100, 50+triheight); ctx.lineto(50, 50); ctx.fill(); let's run through this in order: first we draw a line across to (150, 50) — our path now goes 100 pixels to the right along the x axis.
...And 9 more matches
Index
2 an overview of nss internals api, intermediate, intro, nss, tools a high-level overview to the internals of network security services (nss) software developed by the mozilla.org projects t
raditionally used its own implementation of security protocols and cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss).
... --upg
rade-merge upg
rade an old database and merge it into a new database.
... --source-dir certdir identify the certificate database directory to upg
rade.
...And 9 more matches
Border-image generator - CSS: Cascading Style Sheets
und: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-
radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown {...
...dropdown-list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-list { left: 100%; top: 0; } .ui-dropdown-list > div { width: 100%; height: 1.6em; margin: 0.3em 0; padding: 0.3em; line-height: 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-
radius: 2px; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * 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-us...
...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-position: center center; background-repeat: no-repeat; color: #fff; border-
radius: 2px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/chec...
...And 9 more matches
Modifying a XUL Interface - Archive of obsolete content
manipulating basic elements the main xul elements such as buttons, checkboxes and
radio buttons may be manipulated using a number of script properties.
... note: if you're creating the checkbox dynamically and it's not yet added to the dom, you must use setattribute("checked", "false") instead, because the xbl isn't initiated yet.) example 6 : source view <button label="change" oncommand="this.nextsibling.checked = !this.nextsibling.checked;"/> <checkbox label="check for messages"/>
radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked.
...the
radiogroup's selectedindex property may be used to do this.
...And 8 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
27 base64 advanced, base64, javascript, typed arrays, uri, url, unicode problem, atob(), btoa() base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ascii string format by translating it into a
radix-64 representation.
...in addition to t
raditional methods like frequency analysis and index of coincidence, cryptanalysis includes more recent methods, like linear cryptanalysis or differential cryptanalysis, that can break more advanced ciphers.
...frequently referred to in the united states as "touch tone" (after the touch-tone t
rademark used when the transition from pulse dialing to dtmf began), dtmf makes it possible to signal the digits 0-9 as well as the letters "a" through "d" and the symbols "#" and "*".
...And 8 more matches
NSS tools : certutil
--upg
rade-merge upg
rade an old database and merge it into a new database.
... --source-dir certdir identify the certificate database directory to upg
rade.
... --source-prefix certdir give the prefix of the certificate and key databases to upg
rade.
...And 8 more matches
certutil
--upg
rade-merge upg
rade an old database and merge it into a new database.
... --source-dir certdir identify the certificate database directory to upg
rade.
... --source-prefix certdir give the prefix of the certificate and key databases to upg
rade.
...And 8 more matches
Basic Shapes - CSS: Cascading Style Sheets
therefore inset() takes four values for the top, right, bottom and left values plus a final value for border-
radius.
... the below css creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-
radius value of 10 pixels.
...the first is the shape-
radius.
...And 8 more matches
box-shadow - CSS: Cascading Style Sheets
a box shadow is described by x and y offsets relative to the element, blur and spread
radius, and color.
...if a border-
radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.
... syntax /* keyword values */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-
radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-
radius | spread-
radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset; specify a single box-shadow using: tw...
...And 8 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
om'); function handlecommandevent(aevent) { alert('ok'); item.removeeventlistener('command', handlecommandevent, false); item.parentnode.removechild(item); } item.addeventlistener('command', handlecommandevent, false); listing 11: additions and deletions using a dynamic event listener special menu items much like input elements in html, menuitem elements can operate like checkboxes and
radio buttons by setting their type attributes.
...
radio button assigning type="
radio" to multiple menuitem elements and setting them to have the same name attribute groups them so that selecting one deselects all the others, much like
radio buttons in html.
...the selected
radio button has the selected="true" attribute set.
...And 7 more matches
Floats - Learn web development
cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-
radius: 5px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow.
... to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height: 100px; border-
radius: 5px; background-color: rgb(207,232,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin-right: 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).
...And 7 more matches
Introduction to CSS layout - Learn web development
flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-
radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items.
... flexbox example 2 * {box-sizing: border-box;} .wrapper > div { border-
radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } .wrapper > div { flex: 1; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: this has been a very short introduction to what is possible in flexbox, to find out more, see our flexbox...
... grid example 1 * {box-sizing: border-box;} .wrapper > div { border-
radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five<...
...And 7 more matches
CanvasRenderingContext2D.arcTo() - Web APIs
the canvasrenderingcontext2d.arcto() method of the canvas 2d api adds a circular arc to the current sub-path, using the given control points and
radius.
... note: be aware that you may get unexpected results when using a relatively large
radius: the arc's connecting line will go in whatever direction it must to meet the specified
radius.
... syntax void ctx.arcto(x1, y1, x2, y2,
radius); parameters x1 the x-axis coordinate of the first control point.
...And 7 more matches
Drawing shapes with canvas - Web APIs
arc(x, y,
radius, startangle, endangle, anticlockwise) draws an arc which is centered at (x, y) position with
radius r starting at startangle and ending at endangle going in the given direction indicated by anticlockwise (defaulting to clockwise).
... arcto(x1, y1, x2, y2,
radius) draws an arc with the given control points and
radius, connected to the previous point by a straight line.
...
radius is self-explanatory.
...And 7 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } the fr unit tracks can be defined using any length unit.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } in this next example, we create a definition with a 2fr track then two 1fr tracks.
...And 7 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 150px; }...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } a simple question to ask y...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div 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: s...
...And 7 more matches
<angle> - CSS: Cascading Style Sheets
the <angle> css data type represents an angle value expressed in degrees, g
radians,
radians, or turns.
... it is used, for example, in <g
radient>s and in some transform functions.
... g
rad represents an angle in g
radians.
...And 7 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> ...
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 6 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
i can use the align-items property on the grid container, to align the items using one of the following values: auto normal start end center stretch baseline first baseline last baseline * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c ...
...the first item in the example demonstrates this default alignment: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c ...
...And 6 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div cl...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">t...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">t...
...And 6 more matches
Shapes from box values - CSS: Cascading Style Sheets
the box values allowable as a shape value are: content-box padding-box border-box margin-box the border-
radius values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape.
... margin-box the margin-box is the shape defined by the outside margin edge and includes the corner
radius of the shape, should border-
radius have been used in defining the element.
...the border-
radius property has been used to create a circle by setting border-
radius: 50%.
...And 6 more matches
content - CSS: Cascading Style Sheets
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-g
radient(#e66465, #9198e5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value...
... <image> an <image>, denoted by the <url> or <g
radient> data type, or part of the webpage, defined by the element() function, denoting the content to display.
...ttr() values, the resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replacement> = <image><content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient><quote> = open-quote | close-quote | no-open-quote | no-close-quote<target> = <target-counter()> | <target-counters()> | <target-text()><leader()> = leader( <leader-type> )where <image()> = image( <image-tags>?
...And 6 more matches
menuitem - Archive of obsolete content
when autocheck is true, the button type should be "checkbox" or "
radio".
... for buttons, the type attribute must be set to checkbox or
radio for this attribute to have any effect.
... name type: string name
radio menuitems with the same name as put into a group.
...And 5 more matches
Grids - Learn web development
simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-
radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to crea...
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-
radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the fr unit distributes available space, not all space.
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } .container > div { border-
radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is ...
...And 5 more matches
nsIHttpChannelInternal
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void getrequestversion(out unsigned long major, out unsigned long minor); void getresponseversion(out unsigned long major, out unsigned long minor); void httpupg
rade(in acstring aprotocolname, in nsihttpupg
radelistener alistener); void setcookie(in string acookieheader); void setupfallbackchannel(in string afallbackkey); attributes attribute type description canceled boolean returns true if and only if the channel has been canceled.
... httpupg
rade() allows for the use of http to bootstrap another protocol via the rfc 2616 upg
rade request header in conjunction with a 101 level response.
... the nsihttpupg
radelistener will have its nsihttpupg
radelistener.ontransportavailable() method invoked if a matching 101 is processed.
...And 5 more matches
CanvasRenderingContext2D.ellipse() - Web APIs
syntax void ctx.ellipse(x, y,
radiusx,
radiusy, rotation, startangle, endangle [, anticlockwise]); the ellipse() method creates an elliptical arc centered at (x, y) with the
radii
radiusx and
radiusy.
...
radiusx the ellipse's major-axis
radius.
...
radiusy the ellipse's minor-axis
radius.
...And 5 more matches
-webkit-box-reflect - CSS: Cascading Style Sheets
/* direction values */ -webkit-box-reflect: above; -webkit-box-reflect: below; -webkit-box-reflect: left; -webkit-box-reflect: right; /* offset value */ -webkit-box-reflect: below 10px; /* mask value */ -webkit-box-reflect: below 0 linear-g
radient(transparent, white); /* global values */ -webkit-box-reflect: inherit; -webkit-box-reflect: initial; -webkit-box-reflect: unset; note: this feature is not intended to be used by web sites.
...<image>?where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...And 5 more matches
Variable fonts guide - CSS: Cascading Style Sheets
for example: font-variation-settings: 'wght' 375, 'g
rad' 88; wght (weight) is a registered axis, and g
rad (g
rade) is a custom one.
... g
rade g
rade may become one of the more common custom axes as it has a known history in typeface design.
... the practice of designing different g
rades of a typeface was often done in reaction to intended use and printing technique.
...And 5 more matches
background-image - CSS: Cascading Style Sheets
to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-g
radient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/7693/catfront.png'); values none is a keyword denoting the absence of images.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <bg-image>#where <bg-image> = none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...And 5 more matches
border-image-source - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-source: none; /* <image> values */ border-image-source: url(image.jpg); border-image-source: linear-g
radient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used.
...it also applies to ::first-letter.inheritednocomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...And 5 more matches
cross-fade() - CSS: Cascading Style Sheets
it can be used for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a
radial g
radient.
...&& <image><cf-final-image> = <image> | <color>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()><rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 5 more matches
font - CSS: Cascading Style Sheets
*/ p { font: bold italic large serif } /* use the same font as the status bar of the window */ p { font: status-bar } live sample html <p> change the
radio buttons below to see the generated shorthand and it's effect.
... </p> <form action="createshorthand()"> <div class="cf"> <div class="setpropcont"> font-style<br/> <input type="
radio" id="font-style-none" name="font_style" checked="" value="" onchange="setcss()"> <label for="font-style-none">none</label><br/> <input type="
radio" id="font-style-normal" name="font_style" value="normal" onchange="setcss()"> <label for="font-style-normal">normal</label><br/> <input type="
radio" id="font-style-italic" name="font_style" value="italic" onchange="setcss()"> <label for="font-style-italic">italic</label><br/> <input type="
radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setcss()"> <label for="font-style-oblique">oblique</label> </div> <div class="setpro...
...pcont"> font-variant<br> <input type="
radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setcss()"> <label for="font-variant-none">none</label><br/> <input type="
radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setcss()"> <label for="font-variant-normal">normal</label><br/> <input type="
radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setcss()"> <label for="font-variant-small-caps">small-caps</label> </div> <div class="setpropcont"> font-weight<br/> <input type="
radio" id="font-weight-none" name="font_weight" value="" onchange="setcss()"> <label for="font-weight-none">none</label><br/> <input type="ra...
...And 5 more matches
list-style-type - CSS: Cascading Style Sheets
syntax /* partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: t
rad-chinese-informal; list-style-type: kannada; /* <string> value */ list-style-type: '-'; /* identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /* keyword value */ list-style-type: none; /* global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; the list-style-type property may be defined as any one of: a <custom-ident> ...
... the cjk-ideographic is identical to t
rad-chinese-informal; it exists for legacy reasons.
...a, b, c, … z upper-latin is unsupported in ie7 and earlier arabic-indic -moz-arabic-indic example armenian t
raditional 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 t
rad-chinese-informal e.g.
...And 5 more matches
mask-border-source - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-g
radient(to top, red, yellow); /* global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used.
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...And 5 more matches
mask-image - CSS: Cascading Style Sheets
/* keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.svg#mask1); /* <image> values */ mask-image: linear-g
radient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* multiple values */ mask-image: image(url(mask.png), skyblue), linear-g
radient(rgba(0, 0, 0, 1.0), transparent); /* global values */ mask-image: inherit; mask-image: initial; mask-image: unset; syntax values none this keyword is interpreted as a transparent black image layer.
...eapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <mask-reference>#where <mask-reference> = none | <image> | <mask-source>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient><mask-source> = <url>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...And 5 more matches
<menuitem> - HTML: Hypertext Markup Language
commands can also optionally include a checkbox or be grouped to share
radio buttons.
... (menu items for indirect commands gain checkboxes or
radio buttons when defined against elements <input type="checkbox"> and <input type="
radio">.) content categories none.
...may only be used when the type attribute is checkbox or
radio.
...And 5 more matches
r - SVG: Scalable Vector Graphics
the r attribute defines the
radius of a circle.
... two elements are using this attribute: <circle>, and <
radialg
radient> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <
radialg
radient r="0" id="myg
radient000"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </
radialg
radient> <
radialg
radient r="50%" id="myg
radient050"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </
radialg
radient> <
radialg
radient r="100%" id="myg
radient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </
radialg
radient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> <rect x="20" y="120" width="60" height="60" fill...
...="url(#myg
radient000)" /> <rect x="120" y="120" width="60" height="60" fill="url(#myg
radient050)" /> <rect x="220" y="120" width="60" height="60" fill="url(#myg
radient100)" /> </svg> circle for <circle>, r defines the
radius of the circle and therefor its size.
...And 5 more matches
Patterns - SVG: Scalable Vector Graphics
like g
radients, the <pattern> element should be put in the <defs> section of your svg file.
... <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearg
radient id="g
radient1"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="blue"/> </linearg
radient> <linearg
radient id="g
radient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </linearg
radient> <pattern id="pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="url(#g
radient2)"/> <circle cx="25" cy="25" r="20" fill="url(#g
radient1)" fill-opacity="0.5"/> </pattern> </defs> <rect fill="url(#pattern)" stroke="black" width="200" height="200"/> </svg> screenshotlive ...
...sample inside the <pattern> element, you can include any of the other basic shapes you've included before, and each of them can be styled using any of the styles you've learned before, including g
radients and opacity.
...And 5 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
this is because the mpl and gpl include provisions cont
radicting this.
... t
rademarks and patents software is treated as a copyrighted work under copyright law, but the rights that attend software are not limited to copyright: software is also covered by patent and t
rademark law.
... while you can freely duplicate, distribute, and modify copyrighted open-source software, it’s typical that with t
rademarked or patented works, you can’t do whatever you want with them.
...And 4 more matches
Repackaging Firefox - Archive of obsolete content
to do this, please contact t
rademarks@mozilla.com.
...using an extension makes it far easier to keep track of your changes easily when the time comes to upg
rade to new versions of firefox, and also ensures, when set-up correctly, that users are able to safely receive firefox updates from mozilla.
...however, it's still recommended that you look through this tutorial, as it contains tips specific for creating extensions of this type, and there are a few options that you will need to set to ensure a smooth upg
rade path for users.
...And 4 more matches
MenuItems - Archive of obsolete content
radio menu items a
radio menu item os used when you wish to have a group of menuitems in which only one can be checked at a time.
... to create a menuitem that acts like a
radio button, set the type attribute to "
radio".
...the value of this attribute can be any name you wish; all
radio menuitems within the same menu with the same name are part of the same group.
...And 4 more matches
Gecko Compatibility Handbook - Archive of obsolete content
upg
rade the browser detection javascript to detect "gecko." (related article) content differs in gecko browsers and internet explorer use of proprietary or invalid markup (such as is generated by some microsoft office applications).
... upg
rade web authoring tool to versions that support the w3 standards and gecko browsers content differs in gecko browsers and internet explorer the javascript console in netscape 6.x and netscape 7.x displays errors about document.all, document.layers, document.<property> not being defined because of an incorrect browser sniffing, or use of proprietary javascript.
... upg
rade apis to use newer standards-conformant versions upg
rade web authoring tool to versions that support the w3 standards and gecko browsers content differs in gecko browsers and internet explorer your css relies on bugs in internet explorer's implementation of css.
...And 4 more matches
3D collision detection - Game development
if this distance is smaller than or equal to the
radius of the sphere, the point is inside the sphere.
...sphere collision detection would work out like so: f(p,s)=s
radius>=(px-sx)2+(py-sy)2+(pz-sz)2f(p,s) = s_{
radius} >= \sqrt{(p_x - s_x)^2 + (p_y - s_y)^2 + (p_z - s_z)^2} or in javascript: function ispointinsidesphere(point, sphere) { // we are using multiplications because is faster than calling math.pow var distance = math.sqrt((point.x - sphere.x) * (point.x - sphere.x) + (point.y - sphere.y) * (point.y - sphere.y) + (point.z - sphere.z) * (point.z - sphere.z)); return distance < sphere.
radius; } the code above features a square root, which...
...an easy optimization to avoid it consists of comparing the squared distance with the squared
radius, so the optimized equation would instead involve distancesqr < sphere.
radius * sphere.
radius.
...And 4 more matches
How to structure a web form - Learn web development
here is a little example: <form> <fieldset> <legend>fruit juice size</legend> <p> <input type="
radio" name="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <input type="
radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <input type="
radio" name="size" id="size_3" value="large"> <label for="size_3">large</label> </p> </fieldset> </form> note: you can find this example in fie...
...each time you have a set of
radio buttons, you should nest them inside a <fieldset> element.
...this is useful for controls like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for
radio buttons and checkboxes — the hit area of such a control can be very small, so it is useful to make it as easy to activate as possible.
...And 4 more matches
Client-side storage - Learn web development
inside the window.onload handler, add the following: // open our database; it is created if it doesn't already exist // (see onupg
radeneeded below) let request = window.indexeddb.open('notes_db', 1); this line creates a request to open version 1 of a database called notes_db.
...if you want to upg
rade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the onupg
radeneeded handler (see below), etc.
... we won't cover upg
rading databases in this simple tutorial.
...And 4 more matches
Experimental features in Firefox
nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic g
radients conic g
radients expand css g
radients to allow the color transitions to be rendered circling around a center point rather than
radiating from it.
... nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-g
radient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g.
... nightly 59 no developer edition 59 no beta 59 no release 59 no preference name security.mixed_content.block_object_subrequest insecure page labeling these two preferences add a "not secure" text label in the address bar next to the t
raditional lock icon when a page is loaded insecurely (that is, using http rather than https).
...And 4 more matches
CanvasRenderingContext2D.arc() - Web APIs
syntax void ctx.arc(x, y,
radius, startangle, endangle [, anticlockwise]); the arc() method creates a circular arc centered at (x, y) with a
radius of
radius.
...
radius the arc's
radius.
... startangle the angle at which the arc starts in
radians, measured from the positive x-axis.
...And 4 more matches
additive-symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax [ <integer> && <symbol> ]#where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <color><linear-g
radient()> = linear-g
radient( [ <angle> | to <side-or-corner> ]?
...And 4 more matches
negative - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"-" hyphen-minuscomputed valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <color><linear-g
radient()> = linear-g
radient( [ <angle> | to <side-or-corner> ]?
...And 4 more matches
pad - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value0 ""computed valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <color><linear-g
radient()> = linear-g
radient( [ <angle> | to <side-or-corner> ]?
...And 4 more matches
prefix - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"" (the empty string)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <color><linear-g
radient()> = linear-g
radient( [ <angle> | to <side-or-corner> ]?
...And 4 more matches
suffix - CSS: Cascading Style Sheets
" (full stop followed by a space)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <color><linear-g
radient()> = linear-g
radient( [ <angle> | to <side-or-corner> ]?
...And 4 more matches
symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax <symbol>+where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <color><linear-g
radient()> = linear-g
radient( [ <angle> | to <side-or-corner> ]?
...And 4 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
.wrapper > p { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d9480f; max-width: 300px; } <div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </div> writing modes in grid layouts if we...
...it then moves onto the next line, creating a new row track, and fills in more items: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item ...
...And 4 more matches
Shapes From Images - CSS: Cascading Style Sheets
in this guide we will take a look at how we can create a shape from an image file with an alpha channel or even from a css g
radient.
... creating shapes using a g
radient as a css g
radient is treated as an image, you can use a g
radient to generate your shape, by having transparent or semi-transparent areas as part of the g
radient.
... in this next example i have used generated content and floated this content, giving it a background image of a linear g
radient.
...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-button; -webkit-appearance: caret; values stan...
...webkit-appearance: meter; } <div>lorem</div> chrome safari firefox progress-bar div{ color: black; -webkit-appearance: progress-bar; } <div>lorem</div> chrome safari firefox push-button div{ color: black; -webkit-appearance: push-button; } <div>lorem</div> chrome safari edge
radio div { color: black; -moz-appearance:
radio; -webkit-appearance:
radio; } <div>lorem</div> firefox chrome safari edge the element is drawn like a
radio button, including only the actual "
radio button" portion.
... menuitemtext firefox removed in firefox 64 menupopup firefox removed in firefox 64 menu
radio firefox removed in firefox 64 menuseparator firefox removed in firefox 64 meterchunk firefox removed in firefox 64.
...And 4 more matches
background - CSS: Cascading Style Sheets
] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<attachment> = scroll | fixed | local<box> = border-box | padding-box | content-boxwhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient><length-percentage> = <length> | <percentage>where <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <color><linear-g
radient()> = linear-g
radient( [ <angle> | to <side-or-corner> ]?
...And 4 more matches
filter - CSS: Cascading Style Sheets
the value of
radius defines the value of the standard deviation to the gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur.
... if both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-
radius> and/or <spread-
radius> is set).
... <blur-
radius> (optional) this is a third <length> value.
...And 4 more matches
mask - CSS: Cascading Style Sheets
ngth-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <shape-box> | fill-box | stroke-box | view-box<compositing-operator> = add | subtract | intersect | exclude<masking-mode> = alpha | luminance | match-sourcewhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <g
radient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>?
...)<g
radient> = <linear-g
radient()> | <repeating-linear-g
radient()> | <
radial-g
radient()> | <repeating-
radial-g
radient()> | <conic-g
radient()><box> = border-box | padding-box | content-boxwhere <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <color><linear-g
radient()> = linear-g
radient( [ <angle> | to <side-or-corner> ]?
...And 4 more matches
HTTP headers - HTTP
headers can also be grouped according to how proxies handle them: connection keep-alive proxy-authenticate proxy-authorization te trailer transfer-encoding upg
rade (see also protocol upg
rade mechanism).
... upg
rade-insecure-requests sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upg
rade-insecure-requests directive.
... upg
rade the relevant rfc document for the upg
rade header field is rfc 7230, section 6.7.
...And 4 more matches
BigInt.prototype.toString() - JavaScript
syntax bigintobj.tostring([
radix]) parameters
radixoptional optional.
... exceptions rangeerror if tostring() is given a
radix less than 2 or greater than 36, a rangeerror is thrown.
...for bigint objects, the tostring() method returns a string representation of the object in the specified
radix.
...And 4 more matches
Number.prototype.toString() - JavaScript
syntax numobj.tostring([
radix]) parameters
radix optional.
... exceptions rangeerror if tostring() is given a
radix less than 2 or greater than 36, a rangeerror is thrown.
...for number objects, the tostring() method returns a string representation of the object in the specified
radix.
...And 4 more matches
href - SVG: Scalable Vector Graphics
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <linearg
radient>, <mpath>, <pattern>, <
radialg
radient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <image href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100"/> </svg> linearg
radient for <linearg
radient>, href defines url referring to a template g
radient element; to be valid, the reference must be to a different <linearg
radient> or <
radialg
radient> element.
... value <url> default value none animatable yes
radialg
radient for <
radialg
radient>, href defines url referring to a template g
radient element; to be valid, the reference must be to a different <linearg
radient> or <
radialg
radient> element.
...And 4 more matches
y1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <linearg
radient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> linearg
radient for <linearg
radient>, y1 defines the y coordinate of the starting point of the g
radient vector used to map the g
radient stop values.
... the exact behavior of this attribute is influenced by the g
radientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the g
radient vector start at the top left corner of the bounding box of the shape it is applied to.
...And 4 more matches
y2 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <linearg
radient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> linearg
radient for <linearg
radient>, y2 defines the y coordinate of the ending point of the g
radient vector used to map the g
radient stop values.
... the exact behavior of this attribute is influenced by the g
radientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the g
radient vector end at the top right corner of the bounding box of the shape it is applied to.
...And 4 more matches
In-Depth - Archive of obsolete content
button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, 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-ri...
...-moz-border-
radius rounds the corners of a box.
...-moz-border-
radius-topleft the same as -moz-border-
radius but only applies to the top left corner.
...And 3 more matches
Proxy UI - Archive of obsolete content
the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a
radio button that selects the proxy mode, then "related proxy mode" ui when needed.
...for example, firefox 3: [ ] no proxy [ ] auto-detect proxy settings for this network [ ] manual proxy configuration: [ ] automatic proxy configuration url: behavior default value: "no proxy" is selected all other "type"
radio buttons are enabled, but not selected.
... enabling and disabling related fields when a
radio button is selected, the related ui elements are enabled (and editable).
...And 3 more matches
XUL Events - Archive of obsolete content
the default action of the event can be prevented to prevent the popup to appear.popupshownthe popupshown event is executed when a <menupopup>, <panel> or <tooltip> has become visible.
radiostatechangethe
radiostatechange event is executed when the state of a <
radio> element has changed.valuechangethe valuechange event is executed when the value of an element, <progress> for example, has changed.
...if you capture this event at the document level, you can be notified of document changes warning: it should be noted that the addition of any mutation event listeners to a document deg
rades the performance of subsequent dom operations in that document, and that removing the listeners later does not mitigate or reverse the effect.
...
radiostatechange this event is sent when a
radio button is selected, either by the user or a script.
...And 3 more matches
More Menu Features - Archive of obsolete content
you may also want to create
radio buttons on menu items.
... the checks are created in a similar way to the checkbox and
radio elements.
...menu with
radios in addition to standard checks, you can create the
radio style of checks by setting the type to a value of
radio.
...And 3 more matches
toolbarbutton - Archive of obsolete content
arbutton accesskey="b" label="menu-button" type="menu-button"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> <toolbarbutton accesskey="m" label="menu" type="menu"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> </toolbar> <toolbar id="
radio-toolbar"> <toolbarbutton accesskey="1" label="
radio 1" type="
radio" group="
radiogroup"/> <toolbarbutton accesskey="2" label="
radio 2" type="
radio" group="
radiogroup"/> <toolbarbutton accesskey="3" label="
radio 3" type="
radio" group="
radiogroup"/> </toolbar> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...when autocheck is true, the button type should be "checkbox" or "
radio".
... for buttons, the type attribute must be set to checkbox or
radio for this attribute to have any effect.
...And 3 more matches
Building up a basic demo with A-Frame - Game development
let's try adding a torus — add this element below the previous code: <a-entity geometry=" primitive: torus;
radius: 1;
radiustubular: 0.1; segmentstubular: 12;" rotation="10 0 0" position="-3 1 0"> </a-entity> our entity has a torus primitive, which represents its shape.
... we are passing some initial variables to that shape: the
radius of the outer edge of the torus, the
radius of the tube, and number of segments along the circumference of the tube face respectively.
...edit the <a-entity> defining the torus to look like the following: <a-entity geometry=" primitive: torus;
radius: 1;
radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotation="10 0 0" position="-3 1 0"> </a-entity> in the new material attribute, we set up the color of the material, then its roughness (a rougher material will scatter reflected light in more directions than a smooth material) and metalness (how metallic the material is).
...And 3 more matches
Example 1 - Learn web development
{ max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-
radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-g
radient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absol...
...ute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-
radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-
radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic s...
... : 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 : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-g
radient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absol...
...And 3 more matches
Silly story generator - Learn web development
converts the default us weight and temperature quantities and units in the story into uk equivalents if the uk
radio button is checked before the generate button is pressed.
...in this block we are saying "if a value has been entered into the customname text input, replace bob in the story with that custom name." inside the second if block, we are checking to see if the uk
radio button has been selected.
... if so, we want to convert the weight and temperature values in the story from pounds and fahrenheit into stones and centig
rade.
...And 3 more matches
Index
4 binary compatibility xpcom if mozilla decides to upg
rade to a compiler that does not have the same abi as the current version, any built component may fail.
... it is a possiblity that is introduced when upg
rading to a new compiler without recompiling everything.
...used for tree items, list items, tab panel labels,
radio buttons, etc.
...And 3 more matches
nsINavBookmarkObserver
inherits from: nsisupports last changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) method overview void onbeforeitemremoved(in long long aitemid, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); obsolete since gecko 21.0 void onbeginupdatebatch(); void onendupdatebatch(); void onfolde
radded(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 void onfolderchanged(in print64 folder, in acstring property); obsolete since gecko 1.9 void onfoldermoved(in print64 folder, in print64 oldparent, in print32 oldindex, in print64 newparent, in print32 newindex); obsolete since gecko 1.9 void onfolderremoved(in print64 folder, in print6...
...nsiuri auri, in acstring aguid, in acstring aparentguid); void onitemreplaced(in print64 folder, in nsiuri item, in nsiuri newitem); obsolete since gecko 1.9 void onitemvisited(in long long aitemid, in long long avisitid, in prtime atime, in unsigned long atransitiontype, in nsiuri auri, in long long aparentid, in acstring aguid, in acstring aparentguid); void onseparato
radded(in print64 parent, in print32 index); obsolete since gecko 1.9 void onseparatorremoved(in print64 parent, in print32 index); obsolete since gecko 1.9 methods onbeforeitemremoved() obsolete since gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) note: this method was removed in gecko 21.0 as part of bug 826409.
... onfolde
radded() obsolete since gecko 1.9 (firefox 3) notify this observer that a bookmark folder has been added.
...And 3 more matches
Advanced animations - Web APIs
var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var ball = { x: 100, y: 100,
radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.
radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; ball.draw(); nothing special here, the ball is actually a simple circle and gets drawn with the help of the arc() method.
... var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2,
radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.
radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestanimationframe(draw); } canvas.addeventlis...
... <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2,
radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.
radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy...
...And 3 more matches
Touch - Web APIs
the touch.
radiusx, touch.
radiusy, and touch.rotationangle describe the area of contact between the user and the screen, the touch area.
...this may also be the case for
radiusx and
radiusy; if the hardware reports only a single point, these values will be 1.
... touch area touch.
radiusx read only returns the x
radius of the ellipse that most closely circumscribes the area of contact with the screen.
...And 3 more matches
:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any
radio (<input type="
radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
... /* matches any checked/selected
radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.
... syntax :checked examples basic example html <div> <input type="
radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="
radio" name="my-input" id="no"> <label for="no">no</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt3">pears</option> </select> css div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /*
radio element, when c...
...And 3 more matches
Grid template areas - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">foote...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd ...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd ...
...And 3 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } i’m using the same grid definitions as above, however this time i am going to place a single item into the named area content.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" ...
...And 3 more matches
CSS reference - CSS: Cascading Style Sheets
nbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-
radiusborder-bottom-right-
radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-
radiusborder-end-start-
radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-...
...colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-
radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-
radiusborder-start-start-
radiusborder-styleborder-topborder-top-colorborder-top-left-
radiusborder-top-right-
radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconi...
...c-g
radient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical...
...And 3 more matches
shape-image-threshold - CSS: Cascading Style Sheets
formal definition initial value0.0applies tofloatsinheritednocomputed valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a g
radient this example creates a <div> block with a g
radient background image.
... the g
radient is established as a css shape using shape-outside, so that pixels within the g
radient which are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape.
... html <div id="g
radient-shape"></div> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit.
...And 3 more matches
Web video codec guide - Web media technologies
thus, it's always a t
radeoff of size versus quality.
...additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where g
radients cannot be represented without visible stepping of the colors.
... lossy compression to some degree, artifacts and other forms of quality deg
radation wil occur, depending on the specific codec and how much compression is being applied the more the encoded video is allowed to deviate from the source, the easier it is to accomplish higher compression rates quality setting the higher the quality configuration, the more like the original media the encoded video will look in general, higher quality settings will result in lar...
...And 3 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: <color>|inherit; animatable: yes color-interpolation it specifies the color space for g
radient interpolations, color animations, and alpha compositing.
...quality t
radeoffs as it performs image processing.
... value: bounding-box|visiblepainted|visiblefil|visiblestroke|visible |painted|fill|stroke|all|none; animatable: yes shape-rendering hints about what t
radeoffs to make as the browser renders <path> element or basic shapes.
...And 3 more matches
x1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <linearg
radient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> linearg
radient for <linearg
radient>, x1 defines the x coordinate of the starting point of the g
radient vector used to map the g
radient stop values.
... the exact behavior of this attribute is influenced by the g
radientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the g
radient vector start at the left bounding limit of the shape it is applied to --> <linearg
radient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </linearg
radient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the g
radient vector start at 80% of the left bounding limit of the shape it is applied to --> <linearg
radient x1="80%" id="g1"> <stop offset="0" stop-color="black" ...
...And 3 more matches
x2 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <linearg
radient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> linearg
radient for <linearg
radient>, x2 defines the x coordinate of the ending point of the g
radient vector used to map the g
radient stop values.
... the exact behavior of this attribute is influenced by the g
radientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the g
radient vector end at the right bounding limit of the shape it is applied to --> <linearg
radient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </linearg
radient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the g
radient vector start at 20% of the left bounding limit of the shape it is applied to --> <linearg
radient x2="20%" id="g1"> <stop offset="0" stop-color="blac...
...And 3 more matches
<stop> - SVG: Scalable Vector Graphics
the svg <stop> element defines a color and its position to use on a g
radient.
... this element is always a child of a <linearg
radient> or <
radialg
radient> element.
... html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearg
radient id="myg
radient" g
radienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </linearg
radient> </defs> <!-- using my linear g
radient --> <circle cx="5" cy="5" r="4" fill="url('#myg
radient')" /> </svg> attributes offset this attribute defines where the g
radient stop is placed along the g
radient vector.
...And 3 more matches
Clipping and masking - SVG: Scalable Vector Graphics
« previousnext » erasing part of what one has created might at first sight look cont
radictory.
...te the above mentioned semicircle based on a circle element: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clippath> </defs> <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> </svg> centered at (100,100) a circle with
radius 100 is painted.
... masking the effect of masking is most impressively presented with a g
radient.
...And 3 more matches
Paths - SVG: Scalable Vector Graphics
for a given x-
radius and y-
radius, there are two ellipses that can connect any two points (as long as they're within the
radius of the circle).
... because of that, arcs require quite a few parameters: a rx ry x-axis-rotation large-arc-flag sweep-flag x y a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy at its start, the arc element takes in two parameters for the x-
radius and y-
radius.
...at its center, two elliptical arcs have been cut out (x
radius = 30, y
radius = 50).
...And 3 more matches
core/heritage - Archive of obsolete content
this.bark() : ''; } }); var tsuga = pet('lab
rador', 'tsuga'); tsuga instanceof pet // => true tsuga instanceof dog // => true tsuga.call('tsuga') // => 'ruff!
...as a matter of fact since result is just a plain constructor function with proper prototype chain setup you could sub-class it as any other constructor: function lab
rador() { // ...
... } lab
rador.prototype = object.create(dog.prototype); lab
rador.prototype.jump = function() { // ...
...And 2 more matches
Groupboxes - Archive of obsolete content
radio groups you can use the
radiogroup element to group
radio elements together.
... the
radiogroup is a type of box.
... you can put any element you want inside it, and apart from its special handling of
radio buttons, it works like any other box.
...And 2 more matches
What is RSS - Archive of obsolete content
(although rdf-based rss formats exist, namely the deprecated rss 0.90 and rss 1.0.) common uses of rss syndication are for the syndication of news web sites, of blogs, of internet
radio, and of internet television.
...-0500</pubdate> <link>http://joe-blow.example.net/log/19</link> </item> <item> <title>black cat spotted</title> <guid>http://joe-blow.example.net/log/18</guid> <pubdate>fri, 13 may 2005 13:13:13 -0500</pubdate> <link>http://joe-blow.example.net/log/18</link> </item> </channel> </rss> those who create internet
radio use rss to allow users to access their shows.
...pubdate> <link>http://joe-blow.example.net/log/19</link> </item> <item> <title>black cat spotted</title> <guid>http://joe-blow.example.net/log/18</guid> <pubdate>fri, 13 may 2005 13:13:13 -0500</pubdate> <link>http://joe-blow.example.net/log/18</link> </item> </channel> </rss> note: broadcasting of internet
radio is sometimes call podcasting, ip
radio, and audio blogging.
...And 2 more matches
Anatomy of a video game - Game development
this (non-web) case study made a few assumptions and t
radeoffs: each frame of animation accounts for user input.
... this uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of t
raditional game loops (but it is simple.) draw on requestanimationframe and update on a setinterval or settimeout in a web worker.
... each of these methods have similar t
radeoffs: users can skip rendering frames or interpolate extra ones depending on their performance.
...And 2 more matches
Bounding volume collision detection with THREE.js - Game development
we need to provide the sphere's center and
radius, which can be added to the boundingsphere property available in geometry.
... var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); var knotbsphere = new sphere( knot.position, knot.geometry.boundingsphere.
radius); unfortunately, there is no equivalent of box3.setfromobject for sphere instances.
...for instance: knot.scale.set(2, 2, 2); knotbsphere.
radius = knot.geometry.
radius * 2; intersection tests point vs.
...And 2 more matches
Advanced styling effects - Learn web development
first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-g
radient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
... the third length value is the blur
radius — the amount of blurring applied to the shadow.
...multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-g
radient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you could use it in a...
...And 2 more matches
Client-side form validation - Learn web development
(required)</label> <input id="choose" name="i_like" required> <button>submit</button> </form> note the css that is included in the example file: input:invalid { border: 2px dashed red; } input:invalid:required { background-image: linear-g
radient(to right, pink, lightgreen); } input:valid { border: 2px solid black; } this css causes the input to have a red dashed border when it is invalid and a more subtle solid black border when valid.
... we also added a background g
radient when the input is required and invalid.
...first, some html: <form> <p> <fieldset> <legend>do you have a driver's license?<abbr title="this field is mandatory" aria-label="required">*</abbr></legend> <!-- while only one
radio button in a same-named group can be selected at a time, and therefore only one
radio button in a same-named group having the "required" attribute suffices in making a selection a requirement --> <input type="
radio" required name="driver" id="r1" value="yes"><label for="r1">yes</label> <input type="
radio" required name="driver" id="r2" value="no"><label for="r2"...
...And 2 more matches
HTML forms in legacy browsers - Learn web development
graceful deg
radation is web developer's best friend graceful deg
radation and progressive enhancement are development patterns that allow you to build great stuff by supporting a wide range of browsers at the same time.
... when you build something for a modern browser, and you want to be sure it will work, one way or another, on legacy browsers, you are performing graceful deg
radation.
... html input types the input types added in html5 are all useable, even in ancient browsers, because the way they deg
rade is highly predictable.
...And 2 more matches
Styling web forms - Learn web development
multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and
radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling.
...to give the same size to several different widgets, you can use the box-sizing property along with some consistent values for other properties: input, textarea, select, button { width : 150px; padding: 0; margin: 0; box-sizing: border-box; } in the screenshot below, the left column shows the default rendering of an <input type="
radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>.
... what may not be apparent via the screenshot is that the
radio and checkbox controls still look the same, but they are centered in the 150px of horizontal space provided by the width property.
...And 2 more matches
Inheritance in JavaScript - Learn web development
to create a subclass we use the extends keyword to tell javascript the class we want to base our class on, class teacher extends person { constructor(subject, g
rade) { this.subject = subject; this.g
rade = g
rade; } } but there's a little catch.
... to call the parent constructor we have to use the super() operator, like so: class teacher extends person { constructor(subject, g
rade) { super(); // now 'this' is initialized by calling the parent constructor.
... this.subject = subject; this.g
rade = g
rade; } } there is no point having a sub-class if it doesn't inherit properties from the parent class.
...And 2 more matches
Gecko info for Windows accessibility vendors
event_focus is fired for focus changes on any kind of focusable object event_statechange is used in check boxes,
radio buttons, text fields, combo boxes and list boxes.
... positional descriptions are supported the accdescription field is overriden for the following roles: role_listitem, role_menuitem, role_
radiobutton, role_pagetab and role_outlineitem for everything other than outline item, the positional description is in the form "n of m" where n is an integer indicating the position within other similar objects in a group, and m represents the number of objects in that group.
...dows role_client xul: <browser> html: <frame> or <iframe> role_menupopup dhtml: role="wairole:menu" fires event_menupopupstart, event_menupopupend role_menuitem xul: menuitem dhtml: role="wairole:menuitem" sets state_checked for
radio or checkbox menuitem types accelerator key comes in accname after a \t (tab) character.
...And 2 more matches
Testopia
testopia 3.0 (not yet released) if you upg
raded to bugzilla 5.0, you probably noticed that testopia 2.5 is not compatible with this version.
... the good news is that the current code in the git repository already works with bugzilla 5.0, and so if you upg
raded to 5.0 already, and if you don't mind having a work-in-progress extension on your machine, you can decide to pull the code from the git repository.
...if you are upg
rading, please reverse the existing version's patch before installing.
...And 2 more matches
SVG Guidelines
for example, consider an image of a path with a g
radient fill.
...consider an image that involves some complex g
radients and filters.
... if saved as a raster image then the work to rasterize the g
radients and filters takes place on the authors computer before the result is stored in the raster file.
...And 2 more matches
Extras
"16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <
radialg
radient id="
radg
rad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </
radialg
radient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" ...
... attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#
radg
rad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="15px" height="15px"> <defs> <
radialg
radient id="
radg
rad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" styl...
...e="stop-color:rgb(0,0,255); stop-opacity:.9;"/> </
radialg
radient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,5 l5,5 l0,4 l5,2 z" begin="0s" dur="0.5s" repeatcount="indefinite"/> <circle fill="url(#
radg
rad2)" r="5px" cx="5px" cy="5px"/> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ</mo> <mi>θ</mi> </mrow> </math> <div style="width: 300px; margin-left: auto; margin-right: auto;"> <svg width="300px" height="250px"> <defs> <linearg
radient id="g
rad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> </linearg
radient> <linearg
radient id="g
rad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> <stop ...
...And 2 more matches
PR EnumerateAddrInfo
enumerates each of the possible network addresses of a p
raddrinfo structure, acquired from pr_getaddrinfobyname.
... syntax #include <prnetdb.h> void *pr_enumerateaddrinfo( void *enumptr, const p
raddrinfo *addrinfo, pruint16 port, prnetaddr *result); parameters the function has the following parameters: enumptr the index pointer of the enumeration.
...to continue an enumeration (thereby getting successive addresses from the p
raddrinfo structure), the value should be set to the function's last returned value.
...And 2 more matches
sslerr.html
upg
raded documentation may be found in the current nss reference nss and ssl error codes chapter 8 nss and ssl error codes nss error codes are retrieved using the nspr function pr_geterror.
...peer does not support high-g
rade encryption." the local system was configured to support the cipher suites permitted for domestic use.
...peer requires high-g
rade encryption which is not supported." the remote system was configured to support the cipher suites permitted for domestic use.
...And 2 more matches
Building the WebLock UI
one of the most efficient ways to expose this is to use
radio buttons, which allow the user to toggle a particulart state, as the figure above illustrates.
... in xul individual <
radio/> elements are contained within a parent element called <
radiogroup/>.
... grouping
radio elements together creates the toggling ui by requiring that one or another of the elements be selected, but not both.
...And 2 more matches
Int64
method overview number compare(a, b); number hi(a); int64 join(high, low); number lo(a); string tosource(); string tostring([
radix]); methods compare() compares two 64-bit integer values.
... string tostring( [
radix] ); parameters
radix optional the
radix (base) to use when constructing the string.
... if you don't specify a
radix, base 10 is used.
...And 2 more matches
UInt64
method overview number compare(a, b); number hi(a); uint64 join(high, low); number lo(a); string tosource(); string tostring([
radix]); methods compare() compares two 64-bit integer values.
... string tostring( [
radix] ); parameters
radix optional the
radix (base) to use when constructing the string.
... if you don't specify a
radix, base 10 is used.
...And 2 more matches
HTMLInputElement - Web APIs
properties that apply only to elements of type checkbox or
radio checked boolean: returns / sets the current state of the element when type is checkbox or
radio.
... defaultchecked boolean: returns / sets the default state of a
radio button or checkbox as originally specified in html that created this object.
... indeterminate boolean: returns whether the checkbox or
radio button is in indeterminate state.
...And 2 more matches
IDBRequest.transaction - Web APIs
if a version upg
rade is needed when opening a database then during the upg
radeneeded event handler the transaction property will be an idbtransaction with mode equal to "versionchange", and can be used to access existing object stores and indexes, or abort the the upg
rade.
... following the upg
rade, the transaction property will again be null.
...ransaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.transaction); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; this example shows how a the transaction property can be used during a version upg
rade to access existing object stores: var openrequest = indexeddb.open('db', 2); console.log(openrequest.transaction); // will log "null".
...And 2 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
const viewerstartposition = vec3.fromvalues(0, 0, -10); const viewerstartorientation = vec3.fromvalues(0, 0, 1.0); const cubeorientation = vec3.create(); const cubematrix = mat4.create(); const mousematrix = mat4.create(); const inverseorientation = quat.create(); const
radians_per_degree = math.pi / 180.0; the first two—viewerstartposition and viewerstartorientation—indicate where the viewer will be placed relative to the center of the space, and the direction in which they'll initially be looking.
...
radians_per_degreee is the value to multiply an angle in degrees by to convert the angle into
radians.
... const normalmatrix = mat4.create(); const modelviewmatrix = mat4.create(); function renderscene(gl, view, programinfo, buffers, texture, deltatime) { const xrotationfortime = (xrotationdegreespersecond *
radians_per_degree) * deltatime; const yrotationfortime = (yrotationdegreespersecond *
radians_per_degree) * deltatime; const zrotationfortime = (zrotationdegreespersecond *
radians_per_degree) * deltatime; gl.enable(gl.depth_test); // enable depth testing gl.depthfunc(gl.lequal); // near things obscure far things if (enablerotation) { mat4.rotate(cubematrix, // ...
...And 2 more matches
ARIA Test Cases - Accessibility
all drag and drop operations screen readers t
raditionally perform within the operating system are hit and miss games that are performed on pixel locations.
...if it is a
radio or checkbox menu item, the screen reader should indicate that it's checkable.
... markup used: role="menubar", role="menu", role="menuitem", role="menuitemcheckbox", role="menuitem
radio" 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 ...
...And 2 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-
radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> ...
... .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-
radius: 5px; padding: 10px; } .wrapper { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; } to demonstrate how this grid system works i have four child elements inside my wrapper.
... * {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-
radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <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> ...
...And 2 more matches
Mozilla CSS extensions - CSS: Cascading Style Sheets
b -moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-right-colors -moz-border-top-colors -moz-box-align -moz-box-direction -moz-box-flex -moz-box-ordinal-group -moz-box-orient -moz-box-pack c–i -moz-context-properties -moz-float-edge -moz-force-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-
radius -moz-outline-
radius-bottomleft -moz-outline-
radius-bottomright -moz-outline-
radius-topleft -moz-outline-
radius-topright overflow-clip-box overflow-clip-box-block overflow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward)...
...-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menu
radio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized ...
... progressbar progresschunk
radio
radio-container
radio-label
radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left 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 tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image g
radients -moz-linear-g
radient ...
...And 2 more matches
background-size - CSS: Cascading Style Sheets
css <g
radient>s have no intrinsic dimensions or intrinsic proportions.
... note: the behavior of <g
radient>s changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5).
... working with g
radients if you use a <g
radient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%).
...And 2 more matches
clip-path - CSS: Cascading Style Sheets
if specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-
radius), to be the clipping path.
...th <url> values made absoluteanimation typeyes, as specified for <basic-shape>, otherwise no formal syntax <clip-source> | [ <basic-shape> | <geometry-box> ] | nonewhere <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <inset()> = inset( <length-percentage>{1,4} [ round <'border-
radius'> ]?
... )<circle()> = circle( [ <shape-
radius> ]?
...And 2 more matches
offset-path - CSS: Cascading Style Sheets
,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the css g
radient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the css
radial g
radient size values from closest-side to farthest-corner, and the keyterm contain.
...<string> )<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <length-percentage> = <length> | <percentage><fill-rule> = nonzero | evenodd<inset()> = inset( <length-percentage>{1,4} [ round <'border-
radius'> ]?
... )<circle()> = circle( [ <shape-
radius> ]?
...And 2 more matches
text-shadow - CSS: Cascading Style Sheets
each shadow is described by some combination of x and y offsets from the element, blur
radius, and color.
... syntax /* offset-x | offset-y | blur-
radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-
radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* use defaults for color and blur-
radius */ text-shadow: 5px 10px; /* global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; this property is specified as a comma-separated list of shadows.
...the third, optional, <length> value is the <blur-
radius>.
...And 2 more matches
HTTP Index - HTTP
105 csp: upg
rade-insecure-requests csp, content-security-policy, directive, http, reference, requests, security, upg
rade, upg
rade-insecure-requests the http content-security-policy (csp) upg
rade-insecure-requests directive instructs user agents to treat all of a site's insecure urls (those served over http) as though they have been replaced with secure urls (those served over https).
... 190 upg
rade-insecure-requests http, https, security, header the http upg
rade-insecure-requests request header sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upg
rade-insecure-requests csp directive.
... 219 101 switching protocols http, http status code, informational, reference, websockets the http 101 switching protocols response code indicates the protocol the server is switching to as requested by a client which sent the message including the upg
rade request header.
...And 2 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
example: masking for example, you can make a g
radient mask for html content using svg and css code similar to the following, inside your html document: <svg height="0"> <mask id="mask-1"> <linearg
radient id="g
radient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </linearg
radient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="300" ...
...height="100" fill="url(#g
radient-1)"/> </mask> </svg> .target { mask: url(#mask-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specified using a url to the id #mask-1, which is the id of the svg mask specified below it.
... everything else specifies details about the g
radient mask itself.
...And 2 more matches
cx - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <
radialg
radient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <
radialg
radient cx="25%" id="myg
radient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </
radialg
radient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#myg
radient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
...
radialg
radient for <
radialg
radient>, cx defines the x-axis coordinate of the end circle for the
radial g
radient.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <
radialg
radient cx="0" id="myg
radient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </
radialg
radient> <
radialg
radient cx="50%" id="myg
radient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </
radialg
radient> <
radialg
radient cx="100%" id="myg
radient100"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%"...
...And 2 more matches
cy - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <
radialg
radient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <
radialg
radient cy="25%" id="myg
radient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </
radialg
radient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#myg
radient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
...
radialg
radient for <
radialg
radient>, cy defines the y-axis coordinate of the end circle for the
radial g
radient.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <
radialg
radient cy="0" id="myg
radient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </
radialg
radient> <
radialg
radient cy="50%" id="myg
radient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </
radialg
radient> <
radialg
radient cy="100%" id="myg
radient100"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%"...
...And 2 more matches
Basic shapes - SVG: Scalable Vector Graphics
width the width of the rectangle height the height of the rectangle rx the x
radius of the corners of the rectangle ry the y
radius of the corners of the rectangle circle the <circle> element draws a circle on the screen.
... <circle cx="25" cy="75" r="20"/> r the
radius of the circle.
... ellipse an <ellipse> is a more general form of the <circle> element, where you can scale the x and y
radius (commonly refferred to as the semimajor and semiminor axes in maths) of the circle separately.
...And 2 more matches
Classes and Inheritance - Archive of obsolete content
the resulting constructor looks as follows: function circle(x, y,
radius) { if (!this) return new circle(x, y,
radius); shape.call(this, x, y); this.
radius =
radius; } note that the constructor for shape is called as an ordinary function, and reuses the object created for the constructor call to circle.
...we can now use the above constructor to create instances of the class circle: let circle = circle(2, 3, 5); circle instanceof circle; // => true circle.x; // => 2 circle.y; // => 3 circle.
radius; // => 5 inheritance and prototypes there is a problem with the definition of circle in the previous section that we have glossed over thus far.
...consequently, overriding a method is as simple as providing a new definition on the prototype of the subclass: circle.prototype.draw = function (ctx) { ctx.beginpath(); ctx.arc(this.x, this.y, this.
radius, 0, 2 * math.pi, false); ctx.fill(); }; with this definition in place, we get: let shape = shape(2, 3); shape.draw(); // error: not yet implemented let circle = circle(2, 3, 5); circle.draw(); // typeerror: ctx is not defined which is the behavior we were aiming for.
...if the extends property is omitted, class itself is used as the base class: var shape = new shape(2, 3); shape instanceof shape; // => true shape instanceof class; // => true to illustrate the use of the extends property, let's redefine the constructor for the class circle in terms of class: var circle = class({ extends: shape, initialize: function(x, y,
radius) { shape.prototype.initialize.call(this, x, y); this.
radius =
radius; }, draw: function (context) { context.beginpath(); context.arc(this.x, this.y, this.
radius, 0, 2 * math.pi, false); context.fill(); } }); unlike the definition of circle in the previous section, we no longer have to override its prototype, or set its c...
Inline options - Archive of obsolete content
firefox 7 supports a new syntax for defining extensions' preferences for both bootstrapped and t
raditional extensions.
...x integer (use the attributes on and off to specify what values to store) integer textbox integer string textbox string color colorpicker string (in the #123456 format) file browse button and label string directory browse button and label string menulist menulist dependent on the menu item values
radio
radio buttons dependent on the
radio values control button no pref stored the pref attribute should have the full name of the preference to be stored.
...ory" type="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon.options1" type="menulist" title="options 1"> <menulist> <menupopup> <menuitem value="500" label="small"/> <menuitem value="800" label="medium"/> <menuitem value="1200" label="large"/> </menupopup> </menulist> </setting> <!--
radio button example (this example would be stored as a boolean) --> <setting pref="extensions.myaddon.options2" type="
radio" title="options 2"> <
radiogroup> <
radio value="false" label="disabled"/> <
radio value="true" label="enabled"/> </
radiogroup> </setting> <!-- button example - not tied to a preference, but attached to a command --> <setting title="do something" type="control"> <b...
... this code should be in bootstrap.js (within the startup() function) for restartless extensions or in an xpcom component or a javascript code module (not an overlay!) for t
raditional extensions.
Adding menus and submenus - Archive of obsolete content
radio menu items if you need to have a set of menuitem elements where only one of them has to be checked at any given moment, you should set the type to "
radio".
... the name attribute is used to identify the items that belong to the
radio group.
... <menupopup oncommand="xulschoolchrome.hw.greetingdialog.greeting(event);"> <menuitem type="
radio" name="xulschoolhello-greeting-
radio" label="&xulschoolhello.greet.short.label;" checked="true" /> <menuitem type="
radio" name="xulschoolhello-greeting-
radio" label="&xulschoolhello.greet.medium.label;" /> <menuitem type="
radio" name="xulschoolhello-greeting-
radio" label="&xulschoolhello.greet.long.label;" /> </menupopup> this is a modified version of the 3 greeting menus.
... it is now implemented as a
radio menu where you pick one of the 3 available choices.
CSS3 - Archive of obsolete content
it brings a lot of long-awaited novelties, like rounded corners, shadows, g
radients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
... support for curved border corners, with the css border-
radius, border-top-left-
radius, border-top-right-
radius, border-bottom-left-
radius, and border-bottom-right-
radius properties.
... support for linear-g
radient(), repeating-linear-g
radient(),
radial-g
radient() and repeating-
radial-g
radient().
... the conic-g
radient() and repeating-conic-g
radient() functional notation describing a new type of g
radient.
JXON - Archive of obsolete content
it is called “parker convention” in opposition to “badgerfish convention”, after the comic parker & badger by cuad
rado.
...@value": "gbp" }, { "@type": "hidden", "@name": "amount", "@value": 0 }, { "@type": "hidden", "@name": "name", "@value": "captured" }], "table": { "tr": [{ "th": { "@style": "text-align: right;", "keyvalue": "product:" }, "td": { "span": [{ "input": { "@type": "
radio", "@name": "nome", "@id": "rel_tshirt", "@value": "tshirt" }, "label": { "@for": "rel_tshirt", "keyvalue": "t-shirt" }, "@class": "product" }, { "input": { "@type": "
radio", "@name": "nome", "@id": "rel_trousers", ...
... "@value": "trousers" }, "label": { "@for": "rel_trousers", "keyvalue": "trousers" }, "@class": "product" }, { "input": { "@type": "
radio", "@name": "nome", "@id": "rel_pullover", "@value": "pullover" }, "label": { "@for": "rel_pullover", "keyvalue": "pullover" }, "@class": "product" }] } }, { "th": { "@style": "text-align: right;", "keyvalue": "quantity:" }, "td": { "input": { "@type": "text", "@name": "myinput", "@onkeypress": "return number...
...fromcharcode(okeyevent.charcode)); } </script> <input type="hidden" name="instid" value="1234" /> <input type="hidden" name="currency" value="gbp" /> <input type="hidden" name="amount" value="0" /> <input type="hidden" name="name" value="captured" /> <table> <tr> <th style="text-align: right;">product:</th> <td><span class="product"><input type="
radio" name="nome" id="rel_tshirt" value="tshirt"/><label for="rel_tshirt">t-shirt</label></span><span class="product"><input type="
radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">trousers</label></span><span class="product"><input type="
radio" name="nome" id="rel_pullover" value="pullover"/><label for="rel_pullover">pullover</label></span> </td> </tr> ...
menuitem.type - Archive of obsolete content
« xul reference home type type: one of the values below can be used to create checkable menuitems or for
radio button menuitems.
...
radio the menuitem becomes part of a
radio group.
... other menuitems that have the same value for their name attributes are part of the same
radio group.
... only one menuitem in the same
radio group can be checked at once.
Static Content - Archive of obsolete content
static content example let's look at another example, involving
radio buttons.
... actually, this example is similar, it just uses a
radiogroup instead of a menulist to display the list of countries.
... <
radiogroup datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" onselect="applyfilter(event.target.value);"> <
radio label="all" selected="true"/> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <
radio uri="?country" label="?countrytitle" value="?country"/> </action> </template> </
radiogroup> this example doesn't have any other content to generate outside the
radio element with the uri attribute, so...
...the static 'all'
radio button will be left as the first
radio item.
Manipulating Lists - Archive of obsolete content
this includes the menulist,
radiogroup and tabs elements.
... the select event is also fired when a
radio button in a
radiogroup is selected and when a tab is selected in a tabs element.
...in the next example, the selectedindex property of a
radiogroup element is changed based on the value entered in a textbox.
... example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <
radiogroup id="level"> <
radio label="excellent"/> <
radio label="good"/> <
radio label="poor"/> </
radiogroup> listboxes also support multiple selection and the functions of the nsidomxulmultiselectcontrolelement interface.
XUL accessibility guidelines - Archive of obsolete content
groupboxes are essential for
radiogroups or groups of checkboxes with a similar theme (e.g.
...aysprelabel historybox historydayspostlabel"> <label id="historydaysprelabel">remember visited pages for the last</label> <textbox id="historydays" aria-labelledby="historydaysprelabel historybox historydayspostlabel"/> <label id="historydayspostlabel" >days.</label> the aria-labelledby attribute comes in handy for controls embedded within controls (usually embedded within a checkbox or a
radio button).
... form labels every form element has an associated label and
radiobuttons are encapsulated in a groupbox.
... form elements are missing labels or the labels are not programmatically connected or
radiobuttons are not contained in a groupbox.
button - Archive of obsolete content
when autocheck is true, the button type should be "checkbox" or "
radio".
... for buttons, the type attribute must be set to checkbox or
radio for this attribute to have any effect.
... group type: string group name buttons with type="
radio" and the same value for their group attribute are put into the same group.
...
radio the button acts like a
radio button.
2006-12-01 - Archive of obsolete content
watch #grandpa
radiso for updates.
... discussion november 29th gecko 1.9/gran pa
radiso status meeting other than annoucing the meeting, this thread discusses where else can info about what happens at the meetings be found (since the agenda often seems bare).
... bon echo project status: remaining "to-do" items beltzner starts a discussion on when to offer 1.5.0.8+ users the chance to upg
rade to ff2.x (now or when ff2.0.0.1 is released).
... meetings november 29th gecko 1.9/gran pa
radiso status meeting: (agenda).
Proposal - Archive of obsolete content
those labeled with "draft exists" can be implemented, but be warned that they could
radically change.
...spec exists itunes rss itunes extension modules used for ip
radio/podcasting.
... spec exists media rss rss extension module used for iptv and ip
radio/podcasting.
...spec exists rss disposition hinting a proposal to make it so iptv and ip
radio/podcasting works better with rss.
Theme changes in Firefox 2 - Archive of obsolete content
preferences/preferences.css the following styles are no longer used in firefox 2 and should be removed from your theme: #browserstartuphomepage #browserstartuphomepage #panedownloads description #panegeneral description
radio[pane=panedownloads]
radio[pane=panedownloads]:active the following styles need to be added to your theme to make it compatible with firefox 2: #panecontent description #panemain description #panesecurity description
radio[pane=paneadvanced]:hover
radio[pane=paneadvanced][selected="true"]
radio[pane=panecontent]:hover
radio[pane=panecontent][selected="true"]
radio[pane=panefeeds] r...
...adio[pane=panefeeds]:active
radio[pane=panefeeds]:hover
radio[pane=panefeeds][selected="true"]
radio[pane=panegeneral]:hover
radio[pane=panegeneral][selected="true"]
radio[pane=panemain]
radio[pane=panemain]:active
radio[pane=panemain]:hover
radio[pane=panemain][selected="true"]
radio[pane=paneprivacy]:hover
radio[pane=paneprivacy][selected="true"]
radio[pane=panesecurity]
radio[pane=panesecurity]:active
radio[pane=panesecurity]:hover
radio[pane=panesecurity][selected="true"]
radio[pane=panetabs]:hover
radio[pane=panetabs][selected="true"] you may of course wish to change other styles as well.
... menu.css the following style is no longer used in firefox 2 and has been removed: menulist > menupopup > menuitem[_moz-menuactive="true"] the firefox 2 theme also adds the following new styles: .menu-iconic-icon menubar > menu menubar > menu[_moz-menuactive="true"][open="true"] menuitem[type="checkbox"] > .menu-iconic-left menuitem[type="
radio"] > .menu-iconic-left you may wish to change the definitions of other styles as well.
...tent .updatecategoryicon .updatecategorylabel[selected="true"] .updateicon .updateicon[severity="0"] .updateicon[severity="1"] .updateicon[severity="2"] .updateindicator > label .updateindicator[updatecount="0"] .updateitemchecked .updateitemchecked .checkbox-label-box .updateitemfromlabel .updateitemicon .updateitemicon .updateitemname .updateitemnamerow .updateitemurl .warning
radio[type="update-type"]
radiogroup[type="update-types"] toolbarbutton[type="updates"] toolbarbutton[type="updates"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="0"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="1"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="2"] > .toolbarbutton-icon toolbarbutton[type="updates"][updatecount="0"] updateitem...
Browser Detection and Cross Browser Support - Archive of obsolete content
many financial sites (banks, online stock t
rading firms, etc) have very strict policies with respect to what browsers they support.
...i recommend that you only provide work arounds for bugs on a temporary basis and as soon as bugs are corrected in newer releases of the browser that you require your visitors to upg
rade their browser.
...however, as long as web developers continue to code work arounds for these older browsers, users will not have a compelling reason to upg
rade.
... by ceasing to support older browsers, you can provide a reason for users to upg
rade.
-ms-filter - Archive of obsolete content
filterfrom.filters.item(0).transition=12; imagefrom.style.visibility = "hidden"; filterto.style.visibility = ""; filterfrom.filters.item(0).play(14); } </script> </body> g
radient progid:dximagetransform.microsoft.g
radient( <properties> ) where <properties> = [ <enabled> | <endcolor> | <endcolorstr> | <g
radienttype> | <startcolor> | <startcolorstr> ]# where <enabled> = 'enabled=' [ true | false ] <endcolor> = 'startcolor=' <color> <endcolorstr> = 'startcolorstr=' <color> <g
radienttype> = 'g
radienttype=' <integer> <startcolor> = 'startcolor=' <color> <startcolorstr> = ...
... g
radienttype default: 0 (equivalent to linear-g
radient(to bottom, …)) set to a non-zero value to make the g
radient horizontal (equivalent to linear-g
radient(to right, …)) startcolor the end color, supports only opaque colors in the #rrggbb notation.
... html <div class="g
radient horizontal"></div> <div class="g
radient vertical"></div> css html, body { overflow-x: hidden; max-width: 100vw; } .g
radient { width: 100vw; height: 60px; height: 50vh; } .g
radient.horizontal { -ms-filter: 'progid:dximagetransform.microsoft.g
radient(startcolorstr="#ffffff", endcolorstr="#000000", g
radienttype=1)'; background-image: linear-g
radient(to right, #ffffff 0%, #000000 100%); } .g
radient.vertical { -ms-filter: 'progid:dximagetransform.microsoft.g
radient(startcolorstr="#ffffff", endcolorstr="#000000", g
radienttype=0)'; background-image: linear-g
radient(to bottom, #ffffff 0%, #000000 100%); } result s...
... initial value"" (the empty string)applies toall elementsinheritednocomputed valueas specifiedanimation typediscrete remarks the following table lists the most popular dx filters and their standards-based alternatives: dx filter standards-based alternative alpha opacity alphaimageloader <img> or background-image and related properties g
radient background-image: linear-g
radient() dropshadow text-shadow or box-shadow matrix transform, transform-origin in windows internet explorer 8, the -ms-filter attribute is an extension to css, and can be used as a synonym for filter in ie8 standards mode.
Archive of obsolete content
perhaps your target audience is people that are using older hardware, for example, and can't upg
rade to the latest and greatest browsers.
...it brings a lot of long-awaited novelties, like rounded corners, shadows, g
radients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
... index of archived content inner-browsing extending the browser navigation pa
radigm this article is the version from 2003 with slight modifications (no images and no links to samples).
...(some being based on rdf, but most only being based on xml.) nonetheless, rss is an extremely popular format that is used for syndicating news, blog posts, ip
radio, and iptv, with an amazing amount of momentum.
2D collision detection - Game development
this algorithm works by taking the centre points of the two circles and ensuring the distance between the centre points are less than the two
radii added together.
...green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> #cr-stage { position: static !important; height: 200px !important; } crafty.init(200, 200); var dim1 = {x: 5, y: 5} var dim2 = {x: 20, y: 20} crafty.c("circle", { circle: function(
radius, color) { this.
radius =
radius; this.w = this.h =
radius * 2; this.color = color || "#000000"; this.bind("move", crafty.drawmanager.drawall) return this; }, draw: function() { var ctx = crafty.canvas.context; ctx.save(); ctx.fillstyle = this.color; ctx.beginpath(); ctx.arc( this.x + this.
radius, ...
... this.y + this.
radius, this.
radius, 0, math.pi * 2 ); ctx.closepath(); ctx.fill(); ctx.restore(); } }); var circle1 = crafty.e("2d, canvas, circle").attr(dim1).circle(15, "red"); var circle2 = crafty.e("2d, canvas, circle, fourway").fourway(2).attr(dim2).circle(20, "blue"); circle2.bind("enterframe", function () { var dx = (circle1.x + circle1.
radius) - (circle2.x + circle2.
radius); var dy = (circle1.y + circle1.
radius) - (circle2.y + circle2.
radius); var distance = math.sqrt(dx * dx + dy * dy); if (distance < circle1.
radius + circle2.
radius) { // collision detected!
... this.color = "green"; } else { // no collision this.color = "blue"; } }); var circle1 = {
radius: 20, x: 5, y: 5}; var circle2 = {
radius: 12, x: 10, y: 5}; var dx = circle1.x - circle2.x; var dy = circle1.y - circle2.y; var distance = math.sqrt(dx * dx + dy * dy); if (distance < circle1.
radius + circle2.
radius) { // collision detected!
Bounce off the walls - Game development
to make the calculations easier let's define a variable called ball
radius that will hold the
radius of the drawn circle and be used for calculations.
... add this to your code, somewhere below the existing variable declarations: var ball
radius = 10; now update the line that draws the ball inside the drawball() function to this: ctx.arc(x, y, ball
radius, 0, math.pi*2); bouncing off the top and bottom there are four walls to bounce the ball off — let's focus on the top one first.
...update the last code you added to this: if(x + dx > canvas.width-ball
radius || x + dx < ball
radius) { dx = -dx; } if(y + dy > canvas.height-ball
radius || y + dy < ball
radius) { dy = -dy; } when the distance between the center of the ball and the edge of the wall is exactly the same as the
radius of the ball, it will change the movement direction.
... subtracting the
radius from one edge's width and adding it onto the other gives us the impression of the proper collision detection — the ball bounces off the walls as it should do.
CSS values and units - Learn web development
this can be an actual image file pointed to via a url() function, or a g
radient.
... in the example below we have demonstrated an image and a g
radient in use as a value for the css background-image property.
... a value that behaves more like something you might find in a t
raditional programming language is the calc() css function.
... for example, understanding that <image> also allows you to create a color g
radient is useful but perhaps non-obvious knowledge to have!
How CSS is structured - Learn web development
write css rules that apply styling to different html elements: transform background-image, in particular g
radient values color, in particular rgb/rgba/hsl/hsla values @rules css @rules (pronounced "at-rules") provide instruction for what css should perform or how it should behave.
...on large screen or window, we increase the font size for better readability */ body { font-size: 130%; } } h1 {font-size: 1.5em;} /* handle specific elements nested in the dom */ /* -------------------------------------------------------------------------------------------- */ div p, #id:first-line { background-color: red; border-
radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } "commenting out" code is also useful for temporarily disabling sections of code for testing.
... body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { body { font-size: 130%; } } h1 { font-size: 1.5em; } div p, #id:first-line { background-color: red; border-
radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } the next example shows the equivalent css in a more compressed format.
... body {font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-
radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;} for your own projects, you will format your code according to personal preference.
Test your skills: Advanced styling - Learn web development
advanced form styling 2 in our next task we provide you with a set of three
radio buttons.
... next, give the
radio buttons a reasonable base style — the style they have when the page first loads.
... now give the
radio buttons a different style for when they are selected.
... align the
radio buttons nicely with the labels.
HTML text fundamentals - Learn web development
here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning t
raditionally conveyed with bold, italics, or underline, provided there is no more suitable element.
... <i> is used to convey a meaning t
raditionally conveyed by italic: foreign words, taxonomic designation, technical terms, a thought...
... <b> is used to convey a meaning t
raditionally conveyed by bold: key words, product names, lead sentence...
... <u> is used to convey a meaning t
raditionally conveyed by underline: proper name, misspelling...
Accessibility API cross-reference
menuitem
radio any menu other than the menu bar java: menu is for pull-downs, popup_menu for all others menupopup popup_menu, menu popup_menu, menu menu a collection of navigational elements (usually links) for navigating the document or related documents.
... <p> <p> shows percentage completion for task progressbar progress_bar n/a progressbar page showing properties of something propertypage n/a n/a n/a your average, run-of-the-mill button pushbutton push_button push_button button <button> only one
radio button in a group is selectable.
... aria requires the parent to have role
radiogroup
radiobutton
radio_button
radio_button
radio <input type=
radio> a container for a a group of
radio buttons
radiogroup expressed by giving each
radio button the same value name attribute represents the an row in a table row n/a n/a row <tr> a structure containing one or more row elements in a tabular container.
... busy busy busy aria-busy indicates the current "checked" state of checkboxes,
radio buttons, and other widgets.
PR_AcceptRead
syntax #include <prio.h> print32 pr_acceptread( prfiledesc *listensock, prfiledesc **acceptedsock, prnetaddr **pee
raddr, void *buf, print32 amount, printervaltime timeout); parameters the function has the following parameters: listensock a pointer to a prfiledesc object representing a socket descriptor that has been called with the pr_listen function, also known as the rendezvous socket.
... pee
raddr a pointer a pointer to a prnetaddr object.
... on return, pee
raddr points to the address of the remote socket.
... the prnetaddr object that pee
raddr points to will be in the buffer pointed to by buf.
Avoiding leaks in JavaScript XPCOM components
consider this example from bug 285065: function _filter
radiogroup(anode) { switch (anode.localname) { case "
radio": return nodefilter.filter_accept; case "template": case "
radiogroup": return nodefilter.filter_reject; default: return nodefilter.filter_skip; } } var iterator = this.ownerdocument.createtreewalker(this, nodefilter.show_element, _filte...
...r
radiogroup, true); while (iterator.nextnode())
radiochildren.push(iterator.currentnode); return this.m
radiochildren =
radiochildren; in this example, the iterator object is an xpcom object that is wrapped so the javascript code can use it.
... the _filter
radiogroup object is a javascript function that is wrapped so that xpcom code can use it.
... the reason closures matter here is that the _filter
radiogroup function has access to the iterator variable.
nsIDBChangeListener
example here is an example implementation of the listener (that does nothing): var mylistener = { onhdrflagschanged: function(ahdrchanged, aoldflags, anewflags, ainstigator) {}, onhdrdeleted: function(ahdrchanged, aparentkey, aflags, ainstigator) {}, onhd
radded: function(ahdrchanged, aparentkey, aflags, ainstigator) {}, onparentchanged: function(akeychanged, oldparent, newparent, ainstigator) {}, onannouncergoingaway: function(ainstigator) {}, onreadchanged: function(ainstigator) {}, onjunkscorechanged: function(ainstigator) {}, onhdrpropertychanged: function(ahdrtochange, aprechange, astatus, ainstigator) {}, onevent: function(adb, aeven...
...simsgdbview like so: gfolderdisplay.view.dbview.db.addlistener(mylistener); method overview void onhdrflagschanged(in nsimsgdbhdr ahdrchanged, in unsigned long aoldflags, in unsigned long anewflags, in nsidbchangelistener ainstigator); void onhdrdeleted(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); void onhd
radded(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); void onparentchanged(in nsmsgkey akeychanged, in nsmsgkey oldparent, in nsmsgkey newparent, in nsidbchangelistener ainstigator); void onannouncergoingaway(in nsidbchangeannouncer instigator); void onreadchanged(in nsidbchangelistener ainstigator); void on...
... onhd
radded() called when a header is added to the database.
... void onhd
radded(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was added.
Intensive JavaScript - Firefox Developer Tools
there's also a video version of this walkthrough: the demo website looks like this: it has three controls: a
radio button group to control how to run the javascript: as a single blocking operation in the main thread, as a series of smaller operations in the main thread using requestanimationframe(), or in another thread using a worker.
... leaving the
radio button set to "use blocking call in main thread", make a recording: press the "start animations" button start recording a performance profile press "do pointless computations!" two or three times stop recording the profile exactly what you see will vary from one machine to another, but it will be something like this: the top half of this is the waterfall overview.
...isprime = false; break; } } if (isprime) { primes.push(candidate); } // schedule the next var testfunction = testcandidate.bind(this, index + 1); window.requestanimationframe(testfunction); } var primes = []; var testfunction = testcandidate.bind(this, 0); window.requestanimationframe(testfunction); } let's test this version out: select the
radio button labeled "use requestanimationframe" and capture another profile.
...switch the
radio button to "use a worker", and capture a new profile.
CanvasRenderingContext2D - Web APIs
g
radients and patterns canvasrenderingcontext2d.createlinearg
radient() creates a linear g
radient along the line given by the coordinates represented by the parameters.
... canvasrenderingcontext2d.create
radialg
radient() creates a
radial g
radient given by the coordinates of the two circles represented by the parameters.
... canvasrenderingcontext2d.arcto() adds an arc to the current path with the given control points and
radius, connected to the previous point by a straight line.
...the angle argument represents a clockwise rotation angle and is expressed in
radians.
IDBObjectStore - Web APIs
idbobjectstore.createindex() creates a new index during a version upg
rade, returning a new idbindex object in the connected database.
... idbobjectstore.deleteindex() destroys the specified index in the connected database, used during a version upg
rade.
... example this example shows a variety of different uses of object stores, from updating the data structure with idbobjectstore.createindex inside an onupg
radeneeded function, to adding a new item to our object store with idbobjectstore.add.
... db = dbopenrequest.result; }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupg
radeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: fal...
IDBOpenDBRequest - Web APIs
upg
radeneeded fired when an attempt was made to open a database with a version number higher than its current version.
... also available via the onupg
radeneeded property.
... example in the following example you can see the onupg
radeneeded handler being used to update the database structure if a database with a higher version number is loaded.
...ta() function to populate the task // listwith all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above // it is only implemented in recent browsers dbopenrequest.onupg
radeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false })...
PannerNode.coneInnerAngle - Web APIs
the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in
radians.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to
radians and offset the angle so 0 points towards the listener const
radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... they range between -1 and 1 const x = math.cos(
radians); const z = math.sin(
radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determin...
...es the size of the area in which the sound volume decreases g
radually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease g
radually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: //...
PannerNode.coneOuterAngle - Web APIs
the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in
radians.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to
radians and offset the angle so 0 points towards the listener const
radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... they range between -1 and 1 const x = math.cos(
radians); const z = math.sin(
radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determin...
...es the size of the area in which the sound volume decreases g
radually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease g
radually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: //...
PannerNode.coneOuterGain - Web APIs
the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in
radians.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to
radians and offset the angle so 0 points towards the listener const
radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... they range between -1 and 1 const x = math.cos(
radians); const z = math.sin(
radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determin...
...es the size of the area in which the sound volume decreases g
radually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease g
radually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: //...
PannerNode.orientationX - Web APIs
the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in
radians.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to
radians and offset the angle so 0 points towards the listener const
radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... they range between -1 and 1 const x = math.cos(
radians); const z = math.sin(
radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determin...
...es the size of the area in which the sound volume decreases g
radually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease g
radually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: //...
PannerNode.orientationY - Web APIs
the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in
radians.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to
radians and offset the angle so 0 points towards the listener const
radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... they range between -1 and 1 const x = math.cos(
radians); const z = math.sin(
radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determin...
...es the size of the area in which the sound volume decreases g
radually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease g
radually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: //...
PannerNode.orientationZ - Web APIs
the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in
radians.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to
radians and offset the angle so 0 points towards the listener const
radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... they range between -1 and 1 const x = math.cos(
radians); const z = math.sin(
radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determin...
...es the size of the area in which the sound volume decreases g
radually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease g
radually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: //...
ResizeObserverEntry.target - Web APIs
examples the following snippet is taken from the resize-observer-border-
radius.html (see source) example.
...we could just implement this using border-
radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size.
... to grab a reference to the observed element so we can update its border-
radius value after each change, we make use of the target property of each entry — entry.target.style.border
radius.
... const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.border
radius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.border
radius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status comment resize observerthe definition of 'target' in that specification.
SVGCircleElement - Web APIs
svgcircleelement.r read only this property defines the
radius of the <circle> element.
...it randomly increases or decreases the
radius of the circle element.
... function clickcircle() { var circle = document.getelementbyid("circle"); // randomly determine if the circle
radius will increase or decrease var change = math.random() > 0.5 ?
... 10 : -10; // clamp the circle
radius to a minimum of 10 and a maximum of 250, // so it won't disappear or get bigger than the viewport var newvalue = math.min(math.max(circle.r.baseval.value + change, 10), 250); circle.setattribute("r", newvalue); } click on the circle.
Touch() - Web APIs
"
radiusx", optional and defaulting to 0, of type float, that is the
radius of the ellipse which most closely circumscribes the touching area (e.g.
... "
radiusy", optional and defaulting to 0, of type float, that is the the
radius of the ellipse which most closely circumscribes the touching area (e.g.
... "rotationangle", optional and defaulting to 0, of type float, that is the angle (in degrees) that the ellipse described by
radiusx and
radiusy is rotated clockwise about its center; 0 if no value is known.
...if the ellipse described by
radiusx and
radiusy is circular, then rotationangle has no effect.
WebGL model view projection - Web APIs
however, if a triangle st
raddles the border of this space then it is chopped up into new triangles, and only the parts of the new triangles that are in clip space are kept.
... mdn.perspectivematrix = function(fieldofviewin
radians, aspectratio, near, far) { var f = 1.0 / math.tan(fieldofviewin
radians / 2); var rangeinv = 1 / (near - far); return [ f / aspectratio, 0, 0, 0, 0, f, 0, 0, 0, 0, (near + far) * rangeinv, -1, 0, 0, near * far * rangeinv * 2, 0 ]; } the four parameters into this fun...
...ction are: fieldofviewin
radians an angle, given in
radians, indicating how much of the scene is visible to the viewer at once.
... cubedemo.prototype.computeperspectivematrix = function() { var fieldofviewin
radians = math.pi * 0.5; var aspectratio = window.innerwidth / window.innerheight; var nearclippingplanedistance = 1; var farclippingplanedistance = 50; this.transforms.projection = mdn.perspectivematrix( fieldofviewin
radians, aspectratio, nearclippingplanedistance, farclippingplanedistance ); }; the shader code is identical to the previous example: gl_position = project...
Using DTMF with WebRTC - Web APIs
the dtmf system is often referred to as "touch tone," after an old t
rade name for the system.
...iceconnectionstatechange; callerpc.onsignalingstatechange = handlecallersignalingstatechangeevent; callerpc.onicegatheringstatechange = handlecallergatheringstatechangeevent; receiverpc = new rtcpeerconnection(); receiverpc.onicecandidate = handlereceivericeevent; if (hasaddtrack) { receiverpc.ontrack = handlereceivertrackevent; } else { receiverpc.onaddstream = handlereceive
raddstreamevent; } navigator.mediadevices.getusermedia(mediaconstraints) .then(gotstream) .catch(err => log(err.message)); } after creating the rtcpeerconnection for the caller (callerpc), we look to see if it has an addtrack() method.
...the handlereceivertrackevent() and handlereceive
raddstreamevent() methods, shown below, handle these.
... function handlereceivertrackevent(event) { audio.srcobject = event.streams[0]; } function handlereceive
raddstreamevent(event) { audio.srcobject = event.stream; } the track event includes a streams property containing an array of the streams the track is a member of (one track can be part of many streams).
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
recall that the circumference of a circle is 2π⋅r
radians (360°); as such, this is the theoretical maximum fov.
...human eyes typically have a horizontal field of view of around 135° (about 2.356
radians) and a vertical fov of about 180° (π or around 3.142
radians).
... the following function returns a projection perspective matrix that integrates the specified field of view angle as well as the given near and far clipping plane distances: function createperspectivematrix(viewport, fovdegrees, nearclip, farclip) { const fov
radians = fov * (math.pi / 180.0); const aspectratio = viewport.width / viewport.height; const transform = mat4.create(); mat4.perspective(transform, fov
radians, aspectratio, nearclip, farclip); return transform; } after converting the fov angle, fovdegrees, from degrees to
radians and computing the aspect ratio of the xrviewport specified by the viewport parameter, this ...
...to rotate the viewpoint defined by the matrix viewmatrix by panangle
radians: mat4.rotatey(viewmatrix, viewmatrix, panangle); if panangle is positive, this transform will pan the camera to the right; a negative value for panangle will pan to the left.
Geometry and reference spaces in WebXR - Web APIs
angles angles are specified using
radians.
... to convert degrees to
radians, simply multiply the value in degrees by π/180.
... the following code snippet shows two simple functions, degreesto
radians() and
radianstodegrees(), which convert back and forth between the two units for measuring angles.
... const
radians_per_degree = math.pi / 180.0; let degreesto
radians = (deg) => deg *
radians_per_degree; let
radianstodegrees = (
rad) =>
rad /
radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks.
Using XMLHttpRequest - Web APIs
*/ for (nfile = 0; nfile < ofield.files.length; this.segments.push(ffilter(ofield.name) + "=" + ffilter(ofield.files[nfile++].name))); } } else if ((sfieldtype !== "
radio" && sfieldtype !== "checkbox") || ofield.checked) { /* note: this will submit _all_ submit buttons.
...ldset> </form> <h3>enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>upload example</legend> <p> first name: <input type="text" name="firstname" /><br /> last name: <input type="text" name="lastname" /><br /> sex: <input id="sex_male" type="
radio" name="sex" value="male" /> <label for="sex_male">male</label> <input id="sex_female" type="
radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</op...
... ofield.getattribute("type").touppercase() : "text"; if (sfieldtype === "file") { for (nfile = 0; nfile < ofield.files.length; ssearch += "&" + escape(ofield.name) + "=" + escape(ofield.files[nfile++].name)); } else if ((sfieldtype !== "
radio" && sfieldtype !== "checkbox") || ofield.checked) { ssearch += "&" + escape(ofield.name) + "=" + escape(ofield.value); } } oreq.open("get", oformelement.action.replace(/(?:\?.*)?$/, ssearch.replace(/^&/, "?")), true); oreq.send(null); } } </script> </head> <body> <h1>sending forms with formdata</h1> <h2>using the get method</h2> <form action="register.php" method=...
...mdata api.</p> <h3>enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>upload example</legend> <p> first name: <input type="text" name="firstname" /><br /> last name: <input type="text" name="lastname" /><br /> sex: <input id="sex_male" type="
radio" name="sex" value="male" /> <label for="sex_male">male</label> <input id="sex_female" type="
radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</op...
Web applications and ARIA FAQ - Accessibility
some of them include: assistive technology minimum version for basic aria minimum version for live region and alert support nvda 2010.2 (nvda is always a free upg
rade) 2011.1 for firefox, no live region support in ie as of 2011.2.
... deg
rading gracefully from html5 to aria when delivering content to browsers that aren't html5-aware, you may want to consider gracefully deg
rading to the use of aria where necessary.
... so, using the example of a progress bar, you can deg
rade gracefully to a role="progressbar" in cases where the <progressbar> tag isn't supported.
... here is an example of the markup used for an html5 progress bar: <!doctype html> <html> <head><title>gracefully deg
rading progress bar</title></head> <body> <progress id="progress-bar" value="0" max="100">0% complete</progress> <button id="update-button">update</button> </body> </html> ...
Basic form hints - Accessibility
when implementing forms using t
raditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
... the example below shows a
radio button group implemented using an unordered list.
... note that on line 3, the <ul> element sets the aria-labelledby attribute to rg1_label, the id of the <h3> element on line 1, which is the label for the
radio group.
... <h3 id="rg1_label">lunch options</h3> <ul class="
radiogroup" id="rg1" role="
radiogroup" aria-labelledby="rg1_label"> <li id="r1" tabindex="-1" role="
radio" aria-checked="false"> <img role="presentation" src="
radio-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="
radio" aria-checked="false"> <img role="presentation" src="
radio-unchecked.gif" /> subway </li> <li id="r3" tabindex="0" role="
radio" aria-checked="true"> <img role="presentation" src="
radio-checked.gif" />
radio maria </li> </ul> describing with aria form controls sometimes have a description associated with them, in addition to the label.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
the float no longer applies, and i can use the css box alignment property align-self to align my content to the end of the container: * {box-sizing: border-box;} img { max-width: 100%; display: block; } .media { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-self: end; } <div cla...
...to create gaps between the cards, i use a margin on the items, and then a negative margin on the container: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); marg...
...the layout now works, even if there is more content in one of the cards, than the others: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); marg...
...i have used the vertical-align property on my item when in the inline-block display mode, but this property does not apply to grid items and, therefore, is ignored once the item becomes a grid item: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width: calc(33.333333% - ...
CSS Images - CSS: Cascading Style Sheets
css images is a module of css that defines what types of images can be used (the <image> type, containing urls, g
radients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.
... reference properties image-orientation image-rendering image-resolution object-fit object-position functions linear-g
radient()
radial-g
radient() repeating-linear-g
radient() repeating-
radial-g
radient() conic-g
radient() repeating-conic-g
radient() url() element() image() cross-fade() data types <g
radient> <image> guides using css g
radients presents a specific type of css images, g
radients, and how to create and use these.
... specifications specification status comment css images module level 4 working draft added image-resolution, conic-g
radient(), and image() css images module level 3 candidate recommendation added image-orientation, image-rendering, object-fit and object-position compatibility standardthe definition of 'css g
radients' in that specification.
... living standard standardizes the -webkit prefixed g
radient value functions css values and units module level 3the definition of '<url>' in that specification.
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
border-inline-end-color border-right-color border-inline-end-style border-right-style border-inline-end-width border-right-width border-inline-start border-left border-inline-start-color border-left-color border-inline-start-style border-left-style border-inline-start-width border-left-width border-start-start-
radius border-top-left-
radius border-start-end-
radius border-bottom-left-
radius border-end-start-
radius border-top-right-
radius border-end-end-
radius border-bottom-right-
radius margin-block-end margin-bottom margin-block-start margin-top margin-inline-end margin-right margin-inline-start margin-left paddin...
... flow relative border-
radius properties the specification has fairly recently added flow-relative values for the border-
radius longhands.
...the below example, in a horizontal writing-mode, would set the top-right border
radius to 1em, the bottom-right to 0, the bottom-left to 20px and the top-left to 40px.
... .box { border-end-start-
radius: 1em; border-end-end-
radius: 0; border-start-end-
radius: 20px; border-start-start-
radius: 40px; } indicating logical values for the 4-value shorthand syntax the specification makes a suggestion for the four-value shorthands such as the margin property, however the final decision on how this should be indicated is as yet unresolved, and is discussed in this issue.
Cubic Bezier Generator - CSS: Cascading Style Sheets
ss='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x1 = document.getelementbyid('x1').value; var y1 = document.getelementbyid('y1').value; var x2 = document.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const
radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5; // size of 0.1 tick on the rulers var scaling; //limitation: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element u...
..., cx(x2), cy(y2), cx(1), cy(1)); ctx.stroke(); ctx.closepath(); // draw the p2 point (with a line to p0) ctx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x1), cy(y1)); ctx.lineto(cx(0), cy(0)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x1), cy(y1)); ctx.arc(cx(x1), cy(y1),
radius, 0, 2 * math.pi); ctx.stroke(); ctx.fillstyle = 'white'; ctx.fill(); ctx.closepath(); // draw the p3 point (with a line to p1) ctx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x2), cy(y2)); ctx.lineto(cx(1), cy(1)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x2)...
..., cy(y2)); ctx.arc(cx(x2), cy(y2),
radius, 0, 2 * math.pi); ctx.stroke(); ctx.fill(); ctx.closepath(); // draw the p1(1,1) point (with dashed hints) ctx.beginpath(); ctx.moveto(cx(1), cy(1)); ctx.strokestyle = 'lightgrey'; ctx.lineto(cx(0), cy(1)); ctx.moveto(cx(1), cy(1)); ctx.lineto(cx(1), cy(0)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.strokestyle = "black"; ctx.fillstyle = "black"; ctx.arc(cx(1), cy(1),
radius, 0, 2 * math.pi); ctx.fill(); ctx.stroke(); ctx.closepath(); // draw the p0(0,0) point ctx.beginpath(); ctx.arc(cx(0), cy(0),
radius, 0, 2 * math.pi); ctx.fill(); ctx.st...
...own(e) { var canvas = document.getelementbyid('bezier'); var x1 = cx(document.getelementbyid('x1').value); var y1 = cy(document.getelementbyid('y1').value); var x = e.pagex - canvas.offsetleft; var y = e.pagey - canvas.offsettop; var output = document.getelementbyid('output'); output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")"; if ((x1 +
radius >= x) && (x1 -
radius <= x) && (y1 +
radius >= y) && (y1 -
radius <= y)) { var output = document.getelementbyid('output'); output.value = "p1!"; dragsm = 1; } var x2 = cx(document.getelementbyid('x2').value); var y2 = cy(document.getelementbyid('y2').value); if ((x2 +
radius >= x) && (x2 -
radius <= x) && (y2 +
radius >= y) && (y2 -
radius <= y)) { ...
<color> - CSS: Cascading Style Sheets
compatibility note: to prevent unexpected behavior, such as in a <g
radient>, the current css spec states that transparent should be calculated in the alpha-premultiplied color space.
... functional notation: hsl[a](h, s, l[, a]) h (hue) is an <angle> of the color circle given in degs,
rads, g
rads, or turns in css color module level 4.
... interpolation in animations and g
radients, <color> values are interpolated on each of their red, green, and blue components.
...*/ hsl(270,60%,70%) hsl(270, 60%, 70%) hsl(270 60% 70%) hsl(270deg, 60%, 70%) hsl(4.71239
rad, 60%, 70%) hsl(.75turn, 60%, 70%) /* these examples all specify the same color: a lavender that is 15% opaque.
font-variant-east-asian - CSS: Cascading Style Sheets
an: jis78; /* <east-asian-variant-values> */ font-variant-east-asian: jis83; /* <east-asian-variant-values> */ font-variant-east-asian: jis90; /* <east-asian-variant-values> */ font-variant-east-asian: jis04; /* <east-asian-variant-values> */ font-variant-east-asian: simplified; /* <east-asian-variant-values> */ font-variant-east-asian: t
raditional; /* <east-asian-variant-values> */ font-variant-east-asian: full-width; /* <east-asian-width-values> */ font-variant-east-asian: proportional-width; /* <east-asian-width-values> */ font-variant-east-asian: ruby full-width jis83; /* global values */ font-variant-east-asian: inherit; font-variant-east-asian: initial; font-variant-east-asian: unset; syntax values normal ...
...possible values are: keyword standard defining the glyphs opentype equivalent jis78 jis x 0208:1978 jp78 jis83 jis x 0208:1983 jp83 jis90 jis x 0208:1990 jp90 jis04 jis x 0213:2004 jp04 simplified none, use the simplified chinese glyphs smpl t
raditional none, use the t
raditional chinese glyphs t
rad <east-asian-width-values> these values control the sizing of figures used for east asian characters.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | t
raditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other fonts may not support opentype features.
... html <table> <thead></thead> <tbody style="border:0;"> <tr> <th>normal/jis78:</th> <td>麹町</td> <td class="jis78">麹町</td> </tr> <tr> <th>normal/ruby:</th> <td>しんかんせん</td> <td class="ruby">しんかんせん</td> </tr> <tr> <th>normal/t
raditional:</th> <td>大学</td> <td class="t
raditional">大学</td> </tr> </tbody> </table> css td{ font-family:"yu gothic"; font-size:20px; } th{ color:grey; padding-right:10px; } .ruby { font-variant-east-asian: ruby; } .jis78 { font-variant-east-asian: jis78; } .t
raditional{ font-variant-east-asian: t
raditional; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-east-asian' in t...
<image> - CSS: Cascading Style Sheets
syntax the <image> data type can be represented with any of the following: an image denoted by the <url> data type a <g
radient> data type a part of the webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function.
... images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a css g
radient.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 examples valid images url(test.jpg) /* a <url>, as long as test.jpg is an actual image */ linear-g
radient(blue, red) /* a <g
radient> */ element(#realid) /* a part of the webpage, referenced with the element() function, if "realid" is an existing id on the page */ image(ltr 'arrow.png#xywh=0,0,16,16', red) /* a section 16x16 section of <url>, starting from the top, left of the original image as lo...
... working draft adds element(), image(), image-set(), conic-g
radient(), repeating-conic-g
radient(), and image-resolution.
mix-blend-mode - CSS: Cascading Style Sheets
d-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> <linearg
radient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </linearg
radient> <linearg
radient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </linearg...
...
radient> <linearg
radient id="blue"> <stop offset="0" stop-color="hsl(240,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </linearg
radient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> multiply <div class="container multiply"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" r...
...to; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-g
radient(to right, #000 0%, transparent 50%, #fff 100%), linear-g
radient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { transform-origin: center; transform: rotate(-30deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill: url(#green); } .b { transform-origin: center; transform: rotate...
...de: hue; } .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: luminosity; } using mix-blend-mode with html html <div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div> css .circle { width: 80px; height: 80px; border-
radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position: relative; } result using mix-blend-mode with svg svg <svg> <g ...
Event reference
storage events change (see non-standard events) storage update events checking downloading error noupdate obsolete updateready value change events broadcast checkboxstatechange hashchange input
radiostatechange readystatechange valuechange uncategorized events invalid message message open show less common and non-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e.
... svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success upg
radeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call events alerting busy callschanged cfstatechange connecting dialing disconnected disconnecting error held, holding incoming resuming statechange voicechange sensor events compassneedscalibration devicemotion deviceorientation orientationchange smartcard events icccardlockerror iccinfo...
... upg
radeneeded indexeddb an attempt was made to open a database with a version number higher than its current version.
...
radiostatechange xul the state of a
radio has been changed either by a user action or by a script (useful for accessibility).
<command>: The HTML Command element - HTML: Hypertext Markup Language
must be omitted unless the type attribute is checkbox or
radio.
...
radiogroup this attribute gives the name of the group of commands, with a type of
radio, that will be toggled when the command itself is toggled.
... this attribute must be omitted unless the type attribute is
radio.
...
radio indicates that the command can be toggled using a
radio button.
Referrer-Policy - HTTP
referrer-policy: no-referrer referrer-policy: no-referrer-when-downg
rade referrer-policy: origin referrer-policy: origin-when-cross-origin referrer-policy: same-origin referrer-policy: strict-origin referrer-policy: strict-origin-when-cross-origin referrer-policy: unsafe-url directives no-referrer the referer header will be omitted entirely.
... no-referrer-when-downg
rade (default) this is the default behavior if no policy is specified, or if the provided value is invalid.
...these resources follow a referrer policy as well: external css stylesheets use the default policy (no-referrer-when-downg
rade), unless it's overwritten via a referrer-policy http header on the css stylesheet’s response.
... examples policy document navigation to referrer no-referrer https://example.com/page anywhere (no referrer) no-referrer-when-downg
rade https://example.com/page https://example.com/otherpage https://example.com/page https://mozilla.org https://example.com/page http://example.org (no referrer) origin https://example.com/page anywhere https://example.com/ origin-when-cross-origin https://example.com/page https://example.com/otherpage https://example.com/page https://mozilla.org https://example.com/ http://example.com/page https://example.com/ same-origin ...
101 Switching Protocols - HTTP
the http 101 switching protocols response code indicates the protocol the server is switching to as requested by a client which sent the message including the upg
rade request header.
... the server includes in this response an upg
rade response header to indicate the protocol it switched to.
... the process is described in detail in the article protocol upg
rade mechanism.
... http/1.1 101 switching protocols upg
rade: websocket connection: upg
rade specifications specification title rfc 7231, section 6.2.2: 101 switching protocol hypertext transfer protocol (http/1.1): semantics and content ...
Numbers and dates - JavaScript
number.parseint() parses a string argument and returns an integer of the specified
radix or base.
...for example, if you want to use the trigonometric function sine, you would write math.sin(1.56) note that all trigonometric methods of math take arguments in
radians.
... methods of math method description abs() absolute value sin(), cos(), tan() standard trigonometric functions; with the argument in
radians.
... asin(), acos(), atan(), atan2() inverse trigonometric functions; return values in
radians.
Intl.DisplayNames - JavaScript
// get display names 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 t
raditional 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-scri...
... // 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'); // "t
raditional chinese" languagenames.of('en-us'); // "american english" languagenames.of('zh-tw'); // "chinese (taiwan)"] // get display names of language in t
raditional 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 t
raditional 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.
... // get display 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 t
raditional 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.
Math - JavaScript
examples converting between degrees and
radians the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() expect (and return) angles in
radians.
... since humans tend to think in degrees, and some functions (such as css transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two: function degto
rad(degrees) { return degrees * (math.pi / 180); }; function
radtodeg(
rad) { return
rad / (math.pi / 180); }; calculating the height of an equalateral triangle if we want to calculate the height of an equalateral triangle, and we know its side length is 100, we can use the formulae length of the adjacent multiplied by the tangent of the angle is equal to the opposite.
... in javascript, we can do this with the following: 50 * math.tan(degto
rad(60)).
... we use our degto
rad() function to convert 60 degrees to
radians, as math.tan() expects an input value in
radians.
Number.parseInt() - JavaScript
the number.parseint() method parses a string argument and returns an integer of the specified
radix or base.
... syntax number.parseint(string,[
radix]) parameters string the value to parse.
...
radix optional an integer between 2 and 36 that represents the
radix (the base in mathematical numeral systems) of the string.
... if the
radix is smaller than 2 or bigger than 36, and the first non-whitespace character cannot be converted to a number, nan is returned.
Content type - SVG: Scalable Vector Graphics
when used in the value of a property in a stylesheet, an <angle> is defined as follows: angle ::= number (~"deg" | ~"g
rad" | ~"
rad")?
... where deg indicates degrees, g
rad indicates g
rads and
rad indicates
radians.
... when angles are used in an svg attribute, <angle> is instead defined as follows: angle ::= number ("deg" | "g
rad" | "
rad")?
...for example, to fill a rectangle with a linear g
radient, you first define a <linearg
radient> element and give it an id, as in: <linearg
radient xml:id="myg
radient">...</linearg
radient> you then reference the linear g
radient as the value of the fill attribute for the rectangle, as in the following example: <rect fill="url(#myg
radient)"/> svg supports two types of iri references: local iri references, where the iri reference does not c...
<solidcolor> - SVG: Scalable Vector Graphics
a workaround is to use a <linearg
radient> with only one color stop.
... this is less elegant, and unlike <solidcolor>, cannot itself be used in the definition of g
radients.
...--> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- linearg
radient with a single color stop is a less elegant way to achieve the same effect, but it works in current browsers.
... --> <linearg
radient id="myg
radient"> <stop offset="0" stop-color="green" /> </linearg
radient> </defs> <text x="10" y="20">circles colored with solidcolor</text> <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#mycolor)" fill="white"/> <circle cx="50" cy="65" r="35" fill="url(#mycolor)"/> <text x="10" y="120">circles colored with linearg
radient</text> <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myg
radient)" fill="white"/> <circle cx="50" cy="165" r="35" fill="url(#myg
radient)"/> </svg> result ...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
> <legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <linearg
radient id="g
radient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </linearg
radient> <rect x="0" y="0" width="100" height="100" style="fill:url(#g
radient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#g
radient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript.
...the element contains a g
radient and two shapes filled with the g
radient.
... the g
radient color stops have their colors set by css.
... when the user enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a style rule changes the g
radient end-stop color to red.
SDK and XUL Comparison - Archive of obsolete content
although you can write t
raditional add-ons that are restartless, you can't use xul overlays in them, so most t
raditional add-ons would have to be substantially rewritten anyway.
... xpcom t
raditional add-ons have access to a vast amount of firefox functionality via xpcom.
...if you need more flexibility than the sdk's high-level apis provide, you can use its low-level apis to load xpcom objects directly or to manipulate the dom directly as in a t
raditional bootstrapped extension.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
gomita-san won "most useful upg
raded extension" award in mozilla's 2006 "extend firefox" competition for scrapbook, and was runner-up in the "extend firefox 2" contest for firegestures.
...furthermore, by matching the preference element’s id to the preference attribute of a checkbox or
radiogroup, you can specify the interface widget that will be used to set your preferences.
...ns.sessionstore.warnonclear" type="bool" /> <preference id="extensions.sessionstore.replacetabs" name="extensions.sessionstore.replacetabs" type="int" /> </preferences> <checkbox label="confirm before clearing sessions" preference="extensions.sessionstore.warnonclear" /> <groupbox> <caption label="when restoring session:" /> <
radiogroup preference="extensions.sessionstore.replacetabs"> <
radio value="0" label="keep current tabs" /> <
radio value="1" label="replace current tabs"/> <
radio value="2" label="ask me every time" /> </
radiogroup> </groupbox> </prefpane> </prefwindow> listing 27: additional content for install.rdf <em:optionsurl>chrome://sessionstore/content/prefs.xul</em:opti...
Getting Started with Firefox Extensions - Archive of obsolete content
extensions now exist in 3 different forms: add-ons sdk extensions (also known as jetpacks), bootstrapped extensions and t
raditional extensions.
...this tutorial focuses on t
raditional extensions, which are created differently.
... bootstrapped extensions are a step above t
raditional ones in complexity, so you should go through this tutorial before giving them a try.
Setting up an extension development environment - Archive of obsolete content
development profile the use of a separate user profile for development can be advantageous, averting performance deg
radation from development related settings, and further isolating personal data (such as bookmarks, extensions, and settings) from your testing environment.
...however, these preferences can deg
rade performance, so you may want to use a separate development profile when you enable these preferences.
... also note that the use of proxy files requires that the extension's chrome.manifest defines its chrome urls using t
raditional directories, rather than a jared structure.
Getting the page URL in NPAPI plugin - Archive of obsolete content
t
radeoffs: uses npapi only works in most browsers does not work in mozillas older than firefox 1.0 via npp_newstream from b
raden mcdaniel: if you want the uri of the resource for which the plug-in is invoked, the most npapi-friendly way to do that is to get it from the npstream that is passed to npp_newstream.
... t
radeoffs: npapi only probably works in all browsers, all versions is sort of backwards (?) advantages / disadvantages ?
...t
radeoffs: is inherently incompatible with other non-mozilla browsers (i.e.
Images, Tables, and Mysterious Gaps - Archive of obsolete content
almost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" pa
radigm.
...there isn't supposed to be, since it's an example of how browsers have t
raditionally behaved.
...should this property be adopted, then any browser supporting it could emulate t
raditional "shrinkwrap" behavior without risking other layout upset with the following rule: td {line-box-contain: font replaced;} /* proposed for css3 */ there are other possible fixes contained within the current css3 working drafts, such as line-height-policy.
New Skin Notes - Archive of obsolete content
i'll try again, but can't guarantee this will be fixed for the initial upg
rades.
...those will be available after we do the wiki upg
rades in the near future.
...--nickolay 04:43, 25 aug 2005 (pdt) the
radio buttons on history page are jumping in a weird way because the selected row becomes bold.
menuitem.name - Archive of obsolete content
« xul reference home name type: string name
radio menuitems with the same name as put into a group.
... only one menuitem in each
radio group can be checked at a time.
... example <toolbox> <menubar id="planets-menubar"> <menu id="planet-menu" label="planet"> <menupopup> <menuitem id="jupiter" label="jupiter" type="
radio" name="planet"/> <menuitem id="saturn" label="saturn" type="
radio" name="planet" checked="true"/> <menuitem id="uranus" label="uranus" type="
radio" name="planet"/> </menupopup> </menu> </menubar> </toolbox> see also name and menus in the xul tutorial ...
checkAdjacentElement - Archive of obsolete content
« xul reference home checkadjacentelement( dir ) return type: no return value deselects the currently selected
radio button in the group and selects the one adjacent to it.
... if the argument dir is true, the next
radio button is selected.
... if it is false, the previous
radio button is selected.
Multiple Rules - Archive of obsolete content
here is another example for an xml source: <
radiogroup datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <rule> <where subject="?gender" rel="equals" value="male"/> <action> <
radio uri="?" label="?name is male"/> </action> </rule> <rule> <action> <
radio uri="?" label="?name is female" disabled="true"/> </action> </rule> </template> </
radiogr...
...oup> in this example, all male people are matched with the first rule, and a
radio button is generated for each one.
... we assume that anyone that isn't male is female and use the second rule to create a disabled
radio button for females.
The Implementation of the Application Object Model - Archive of obsolete content
for example, the t
raditional bookmarks tree view could contain anything from mail messages to local files to maps of other sites.
...in other words, the t
raditional relationship of "containment" is not the only kind of relationship expressible in rdf.
...they are likely to change following the first release of nglayout, and when they do, anyone that implemented one of those interfaces will have to change as well in order to upg
rade to the new world.
XUL controls - Archive of obsolete content
progressmeter reference <
radio> a
radio button is used when only one of a set of options may be selected at a time.
... <
radiogroup> <
radio label="light" value="light"/> <
radio label="heavy" value="heavy"/> <
radio label="heay" value="hea"/> </
radiogroup> more information about the
radio element.
...
radio reference related elements:
radiogroup <richlistbox> the richlistbox displays a list of items where one or more may selected.
Extentsions FAQ - Archive of obsolete content
how can i backup some of the files before upg
rade an extension and put them back afterward?
... preserved properties source code - nsimapmailfolder::copymessages uaq friday, september 22 - 29, 2006 (↑ top) why extension preferences do not get changed until after it's upg
rade?
... why extension preferences do not get changed until after it's upg
rade?
Theme changes in Firefox 3.5 - Archive of obsolete content
global/checkbox.css, global/
radio.css since bug 394892,
radio buttons and checkboxes no longer have a minimum size on mac os x.
... if your theme uses native checkboxes or
radiobuttons (-moz-appearance:
radio / checkbox), this can result in distorted controls.
... you might have to set the width and height of .checkbox-check and .
radio-check to 16px to avoid that problem.
Using Web Standards in your Web Pages - Archive of obsolete content
the problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers." -web standards project this article provides an overview of the process for upg
rading the content of your web pages to conform to the world wide web consortium (w3c) web standards.
...how to upg
rade a webpage markup code to pass validation and how to implement css are addressed by providing recommendations, tutorials and references.
...the last section offers excellent and best references for those wishing to learn more about upg
rading techniques presented in this article and more for those wishing to perfect their web pages.
::-ms-check - Archive of obsolete content
the ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and
radio button groups created by <input type="checkbox"> and <input type="
radio">.
... -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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
...e font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="
radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </form> css input, label { display: inline; } input[type=
radio]::-ms-check { border-color: red; /* this will make the border red when the button is checked.
Game over - Game development
here's the piece of code from the third lesson where we made the ball bounce off the walls: if(x + dx > canvas.width-ball
radius || x + dx < ball
radius) { dx = -dx; } if(y + dy > canvas.height-ball
radius || y + dy < ball
radius) { dy = -dy; } instead of allowing the ball to bounce off all four walls, let's only allow three now — left, top and right.
... first, replace where you initially called setinterval() setinterval(draw, 10); with: var interval = setinterval(draw, 10); then replace the second if statement with the following: if(y + dy < ball
radius) { dy = -dy; } else if(y + dy > canvas.height-ball
radius) { alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } letting the paddle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area.
...update the last bit of code you modified again, to the following: if(y + dy < ball
radius) { dy = -dy; } else if(y + dy > canvas.height-ball
radius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; } else { alert("game over"); document.location.reload(); clearinterval(interval); } } if the ball hits the bottom edge of the canvas we need to check whether it hits the paddle .
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-templ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-templ...
A cool-looking box - Learn web development
a fairly subtle border
radius.
... a linear semi-transparent black g
radient that goes toward the bottom right corner.
... make it completely transparent at the start, g
radiating to around 0.2 opacity by 30% along, and remaining at the same color until the end.
Fundamental CSS comprehension - Learn web development
you need to: give the main card container a fixed width/height, solid background color, border, and border-
radius (rounded corners!), amongst other things.
... give the header a background g
radient that goes from darker to lighter, plus rounded corners that fit in with the rounded corners set on the main card container.
... give the footer a background g
radient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container.
Styling tables - Learn web development
start by adding the following css to your style.css file, again at the bottom: /* graphics and colors */ thead, tfoot { background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td { background: linear-g
radient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); border: 3px solid purple; } again, there's nothing specific to tables here, but it is worthwhile to note a few things.
... we've also added a linear g
radient to the <th> and <td> elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border.
...yes, we could have put both the background image and the linear g
radient on the <thead> and <tfoot> elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear g
radients.
Supporting older browsers - Learn web development
* {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-
radius: 5px; background-color: rgb(207,232,220); padding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a grid layout.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-
radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> to deal with this issue we need to have a way to detect if grid is supported and therefore if it will override the width.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-
radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } @supports (display: grid) { .item { width: auto; } } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> support for feature queries is very good across modern browsers, however, you should note that it is the brow...
Test your skills: Basic controls - Learn web development
basic controls 2 the next task requires you to create working sets of checkboxes and
radio buttons, from the provided text labels.
... turn the first <fieldset>'s contents into a set of
radio buttons — you should only be able to select one pony character at once.
... make it so that the first
radio button is selected upon page load.
Object building practice - Learn web development
size — each ball gets a size — this is its
radius, in pixels.
... the
radius of the arc — in this case, the ball's size property.
...here we specify 0 degrees, and 2 * pi, which is the equivalent of 360 degrees in
radians (annoyingly, you have to specify this in
radians).
Handling common HTML and CSS problems - Learn web development
so for example: mozilla uses -moz- chrome/opera/safari use -webkit- microsoft uses -ms- here's some examples: -webkit-transform: rotate(90deg); background-image: -moz-linear-g
radient(left,green,yellow); background-image: -webkit-g
radient(linear,left center,right center,from(green),to(yellow)); background-image: linear-g
radient(to right,green,yellow); the first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in chrome, etc.
... the last three lines show three different versions of the linear-g
radient() function, which is used to generate a linear g
radient in the background of an element: the first one has a -moz- prefix, and shows a slightly older version of the syntax (firefox) the second one has a -webkit- prefix, and shows an even older, proprietary version of the syntax (this is actually from a really old version of the webkit engine).
... layout features aren't as easy to provide graceful fallbacks for as simple colors, shadows, or g
radients.
Package management basics - Learn web development
reducing your app's file size however, as with all tools that "help" developers there's often a t
rade off.
... updating dependencies npm update yarn upg
rade this will look at the currently installed dependencies and update them, if there is an update available, within the range that's specified in the package.
... it's important to remember that npm update will not upg
rade the dependencies to beyond the range defined in the package.json — to do this you will need to install that version specifically.
Android-specific test suites
all of the suites are configured by and invoked using g
radle.
... see http://checkstyle.sourceforge.net/index.html and https://docs.g
radle.org/2.14/userguide/checkstyle_plugin.html for more details.
... see http://findbugs.sourceforge.net/index.html and https://docs.g
radle.org/2.14/userguide/findbugs_plugin.html for more details.
Frame script loading and lifetime
var gcontentframemessagemanager = this; addeventlistener('unload', function(aevent) { if (aevent.target == gcontentframemessagemanager) { sendasyncmessage('my-addon-id', 'framescript-died'); // if you did not set third argument of `services.mm.addmessagelistener` to `true`, then this will fail to send a message } }, false); note about unload during uninstallation/upg
rade when your add-on is uninstalled, or disabled, you should: cancel it, if you have used allowdelayedload, by calling removedelayedframescript; ensuring the frame script is not loaded into any new tabs.
... note: you might think that there is a race condition here due to the asynchronous nature of the message passing: your add-on is disabled for an upg
rade.
... your add-on is upg
raded, and the new code loads new frame scripts.
PR GetCanonNameFromAddrInfo
syntax #include <prnetdb.h> const char *pr_getcanonnamefromaddrinfo(const p
raddrinfo *addrinfo); parameters the function has the following parameters: addrinfo a pointer to a p
raddrinfo structure returned by a successful call to pr_getaddrinfobyname.
... returns the function returns a const pointer to the canonical hostname stored in the given p
raddrinfo structure.
... this pointer is invalidated once the p
raddrinfo structure is destroyed by a call to pr_freeaddrinfo.
NSS 3.23 release notes
new functions in ssl.h ssl_setdowng
radecheckversion - set maximum version for new serverrandom anti-downg
rade mechanism.
... clients that perform a version downg
rade (which is a dangerous practice) call this with the highest version number that they possibly support.
... this gives them access to the version downg
rade protection from tls 1.3.
Notes on TLS - SSL 3.0 Intolerant Servers
servers currently known to exhibit this intolerant behavior as of this writing, this problem has been reported for the following servers: (wherever there is an upg
raded version which fixes the problem, it is indicated by an asterisked remark in the parentheses.
... upg
rade to a newer version if available, which corrects this problem.
...we recommend strongly that you urge users to upg
rade to the latest netscape version (or at least netscape 6.1) since the newer versions have the graceful rollback implemented in the code.
Binary compatibility
if mozilla decides to upg
rade to a compiler that does not have the same abi as the current version, any built component may fail.
... it is a possiblity that is introduced when upg
rading to a new compiler without recompiling everything.
...if and when mozilla upg
rades the compiler they use, your component will have to be rebuilt against the same compiler.
nsIAccessibleProvider
ge 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xul
radiobutton 0x00001015 xul
radiogroup 0x00001016 xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface.
... xformsselectfull 0x00002011 used for xforms full select/select1 elements that may be represented by group of checkboxes and
radiogroup.
... xformsitem
radiogroup 0x00002013 used for xforms item element that is used inside xforms select1 elements represented by
radio group.
nsIAccessibleRole
role_
radiobutton 45 represents an option button, also called a
radio button.
...it is used for xul:
radio, html:input@type="
radio", role="
radio".
... role_
radio_menu_item 84 a
radio button that is a menu item.
nsISocketTransport
to create an instance, call nsisockettransportservice.createtransport() method overview prnetaddr getpee
raddr(); native code only!
... methods native code only!getpee
raddr returns the ip address of the socket connection peer.
...prnetaddr getpee
raddr(); parameters none.
Animating CSS properties - Firefox Developer Tools
it looks like this: it has two controls: a button to start/stop the animation, and a
radio group to choose to animate using margin, or to animate using transform.
... there are a number of elements, and we've added a linear-g
radient background and a box-shadow to each element, because they are both relatively expensive effects to paint.
... animating using transform now switch the
radio button in the web page to "use transform", and make a new recording.
CSSPrimitiveValue - Web APIs
conversions are allowed between absolute values (from millimeters to centimeters, from degrees to
radians, and so on) but not between relative values.
... css_g
rad the value is an <angle> in g
rads.
... css_
rad the value is an <angle> in
radians.
Using the CSS properties and values API - Web APIs
in this example, the custom property --registered has been registered using the syntax <color> and then used in a linear g
radient.
... .registered { --registered: #c0ffee; background-image: linear-g
radient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-g
radient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --regist...
...ered: #c0ffee; background-image: linear-g
radient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-g
radient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while not functionally accurate, a good way to think about the difference between the unregistered property in the above example and the registered property is...
CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the color, g
radient, or pattern to use inside shapes.
... syntax ctx.fillstyle = color; ctx.fillstyle = g
radient; ctx.fillstyle = pattern; options color a domstring parsed as css <color> value.
... g
radient a canvasg
radient object (a linear or
radial g
radient).
CanvasRenderingContext2D.strokeStyle - Web APIs
the canvasrenderingcontext2d.strokestyle property of the canvas 2d api specifies the color, g
radient, or pattern to use for the strokes (outlines) around shapes.
... syntax ctx.strokestyle = color; ctx.strokestyle = g
radient; ctx.strokestyle = pattern; options color a domstring parsed as css <color> value.
... g
radient a canvasg
radient object (a linear or
radial g
radient).
Transformations - Web APIs
rotate(angle) rotates the canvas clockwise around the current origin by the angle number of
radians.
... reminder: angles are in
radians, not degrees.
... to convert, we are using:
radians = (math.pi/180)*degrees.
IDBDatabase.onversionchange - Web APIs
the onversionchange event handler of the idbdatabase interface handles the versionchange event, fired when a database structure change (idbopendbrequest.onupg
radeneeded event or idbfactory.deletedatabase) was requested elsewhere (most probably in another window/tab on the same computer).
...} example this example shows an idbopendbrequest.onupg
radeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases, and an onversionchange function to notify when a database structure change has occurred.
... request.onupg
radeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createinde...
IDBDatabase: versionchange event - Web APIs
the versionchange event is fired when a database structure change (idbopendbrequest.onupg
radeneeded event or idbfactory.deletedatabase) was requested.
... bubbles no cancelable no interface event event handler property onversionchange examples this example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupg
radeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', ...
...e: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.result; db.addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupg
radeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('d...
IDBObjectStore.createIndex() - Web APIs
from inside a idbopendbrequest.onupg
radeneeded handler.
...has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) example in the following example you can see the idbopendbrequest.onupg
radeneeded handler being used to update the database structure if a database with a higher version number is loaded.
...dbopenrequest.onupg
radeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: ...
IDBObjectStore.deleteIndex() - Web APIs
the deleteindex() method of the idbobjectstore interface destroys the index with the specified name in the connected database, used during a version upg
rade.
... example in the following example you can see the idbopendbrequest.onupg
radeneeded handler being used to update the database structure if a database with a higher version number is loaded.
...isplaydata() function to populate the task list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupg
radeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false })...
IDBOpenDBRequest.onblocked - Web APIs
this event is triggered when the upg
radeneeded should be triggered because of a version change but the database is still in use (that is, not closed) somewhere, even after the versionchange event was sent.
...either one has not been created // before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers request.onupg
radeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); ...
... }; request.onblocked = function() { console.log("your database version can't be upg
raded because the app is open somewhere else."); } specifications specification status comment indexed database api 2.0the definition of 'onblocked' in that specification.
Key Values - Web APIs
keycode_tv_power (177) "tv
radioservice"
radio button.
... keycode_tv_
radio_service (232) "tvsatellite" satellite button.
... vk_record_speed_next "rfbypass" toggles
radio frequency (rf) input bypass mode on and off.
Path2D - Web APIs
path2d.arc() adds an arc to the path which is centered at (x, y) position with
radius r starting at startangle and ending at endangle going in the given direction by anticlockwise (defaulting to clockwise).
... path2d.arcto() adds a circular arc to the path with the given control points and
radius, connected to the previous point by a straight line.
... path2d.ellipse() adds an elliptical arc to the path which is centered at (x, y) position with the
radii
radiusx and
radiusy starting at startangle and ending at endangle going in the given direction by anticlockwise (defaulting to clockwise).
ResizeObserverEntry.contentBoxSize - Web APIs
examples the following snippet is taken from the resize-observer-border-
radius.html (see source) example.
...we could just implement this using border-
radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size.
... const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.border
radius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.border
radius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status comment resize observerthe definition of 'target' in that specification.
Resize Observer API - Web APIs
examples you find a couple of simple examples on our github repo: resize-observer-border-
radius.html (see source): a simple example with a green box, sized as a percentage of the viewport size.
...we could just implement this using border-
radius with a percentage, but that quickly leads to ugly-looking elliptical corners, whereas the above solution gives you nice square corners that scale with the box size.
... the code will usually follow this kind of pattern (taken from resize-observer-border-
radius.html): const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.border
radius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.border
radius = math.min(100, (entry.conte...
Writing a WebSocket server in C# - Web APIs
ccepttcpclient(); console.writeline("a client connected."); networkstream stream = client.getstream(); //enter to an infinite cycle to be able to handle every change in stream while (true) { while (!stream.dataavailable); byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); } handshaking when a client connects to a server, it sends a get request to upg
rade the connection to a websocket from a simple http request.
...hash of the new value write the hash back as the value of "sec-websocket-accept" response header in an http response if (new system.text.regularexpressions.regex("^get").ismatch(data)) { const string eol = "\r\n"; // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = encoding.utf8.getbytes("http/1.1 101 switching protocols" + eol + "connection: upg
rade" + eol + "upg
rade: websocket" + eol + "sec-websocket-accept: " + convert.tobase64string( system.security.cryptography.sha1.create().computehash( encoding.utf8.getbytes( new system.text.regularexpressions.regex("sec-websocket-key: (.*)").match(data).groups[1].value.trim() + "258eafa5-e914-47da-95ca-c5ab0dc85b11" ) ...
... = system.security.cryptography.sha1.create().computehash(encoding.utf8.getbytes(swka)); string swkasha1base64 = convert.tobase64string(swkasha1); // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = encoding.utf8.getbytes( "http/1.1 101 switching protocols\r\n" + "connection: upg
rade\r\n" + "upg
rade: websocket\r\n" + "sec-websocket-accept: " + swkasha1base64 + "\r\n\r\n"); stream.write(response, 0, response.length); } else { bool fin = (bytes[0] & 0b10000000) != 0, mask = (bytes[1] & 0b10000000) != 0; // must be true, "all messages from the client to the server have this ...
Web APIs
sum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasg
radient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashrep...
...crtpencodingparameters rtcrtpparameters rtcrtpreceiveparameters rtcrtpreceiver rtcrtpsendparameters rtcrtpsender rtcrtpstreamstats rtcrtpsynchronizationsource rtcrtptransceiver rtcrtptransceiverdirection rtcrtptransceiverinit rtcsctptransport rtcsessiondescription rtcsessiondescriptioncallback rtcstats rtcstatsicecandidatepairstate rtcstatsreport rtcstatstype rtctrackevent rtctrackeventinit
radionodelist range readablebytestreamcontroller readablestream readablestreambyobreader readablestreambyobrequest readablestreamdefaultcontroller readablestreamdefaultreader relativeorientationsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsao...
...epointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svgg
radientelement svggraphicselement svghkernelement svgimageelement svglength svglengthlist svglineelement svglinearg
radientelement svgmpathelement svgmaskelement svgmatrix svgmeshelement svgmetadataelement svgmissingglyphelement svgnumber svgnumberlist svgpathelement svgpatternelement svgpoint svgpolygonelement svgpolylineelement svgpreserveaspectratio svg
radialg
radientelement svgrect svgrecte...
Accessibility documentation index - Accessibility
10 basic form hints aria, accessibility, forms when implementing forms using t
raditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
... 36 using the
radio role needscontent this technique demonstrates how to use the
radio role and describes the effect it has on browsers and assistive technology.
... 52 aria: application role aria, aria role, aria widget, reference, role application the application role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no t
raditional html interpretation techniques should be used.
:default - CSS: Cascading Style Sheets
what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <input type="checkbox">, <input type="
radio">, and <option> elements: a default option element is the first one with the selected attribute, or the first enabled option in dom order.
... <input type="checkbox"> and <input type="
radio"> match if they have the checked attribute.
... syntax :default examples html <fieldset> <legend>favorite season</legend> <input type="
radio" name="season" id="spring"> <label for="spring">spring</label> <input type="
radio" name="season" id="summer" checked> <label for="summer">summer</label> <input type="
radio" name="season" id="fall"> <label for="fall">fall</label> <input type="
radio" name="season" id="winter"> <label for="winter">winter</label> </fieldset> css input:default { box-shadow: 0 0 2px 1px coral; } input:default + label { color: coral; } result specifications specification s...
:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true,
radio buttons which are members of a group in which all
radio buttons are unchecked, and indeterminate <progress> elements.
... /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="
radio"> elements, when all
radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox &
radio button this example applies special styles to the labels associated with indeterminate form fields.
... html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="
radio" id="
radio"> <label for="
radio">this label starts out lime.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specifications specification status comment html living standardthe definition of ':indeterminate' in that specification.
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
(additionally, element boxes can be decorated with a shadow.) reference css properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-
radius border-bottom-right-
radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-
radius border-right border-right-color border-right-style border-right-width border-style bord...
...er-top border-top-color border-top-left-
radius border-top-right-
radius border-top-style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element.
... border-
radius generator this interactive tool lets you visually create rounded corners (the border-
radius property).
CSS values and units - CSS: Cascading Style Sheets
g
rad g
radians there are 400 g
radians in a full circle.
...
rad radians there are 2π
radians in a full circle.
... css images module level 4 working draft adds element(), image(), image-set(), conic-g
radient() css images module level 3 candidate recommendation initial definition of image.
Animatable CSS properties - CSS: Cascading Style Sheets
animation means that their values can be made to change g
radually over a given amount of time.
... the animatable properties are: -moz-outline-
radius -moz-outline-
radius-bottomleft -moz-outline-
radius-bottomright -moz-outline-
radius-topleft -moz-outline-
radius-topright -webkit-line-clamp -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-position background-size block-size border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-bottom border-bottom-color border-bottom-left-
radius border-bottom-right-
radius border-bottom-width border-color border-end-end-
radius borde...
...r-end-start-
radius border-image-outset border-image-slice border-image-width border-inline-end border-inline-end-color border-inline-end-width border-inline-start border-inline-start-color border-inline-start-width border-left border-left-color border-left-width border-
radius border-right border-right-color border-right-width border-start-end-
radius border-start-start-
radius border-top border-top-color border-top-left-
radius border-top-right-
radius border-top-width border-width bottom box-shadow caret-color clip clip-path color column-count column-gap column-rule column-rule-color column-rule-width column-width ...
Shorthand properties - CSS: Cascading Style Sheets
similarly, shorthands handling properties related to corners of a box, like border-
radius, always use a consistent 1-to-4-value syntax representing those corners: the 1-value syntax: border-
radius: 1em — the unique value represents all corners the 2-value syntax: border-
radius: 1em 2em — the first value represents the top left and bottom right corner, the second the top right and bottom left ones.
... the 3-value syntax: border-
radius: 1em 2em 3em — the first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner the 4-value syntax: border-
radius: 1em 2em 3em 4em — the four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.
... shorthand properties: animation, background, border, border-bottom, border-color, border-left, border-
radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, offset, outline, overflow, padding, place-content, place-items, place-self, text-decoration, transition ...
box-decoration-break - CSS: Cascading Style Sheets
the border-
radius, border-image, and box-shadow are applied to each fragment independently.
... formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-g
radient(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; } ...
... here's an example of an inline element using a large border-
radius value.
element() - CSS: Cascading Style Sheets
the background element uses a g
radient, but also includes text that is rendered as part of the background.
... <div style="width:400px; height:400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="mybackground1" style="width:1024px; height:1024px; background-image: linear-g
radient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">this text is part of the background.
... see also image() image-set() <image> <g
radient> element() cross-fade() document.mozsetimageelement() ...
drop-shadow() - CSS: Cascading Style Sheets
syntax drop-shadow(offset-x offset-y blur-
radius color) the drop-shadow() function accepts a parameter of type <shadow> (defined in the box-shadow property), with the exception that the inset keyword and spread parameters are not allowed.
... blur-
radius (optional) the shadow's blur
radius, specified as a <length>.
... examples setting a drop shadow using pixel offsets and blur
radius /* black shadow with 10px blur */ drop-shadow(16px 16px 10px black) setting a drop shadow using rem offsets and blur
radius /* reddish shadow with 1rem blur */ drop-shadow(.5rem .5rem 1rem #e23) specifications specification status filter effects module level 1the definition of 'drop-shadow()' in that specification.
Adding captions and subtitles to HTML5 video - Developer guides
no image is used for the captions button, so it is simply styled as: .controls button[data-state="subtitles"] { height:85%; text-indent:0; font-size:16px; font-size:1rem; font-weight:bold; color:#666; background:#000; border-
radius:2px; } there are also other css changes that are specific to some extra javascript implementation, but these will be mentioned at the appropriate place below.
... display:none; position:absolute; bottom:14.8%; right:20px; background:#666; list-style-type:none; margin:0; padding:0; width:100px; padding:10px; } .subtitles-menu li { padding:0; text-align:center; } .subtitles-menu li button { border:none; background:#000; color:#fff; cursor:pointer; width:90%; padding:2px 5px; border-
radius:2px; } styling the displayed subtitles one of the less well known about and supported features of webvtt is the ability to style the individual subtitles (something called text cues) via css extensions.
...
radiant media player supports multi-languages webvtt closed captions note: you can find an excellent list of html5 video players and their current "state" at html5 video player comparison.
Index - Developer guides
ovides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api 10 live streaming web audio and video guide, adaptive streaming live streaming technology is often employed to relay live events such as sports, concerts and more generally tv and
radio programmes that are output live.
... 23 orientation and motion data explained intermediate, mobile, motion, needscontent, orientation, páginas_a_t
raducir, rotation when using orientation and motion events, it's important to understand what the values you're given by the browser mean.
...decisions like these are at the heart of mobile web development: be specific about what you would like to accomplish, and pick a practical approach while being aware of the t
radeoffs.
Mobile Web Development - Developer guides
you can also make use of css properties to implement visual effects like g
radients and shadows without images.
... for example, if you set a g
radient as a background for some text using a vendor-prefixed property like -webkit-linear-g
radient, it's best to include the other vendor-prefixed versions of the linear-g
radient() property.
... if you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your linear-g
radient rule.
disabled - HTML: Hypertext Markup Language
here are examples of a disabled checkbox,
radio button, <option> and <optgroup>, as well as some form controls that are disabled via the disabled attribute set on the ancestor <fieldset> element.
... <fieldset> <legend>checkboxes</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>
radio buttons</legend> <p><label> <input type="
radio" name="
radio" value="regular"> regular </label></p> <p><label> <input type="
radio" name="
radio" value="disabled" disabled> disabled </label></p> </fieldset> <p> <label>select an option: <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.
...1</option> <option disabled>option 2.2</option> <option>option 2.3</option> </optgroup> <optgroup label="group 3" disabled> <option>disabled 3.1</option> <option>disabled 3.2</option> <option>disabled 3.3</option> </optgroup> </select> </label> </p> <fieldset disabled> <legend>disabled fieldset</legend> <p> <label>name: <input type="name" name="
radio" value="regular"> regular </label> </p> <p> <label>number: <input type="number"></label> </p> </fieldset> specifications specification status comment html living standardthe definition of 'disabled attribute' in that specification.
HTML attribute: required - HTML: Hypertext Markup Language
the required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox,
radio, file, <input> types along with the <select> and <textarea> form control elements.
... in the case of a same named group of
radio buttons, if a single
radio button in the group has the required attribute, a
radio button in that group must be check, though it doesn't have to be the one with the attribute is applied.
... for this reason, to improve code maintenance, it is recommened to either include the required attribute in every same-named
radio button in the group or none.
<img>: The Image Embed element - HTML: Hypertext Markup Language
no-referrer-when-downg
rade: no referer header is sent when navigating to an origin without https.
...you can set properties like border/border-
radius, padding/margin, width, height, etc.
... implicit aria role with non-empty alt attribute or no alt attribute: img with empty alt attribute: no corresponding role permitted aria roles with non-empty alt attribute: button checkbox link menuitem menuitemcheckbox menuitem
radio option progressbar scrollbar separator slider switch tab treeitem with empty alt attribute, none or presentation with no alt attribute, no role permitted dom interface htmlimageelement specifications specification status comment referrer policythe definition of 'referrer attribute' ...
<input type="datetime-local"> - HTML: Hypertext Markup Language
in other browsers, these deg
rade gracefully to simple <input type="text"> controls.
...as an example, the datetime-local picker on firefox for android looks like this: non-supporting browsers gracefully deg
rade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.
...if your server is written in php, the fix may be as simple as upg
rading to php 8 or 7, and upg
rading your hardware to x86_64 or ia64.
Connection management in HTTP/1.x - HTTP
a related topic is the concept of http connection upg
rades, wherein an http/1.1 connection is upg
raded to a different protocol, such as tls/1.0, websocket, or even http/2 in cleartext.
... this protocol upg
rade mechanism is documented in more detail elsewhere.
...short-lived connections do not make use of this efficiency feature of tcp, and performance deg
rades from optimum by persisting to transmit over a new, cold connection.
HTTP response status codes - HTTP
101 switching protocol this code is sent in response to an upg
rade request header from the client, and indicates the protocol the server is switching to.
... 426 upg
rade required the server refuses to perform the request using the current protocol but might be willing to do so after the client upg
rades to a different protocol.
... the server sends an upg
rade header in a 426 response to indicate the required protocol(s).
A re-introduction to JavaScript (JS tutorial) - JavaScript
overview javascript is a multi-pa
radigm, dynamic language with types and operators, standard built-in objects, and methods.
...this takes the base for the conversion as an optional second argument, which you should always provide: parseint('123', 10); // 123 parseint('010', 10); // 10 in older browsers, strings beginning with a "0" are assumed to be in octal (
radix 8), but this hasn't been the case since 2013 or so.
...this is because it was t
raditionally the only way to declare a variable in javascript.
About JavaScript - JavaScript
it is a prototype-based, multi-pa
radigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.
... the chakra engine used in internet explorer (although the language it implements is formally called "jscript" in order to avoid t
rademark issues).
... javascript® is a t
rademark or registered t
rademark of oracle in the u.s.
Intl.Locale.prototype.numberingSystem - JavaScript
dth digits geor georgian numerals — algorithmic gong gunjala gondi digits gonm masaram gondi digits grek greek upper case numerals — algorithmic greklow greek lower case numerals — algorithmic gujr gujarati digits guru gurmukhi digits hanidays han-character day-of-month numbering for lunar/other t
raditional calendars hanidec positional decimal system using chinese number ideographs as digits hans simplified chinese numerals — algorithmic hansfin simplified chinese financial numerals — algorithmic hant t
raditional chinese numerals — algorithmic hantfin t
raditional chinese financial numerals — algorithmic hebr hebre...
... native native digits newa newa digits nkoo n'ko digits olck ol chiki digits orya oriya digits osma osmanya digits rohg hanifi rohingya digits roman roman upper case numerals — algorithmic romanlow roman lowercase numerals — algorithmic saur saurashtra digits shrd sha
rada digits sind khudawadi digits sinh sinhala lith digits sora sora_sompeng digits sund sundanese digits takr takri digits talu new tai lue digits taml tamil numerals — algorithmic tamldec modern tamil decimal digits telu telugu digits thai thai digits tirh tirhuta di...
...gits tibt tibetan digits t
raditio t
raditional numerals — may be algorithmic vaii vai digits wara warang citi digits wcho wancho digits examples setting the numberingsystem value via the locale string in the unicode locale string spec, the values that numberingsystem represents correspond to the key nu.
Math.acos() - JavaScript
the math.acos() function returns the arccosine (in
radians) of a number, that is ∀x∊[-1;1],math.acos(x)=arccos(x)= the unique y∊[0;π]such thatcos(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x the source for this interactive example is stored in a github repository.
... return value the arccosine (angle in
radians) of the given number if it's between -1 and 1; otherwise, nan.
... description the math.acos() method returns a numeric value between 0 and π
radians for x between -1 and 1.
Math.asin() - JavaScript
the math.asin() function returns the arcsine (in
radians) of a number, that is ∀x∊[-1;1],math.asin(x)=arcsin(x)= the unique y∊[-π2;π2]such thatsin(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x the source for this interactive example is stored in a github repository.
... return value the arcsine (in
radians) of the given number if it's between -1 and 1; otherwise, nan.
... description the math.asin() method returns a numeric value between -π2-\frac{\pi}{2} and π2\frac{\pi}{2}
radians for x between -1 and 1.
Math.atan() - JavaScript
the math.atan() function returns the arctangent (in
radians) of a number, that is math.atan(x)=arctan(x)= the unique y∊[-π2;π2]such thattan(y)=x\mathtt{\operatorname{math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x the source for this interactive example is stored in a github repository.
... return value the arctangent (in
radians) of the given number.
... description the math.atan() method returns a numeric value between -π2-\frac{\pi}{2} and π2\frac{\pi}{2}
radians.
Math.atan2() - JavaScript
the math.atan2() function returns the angle in the plane (in
radians) between the positive x-axis and the ray from (0,0) to the point (x,y), for math.atan2(y,x).
... x the x coordinate of the point return value the angle in
radians (in [-π,π][-\pi, \pi]) between the positive x-axis and the ray from (0,0) to the point (x,y).
...this is the counterclockwise angle, measured in
radians, between the positive x axis, and the point (x, y).
Math.tan() - JavaScript
syntax math.tan(x) parameters x a number representing an angle in
radians.
... examples using math.tan() math.tan(1); // 1.5574077246549023 because the math.tan() function accepts
radians, but it is often easier to work with degrees, the following function accepts a value in degrees, converts it to
radians and returns the tangent.
... function gettandeg(deg) { var
rad = deg * math.pi/180; return math.tan(
rad); } specifications specification ecmascript (ecma-262)the definition of 'math.tan' in that specification.
Transitioning to strict mode - JavaScript
g
radual transition strict mode has been designed so that the transition to it can be made g
radually.
... in non-strict, this would silently fail, in cont
radiction with the user expectation.
...fortunately, this careful review can be done g
radually down the function granularity.
Animation performance and frame rate - Web Performance
it looks like this: it has two controls: a button to start/stop the animation, and a
radio group to choose to animate using margin, or to animate using transform.
... there are a number of elements, and we've added a linear-g
radient background and a box-shadow to each element, because they are both relatively expensive effects to paint.
... animating using transform now switch the
radio button in the web page to "use transform", and make a new recording.
Performance fundamentals - Web Performance
but often t
rading some generality and quality for speed, such as using a static rendering instead of a css
radial g
radient, can push scrolling framerate over a target.
... keep your interface simple one big performance issue we found in html5 apps was that moving lots of dom elements around makes everything sluggish — especially when they feature lots of g
radients and drop shadows.
...rendering large images and css g
radients can also take longer.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
this introduces a different approach from t
raditional web programming — the api is non-blocking, and can send and receive communication between different contexts.
... var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/g
raduate.eot', '/pwa-examples/js13kpwa/fonts/g
raduate.ttf', '/pwa-examples/js13kpwa/fonts/g
raduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icon...
... updates there is still one point to cover: how do you upg
rade a service worker when a new version of the app containing new assets is available?
Graphic design for responsive sites - Progressive web apps (PWAs)
css3 drop shadows and g
radients), you may want to simplify or remove certain assets for the site's mobile layout, or even provide smaller assets to suit the smaller screen better.
...you could use css3 properties for generating effects like drop shadows, g
radients and rounded corners, and you could also consider using svg for other ui elements, instead of raster graphics formats.
...these may not be supported in older browsers like ie6-8, but they generally deg
rade gracefully, are fairly easy to write, and become much more flexible and powerful when combined with javascript and other technologies.
Mobile first - Progressive web apps (PWAs)
therefore, as well as splitting content into different views, and simplifying the interface and content on each view of your application for mobile as much as possible, it is also a good idea to not include visual effects such as shadows, animations, and g
radients.
... 1px solid #ad66d5; border-bottom: none; display: inline-block; padding: 0 5px; font-size: 1.6em; } nav li:last-child a { border-right: none; } } @media (min-width: 600px) { html { background: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto; background: url(../img/firefox-os.png) bottom left no-repeat, linear-g
radient(to bottom, #fff, #eee); } .main > p { background: rgba(255,255,255,0.3); } nav li a { padding: 0 10px; font-size: 2em; } } the first one cancels out the css display: table behaviour, hides the links to jump to and from the navigation, as they are not needed anymore in the wider layout, and changes the vertical menu to a horizontal menu that makes better use of the h...
... the second one sets the width of the content at 600px and centers it in the space available, then adds in a g
radient and a nice background image for the wider layout.
The building blocks of responsive design - Progressive web apps (PWAs)
first of all, as expected, there is a media query in our main css, which is quite weighty, so we'll go through it in parts: @media all and (max-width: 480px) { x-card:nth-child(1), x-card:nth-child(2), x-card:nth-child(3) { width: 100%; float: none; padding: 0; } button { margin-top: 0; border-
radius: 0; } x-card:nth-child(1) video, x-card:nth-child(2) img { border-
radius: 0px; border: none; padding: 0; background-color: 0; } this first block resets a number of different things from the widescreen layouts that were't required for the mobile app.
...these include rounded corners, g
radients, and drop shadows.
...although they are not supported very well on older browsers such as internet explorer 6-8, this is not too much of a concern when you are creating an interface aimed at modern devices, and they also tend to gracefully deg
rade.
color-interpolation - SVG: Scalable Vector Graphics
the color-interpolation attribute specifies the color space for g
radient interpolations, color animations, and alpha compositing.
...for g
radients which make use of the href or the deprecated xlink:href attribute to reference another g
radient, the g
radient uses the propertyʼs value from the g
radient element which is directly referenced by the fill or stroke property.
... as a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <linearg
radient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <
radialg
radient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> usage notes value auto | srgb | linearrgb default value srgb animatable yes auto indicates that the user agent can choose either the srgb or linearrgb spaces for color interpol...
fr - SVG: Scalable Vector Graphics
the fr attribute defines the
radius of the focal point for the
radial g
radient.
... only one element is using this attribute: <
radialg
radient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <
radialg
radient id="g
radient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </
radialg
radient> <
radialg
radient id="g
radient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </
radialg
radient> </defs> <circle cx="100" cy="100" r="100" fill="url(#g
radient1)" /> <circle cx="100" cy="100" r="100" fill="url(#g
radient2)" style="transform: translatex(240px);" /> </svg> usage ...
...notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <
radialg
radient id="g
radient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </
radialg
radient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#g
radient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-famil...
fx - SVG: Scalable Vector Graphics
the fx attribute defines the x-axis coordinate of the focal point for a
radial g
radient.
... only one element is using this attribute: <
radialg
radient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <
radialg
radient id="g
radient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </
radialg
radient> <
radialg
radient id="g
radient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </
radialg
radient> </defs> <circle cx="100" cy="100" r="100" fill="url(#g
radient1)" /> <circle cx="100" cy="100" r="100" fill="url(#g
radient2)" style="transform: translatex(240px);" /> </svg> usage n...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <
radialg
radient id="g
radient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </
radialg
radient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#g
radient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> ...
fy - SVG: Scalable Vector Graphics
the fy attribute defines the y-axis coordinate of the focal point for a
radial g
radient.
... only one element is using this attribute: <
radialg
radient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <
radialg
radient id="g
radient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </
radialg
radient> <
radialg
radient id="g
radient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </
radialg
radient> </defs> <circle cx="100" cy="100" r="100" fill="url(#g
radient1)" /> <circle cx="100" cy="100" r="100" fill="url(#g
radient2)" style="transform: translatex(240px);" /> </svg> usage n...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <
radialg
radient id="g
radient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </
radialg
radient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#g
radient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> ...
requiredFeatures - SVG: Scalable Vector Graphics
ure#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://www.w3.org/tr/svg11/feature#colorprofile http://www.w3.org/tr/svg11/feature#g
radient http://www.w3.org/tr/svg11/feature#pattern http://www.w3.org/tr/svg11/feature#clip http://www.w3.org/tr/svg11/feature#mask http://www.w3.org/tr/svg11/feature#filter http://www.w3.org/tr/svg11/feature#xlinkattribute http://www.w3.org/tr/svg11/feature#font http://www.w3.org/tr/svg11/feature#extensibility http://www.w3.org/tr/svg11/feature#svgdom-static the browser supports...
...ng, text-rendering and visibility attributes http://www.w3.org/tr/svg11/feature#basicgraphicsattribute the browser supports the display and visibility attributes http://www.w3.org/tr/svg11/feature#marker the browser supports the <marker> element http://www.w3.org/tr/svg11/feature#colorprofile the browser supports the <color-profile> element http://www.w3.org/tr/svg11/feature#g
radient the browser supports the <linearg
radient>, <
radialg
radient> and <stop> elements http://www.w3.org/tr/svg11/feature#pattern the browser supports the <pattern> element http://www.w3.org/tr/svg11/feature#clip the browser supports the <clippath> element and the clip-path, clip-rule attributes http://www.w3.org/tr/svg11/feature#basicclip the browser supports the <clippath> ele...
...ext> <!-- testing : http://www.w3.org/tr/svg11/feature#colorprofile --> <rect class="ko" x="10" y="635" height="25" width="430" /> <rect class="ok" x="10" y="635" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#colorprofile" /> <text x="20" y="652">http://www.w3.org/tr/svg11/feature#colorprofile</text> <!-- testing : http://www.w3.org/tr/svg11/feature#g
radient --> <rect class="ko" x="10" y="660" height="25" width="430" /> <rect class="ok" x="10" y="660" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#g
radient" /> <text x="20" y="677">http://www.w3.org/tr/svg11/feature#g
radient</text> <!-- testing : http://www.w3.org/tr/svg11/feature#pattern --> <rect class="ko" x="10" y="685" height="25" width="430" /> <r...
rx - SVG: Scalable Vector Graphics
the rx attribute defines a
radius on the x-axis.
...0/svg"> <ellipse cx="50" cy="50" rx="0" ry="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-
radius of the shape.
... rect for <rect>, rx defines the x-axis
radius of the ellipse used to round off the corners of the rectangle.
ry - SVG: Scalable Vector Graphics
the ry attribute defines a
radius on the y-axis.
...0/svg"> <ellipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-
radius of the shape.
... rect for <rect>, ry defines the y-axis
radius of the ellipse used to round off the corners of the rectangle.
stop-color - SVG: Scalable Vector Graphics
the stop-color attribute indicates what color to use at a g
radient stop.
... note: with respect to g
radients, svg treats the transparent keyword differently than css.
... svg does not calculate g
radients in pre-multiplied space, so transparent really means transparent black.
stop-opacity - SVG: Scalable Vector Graphics
the stop-opacity attribute defines the opacity of a given color g
radient stop.
... the opacity value used for the g
radient calculation is the product of the value of stop-opacity and the opacity of the value of the stop-color attribute.
... as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value <opacity-value> default value 1 animatable yes <opacity-value> this value is either a <number> between 0 and 1 or a <percentage> value specifying the opacity of the color g
radient stop.
<ellipse> - SVG: Scalable Vector Graphics
the <ellipse> element is an svg basic shape, used to create ellipses based on a center coordinate, and both their x and y
radius.
... value type: <length>|<percentage> ; default value: 0; animatable: yes rx the
radius of the ellipse on the x axis.
... value type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the
radius of the ellipse on the y axis.
SVG element reference - SVG: Scalable Vector Graphics
x> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <linearg
radient> m <marker> <mask> <mesh> <meshg
radient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <
radialg
radient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>...
...omposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>,<fefunca>, <fefuncb>, <fefuncg>, <fefuncr>,<fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> g
radient elements <linearg
radient>, <meshg
radient>, <
radialg
radient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <linearg
radient>, <marker>, <mask>...
..., <meshg
radient>, <metadata>, <pattern>, <
radialg
radient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <linearg
radient>, <meshg
radient>, <pattern>, <
radialg
radient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use> text content elements <altglyph>, <altglyphdef>, <altglyphitem>, <glyph>, <glyphref>, <textpath>, <text>, <tref>, <tspan> text content child elements <altglyph>, <textpath>, <tref>, <tspan> uncategorized elements <clippath>, <color-pro...
SVG and CSS - SVG: Scalable Vector Graphics
copy and paste the content from here, making sure that you scroll to get all of it: <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <
radialg
radient id="fade" cx="0" cy="0" r="200" g
radientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </
radialg
radient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay"...
...copy and paste the content from here, making sure that you scroll to get all of it: /*** svg demonstration ***/ /* page */ svg { background-color: beige; } #heading { font-size: 24px; font-weight: bold; } #caption { font-size: 12px; } /* flower */ #flower:hover { cursor: crosshair; } /* g
radient */ #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); ...
... transform="rotate(36)"/> <use xlink:href="#segment" transform="rotate(54)"/> <use xlink:href="#segment" transform="rotate(72)"/> </g> <g id="petals"> <use xlink:href="#quadrant"/> <use xlink:href="#quadrant" transform="rotate(90)"/> <use xlink:href="#quadrant" transform="rotate(180)"/> <use xlink:href="#quadrant" transform="rotate(270)"/> </g> <
radialg
radient id="fade" cx="0" cy="0" r="200" g
radientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </
radialg
radient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay"...
simple-prefs - Archive of obsolete content
{ "name": "typeofbreath", "type": "menulist", "title": "type of breath", "value": 0, "options": [ { "value": "0", "label": "fire" }, { "value": "1", "label": "cold" }, { "value": "2", "label": "disintegration" } ] }
radio displayed as
radio buttons.
... { "name": "alignment", "type": "
radio", "title": "alignment", "value": "n", "options": [ { "value": "l", "label": "lawful" }, { "value": "n", "label": "neutral" }, { "value": "c", "label": "chaotic" } ] } control displays a button.
Listening for Load and Unload - Archive of obsolete content
options.loadreason options.loadreason is one of the following strings describing the reason your add-on was loaded: install enable startup upg
rade downg
rade exports.onunload() if your add-on exports a function called onunload(), that function will be called when the add-on is unloaded.
... exports.onunload = function (reason) {}; reason reason is one of the following strings describing the reason your add-on was unloaded: uninstall disable shutdown upg
rade downg
rade if your add-on is disabled, then uninstalled, your onunload listener will only be called once, with the disable reason.
Forms related code snippets - Archive of obsolete content
solid #666666; font-weight: bold; background-color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666; text-align: center; } table.zdp-calendar caption { background-color: #333333; padding: 2px; } span.zdp-current-month { display: inline-block; width: auto; height: 16px; padding: 0 2px; line-height: 16px; margin: 0 auto; background-color: #999999; border-
radius: 5px; } span.zdp-increase-month, span.zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; padding: 0 2px; height: 16px; font-weight: bold; background-color: #999999; border-
radius: 5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { f...
...if you want to emulate an editable select through a <fieldset> of
radioboxes and textboxes (written in pure css, without javascript), please see this example.
Examples and demos from articles - Archive of obsolete content
.[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden
radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews.
...[article] pure-css editable (pseudo)<select> [html] this example shows how it's possible to simulate an editable <select> through a fieldset of
radioboxes and textboxes.
Deploying a Plugin as an Extension - Archive of obsolete content
the downside to this method is that once the plugin is installed, it might be difficult for users to upg
rade, uninstall, or disable the plugin.
...this allows the plugin to be treated like other firefox extensions; it can be upg
raded, disabled, or uninstalled using the firefox user interface.
Search Extension Tutorial (Draft) - Archive of obsolete content
the simplest, which works only for t
raditional, non-restartless add-ons, is to add the preference changes to a file in an extension's defaults/preferences/ directory.
...as above, install and uninstall code is only provided for restartless add-ons but can be adapted for t
raditional add-ons.
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
that prefcalls.js is now archive in omni.jar file located at the root of the mozilla apps installation, example of tb5: # jar -tvf /usr/lib/thunderbird/omni.jar | grep prefcalls.js 7499 sat nov 05 09:21:34 cet 2011 defaults/autoconfig/prefcalls.js t
raditionally (previous apps versions) is was in mozilla_home/default/autoconfig/prefcalls.js.
... changes between 2002 and 2003, we needed to upg
rade the old netscape 4.x (4.79) version to mozilla 1.x (1.4), and now (2004-2005) mozilla 1.7.
BundleLibrary - Archive of obsolete content
aol email : aolemail.webapp bbc
radio player bbc
radioplayer.webapp bloglines : bloglines.webapp bloglines beta: beta.bloglines.webapp chandler: chandler.webapp flash earth (integrates all major mapping sites) flashearth.webapp flickr: flickr.webapp gollum wikipedia browser in english:gollum_en.webapp google notebook: gnote.webapp google page creator: google_pagecreator.webapp google reader + gtalk : prism-bundle-google-reader-with-...
...not the cleanest, but it got all my plugins at once) istylr: istylr.webapp online web design tool (full win installer bundled with prism is available here - thanks to lars eric for his nsis script) meebo: meebo.webapp miro guide: miroguide.webapp motor0: motor0.webapp useful webapp on maintenance and fuel consumptions managment pandora: pandora@prism.app.webapp internet
radio that only plays music you like.
MenuButtons - Archive of obsolete content
for instance, in the following example, pressing the 'view' button will open a menu which allows the user to select from a set of
radio menuitems.
... <button type="menu" label="view"> <menupopup> <menuitem label="icons" type="
radio" name="view"/> <menuitem label="list" type="
radio" name="view"/> <menuitem label="details" type="
radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected.
Complete - Archive of obsolete content
if you delay releasing a new xpi, you risk annoying users who cannot upg
rade until you do.
...it is normally uncompressed, t
rading off some disk space for speed.
Creating a Skin - Archive of obsolete content
tab:first-child { -moz-border-
radius: 4px 0px 0px 0px; } tab:last-child { -moz-border-
radius: 0px 4px 0px 0px; } tab[selected="true"] { color: #000066; font-weight: bold; text-decoration: underline; } two rules change the normal tab appearance, the first sets the rounding on the first tab and the second sets the rounding on the last tab.
... used here is a special mozilla style rule, -moz-border-
radius, that creates rounded border corners.
Creating a Wizard - Archive of obsolete content
<label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a best friend"/> </menupopup> </menulist> </wizardpage> <wizardpage description="dog details"> <label value="provide additional details about the dog you would like:"/> <
radiogroup> <caption label="size"/> <
radio value="small" label="small"/> <
radio value="large" label="large"/> </
radiogroup> <
radiogroup> <caption label="gender"/> <
radio value="male" label="male"/> <
radio value="female" label="female"/> </
radiogroup> </wizardpage> </wizard> this wizard has two pages, one that has a drop-down menu and the other wi...
...th a set of
radio buttons.
XUL Reference - Archive of obsolete content
g dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset
radio
radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mo...
...gheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter
radio
radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrol...
window - Archive of obsolete content
--> <window id="rootwnd" title="register online!" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <hbox> <image src="application_form.png"/> <description>register online!</description> </hbox> <groupbox align="start"> <caption label="your information"/> <
radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="your-lname" value="enter last name:"/> <textbox id="your-lname" value="hernandez"/> </hbox> <hbox> <button oncommand="alert('save!'...
...)"> <description>save</description> </button> </hbox> </vbox> </
radiogroup> </groupbox> </vbox> </window> attributes accelerated type: booleanset this attribute to true to allow hardware layer managers to accelerate the window.
Create Your Own Firefox Background Theme - Archive of obsolete content
image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and g
radients work best; highly detailed images will compete with the browser ui.
... image requirements dimensions should be 3000px wide × 100px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and g
radients work best; highly detailed images will compete with the browser ui.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
upg
rading the example application to include database access requires just a few lines of code added to the formprocessor method.
...advances such as ajax and running ajax on the server side with the jaxer server boosted by today's faster javascript engines and
radically faster ones like tracemonkey to come from mozilla, sets the stage for significant use of server-side javascript now.
XForms Select1 Element - Archive of obsolete content
representations the xforms select1 element can be represented by the following widgets for the specified appearance attribute values: combobox - default representation (xhtml/xul) listbox - used when appearance = 'compact' (xhtml/xul)
radio group - used when appearance = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul).
...loses focus), otherwise it is updated upon item selection
radio group the select is represented as group of
radios (xhtml/xul).
Archived open Web documentation - Archive of obsolete content
server-side javascript here's a
radical idea: use one language to write entire web apps -- the same language which billions of web pages already use, every day.
...if you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upg
rade: stopiteration the stopiteration object was used to tell the end of the iteration in the legacy iterator protocol.
The Business Benefits of Web Standards - Archive of obsolete content
web standards gives us tools, and methodologies for dealing with this pa
radox and making the wider contribution of making our content universally accessible to people in different social, medical and economic circumstances.
...furthermore, 4.x browsers are known to have security issues, so their users should be encouraged to upg
rade.
Web Standards - Archive of obsolete content
sites developed along these lines will continue to function correctly as t
raditional desktop browsers evolve, and as new internet devices come to market.
... using web standards in your web pages this article provides an overview of the process for upg
rading the content of your web pages to conform to the w3c web standards.
bootstrap.js - Extensions
function startup(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// app_startup /// addon_enable /// addon_install /// addon_upg
rade /// addon_downg
rade } function shutdown(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// app_shutdown /// addon_disable /// addon_uninstall /// addon_upg
rade /// ...
...addon_downg
rade } function install(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// addon_install /// addon_upg
rade /// addon_downg
rade } function uninstall(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// addon_uninstall /// addon_upg
rade /// addon_downg
rade } ...
RIL - MDN Web Docs Glossary: Definitions of Web-related terms
ril (
radio interface layer) is a mobile operating system component which communicates between the device's software and the device's phone,
radio, or modem hardware.
... learn more general knowledge
radio interface layer on wikipedia technical reference firefox os architecture: the userspace process architecture ...
Example 2 - Learn web development
{ max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-
radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-g
radient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-g
radient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; ...
... vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-
radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-
radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .optio...
Example 3 - Learn web development
{ max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-
radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-g
radient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-g
radient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; ...
... vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-
radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-
radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .optio...
Example 4 - Learn web development
{ max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-
radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-g
radient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-g
radient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; ...
... vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-
radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-
radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .optio...
Example 5 - Learn web development
{ max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-
radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-g
radient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-g
radient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; ...
... vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-
radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-
radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .optio...
Example - Learn web development
a payment form html content <form method="post"> <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> <section> <h2>contact information</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <input type="
radio" id="title_1" name="title" value="a"> ace </label> </li> <li> <label for="title_2"> <input type="
radio" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="
radio" id="title_3" name="title" value="q"> queen </l...
...y</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-
radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=
radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { ...
Your first form - Learn web development
the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or
radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.
...it should look like so: <style> </style> inside the style tags, add the following css: form { /* center the form on the page */ margin: 0 auto; width: 400px; /* form outline */ padding: 1em; border: 1px solid #ccc; border-
radius: 1em; } ul { list-style: none; padding: 0; margin: 0; } form li + li { margin-top: 1em; } label { /* uniform size & alignment */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size...
Index - Learn web development
51 cooperative asynchronous javascript: timeouts and intervals animation, beginner, codingscripting, guide, intervals, javascript, loops, asynchronous, requestanimationframe, setinterval, settimeout, timeouts this tutorial looks at the t
raditional methods javascript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g.
...as we learned in the critical rendering path document, linking css with a t
radional link tag with rel="stylesheet" is synchronous and blocks rendering.
General asynchronous programming concepts - Learn web development
function expensiveoperation() { for(let i = 0; i < 1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degto
rad(0), degto
rad(360), false); ctx.fill() } } fillbtn.addeventlistener('click', expensiveoperation); alertbtn.addeventlistener('click', () => alert('you clicked me!') ); if you click the first button and then quickly click the second one, you'll see that the alert does not appear until the circles have finished being rendered.
...programming languages that can support multiple threads can use multiple cores to complete multiple tasks simultaneously: thread 1: task a --> task b thread 2: task c --> task d javascript is single-threaded javascript is t
raditionally single-threaded.
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
previous overview: asynchronous next this tutorial looks at the t
raditional methods javascript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g.
... you'll want to include a leading zero on your display values if the amount is less than 10, so it looks more like a t
raditional clock/watch.
Function return values - Learn web development
on draw() { ctx.clearrect(0, 0, width, height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } inside each loop iteration, three calls are made to the random() function, to generate a random value for the current circle's x-coordinate, y-coordinate, and
radius, respectively.
...or the circumference of a circle with a given
radius?
Handling text — strings in JavaScript - Learn web development
so, taking a simple example: let song = 'fight the youth'; would be turned into a template literal like so: song = `fight the youth`; if we want to concatenate strings, or include expression results inside them, t
raditional strings can be fiddly to write: let score = 9; let highestscore = 10; let output = 'i like the song "' + song + '".
... another point to note is that if you want to split a t
raditional string over multiple lines, you need to include a newline character, \n: output = 'i like the song "' + song + '".\ni gave it a score of ' + (score/highestscore * 100) + '%.'; template literals respect the line breaks in the source code, so newline characters are no longer needed.
Working with JSON - Learn web development
this allows you to construct a data hierarchy, like so: { "squadname": "super hero squad", "hometown": "metro city", "formed": 2016, "secretbase": "super tower", "active": true, "members": [ { "name": "molecule man", "age": 29, "secretidentity": "dan jukes", "powers": [ "
radiation resistance", "turning tiny", "
radiation blast" ] }, { "name": "madame uppercut", "age": 39, "secretidentity": "jane wilson", "powers": [ "million tonne punch", "damage resistance", "superhuman reflexes" ] }, { "name": "eternal flame", "age": 1000000, "secretidentity": "unknown", ...
...the reason we said "mostly right" is that an array is also valid json, for example: [ { "name": "molecule man", "age": 29, "secretidentity": "dan jukes", "powers": [ "
radiation resistance", "turning tiny", "
radiation blast" ] }, { "name": "madame uppercut", "age": 39, "secretidentity": "jane wilson", "powers": [ "million tonne punch", "damage resistance", "superhuman reflexes" ] } ] the above is perfectly valid json.
Aprender y obtener ayuda - Learn web development
different learning methods it is interesting to consider that there are two main ways in which your brain learns things — focused and diffuse learning: focused learning is what you might more t
raditionally associate with academic subjects.
... run code after several promises are fulfilled play a video stream from a webcam in the browser create a linear g
radient in the background of your element error messages if you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term.
Web performance resources - Learn web development
as we learned in the critical rendering path document, linking css with a t
radional link tag with rel="stylesheet" is synchronous and blocks rendering.
...the following snippet includes an onload attribute, requiring javascript, so it is important to include a noscript tag with a t
raditional fallback.
Client-Server Overview - Learn web development
n about the request, in the same way that an html head contains useful information about an html document (but not the actual content itself, which is in the body): get https://developer.mozilla.org/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upg
rade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 co...
... post https://developer.mozilla.org/profiles/hamishwillee/edit http/1.1 host: developer.mozilla.org connection: keep-alive content-length: 432 pragma: no-cache cache-control: no-cache origin: https://developer.mozilla.org upg
rade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 content-type: application/x-www-form-urlencoded accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/profiles/hamishwillee/edit accept-encoding: gzip, deflate, br accept-language: en-us...
Styling Vue components with CSS - Learn web development
olor: 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...
...: block; margin-bottom: 5px; } .custom-checkbox > .checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; box-sizing: border-box; width: 100%; height: 40px; height: 2.5rem; margin-top: 0; padding: 5px; border: 2px solid #0b0c0c; border-
radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-checkbox > input:focus { outline: 3px dashed #fd0; outline-offset: 0; box-shadow: inset 0 0 0 2px; } .custom-checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-he...
Command line crash course - Learn web development
windows as with some other programming tools, using the terminal (or command line) on windows has t
raditionally not been as simple or easy as on other operating systems.
... windows has t
raditionally had its own terminal-like program called cmd (“the command prompt”) for a long time, but this definitely doesn’t have parity with unix commands, and is equivalent to the old-style windows dos prompt.
Accessibility/LiveRegionDevGuide
as a result, care must be taken in an at-spi based application to minimize performance deg
radation by only acting on events that are truly live regions.
...the event should be filtered out as early as possible to prevent performance deg
radation.
Accessible Toolkit Checklist
s progress bars msaa support including accessible name, value, name and value change events grouped navigation widgets menus arrow keys, enter, escape alt alone enters main menu after leaving menus, focus is restored to where it was modified and unmodified mnemonics msaa support (including focus events, menu start and end events,
radio and checkbox menu items) static text and group boxes msaa support
radio groups only the selected
radio button is in the tab order the other
radio buttons can be selected and focused with up/down arrow.
... the focused
radio button is always selected, and vice versa keyboard and msaa support must still work correctly when
radio button labels have textfields, combo boxes or other controls as part of their prompts.
What to do and what not to do in Bugzilla
getting/upg
rading bugzilla privileges if you want to get bugzilla privileges (as described below), please see this page.
...when performing bug reassignments, keep the following things in mind: always remember to check the reassign to default owner and qa contact
radio button under the comment textbox.
Command line options
user profile -allow-downg
rade firefox 67's downg
rade protection prevents accidentally starting firefox in a profile running a later version of firefox.
...adding this option bypasses downg
rade protection.
Creating a Firefox sidebar
a sample extension to add a web panel is available as a starter.obsolete since gecko 57 if you'd like to have a deeper integration with the browser to offer more complex features, a t
raditional overlay extension can be an option.
...that means the ability to add a t
raditional sidebar panel is no longer available from web content.
Updating NSPR or NSS in mozilla-central
(because some developers might not be aware that nspr/nss are separately maintained and released, the mozilla hg server rejects accidental changes/forking, if the required keywords are missing in the commit comment.) if nspr or nss must be upg
raded to a new static tag, follow this procedure: before starting, make sure your local repository is updated to mozilla-central tip and that there are no local changes: $ hg status -mard pull the new sources $ python client.py update_nspr nspr_tag_name or $ python client.py update_nss nss_tag_name if you update a branch older than mozilla 17 (without the change from bug 782784), y...
... in your commit message, include the required keywords, upg
rade_nspr_release and/or upg
rade_nss_release.
The Firefox codebase: CSS Guidelines
formatting spacing & indentation 2 spaces indentation is preferred add a space after each comma, except within color functions: linear-g
radient(to bottom, black 1px, rgba(255,255,255,0.2) 1px) always add a space before !important.
... the rtl-aware equivalents of border-{top/bottom}-{left/right}-
radius are border-{start/end}-{start/end}-
radius when there is no special rtl-aware property available, use the pseudo :-moz-locale-dir(ltr|rtl) (for xul files) or :dir(ltr|rtl) (for html files).
Eclipse CDT
upg
rading gdb on mac the ancient, barely maintained apple fork of gdb that comes with xcode on mac is really horrible.
...without an object directory, the indexer would find that a lot of header files are missing when processing the source files, which would significantly deg
rade its ability to index the source and provide good code assistance.
Interface Compatibility
javascript/xul interfaces t
raditional extensions written using xul overlays and xpcom have access to the full power of the mozilla platform.
... binary interfaces t
raditionally, mozilla has maintained a set of xpcom interfaces and functions with the @status frozen marking.
Site Identity Button
thing you do not expect (for example, an orange warning triangle when you expect a green padlock) you can find out the cause of the problem by looking in the web console in the firefox developer tools: ensure your web console is displaying messages in the 'security' category force-refresh the page on your site that is causing problems watch for any security messages that may appear a downg
raded security ui will be due to one of these three problems: mixed content - while your page has been served over tls, but subresources loaded for your page have not.
... insecure renegotation - older versions of tls had a flaw in the basic design; if your server uses an affected version, the security ui will be downg
raded but no web console message will be displayed.
HTMLIFrameElement.sendTouchEvent()
rx an array of numbers representing the x
radius of each touch point in css pixels.
... ry an array of numbers representing the y
radius of each touch point in css pixels.
AddonManager
pending_upg
rade this add-on will be upg
raded after the application restarts.
... perm_can_upg
rade this add-on can be upg
raded.
Code Samples
"yes!" : "no"); alert("let's pretend i did, it's available from the url " + addon.getresourceuri("file.txt").spec); }); uninstall an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("you
raddon@you
raddon.com", function(addon) { addon.uninstall(); }); disable an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("you
raddon@you
raddon.com", function(addon) { if (addon.isactive) addon.userdisabled = addon.isactive; }); listening for add-on uninstall this example sets a variable beinguninstalled that you can check when you get a...
... var beinguninstalled; let listener = { onuninstalling: function(addon) { if (addon.id == "you
raddon@you
raddon.com") { beinguninstalled = true; } }, onoperationcancelled: function(addon) { if (addon.id == "you
raddon@you
raddon.com") { beinguninstalled = (addon.pendingoperations & addonmanager.pending_uninstall) != 0; } } } try { components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.addaddonlistener(listener); } catch (ex) {} ...
PR FreeAddrInfo
destroys the p
raddrinfo structure returned by pr_getaddrinfobyname.
... syntax #include <prnetdb.h> void pr_enumerateaddrinfo(p
raddrinfo *addrinfo); parameters the function has the following parameters: addrinfo a pointer to a p
raddrinfo structure returned by a successful call to pr_getaddrinfobyname.
PR GetAddrInfoByName
syntax #include <prnetdb.h> p
raddrinfo *pr getaddrinfobyname( const char *hostname, pruint16 af, printn flags); parameters the function has the following parameters: hostname the character string defining the host name of interest.
...include pr_ai_nocanonname to suppress the determination of the canonical name corresponding to hostname returns the function returns one of the following values: if successful, a pointer to the opaque p
raddrinfo structure containing the results of the host lookup.
gtstd.html
upg
raded documentation may be found in the current nss reference getting started with ssl chapter 2 getting started with ssl this chapter describes how to set up your environment, including certificate and key databases.
...your ssl clients), or use professional g
rade ca software, such as red hat's dogtag certificate system, to set up and operate your own ca and issue your own certificates.
Download Rhino
to get the source, use the command git clone https://github.com/mozilla/rhino.git rhino uses g
radle as its build system.
... running the ./g
radlew tasks command at the top directory of the rhino distribution will print the list of available build targets.
Exact Stack Rooting
this t
raditional usage is ambiguous and this guide will use live or alive instead of rooted to avoid confusion.
...the performance t
radeoffs that these techniques make, however, are quite different.
JSAPI User Guide
forprincipals js_compileucscriptforprincipals js_compilefunction js_compileucfunction js_compilefunctionforprincipals js_compileucfunctionforprincipals js_evaluatescript js_evaluateucscript js_evaluatescriptforprincipals js_evaluateucscriptforprincipals jschar-based functions work exactly like their char-based namesakes, except that where t
raditional functions take a char * argument, the unicode versions take a jschar * argument, usually with a separate argument specifying the length of the string in jschars.
... t
rade-offs.
Signing Mozilla apps for Mac OS X
click "create a certificate" at the top right corner select the "developer id"
radio button and uncheck the "developer id installer certificate" box.
...if the "developer id"
radio button is greyed out you probably have a group account.
Gecko Roles
role_
radiobutton represents an option button, also called a
radio button.
... role_
radio_menu_item a
radio button that is a menu item.
An Overview of XPCOM
but xpcom also provides several tools and libraries that enable the loading and manipulation of these components, services that help the developer write modular cross-platform code, and versioning support, so that components can be replaced or upg
raded without breaking or having to recreate the application.
...e inheriting class may override the default behaviors of the base class without having to copy all of that class's code, in effect creating a more specific class, as in the following example: simple class inheritance class shape { private: int m_x; int m_y; public: virtual void draw() = 0; shape(); virtual ~shape(); }; class circle : public shape { private: int m_
radius; public: virtual draw(); circle(int x, int y, int
radius); virtual ~circle(); }; circle is a derived class of shape.
Mozilla internal string guide
these methods return a buffer allocated using xpcom's allocator instead of the t
raditional allocator (malloc, etc.).
... thanks to david baron for actual docs, peter annema for lots of direction myk melez for some more docs david b
radley for a diagram revised by darin fisher for mozilla 1.7 revised by jungshik shin to clarify character encoding issues ...
NS_ConvertASCIItoUTF16
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount setcharat prbool setcharat(prun...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
NS ConvertASCIItoUTF16 external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
NS_ConvertUTF16toUTF8
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount setcharat prbool setchara...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
NS ConvertUTF16toUTF8 external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
NS_ConvertUTF8toUTF16
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount setcharat prbool setcharat(prun...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
NS ConvertUTF8toUTF16 external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
NS_LossyConvertUTF16toASCII
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount setcharat prbool setchara...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
NS LossyConvertUTF16toASCII external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
PromiseFlatCString (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
PromiseFlatString (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsACString (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsAString (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsAdoptingCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount setcharat prbool setchara...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsAdoptingString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount setcharat prbool setcharat(prun...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsAutoString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount setcharat prbool setcharat(prun...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsAutoString (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsCAutoString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acou...
...withconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void append...
nsCAutoString (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount setcharat prbool setchara...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsCStringContainer (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult aerrorcode pruint32 a
radix ...
nsCString external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsDependentCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount setcharat prbool setchara...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsDependentCString external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsDependentCSubstring external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsDependentString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount setcharat prbool setcharat(prun...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsDependentString external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsDependentSubstring external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult aerrorcode pruint32 a
radix ...
nsFixedCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount setcharat prbool setchara...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsFixedString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount setcharat prbool setcharat(prun...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsLiteralCString (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsLiteralString (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsPromiseFlatCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount setcharat prbool setchara...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsPromiseFlatString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount setcharat prbool setcharat(prun...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount setcharat prbool setcharat(prun...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsStringContainer (External)
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsString external
parameters int aint print32 a
radix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer.
...@param a
radix must be 10 or 16 parameters nsresult* aerrorcode pruint32 a
radix ...
nsXPIDLCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& aresult pruint32 acount setcharat prbool setchara...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
nsXPIDLString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 a
radix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& aresult pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& aresult pruint32 acount setcharat prbool setcharat(prun...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 a
radix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 a
radix void appendint(print64, print32) - source parameters print64 ainteger print32 a
radix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...
IAccessible2
used for tree items, list items, tab panel labels,
radio buttons, and so on.
...another use of this value by an at is to identify when a grouping object has changed, for example when moving from a
radio button in one group to a
radio button in a different group.
nsIDOMWindowUtils
arxs an array of touch x
radii in css pixels for each touch to be sent to the window.
... arys an array of touch y
radii in css pixels for each touch to be sent to the window.
nsIHttpChannel
void setresponseheader(in acstring header, in acstring value, in boolean merge); void visitoriginalresponseheaders(in nsihttpheadervisitor avisitor); void visitrequestheaders(in nsihttpheadervisitor avisitor); void visitresponseheaders(in nsihttpheadervisitor avisitor); constants constant description referrer_policy_no_referrer_when_downg
rade default; indicates not to pass on the referrer when downg
rading from https to http referrer_policy_no_referrer indicates no referrer will be sent referrer_policy_origin only send the origin of the referring uri referrer_policy_origin_when_xorigin same as the default; only send the origin of the referring uri for cross-origin requests referrer_polic...
...y_unsafe_url always send the referrer, even when downg
rading from https to http attributes attribute type description allowpipelining boolean this attribute is a hint to the channel to indicate whether or not the underlying http transaction should be allowed to be pipelined with other transactions.
XPCOM Interface Reference
adernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpupg
radelistenernsiidnservicensiiframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputstreamcallbacknsiinstalllocationnsiinterfacerequestornsijscidnsijsidnsijsiidnsijsonnsijetpacknsijetpackservicensijumplistbuildernsijumplistitemnsilivemarkservicensiloadgroupnsilocalfilensilocalfilemacnsilocalensilocaleservice...
...mptnsiprivatebrowsingservicensiprocessnsiprocess2nsiprocessscriptloadernsiprofilensiprofilelocknsiprofileunlockernsiprogramminglanguagensiprogresseventsinknsipromptnsipromptservicensipropertiesnsipropertynsipropertybagnsipropertybag2nsipropertyelementnsiprotocolhandlernsiprotocolproxycallbacknsiprotocolproxyfilternsiprotocolproxyservicensiproxyinfonsipushmessagensipushservicensipushsubscriptionnsi
radiointerfacelayernsirandomgeneratornsirequestnsirequestobservernsiresumablechannelnsirunnablensishentrynsishistorynsishistorylistenernsisockssocketinfonsisslerrorlistenernsisslsocketcontrolnsiscreennsiscreenmanagernsiscripterrornsiscripterror2nsiscriptableionsiscriptableinputstreamnsiscriptableunescapehtmlnsiscriptableunicodeconverternsiscrollablensisearchenginensisearchsubmissionnsisecuritychecked...
XPCOM
this article will show you how to use the available interfaces in several mozilla products.aggregating the in-memory datasourcealready_addrefedalready_addrefed in association with nscomptr allows you to assign in a pointer without addrefing it.binary compatibilityif mozilla decides to upg
rade to a compiler that does not have the same abi as the current version, any built component may fail.
... it is a possiblity that is introduced when upg
rading to a new compiler without recompiling everything.
ctypes.open
if the native file is located at chrome://you
raddon/content/mysubfolder/mycfunctionsforunix.so then it is converted to a file uri like this: components.utils.import("resource://gre/modules/services.jsm"); var cr = components.classes['@mozilla.org/chrome/chrome-registry;1'].getservice(components.interfaces.nsichromeregistry); var chromeuri_mylib = services.io.newuri('chrome://you
raddon/content/mysubfolder/mycfunctionsforunix.so', 'utf-8', null...
...); var localfile_mylib = cr.convertchromeurl(chromeuri_mylib); var jarpath_mylib = localfile_mylib.spec; // "jar:file:///c:/users/vayeate/appdata/roaming/mozilla/firefox/profiles/aecgxse.unnamed%20profile%201/extensions/you
raddon@jetpack.xpi!/mysubfolder/mycfunctionsforunix.so" var filepath_mylib = localfilemylib.path; // "file:///c:/users/vayeate/appdata/roaming/mozilla/firefox/profiles/aecgxse.unnamed%20profile%201/extensions/you
raddon@jetpack.xpi!/mysubfolder/mycfunctionsforunix.so" if your add-on is a bootstrap add-on, then you don't need to use this method to convert a chrome:// path; instead, on startup procedure of the bootstrap add-on obtain the file and/or jar path from installpath from the adata parameter.
Console messages - Firefox Developer Tools
for example, the following video shows the results when filtering on two simple regular expressions: /(cool|
rad)/ and /(cool)/.
...for example, -/(cool|
rad)/ shows only items that do not match the expression /(cool|
rad)/.
AudioParam.value - Web APIs
if any g
radiated or ramped value changing methods have been called and the current time is within the time range over which the g
raduated change should occur, the value is updated based on the appropriate algorithm.
... these ramped or g
radiated value-changing methods include linearramptovalueattime(), settargetattime(), and setvaluecurveattime().
AudioParam - Web APIs
audioparam.linearramptovalueattime() schedules a g
radual linear change in the value of the audioparam.
... audioparam.exponentialramptovalueattime() schedules a g
radual exponential change in the value of the audioparam.
Background Tasks API - Web APIs
css content body { font-family: "open sans", "lucida grande", "arial", sans-serif; font-size: 16px; } .logbox { margin-top: 16px; width: 400px; height:500px; border-
radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; } .logheader { margin: 0; padding: 0 6px 4px; height: 22px; background-color: lightblue; border-bottom: 1px solid black; border-
radius: 6px 6px 0 0; } #log { font: 12px "courier", monospace; padding: 6px; overflow: auto; overflow-y: scroll; width: 388px; height: 460px; } .container { width: 400px; ...
...padding: 6px; border-
radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; display: block; overflow: auto; } .label { display: inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; margin-top: 0; color: white; background-color: darkgreen; } #progress { width: 100%; padding-top: 6px; } javascript content now that the document structure is defined, construct the javascript code that will do the work.
BiquadFilterNode() - Web APIs
please note that for this filter type, this value is not a t
raditional q, but is a resonance value in decibels.
...please note that for this filter type, this value is not a t
raditional q, but is a resonance value in decibels.
BiquadFilterNode.getFrequencyResponse() - Web APIs
phaseresponseoutput a float32array to receive the computed phase response values in
radians for each frequency value in the input frequencyarray.
... function calcfrequencyresponse() { biquadfilter.getfrequencyresponse(myfrequencyarray,magresponseoutput,phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + '
radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification.
CSS.registerProperty() - Web APIs
we can now use that property to transition a g
radient on hover or focus.
... .registered { --my-color: #c0ffee; background-image: linear-g
radient(to right, #fff, var(--my-color)); transition: --my-color 1s ease-in-out; } .registered:hover, .registered:focus { --my-color: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-g
radient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">background not registered</button> specifications specificat...
Using the CSS Painting API - Web APIs
by positioning some decorative generated content with ::before, or including background: linear-g
radient(yellow, yellow) 0 15px / 200px 20px no-repeat; what makes the css painting api so interesting and powerful is that you can create complex images, passing variables, that automatically resize.
...it is doable, but you would have to declare a different, fairly complex linear g
radient for each different color you wanted to create.
Using the CSS Typed Object Model - Web APIs
olor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 16%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-
radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.95); } let's add the class to a button (a button which does nothing).
...had the background image been a g
radient or multiple background images, .get('background-image') would have returned a cssstylevalue.
Basic animations - Web APIs
} } .keypress>div { border: dashed 3px #fff; height: 48%; width: 48%; display: flex; align-content: center; justify-content: center; align-self: center; align-items: center; font-size: -webkit-xxx-large; font-weight: 900; color: #fff; transition: .5s; opacity: .1; border-
radius: 7px } .keypress { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>div:hover { opacity: 1 } .touch { background: #8bc34a } .off { backgr...
...s.w }, t)), this.sn.unshift(i), -1 != e) return console.log(e), fa[e].renew(), void (document.getelementbyid("score").innertext = number(document.getelementbyid("score").innertext) + 1); this.sn.pop(), console.log(6) } this.sn.foreach((t, e, i) => { if (0 == e || i.length - 1 == e) { var n = c.createlinearg
radient(t.x, t.y, t.x + this.w, t.y + this.h); i.length - 1 == e ?
Compositing example - Web APIs
h(); ctx.fillstyle = "#f00"; ctx.fillrect(0,0,30,30) ctx.fill(); }; var colorsphere = function(element) { var ctx = canvas1.getcontext("2d"); var width = 360; var halfwidth = width / 2; var rotate = (1 / 360) * math.pi * 2; // per degree var offset = 0; // scrollbar offset var oleft = -20; var otop = -20; for (var n = 0; n <= 359; n ++) { var g
radient = ctx.createlinearg
radient(oleft + halfwidth, otop, oleft + halfwidth, otop + halfwidth); var color = color.hsv_rgb({ h: (n + 300) % 360, s: 100, v: 100 }); g
radient.addcolorstop(0, "rgba(0,0,0,0)"); g
radient.addcolorstop(0.7, "rgba("+color.r+","+color.g+","+color.b+",1)"); g
radient.addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.mo...
...veto(oleft + halfwidth, otop); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillstyle = g
radient; ctx.fill(); ctx.translate(oleft + halfwidth, otop + halfwidth); ctx.rotate(rotate); ctx.translate(-(oleft + halfwidth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,30,30) ctx.fill(); return ctx.canvas; }; // hsv (1978) = h: hue / s: saturation / v: value color = {}; color.hsv_rgb = function (o) { var h = o.h / 360, s = o.s / 100, v = o.v / 100, r, g, b; var a, b, c, d; if (s == 0) { r = g = b = math.round(v * 255); } else { if (h >= 1) h = 0; h = 6 * h; d = ...
Compositing and clipping - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); ctx.translate(75, 75); // create a circular clipping path ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw background var ling
rad = ctx.createlinearg
radient(0, -75, 0, 75); ling
rad.addcolorstop(0, '#232256'); ling
rad.addcolorstop(1, '#143778'); ctx.fillstyle = ling
rad; ctx.fillrect(-75, -75, 150, 150); // draw stars for (var j = 1; j < 50; j++) { ctx.save(); ctx.fillstyle = '#fff'; ctx.translate(75 - math.floor(math.random() * 150), 75 - math.floor(math.random() * 150)); draws...
...you can see this clearly in the linear g
radient that's drawn next.
DocumentOrShadowRoot.activeElement - Web APIs
other times the focused element might be a <select> element (menu) or an <input> element, of type "button", "checkbox", or "
radio".
... typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate one (that is, to press a button or toggle a
radio button).
Document Object Model (DOM) - Web APIs
svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svgg
radientelement svggraphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglinearg
radientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshg
radientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpo...
...lygonelement svg
radialg
radientelement svgrectelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstyleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtrefelement svgtspanelement svguseelement svgunknownelement svgviewelement svgvkernelement svg data type interfaces here are the dom apis for data types used in the definitions of svg properties and attributes.
EXT_shader_texture_lod - Web APIs
glsl built-in functions the following new functions can be used in glsl shader code, if this extension is enabled: vec4 texture2dlodext(sampler2d sampler, vec2 coord, float lod) vec4 texture2dprojlodext(sampler2d sampler, vec3 coord, float lod) vec4 texture2dprojlodext(sampler2d sampler, vec4 coord, float lod) vec4 texturecubelodext(samplercube sampler, vec3 coord, float lod) vec4 texture2dg
radext(sampler2d sampler, vec2 p, vec2 dpdx, vec2 dpdy) vec4 texture2dprojg
radext(sampler2d sampler, vec3 p, vec2 dpdx, vec2 dpdy) vec4 texture2dprojg
radext(sampler2d sampler, vec4 p, vec2 dpdx, vec2 dpdy) vec4 texturecubeg
radext(samplercube sampler, vec3 p, vec3 dpdx, vec3 dpdy) examples enabling the extensions: gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when ...
...wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dg
radext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status comment ext_shader_texture_lodthe definition of 'ext_shader_texture_lod' in that specification.
HTMLFormControlsCollection.namedItem() - Web APIs
the htmlformcontrolscollection.nameditem() method returns the
radionodelist or the element in the collection whose name or id match the specified name, or null if no node matches.
... syntax var item = collection.nameditem(str); var item = collection[str]; parameters str is a domstring return value item is a
radionodelist , element, or null.
HTMLScriptElement.referrerPolicy - Web APIs
no-referrer-when-downg
rade (default) this is the user agent's default behavior if no policy is specified.
...if a higher-level policy is not available, the empty string is treated as being equivalent to no-referrer-when-downg
rade.
The HTML DOM API - Web APIs
formdataevent htmlformcontrolscollection htmloptionscollection
radionodelist validitystate canvas and image interfaces these interfaces represent objects used by the canvas api as well as the <img> element and <picture> elements.
... canvasg
radient canvaspattern canvasrenderingcontext2d imagebitmap imagebitmaprenderingcontext imagedata offscreencanvas offscreencanvasrenderingcontext2d path2d textmetrics media interfaces the media interfaces provide html access to the contents of the media elements: <audio> and <video>.
Ajax navigation example - Web APIs
precondition failed", 413: "request entity too large", 414: "request-uri too long", 415: "unsupported media type", 416: "requested range not satisfiable", 417: "expectation failed", 422: "unprocessable entity", 423: "locked", 424: "failed dependency", 425: "unassigned", 426: "upg
rade required", 427: "unassigned", 428: "precondition required", 429: "too many requests", 430: "unassigned", 431: "request header fields too large", 500: "internal server error", 501: "not implemented", 502: "bad gateway", 503: "service unavailable", 504: "gateway timeout", ...
...7dmikrxqlfuydezigbmrvsaqhwctxxf7weyb4ag1xjihkmzsiukkhiaifkecqoaaaasaaaaabaaeaaaazyiujijk8pbyjdmlfyvbovjha70gu7xsujhmktwhpakzlo9hmaokwjz7rf8aypddzkpzbqfvwqaifkecqoaaaasaaaaabaaeaaaazmiumilk8oyhphsnfzfhyumcyuhdaqxridhhbgqrokw0r8dyljd8z0fmdgsgo/iphi5taaaifkecqoaaaasaaaaabaaeaaaaziiunink0rnzbtwgpnmgqwmdsngxgjuliweur5owuipz8paeame6twfwyysgo/ipfksaaah+qqjcgaaacwaaaaaeaaqaaadmwi6imkqorfjdoe82p4wgccc4ceuq
radylesojembgsuc2g7sdx3lqgbmlajibufbslkaaah+qqjcgaaacwaaaaaeaaqaaadmgi63p7wcrhznfvdmghu2nfwlwci3wgc3tswhufgxtaukgcbtgenbmjaejsxgmlwzpeaach5bakkaaaalaaaaaaqabaaaamyclrc/jdksatlqtsckdcecajdii7hcq4emtcpyrcuubjcyrghvtqlaib1yhicnlsrkaaaowaaaaaaaaaaaa=="; ocover.appendchild(oloadingimg); oloadingbox.appendchild(ocover); onpopstate = function (oevent) { bupdateurl = false; opage...
IDBDatabase: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex...
...e.log('transaction aborted'); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex...
IDBDatabase: close event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples this example opens a database and listens for the close event: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex...
...ateindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex...
IDBDatabase: error event - Web APIs
celable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex...
...ransaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex...
IDBDatabase.onabort - Web APIs
}; example this example shows an idbopendbrequest.onupg
radeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
... dbopenrequest.onupg
radeneeded = function(event) { var db = event.target.result; db.onerror = function() { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function() { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("n...
IDBDatabase.onerror - Web APIs
} example this example shows an idbopendbrequest.onupg
radeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
... dbopenrequest.onupg
radeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex(...
IDBDatabase - Web APIs
example in the following code snippet, we open a database asynchronously (idbfactory), handle success and error cases, and create a new object store in the case that an upg
rade is needed (idbdatabase).
...openrequest.result; // run the displaydata() function to populate the task // list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupg
radeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database using // idbdatabase.createobjectstore var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.cr...
IDBIndex.name - Web APIs
invalidstateerror the index, or its object store, has been deleted; or the current transaction is not an upg
rade transaction.
... you can only rename indexes during upg
rade transactions; that is, when the mode is "versionchange".
IDBOpenDBRequest: blocked event - Web APIs
bubbles no cancelable no interface idbversionchangeevent event handler property onblocked examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createin...
...// let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createin...
IDBRequest: error event - Web APIs
interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upg
radeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createinde...
...0, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createinde...
IDBRequest: success event - Web APIs
bubbles no cancelable no interface event event handler property onsuccess examples this example tries to open a database and listens for the success event using addeventlistener(): // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupg
radeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('mi...
...objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupg
radeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createin...
IDBTransaction: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createinde...
...saction(['todolist'], 'readwrite'); // add a listener for `abort` transaction.addeventlistener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createinde...
IDBTransaction: complete event - Web APIs
bubbles no cancelable no interface event event handler property oncomplete examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectst...
...log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createinde...
IDBTransaction: error event - Web APIs
celable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex...
...st objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupg
radeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex...
IDBVersionChangeEvent - Web APIs
the idbversionchangeevent interface of the indexeddb api indicates that the version of the database has changed, as the result of an idbopendbrequest.onupg
radeneeded event handler function.
...upon a version change (after an upg
radedneeded event), the success event will implement the idbversionchangeevent interface.
IIRFilterNode.getFrequencyResponse() - Web APIs
phaseresponseoutput a float32array to receive the computed phase response values in
radians for each frequency value in the input frequencyarray.
... function calcfrequencyresponse() { iirfilter.getfrequencyresponse(myfrequencyarray, magresponseoutput, phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + '
radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification.
Basic concepts - Web APIs
in a t
raditional relational data store, you would have a table that stores a collection of rows of data and columns of named types of data.
...this will start a versionchange transaction and fire an upg
radeneeded event.
MSGestureEvent - Web APIs
msgestureevent.rotation read only amount of rotation (in
radians) since the previous msgestureevent of the current gesture.
...expressed in
radians.
Pointer Lock API - Web APIs
var tracker = document.getelementbyid('tracker'); var animation; function updateposition(e) { x += e.movementx; y += e.movementy; if (x > canvas.width +
radius) { x = -
radius; } if (y > canvas.height +
radius) { y = -
radius; } if (x < -
radius) { x = canvas.width +
radius; } if (y < -
radius) { y = canvas.height +
radius; } tracker.textcontent = "x position: " + x + ", y position: " + y; if (!animation) { animation = requestanimationframe(function() { animation = null; canvasdraw(); }); } } the ...
...canvasdraw() function draws the ball in the current x and y positions: function canvasdraw() { ctx.fillstyle = "black"; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = "#f00"; ctx.beginpath(); ctx.arc(x, y,
radius, 0, degto
rad(360), true); ctx.fill(); } iframe limitations pointer lock can only lock one iframe at a time.
SVGAngle - Web APIs
svg_angletype_
rad an <angle> with a
rad unit.
... svg_angletype_g
rad an <angle> with a g
rad unit.
r - Web APIs
the r read-only property of the svgcircleelement interface reflects the r attribute of a <circle> element and by that defines the
radius of the circle.
... syntax var
radius = element.r; value an svganimatedlength representing the
radius of the circle.
SVGFEMorphologyElement - Web APIs
svgfemorphologyelement.
radiusx read only an svganimatednumber corresponding to the x component of the
radius attribute of the given element.
... svgfemorphologyelement.
radiusy read only an svganimatednumber corresponding to the y component of the
radius attribute of the given element.
Using Service Workers - Web APIs
service worker syntax is more complex than that of appcache, but the t
rade off is that you can use javascript to control your appcache-implied behaviors with a fine degree of granularity, allowing you to handle this problem and many more.
... let’s compare a t
raditional synchronous callback structure to its asynchronous promise equivalent.
Service Worker API - Web APIs
this ensures that any functional events (like fetchevent) are not dispatched to the serviceworker, until it upg
rades database schemas, and deletes outdated cache entries, etc.
... navigator.serviceworker returns a serviceworkercontainer object, which provides access to registration, removal, upg
rade, and communication with the serviceworker objects for the associated document.
Touch.rotationAngle - Web APIs
summary returns the rotation angle, in degrees, of the contact area ellipse defined by touch.
radiusx and touch.
radiusy.
... example the touch.
radiusx example includes an example of this property's usage.
Touch events - Web APIs
after that, we iterate over all the touch objects in the list, pushing them onto an array of active touchpoints and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4-pixel
radius circle will show up neatly.
... draft added
radiusx,
radiusy, rotationangle, force properties touch eventsthe definition of 'touch' in that specification.
VideoPlaybackQuality.corruptedVideoFrames - Web APIs
example this example determines the percentage of frames which have been corrupted, and if the value is greater than 5%, calls a funciton called downg
radevideo() that would be implemented to switch to a different video that might tax the network less.
... var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if (quality.corruptedvideoframes/quality.totalvideoframes > 0.05) { downg
radevideo(videoelem); } specifications specification status comment media playback qualitythe definition of 'videoplaybackquality: corruptedvideoframes' in that specification.
A basic 2D WebGL animation example - Web APIs
function animatescene() { gl.viewport(0, 0, glcanvas.width, glcanvas.height); gl.clearcolor(0.8, 0.9, 1.0, 1.0); gl.clear(gl.color_buffer_bit); let
radians = currentangle * math.pi / 180.0; currentrotation[0] = math.sin(
radians); currentrotation[1] = math.cos(
radians); gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector"); ...
... next, the current rotation vector is computed by converting the current rotation in degrees (currentangle) into
radians, then setting the first component of the rotation vector to the sine of that value and the second component to the cosine.
Matrix math for the web - Web APIs
// manually rotating a point about the origin without matrices let point = [10, 2]; // calculate the distance from the origin let distance = math.sqrt(point[0] * point[0] + point[1] * point[1]); // the equivalent of 60 degrees, in
radians let rotationin
radians = math.pi / 3; let transformedpoint = [ math.cos(rotationin
radians) * distance, math.sin(rotationin
radians) * distance ]; it is possible to encode these type of steps into a matrix, and do it for each of the x, y, and z dimensions.
... below is the representation of a rotation about the x axis: let sin = math.sin; let cos = math.cos; // note: there is no perspective in these transformations, so a rotation // at this point will only appear to only shrink the div let a = math.pi * 0.3; //rotation amount in
radians // rotate around z axis let rotatezmatrix = [ cos(a), -sin(a), 0, 0, sin(a), cos(a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; view on jsfiddle here are a set of functions that return rotation matrices for rotating around each of the three axes.
Using shaders to apply color in WebGL - Web APIs
by default, all other pixels' colors (and all its other attributes, including position) are computed using interpolation, automatically creating smooth g
radients.
... let's say we want to render a g
radient in which each corner of the square is a different color: red, blue, green, and white.
WebGL best practices - Web APIs
consider rendering to a smaller backbuffer size a common (and easy) way to t
rade off quality for speed is rendering into a smaller backbuffer, and upscaling the result.
... one common t
rade-off is to some lighting calculations per-vertex instead of per-fragment (pixel).
Writing WebSocket servers - Web APIs
the client will send a pretty standard http request with headers that looks like this (the http version must be 1.1 or greater, and the method must be get): get /chat http/1.1 host: example.com:8000 upg
rade: websocket connection: upg
rade sec-websocket-key: dghlihnhbxbszsbub25jzq== sec-websocket-version: 13 the client can solicit extensions and/or subprotocols here; see miscellaneous for details.
...that header looks something like the following (remember each header line ends with \r\n and put an extra \r\n after the last one to indicate the end of the header): http/1.1 101 switching protocols upg
rade: websocket connection: upg
rade sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo= additionally, the server can decide on extension/subprotocol requests here; see miscellaneous for details.
Writing a WebSocket server in Java - Web APIs
inputstream in = client.getinputstream(); outputstream out = client.getoutputstream(); scanner s = new scanner(in, "utf-8"); handshaking when a client connects to a server, it sends a get request to upg
rade the connection to a websocket from a simple http request.
... if (get.find()) { matcher match = pattern.compile("sec-websocket-key: (.*)").matcher(data); match.find(); byte[] response = ("http/1.1 101 switching protocols\r\n" + "connection: upg
rade\r\n" + "upg
rade: websocket\r\n" + "sec-websocket-accept: " + base64.getencoder().encodetostring(messagedigest.getinstance("sha-1").digest((match.group(1) + "258eafa5-e914-47da-95ca-c5ab0dc85b11").getbytes("utf-8"))) + "\r\n\r\n").getbytes("utf-8"); out.write(response, 0, response.length); decoding messages after a successful handshake, client can send messages to ...
Web Video Text Tracks Format (WebVTT) - Web APIs
within site css video::cue { background-image: linear-g
radient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear g
radient as their backgrounds, with a foreground color of "papayawhip".
...in this case, you insert your css rules into the file with each rule preceded by the string "style" all by itelf on a line of text, as shown below: webvtt style ::cue { background-image: linear-g
radient(to bottom, dimgray, lightgray); color: papayawhip; } /* style blocks cannot use blank lines nor "dash dash greater than" */ note comment blocks can be used between style blocks.
Rendering and the WebXR frame animation callback - Web APIs
for instance, if an object is rotating, you might apply the rotation like this: const xdeltarotation = (xrotationdegreespersecond *
radians_per_degree) * deltatime; const ydeltarotation = (yrotationdegreespersecond *
radians_per_degree) * deltatime; const zdeltarotation = (zrotationdegreespersecond *
radians_per_degree) * deltatime; this computes the amount by which the object has rotated around each of the three axes since the last time the frame was drawn.
... the third and final type of input is the t
raditional non-xr input device such as keyboards, mice, trackpads, touch screens, and non-xr gamepads and joysticks.
Using ARIA: Roles, states, and properties - Accessibility
roles widget roles button checkbox gridcell link menuitem menuitemcheckbox menuitem
radio option progressbar
radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles.
... combobox grid (including row, gridcell, rowheader, columnheader roles) listbox (including option role) menu menubar
radiogroup (see
radio role) tablist (including tab and tabpanel roles) tree treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessag...
ARIA annotations - Accessibility
ting ui widget that shows numbers of votes, but you want to summarize the purpose of the widget in a clear description because the ui does not make it clear: <section aria-description="choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week."> <p>pick your favourite fruit:</p> <form> <ul> <li><label>apple: <input type="
radio" name="fruit" value="apple"></label></li> <li><label>orange: <input type="
radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="
radio" name="fruit" value="banana"></label></li> </ul> </form> </section> if the descriptive text does appear in the ui, you can link the description to the widget using aria-describedby, like so: <p id="fruit-desc">choose...
... your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week.</p> <section aria-describedby="fruit-desc"> <form> <ul> <li><label>apple: <input type="
radio" name="fruit" value="apple"></label></li> <li><label>orange: <input type="
radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="
radio" name="fruit" value="banana"></label></li> </ul> </form> </section> insertions and deletions a common wish in online document systems like google docs is to be able to track changes, to see what reviewers or editors have suggested as changes to the text, before the managing editor or author accepts or rejects those changes.
ARIA: application role - Accessibility
the application role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no t
raditional html interpretation techniques should be used.
... background for historic reasons, especially on windows, screen readers and some other assistive technologies (at) have t
raditionally grabbed the whole web content from the browser at once after it had finished loading.
WAI-ARIA Roles - Accessibility
if the user is expected to close the alert, then the alertdialog role should be used instead.aria: application rolethe application role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no t
raditional html interpretation techniques should be used.
... alertdialog banner combobox command columnheader (estelle) complementary composite definition directory feed gridcell (eric e) group input landmark link - old page listbox log - old page marquee math menu menubar menuitem menuitemcheckbox menuitem
radio none note option presentation progressbar - old page
radio - old page
radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator slider - old page spinbutton status - old page structure tab tablist (michiel) tabpanel (michiel) term timer toolbar tooltip tree treegrid treeitem widget window ...
An overview of accessible web applications and widgets - Accessibility
examples include (but are certainly not limited to): aria-checked: indicates the state of a checkbox or
radio button aria-disabled: indicates that an element is visible, but not editable or otherwise operable aria-grabbed: indicates the 'grabbed' state of an object in a drag-and-drop operation (for a full list of aria states, consult the aria list of states and properties.) developers should use aria states to indicate the state of ui widget elements and use css attribute selectors to alter the vi...
... t
raditionally, keyboard navigation on the web has been limited to the tab key.
Cognitive accessibility - Accessibility
these problems include difficulty with understanding content, remembering how to complete tasks, and confusion caused by inconsistent or non-t
raditional web page layouts.
...for example, this document has an average g
rade level of about 11.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
n project] event_object_reorder [important for mutating docs] event_object_focus [important] event_object_selection [important] event_object_selectionadd [important for multiple selection] event_object_selectionremove [important for multiple selection] event_object_selectionwithin [important for multiple selection] event_object_statechange [important for checkboxes and
radio buttons] event_object_locationchange event_object_namechange event_object_descriptionchange event_object_valuechange [important for sliders and progress meters] event_object_parentchange event_object_helpchange event_object_defactionchange event_object_acceleratorchange msaa states cheat sheet for information on what each state does, see the msdn state c...
... role_helpballoon role_character role_list [important] role_listitem [important] role_outline [important] role_outlineitem [important] role_pagetab [important] role_propertypage [important] role_indicator role_graphic [important] role_statictext [important] role_text [important] role_pushbutton [important] role_checkbutton [important] role_
radiobutton [important] role_combobox [important] role_droplist [important] role_progressbar [important] role_dial role_hotkeyfield role_slider role_spinbutton role_diagram role_animation role_equation role_buttondropdown role_buttonmenu role_buttondropdowngrid role_whitespace role_pagetablist [important] role_clock role_splitbutton ...
Color contrast - Accessibility
the "good" <div> has a light purple background, which makes the text easy to read: example1 <div class="good"> good contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-
radius: 20px; box-shadow: 1px 1px 1px black; } .good { background-color: #fae6fa; } the "bad" <div> on the other hand has a very dark purple background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; bord...
...er-
radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution when choosing a color scheme for your website, choose foreground and background colors that have good contrast.
-webkit-mask-box-image - CSS: Cascading Style Sheets
initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <g
radient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
... <g
radient> a -webkit-g
radient function to be used as a mask image.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
p, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, border-width, border-
radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, 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 e...
...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.
:invalid - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 notes
radio buttons if any one of the
radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected.
... (grouped
radio buttons share the same value for their name attribute.) gecko defaults by default, gecko does not apply a style to the :invalid pseudo-class.
:read-only - CSS: Cascading Style Sheets
input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-
radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-
radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-only' in that specification.
:read-write - CSS: Cascading Style Sheets
input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-
radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-
radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-write' in that specification.
Attribute selectors - CSS: Cascading Style Sheets
*/ div[lang="pt"] { color: green; } /* all divs in chinese are red, whether simplified (zh-cn) or t
raditional (zh-tw).
... */ div[lang|="zh"] { color: red; } /* all divs with a t
raditional chinese `data-lang` are purple.
Using multiple backgrounds - CSS: Cascading Style Sheets
example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear g
radient: html <div class="multi-bg-example"></div> css .multi-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-g
radient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; b...
...ackground-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button in the css section) as you can see here, the firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by the g
radient (listed last) sitting underneath all previous 'images'.
Using multi-column layouts - CSS: Cascading Style Sheets
this limitation is solved by adding new css properties to extend the t
raditional block layout mode.
...excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #column_gap { column-count: 5; column-gap: 2em; } result graceful deg
radation the column properties will just be ignored by non-columns-supporting browsers.
CSS Tutorials - CSS: Cascading Style Sheets
css g
radients g
radients are images that transition smoothly from one color to another.
... there are several types of g
radients allowed in css: linear or
radial, repeating or not.
WebKit CSS extensions - CSS: Cascading Style Sheets
-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-
radius -webkit-border-bottom-right-
radius -webkit-border-image -webkit-border-
radius -webkit-border-top-left-
radius -webkit-border-top-right-
radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-style -webkit-column-r...
...ion -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function -webkit-appearance* b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-
radius -webkit-border-bottom-right-
radius -webkit-border-image -webkit-border-
radius -webkit-box-align**, *** -webkit-box-direction**, *** -webkit-box-flex**, *** -webkit-box-orient**, *** -webkit-box-pack**, *** -webkit-box-shadow -webkit-box-sizing -webkit-border-top-left-
radius -webkit-border-top-right-
radius f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-directi...
animation - CSS: Cascading Style Sheets
> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-
radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%...
...art | end examples cylon eye <div class="view_port"> <div class="polling_message"> listening for dispatches </div> <div class="cylon_eye"></div> </div> .polling_message { color: white; float: left; margin-right: 2%; } .view_port { background-color: black; height: 25px; width: 100%; overflow: hidden; } .cylon_eye { background-color: red; background-image: linear-g
radient(to right, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .9) 75%); color: white; height: 100%; width: 20%; -webkit-animation: 4s linear 0s infinite alternate move_eye; animation: 4s linear 0s infinite alternate move_eye; } @-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } @keyframes move_eye { from...
attr() - CSS: Cascading Style Sheets
deg, g
rad,
rad <angle> the attribute value is parsed as a css <number>, that is without the unit (e.g.
...)where <type-or-unit> = string | color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | px | deg | g
rad |
rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <color> value html <div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div> css .background { height: 100vh; } .background { ba...
<blend-mode> - CSS: Cascading Style Sheets
examples blend mode comparison in the following example, we have a <div> with two background images set on it — a firefox logo on top of a linear g
radient.
...n>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-g
radient(to bottom, blue, orange); } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divelem.style.backgroundblendmode = selectelem.value; }); result specifications specification status comment compositing and blending level 1the definition of '<blend-mode>...
border-image - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-g
radient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-g
radient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values l...
... #bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result g
radient html <div id="g
radient">this element is surrounded by a g
radient-based border image!</div> css #g
radient { width: 200px; border: 30px solid; border-image: repeating-linear-g
radient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'bord...
border-left-style - CSS: Cascading Style Sheets
for androidsafari on iossamsung internetborder-left-stylechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes prior to firefox 50, border styles of rounded corners (with border-
radius) were always rendered as if border-bottom-style was solid.
... 1webview android full support 2.3chrome android full support 18firefox android full support 14notes full support 14notes notes prior to firefox 50, border styles of rounded corners (with border-
radius) were always rendered as if border-bottom-style was solid.
border-right-style - CSS: Cascading Style Sheets
or androidsafari on iossamsung internetborder-right-stylechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes prior to firefox 50, border styles of rounded corners (with border-
radius) were always rendered as if border-bottom-style was solid.
... 1webview android full support ≤37chrome android full support 18firefox android full support 14notes full support 14notes notes prior to firefox 50, border styles of rounded corners (with border-
radius) were always rendered as if border-bottom-style was solid.
color-adjust - CSS: Cascading Style Sheets
formal definition initial valueeconomyapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax economy | exact examples preserving low contrast in this example, a box is shown which uses a background-image and a translucent linear-g
radient() function atop a black background color to have a dark blue g
radient behind medium red text.
... css .my-box { background-color: black; background-image: linear-g
radient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> <p>need more contrast!</p> </div> result specifications specification status comment css color adjustment module level 1the definition of 'color-adjust' in that specification.
<custom-ident> - CSS: Cascading Style Sheets
, 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, tibetan, t
rad-chinese-formal, t
rad-chinese-informal, upper-armenian, disclosure-open, and disclosure-close.
...-12
rad it must not start with a dash followed by a decimal digit.
<easing-function> - CSS: Cascading Style Sheets
keywords for common cubic-bezier easing functions ease the animation starts slowly, accelerates sharply, and then slows g
radually towards the end.
...ubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > div { position: relative; height: 100px; } div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image:
radial-g
radient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-
radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); c...
blur() - CSS: Cascading Style Sheets
syntax blur(
radius) parameters
radius the
radius of the blur, specified as a <length>.
... examples setting a blur with pixels and with rem blur(0) /* no effect */ blur(8px) /* blur with 8px
radius */ blur(1.17rem) /* blur with 1.17rem
radius */ specifications specification status filter effects module level 1the definition of 'blur()' in that specification.
font-family - CSS: Cascading Style Sheets
because typographic t
raditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.
...this is some example fangsong text with the chinese characters for "fangsong" in t
raditional and simple forms, respectively: 仿宋體 仿宋体.
font-variant - CSS: Cascading Style Sheets
the possible values are: jis78, jis83, jis90, jis04, simplified, t
raditional, full-width, proportional-width, ruby.
...l-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 | t
raditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small">firefox rocks!</p> css p.normal { font-variant: normal; } p.small { font-variant: small-caps; } result specifications specification status comment css fonts module level 3the def...
mask-size - CSS: Cascading Style Sheets
g
radients are treated as images with no intrinsic dimensions or intrinsic proportion.
...t with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-g
radient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%<...
offset-anchor - CSS: Cascading Style Sheets
each <section> has been styled with a linear g
radient to give it a horizontal line running through its center, to give you a visual display of where the <div>'s offset paths are running.
... html <section> <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section> css div { offset-path: path('m 0,20 l 200,20'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section { background-image: linear-g
radient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); border: 1px solid #ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto; background: cyan; } .offset-anchor2 { offset-anchor: right top; background: purple; } .offset-anchor3 { offset-anchor: left bottom; background: magenta; } @keyframes move { 0% { offset-distance: 0%; } ...
rotate - CSS: Cascading Style Sheets
syntax /* keyword values */ rotate: none; /* angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57
rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57
rad; /* vector plus angle value */ rotate: 1 1 1 90deg; values angle value an <angle> specifying the angle to rotate the affected element through, around the z axis.
...iedanimation typea transformcreates stacking contextyes formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-
radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
Live streaming web audio and video - Developer guides
live streaming technology is often employed to relay live events such as sports, concerts and more generally tv and
radio programmes that are output live.
...it can also be used instead of the t
raditional progressive download method for audio and video on demand: there are several advantages to this: latency is generally lower so media will start playing more quickly adaptive streaming makes for better experiences on a variety of devices media is downloaded just in time which makes bandwidth usage more efficient streaming protocols while static media is usually served over http, th...
HTML5 - Developer guides
server-sent events allows a server to push events to a client, rather than the classical pa
radigm where the server could send data only in response to a client's request.
... more fancy borders not only it is now possible to use images to style borders, using border-image and its associated longhand properties, but rounded borders are supported via the border-
radius property.
HTML attribute: readonly - HTML: Hypertext Markup Language
the attribute is not supported or relevant to <select> or input types that are already not mutable, such as checkbox and
radio or cannot, by definition, start with a value, such as the file input type.
...lt examples <fieldset> <legend>checkboxes buttons</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>
radio buttons</legend> <p><label> <input type="
radio" name="
radio" value="regular"> regular </label></p> <p><label> <input type="
radio" name="
radio" value="readonly" readonly> readonly </label></p> <p><label> <input type="
radio" name="
radio" value="disabled" disabled> disabled </label></p> </fieldset> specifications specification status comment ...
<area> - HTML: Hypertext Markup Language
circle: the value is x,y,r where x,y is a pair specifying the center of the circle and r is a value for the
radius.
... "no-referrer-when-downg
rade" meaning that no referer: header will be sent when navigating to an origin without tls (https).
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
if the media has no known end (such as for live streams of unknown duration, web
radio, media incoming from webrtc, and so forth), this value is +infinity.
... you can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-
radius, padding, margin, etc.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-
radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.
... css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-
radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents.
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
<form action="#"> <fieldset> <legend>simple fieldset</legend> <input type="
radio" id="
radio"> <label for="
radio">spirit of
radio</label> </fieldset> </form> disabled fieldset this example shows a disabled <fieldset> with two controls inside it.
... implicit aria role group permitted aria roles
radiogroup, presentation, none dom interface htmlfieldsetelement specifications specification status comment html living standardthe definition of '<fieldset>' in that specification.
<input type="button"> - HTML: Hypertext Markup Language
canvas.height = window.innerheight-85; var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var colorpicker = document.queryselector('input[type="color"]'); var sizepicker = document.queryselector('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]'); // covert degrees to
radians function degto
rad(degrees) { return degrees * math.pi / 180; }; // update sizepicker output value sizepicker.oninput = function() { output.textcontent = sizepicker.value; } // store mouse pointer coordinates, and whether the button is pressed var curx; var cury; var pressed = false; // update mouse pointer coordinates document.onmousemove = function(e) { curx = (window.event) ?
...ent.scrolltop : document.body.scrolltop); } canvas.onmousedown = function() { pressed = true; }; canvas.onmouseup = function() { pressed = false; } clearbtn.onclick = function() { ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); } function draw() { if(pressed) { ctx.fillstyle = colorpicker.value; ctx.beginpath(); ctx.arc(curx, cury-85, sizepicker.value, degto
rad(0), degto
rad(360), false); ctx.fill(); } requestanimationframe(draw); } draw(); specifications specification status comments html living standardthe definition of '<input type="button">' in that specification.
<input type="checkbox"> - HTML: Hypertext Markup Language
note:
radio buttons are similar to checkboxes, but with an important distinction —
radio buttons are grouped into a set in which only one
radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off.
... where multiple controls exist,
radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
<input type="date"> - HTML: Hypertext Markup Language
in unsupported browsers, the control deg
rades gracefully to <input type="text">.
...as an example, the date picker on firefox for android looks like this: unsupporting browsers gracefully deg
rade to a text input, but this creates problems in consistency of user interface (the presented controls are different) and data handling.
<input type="month"> - HTML: Hypertext Markup Language
in browsers that don't support month inputs, the control deg
rades gracefully to a simple <input type="text">, although there may be automatic validation of the entered text to ensure it's formatted as expected.
...as an example, the month picker on chrome for android looks like this: non-supporting browsers gracefully deg
rade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.
<input type="time"> - HTML: Hypertext Markup Language
support is good in modern browsers, with safari being the sole major browser not yet implementing it; in safari, and any other browsers that don't support <time>, it deg
rades gracefully to <input type="text">.
...for example, the time picker on chrome for android looks like this: browsers that don't support time inputs gracefully deg
rade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.
<input type="week"> - HTML: Hypertext Markup Language
in non-supporting browsers, the control deg
rades gracefully to function identically to <input type="text">.
...for example, the week picker on chrome for android looks like this: non-supporting browsers gracefully deg
rade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.
<textarea> - HTML: Hypertext Markup Language
other major browsers place the insertion point at the beginning of the text.notes a default background-image g
radient is applied to all <textarea> elements, which can be disabled using background-image: none.ie full support yesopera full support yessafari full support yeswebview android full support yeschrome android ...
...other major browsers place the insertion point at the beginning of the text.notes a default background-image g
radient is applied to all <textarea> elements, which can be disabled using background-image: none.opera android full support yessafari ios full support yesnotes full support yesnotes notes unlike other major browsers, a default style of opacity: 0.4 is applied to dis...
Evolution of HTTP - HTTP
websocket, a new protocol that can be set up by upg
rading an existing http connection.
...notable headers are do not track (dnt) header to control privacy, x-frame-options, or upg
rade-insecure-requests but many more exist.
MIME types (IANA media types) - HTTP
mime types are case-insensitive but are t
raditionally written in lowercase, with the exception of parameter values, whose case may or may not have specific meaning.
... name="myfile" value="test.txt"></label> <button>send the file</button> </form> will send this message: post / http/1.1 host: localhost:8000 user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate connection: keep-alive upg
rade-insecure-requests: 1 content-type: multipart/form-data; boundary=---------------------------8721656041911415653955004498 content-length: 465 -----------------------------8721656041911415653955004498 content-disposition: form-data; name="mytextfield" test -----------------------------8721656041911415653955004498 content-disposition: form-data; name="mycheckbox" on -----------------------------...
Content-Security-Policy - HTTP
upg
rade-insecure-requests instructs user agents to treat all of a site's insecure urls (those served over http) as though they have been replaced with secure urls (those served over https).
... upg
rade insecure requests candidate recommendation adds upg
rade-insecure-requests.
Index - HTTP
49 csp: upg
rade-insecure-requests csp, directive, http, reference, security the http content-security-policy (csp) upg
rade-insecure-requests directive instructs user agents to treat all of a site's insecure urls (those served over http) as though they have been replaced with secure urls (those served over https).
... 109 upg
rade-insecure-requests http, https, security, header the http upg
rade-insecure-requests request header sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upg
rade-insecure-requests csp directive.
HTTP resources and specifications - HTTP
proposed standard rfc 2817 upg
rading to tls within http/1.1 proposed standard rfc 7540 hypertext transfer protocol version 2 (http/2) proposed standard rfc 7541 hpack: header compression for http/2 on the standard track rfc 7838 http alternative services on the standard track rfc 7301 transport layer security (tls) application-layer protocol negotiation extension use...
... cross-origin resource sharing living standard rfc 7034 http header field x-frame-options informational rfc 6797 http strict transport security (hsts) proposed standard upg
rade insecure requests upg
rade insecure requests candidate recommendation content security policy 1.0 content security policy 1.0 csp 1.1 and csp 3.0 doesn't extend the http standard obsolete microsoft document specifying legacy document modes* defines x-ua-compatible note rfc 5689 http extensions for web distributed authoring and versioning (we...
Grammar and types - JavaScript
additionally, a best practice for parseint is to always include the
radix parameter.
... the
radix parameter is used to specify which numerical system is to be used.
Keyed collections - JavaScript
et('cat', 'meow'); sayings.set('elephant', 'toot'); sayings.size; // 3 sayings.get('dog'); // woof sayings.get('fox'); // undefined sayings.has('bird'); // false sayings.delete('dog'); sayings.has('dog'); // false for (let [key, value] of sayings) { console.log(key + ' goes ' + value); } // "cat goes meow" // "elephant goes toot" sayings.clear(); sayings.size; // 0 object and map compared t
raditionally, objects have been used to map strings to values.
... array.from(myset); [...myset2]; myset2 = new set([1, 2, 3, 4]); array and set compared t
raditionally, a set of elements has been stored in arrays in javascript in a lot of situations.
Classes - JavaScript
class animal { speak() { return this; } static eat() { return this; } } let obj = new animal(); obj.speak(); // the animal object let speak = obj.speak; speak(); // undefined animal.eat() // class animal let eat = animal.eat; eat(); // undefined if we rewrite the above using t
raditional function-based syntax in non–strict mode, then this method calls is automatically bound to the initial this value, which by default is the global object.
... one may also extend t
raditional function-based "classes": function animal (name) { this.name = name; } animal.prototype.speak = function () { console.log(`${this.name} makes a noise.`); } class dog extends animal { speak() { console.log(`${this.name} barks.`); } } let d = new dog('mitzie'); d.speak(); // mitzie barks.
Array.prototype.map() - JavaScript
the first is an expression and the second is the
radix to the callback function, array.prototype.map passes 3 arguments: the element the index the array the third argument is ignored by parseint—but not the second one!
... here is a concise example of the iteration steps: // parseint(string,
radix) -> map(parseint(value, index)) /* first iteration (index is 0): */ parseint("1", 0) // 1 /* second iteration (index is 1): */ parseint("2", 1) // nan /* third iteration (index is 2): */ parseint("3", 2) // nan then let's talk about solutions.
Array - JavaScript
dd to the front // ["strawberry", "banana"] find the index of an item in the array fruits.push('mango') // ["strawberry", "banana", "mango"] let pos = fruits.indexof('banana') // 1 remove an item by index position let removeditem = fruits.splice(pos, 1) // this is how to remove an item // ["strawberry", "mango"] remove items from an index position let vegetables = ['cabbage', 'turnip', '
radish', 'carrot'] console.log(vegetables) // ["cabbage", "turnip", "
radish", "carrot"] let pos = 1 let n = 2 let removeditems = vegetables.splice(pos, n) // this is how to remove items, n defines the number of items to be removed, // starting at the index position specified by pos and progressing toward the end of array.
... console.log(vegetables) // ["cabbage", "carrot"] (the original array is changed) console.log(removeditems) // ["turnip", "
radish"] copy an array let shallowcopy = fruits.slice() // this is how to make a copy // ["strawberry", "mango"] accessing array elements javascript arrays are zero-indexed.
Intl.Locale.prototype.calendar - JavaScript
unicode calendar keys unicode calendar keys calendar key (name) description buddhist thai buddhist calendar chinese t
raditional chinese calendar coptic coptic calendar dangi t
raditional korean calendar ethioaa ethiopic calendar, amete alem (epoch approx.
... 5493 b.c.e) ethiopic ethiopic calendar, amete mihret (epoch approx, 8 c.e.) gregory gregorian calendar hebrew t
raditional hebrew calendar indian indian calendar islamic islamic calendar islamic-umalqura islamic calendar, umm al-qura islamic-tbla islamic calendar, tabular (intercalary years [2,5,7,10,13,16,18,21,24,26,29] - astronomical epoch) islamic-civil islamic calendar, tabular (intercalary years [2,5,7,10,13,16,18,21,24,26,29] - civil epoch) islamic-rgsa islamic calendar, saudi arabia sighting iso8601 iso calendar (gregorian calendar using the iso 8601 calendar week rules) japanese japanese imperial calendar persian persian calendar roc...
Math.PI - JavaScript
examples using math.pi the following function uses math.pi to calculate the circumference of a circle with a passed
radius.
... function calculatecircumference(
radius) { return math.pi * (
radius +
radius); } calculatecircumference(1); // 6.283185307179586 specifications specification ecmascript (ecma-262)the definition of 'math.pi' in that specification.
Math.cos() - JavaScript
the math.cos() static function returns the cosine of the specified angle, which must be specified in
radians.
... syntax math.cos(x) parameters x the angle in
radians for which to return the cosine.
Math.sin() - JavaScript
syntax math.sin(x) parameters x a number (given in
radians).
... description the math.sin() method returns a numeric value between -1 and 1, which represents the sine of the angle given in
radians.
Number - JavaScript
number.parseint(string, [
radix]) this is the same as the global parseint() function.
... number.prototype.tostring([
radix]) returns a string representing the specified object in the specified
radix ("base").
Object.prototype.toString() - JavaScript
parameters for numbers and bigints tostring() takes an optional parameter
radix the value of
radix must be minimum 2 and maximum 36.
... by using
radix you can also convert base 10 numbers (like 1,2,3,4,5,.........) to another base numbers, in example below we are converting base 10 number to a base 2 (binary) number let basetenint = 10; console.log(basetenint.tostring(2)); // expected output is "1010" and same for big integers let bignum = bigint(20); console.log(bignum.tostring(2)); // expected output is "10100" some common
radix are 2 for binary numbers, 8 for octal numbers, 10 for decimal numbers, 16 for hexadecimal numbers.
JavaScript
javascript is a prototype-based, multi-pa
radigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g.
...both "java" and "javascript" are t
rademarks or registered t
rademarks of oracle in the u.s.
Populating the page: how browsers work - Web Performance
slow start g
radually increases the amount of data transmitted until the network's maximum bandwidth can be determined.
...tcp slow start g
radually builds up transmission speeds appropriate for the network's capabilities to avoid congestion.
color-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <linearg
radient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <
radialg
radient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <
radialg
radient id="g
radient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%...
..." stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </
radialg
radient> </defs> <circle cx="100" cy="100" r="100" fill="url(#g
radient)" color-rendering="optimizequality" /> <text x="45" y="50%" color-rendering="optimizequality">quality-optimized</text> <circle cx="100" cy="100" r="100" color-rendering="optimizespeed" fill="url(#g
radient)" style="transform: translatex(240px);" /> <text x="290" y="50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate t
radeoffs to balance speed and quality, but quality shall be given more importance than spee...
d - SVG: Scalable Vector Graphics
the center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: rx and ry are the two
radii of the ellipse; angle represents a rotation (in degrees) of the ellipse relative to the x-axis; large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
...the center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: rx and ry are the two
radii of the ellipse; angle represents a rotation (in degrees) of the ellipse relative to the x-axis; large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
exponent - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearg
radient id="g
radient" g
radientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </linearg
radient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="1"/> <fefuncg type="gamma" exponent="1"/> <fefuncb type="gamma" exponent="1"/> </fecomponenttransfer...
...> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="5"/> <fefuncg type="gamma" exponent="5"/> <fefuncb type="gamma" exponent="5"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#g
radient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#g
radient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes <number> if the type attribute of the component element is set to gamma, this value specifies the exponent of the gamma function specifi...
fill - SVG: Scalable Vector Graphics
for shapes and text it's a presentation attribute that defines the color (or any svg paint servers like g
radients or patterns) used to paint the element; for animation it defines the final state of the animation.
... html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a g
radient --> <defs> <
radialg
radient id="myg
radient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </
radialg
radient> </defs> <circle cx="150" cy="50" r="40" fill="url(#myg
radient)" /> <!-- keeping the final state of an animated circle which is a circle with a
radius of 40.
image-rendering - SVG: Scalable Vector Graphics
quality t
radeoffs as it performs image processing.
... as a presentation attribute, it can be applied to any element but it has effect only on the following element: <image> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate t
radeoffs to balance speed and quality, but quality shall be given more importance than speed.
in - SVG: Scalable Vector Graphics
in many cases, the fillpaint is opaque everywhere, but that might not be the case if a shape is painted with a g
radient or pattern which itself includes transparent or semi-transparent parts.
...in many cases, the strokepaint is opaque everywhere, but that might not be the case if a shape is painted with a g
radient or pattern which itself includes transparent or semi-transparent parts.
intercept - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearg
radient id="g
radient" g
radientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </linearg
radient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0"/> <fefuncg type="linear" interce...
...inear" intercept="0"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0.3"/> <fefuncg type="linear" intercept="0.1"/> <fefuncb type="linear" intercept="0.8"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#g
radient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#g
radient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter e...
shape-rendering - SVG: Scalable Vector Graphics
the shape-rendering attribute provides hints to the renderer about what t
radeoffs to make when rendering shapes like paths, circles, or rectangles.
.../www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" shape-rendering="geometricprecision"/> <circle cx="320" cy="100" r="100" shape-rendering="crispedges"/> </svg> usage notes value auto | optimizespeed | crispedges | geometricprecision default value auto animatable yes auto this value indicates that the user agent shall make appropriate t
radeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.
stroke - SVG: Scalable Vector Graphics
the stroke attribute is a presentation attribute defining the color (or any svg paint servers like g
radients or patterns) used to paint the outline of the shape; note: as a presentation attribute stroke can be used as a css property.
...has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a g
radient --> <defs> <linearg
radient id="myg
radient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </linearg
radient> </defs> <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myg
radient)" /> </svg> usage notes value <paint> default value none animatable yes specifications ...
tableValues - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearg
radient id="g
radient" g
radientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </linearg
radient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 1"/> <fefuncg type="table" tablevalues=...
...tablevalues="0 1"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="1 0"/> <fefuncg type="table" tablevalues="1 0"/> <fefuncb type="table" tablevalues="1 0"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#g
radient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#g
radient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer animatable yes <list-of-numbers> this value ...
text-rendering - SVG: Scalable Vector Graphics
the text-rendering attribute provides hints to the renderer about what t
radeoffs to make when rendering text.
... <text y="15" text-rendering="geometricprecision">geometric precision</text> <text y="35" text-rendering="optimizelegibility">optimized legibility</text> </svg> usage notes value auto | optimizespeed | optimizelegibility | geometricprecision default value auto animatable yes auto this value indicates that the user agent shall make appropriate t
radeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.
xlink:title - SVG: Scalable Vector Graphics
these elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <linearg
radient>, <mpath>, <pattern>, <
radialg
radient>, <script>, <set>, <textpath>, <tref>, and <use> usage context value <anything> default value none animatable no <anything> this value specifies the title used to describe the meaning of the link or resource.
... candidate recommendation deprecated the attribute and made it only apply to <a>, <image>, <linearg
radient>, <pattern>, <
radialg
radient>, <script>, <textpath>, and <use> scalable vector graphics (svg) 1.1 (second edition)the definition of 'seed' in that specification.
SVG Attribute reference - SVG: Scalable Vector Graphics
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 g
radienttransform g
radientunits 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 marker-end marker-mid marker-start markerheight m...
...l max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r
radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string str...
<a> - SVG: Scalable Vector Graphics
value type: no-referrer|no-referrer-when-downg
rade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; default value: none; animatable: no rel the relationship of the target object to the link object.
... aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<a>' in that specification.
<circle> - SVG: Scalable Vector Graphics
the <circle> svg element is an svg basic shape, used to draw circles based on a center point and a
radius.
... value type: <length>|<percentage> ; default value: 0; animatable: yes r the
radius of the circle.
<defs> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <linearg
radient id="myg
radient" g
radienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </linearg
radient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#myg
radient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, st...
... pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<defs>' in that specification.
<feComponentTransfer> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 300"> <defs> <linearg
radient id="rainbow" g
radientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset="1" stop-color="#800080"></stop>...
... </linearg
radient> <filter id="identity" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="identity"></fefuncr> <fefuncg type="identity"></fefuncg> <fefuncb type="identity"></fefuncb> <fefunca type="identity"></fefunca> </fecomponenttransfer> </filter> <filter id="table" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 0 1 1"></fefuncr> <fefuncg type="table" tablevalues="1 1 0 0"></fefuncg> <fefuncb type="table" tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="discrete" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="discrete" tablevalues="0 0 ...
<feMorphology> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in operator
radius dom interface this element implements the svgfemorphologyelement interface.
... examples filtering svg content svg <svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> <filter id="erode"> <femorphology operator="erode"
radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate"
radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="3em">fattened text</text> </svg> css text { font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content svg <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode"
radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate"
radius="2"/...
<rect> - SVG: Scalable Vector Graphics
value type: auto|<length>|<percentage> ; default value: auto; animatable: yes rx the horizontal corner
radius of the rect.
... value type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the vertical corner
radius of the rect.
Filter effects - SVG: Scalable Vector Graphics
drop shadows, to provide a popular example, cannot be created reasonably with a combination of g
radients.
...while basic blurs can be achieved with the help of g
radients, the blur filter is needed to do anything beyond.
Tutorials
we have covered the necessary prerequisites so can now dive deep into css layout, looking at different display settings, t
raditional layout methods involving float and positioning, and new fangled layout tools like flexbox.
...it also has a forum, an internet
radio station, and a blog.
Using templates and slots - Web Components
to create a new "element-details-template" document fragment containing some named slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span { background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-
radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="description">need description</slot></i> </span> </summary> <div cl...
... dd { margin-left: 16px } </style> </head> <body> <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span { background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-
radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="description">need description</slot></i> ...
<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:number count=expression level="single" | "multiple" | "any" from=expression value=expression format=format-string lang=xml:lang-code letter-value="alphabetic" | "t
raditional" grouping-separator=character grouping-size=number /> required attributes none.
...this attribute can have the value "alphabetic" or "t
raditional".
2015 MDN Fellowship Program - Archive of obsolete content
github: chrisdavidmills twitter: @chrisdavidmills why increase the reach and impact of your expertise grow your skills beyond coding and managing to educating and communicating build something used by hundreds of thousands (or more) developers worldwide directly impact and grow the value of the open web when application deadline: april 1, 2015 orientation: early june (dates tbd) g
raduation: august 11-12, 2015 where orientation: a mozilla location (tbd).
indexed-db - Archive of obsolete content
var { indexeddb, idbkeyrange } = require('sdk/indexed-db'); var database = {}; database.onerror = function(e) { console.error(e.value) } function open(version) { var request = indexeddb.open("stuff", version); request.onupg
radeneeded = function(e) { var db = e.target.result; e.target.transaction.onerror = database.onerror; if(db.objectstorenames.contains("items")) { db.deleteobjectstore("items"); } var store = db.createobjectstore("items", {keypath: "time"}); }; request.onsuccess = function(e) { database.db = e.target.result; }; request.onerror = database.onerror; }; fun...
self - Archive of obsolete content
loadreason this property contains of the following strings describing the reason your add-on was loaded: install enable startup upg
rade downg
rade isprivatebrowsingsupported this property indicates whether or not the add-on supports private browsing.
system - Archive of obsolete content
this has t
raditionally been in the form "{aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee}" but for some applications it may be in the form "appname@vendor.tld".
tabs - Archive of obsolete content
converting to xul tabs to convert from the high-level tab objects used in this api to the low-level xul tab objects used in the tabs/utils api and by t
raditional add-ons, use the viewfor() function exported by the viewfor module.
cfx to jpm - Archive of obsolete content
entry point the add-on's entry point is the file that's executed when the add-on needs to initialize itself: for example, when firefox starts, or when the add-on's installed, enabled, or upg
raded.
Localization - Archive of obsolete content
now when the browser's locale is set to "en-us", users see this in the add-ons manager: when the browser's locale is set to "fr", they see this: the menulist and the
radio preference types have options.
Canvas code snippets - Archive of obsolete content
raticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlinearg
radient', 'create
radialg
radient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'strokestyle', 'textalign', 'textbaseline']; for (let m of methods) { let method = m; canvas2dcontext.proto...
selectedItem - Archive of obsolete content
the listbox, richlistbox,
radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
Property - Archive of obsolete content
ngzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority
radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart ...
textbox (Toolkit autocomplete) - Archive of obsolete content
a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed
radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
Textbox (XPFE autocomplete) - Archive of obsolete content
a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed
radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
Creating Dialogs - Archive of obsolete content
s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favourite fruit"/> <
radio id="orange" label="oranges because they are fruity"/> <
radio id="violet" selected="true" label="strawberries because of their colour"/> <
radio id="yellow" label="bananas because they are pre-packaged"/> </groupbox> </dialog> the buttons elements can be accessed with the following javascript // the accept button var acceptbutt = document.documentelement.getbutton("accept") more example...
Templates - Archive of obsolete content
however, the t
radeoff is that trees may only display text, and, since no elements are created, you can't use css properties to style tree cells in the same way.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
progressmeter <progressmeter mode="determined" value="10" /> as progress advances, jaws indicates percentage to the user
radio see
radiogroup
radiogroup <label value='<!--
radio group-->' control='
radioid' /> <
radiogroup id='
radioid'> <
radio selected="true" label='<!--option1-->' /> <
radio label='<!--option2-->' /> </
radiogroup> row see grid rows see grid stack all elements can be focused, even if not visible due to being hidden un...
XML - Archive of obsolete content
but the necessary t
radeoff for xul's flexibility is a lack of implicit functionality -- the lack ofintuition, you might say, that xul has in interpreting what it is you want.
colorpicker - Archive of obsolete content
a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed
radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
dialog - Archive of obsolete content
sion="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <
radiogroup> <
radio label="red"/> <
radio label="green" selected="true"/> <
radio label="blue"/> </
radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
elements - Archive of obsolete content
ialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r
radio
radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton toolbargrippy toolbaritem ...
groupbox - Archive of obsolete content
properties accessibletype examples <groupbox> <caption label="settings"/> <
radiogroup> <
radio label="black and white"/> <
radio label="colour"/> </
radiogroup> <checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbef...
listbox - Archive of obsolete content
the listbox, richlistbox,
radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
menulist - Archive of obsolete content
the listbox, richlistbox,
radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
preference - Archive of obsolete content
a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed
radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
richlistbox - Archive of obsolete content
the listbox, richlistbox,
radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
tabs - Archive of obsolete content
the listbox, richlistbox,
radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
titlebar - Archive of obsolete content
<?xml version="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-
radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, containe...
Dialogs in XULRunner - Archive of obsolete content
();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favorite fruit"/> <
radiogroup> <
radio id="1" label="oranges because they are fruity"/> <
radio id="2" selected="true" label="strawberries because of color"/> <
radio id="3" label="bananna because it pre packaged"/> </
radiogroup> </groupbox> </dialog> xul window elements have a special method to open dialogs, called window.opendialog().
What XULRunner Provides - Archive of obsolete content
ry implementation (the places implementation in the 1.9 cycle) accessibility support ipc services for communication between gecko-based apps (not yet complete) storage/sqlite interfaces user interface features the following user interface is supplied by xulrunner, and may be overridden by embedders under certain circumstances: apis and user interface for installing, uninstalling, and upg
rading xul applications.
Why use RSS - Archive of obsolete content
people are using it to syndicate all sorts of things: news articles, blogs, bookmarks, internet
radio shows, internet television shows, software updates, e-mails, mailing lists, music playlists, and more.
Element - Archive of obsolete content
a b c <slash:comments> (rss slash module comments element) d <slash:department> (rss slash module department element) e f g h <slash:hit_pa
rade> (rss slash hit pa
rade department element) i j k l m n o p q r s <slash:section> (rss slash module section element) t u v w x y z ...
RSS - Archive of obsolete content
(some being based on rdf, but most only being based on xml.) nonetheless, rss is an extremely popular format that is used for syndicating news, blog posts, ip
radio, and iptv, with an amazing amount of momentum.
Introduction to SSL - Archive of obsolete content
decisions about which cipher suites a particular organization decides to enable depend on t
rade-offs among the sensitivity of the data involved, the speed of the cipher, and the applicability of export rules.
-moz-binding - Archive of obsolete content
formal definition initial valuenoneapplies toall elements except generated content or pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <url> | none examples .exampleone { -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#
radiobutton); } specifications not part of any standard.
::-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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
::-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-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-siz...
::-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 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-siz...
::-ms-fill-lower - Archive of obsolete content
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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
::-ms-fill-upper - Archive of obsolete content
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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
::-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-reveal - Archive of obsolete content
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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
::-ms-thumb - Archive of obsolete content
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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
::-ms-ticks-after - Archive of obsolete content
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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
::-ms-ticks-before - Archive of obsolete content
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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
::-ms-track - Archive of obsolete content
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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
::-ms-value - Archive of obsolete content
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-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-siz...
CSS - Archive of obsolete content
ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and
radio button groups created by <input type="checkbox"> and <input type="
radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
XForms Custom Controls - Archive of obsolete content
custom data types - existing xforms controls are not able to work properly with your data type advanced xforms controls - you need your controls to be able to do more things than t
raditional xforms controls can do new host language - you'd like to support xforms in host languages other than xhtml or xul custom presentation the mozilla xforms extension cannot anticipate all of the possible use cases that will evolve in web applications and web pages as xforms matures and the user base grows.
Mozilla XForms User Interface - Archive of obsolete content
it can have the following representations: combobox - default representation listbox - used when appearance = 'compact'
radio group - used when appearance = 'full' additional elements these elements may be used as child elements to the form controls described above.
CSS numeric factory functions - Web APIs
mber); css.percent(number); // <length> css.em(number); css.ex(number); css.ch(number); css.ic(number); css.rem(number); css.lh(number); css.rlh(number); css.vw(number); css.vh(number); css.vi(number); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.g
rad(number); css.
rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.dpi(number); css.dpcm(number); css.dppx(number); // <flex> css.fr(number); examples we use the css.vmax() numeric factory function to create a cssunitvalue: let height = css.vmax(50); console.log( height ); // cssunitvalue {value: 5...
CSSImageValue - Web APIs
the cssimagevalue object represents an <image> that involves an url, such as url() or image(), but not linear-g
radient() or element() .
Canvas API - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasg
radient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
Clipboard - Web APIs
due to both potential security concerns and technical complexities, the process of integrating this api is happening g
radually in most browsers.
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.
CustomElementRegistry.define() - Web APIs
'}' + '.info {' + 'font-size: 0.8rem;' + 'width: 200px;' + 'display: inline-block;' + 'border: 1px solid black;' + 'padding: 10px;' + 'background: white;' + 'border-
radius: 10px;' + 'opacity: 0;' + 'transition: 0.6s all;' + 'position: absolute;' + 'bottom: 20px;' + 'left: 10px;' + 'z-index: 3;' + '}' + 'img {' + 'widt...
CustomElementRegistry.whenDefined() - Web APIs
const undefinedelements = container.queryselectorall(':not(:defined)'); const promises = [...undefinedelements].map( button => customelements.whendefined(button.localname) ); // wait for all the children to be upg
raded, // then remove the placeholder.
DataTransferItem.webkitGetAsEntry() - Web APIs
#dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-
radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
Detecting device orientation - Web APIs
so let's imagine a ball in a garden: <div class="garden"> <div class="ball"></div> </div> <pre class="output"></pre> this garden is 200 pixel wide (yes, it's a tiny one), and the ball is in the center: .garden { position: relative; width : 200px; height: 200px; border: 5px solid #ccc; border-
radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border-
radius: 100%; } now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var output = document.queryselector('.output'); var maxx = garden.clientwidth - ball.cl...
Device Memory API - Web APIs
t
raditionally, developrs had to use heruistics and either benchmark the device or infer the device capabilities based on other factors like device manufacturer or user agent strings.
Element: DOMActivate event - Web APIs
bubbles yes cancelable yes interface mouseevent examples <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseprofile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the
radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var current
radius = circle.getfloattrait("r"); if (current
radius == 100) circle.setfloattrait("r", current
radius * 2); else circle.setfloattrait("r", current
radius * 0.5); } ]]></script> <!-- act on each domactivate event --> <circle cx="3...
Element: compositionend event - Web APIs
="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-
radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${eve...
Element: compositionstart event - Web APIs
="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-
radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${eve...
Element: compositionupdate event - Web APIs
="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-
radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${eve...
Element: dblclick event - Web APIs
javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-
radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification.
Element.requestFullscreen() - Web APIs
exceptions rather than throw a t
raditional exception, the requestfullscreen() procedure announces error conditions by rejecting the promise it has returned.
Element.scrollHeight - Web APIs
</textarea> </p> <p> <input type="checkbox" id="agree" name="accept" /> <label for="agree">i agree</label> <input type="submit" id="nextstep" value="next" /> </p> </form> css #notice { display: inline-block; margin-bottom: 12px; border-
radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2a9f00 solid 2px; border-
radius: 5px; } javascript function checkreading () { if (checkreading.read) { return; } checkreading.read = this.scrollheight - this.scrolltop === this.clientheight; document.registration.accept.disabled = document.g...
Event.preventDefault() - Web APIs
html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-
radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
ExtendableEvent - Web APIs
this ensures that any functional events (like fetchevent) are not dispatched until it upg
rades database schemas and deletes the outdated cache entries.
Using Fetch - Web APIs
rigin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'content-type': 'application/json' // 'content-type': 'application/x-www-form-urlencoded', }, redirect: 'follow', // manual, *follow, error referrerpolicy: 'no-referrer', // no-referrer, *no-referrer-when-downg
rade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url body: json.stringify(data) // body data type must match "content-type" header }); return response.json(); // parses json response into native javascript objects } postdata('https://example.com/answer', { answer: 42 }) .then(data => { console.log(data); // json data parsed by ...
FileSystemDirectoryReader.readEntries() - Web APIs
#dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-
radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
FileHandle API - Web APIs
var idbreq = window.indexeddb.open('myfilestoragedatabase'); // if necessary, let's create a datastore for the files idbreq.onupg
radeneeded = function () { this.result.createobjectstore('files'); } idbreq.onsuccess = function () { var db = this.result; // let's create a new file var handlereq = db.mozcreatefilehandle("test.txt", "plain/text"); handlereq.onsuccess = function () { var myfilehandle = this.result; var store = db.transaction(['files'], 'readwrite').objectstore('files'); // let's store the ...
FormData() - Web APIs
those with a name, not disabled and checked (
radio buttons and checkboxes) or selected (one or more options within a select).
GlobalEventHandlers.oncontextmenu - Web APIs
html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-
radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'...
GlobalEventHandlers.onmousedown - Web APIs
html <div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width: 100px; height: 100px; background: white; border-
radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; event.preventdefault(); } function moveview(event) { view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; } function hideview(event) { view.
GlobalEventHandlers.onmousemove - Web APIs
html <p><a href="#" data-tooltip="first link">see a tooltip here …</a></p> <p><a href="#" data-tooltip="second link">… or here!</a></p> css .tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-
radius: 5px; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty + 10 + 'px'; }; this.show = function(event) { node.textcontent = ev...
GlobalEventHandlers.onmouseup - Web APIs
html <div class="container"> <div class="toaster"></div> <div class="toast">hello world!</div> </div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-
radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-
radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function rel...
msAudioCategory - Web APIs
examples include the following local media playback scenarios: local playlist streaming
radio streaming playlist music videos streaming audio/
radio, youtube, netflix, etc.
HTMLElement: change event - Web APIs
bubbles yes cancelable no interface event event handler property onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="
radio"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <...
HTMLElement: input event - Web APIs
for <input> elements with type=checkbox or type=
radio, the input event should fire whenever a user toggles the control, per the html5 specification.
HTMLFormControlsCollection - Web APIs
htmlformcontrolscollection.nameditem() returns the
radionodelist or the element in the collection whose name or id matches the specified name, or null if no nodes match.
HTMLFormElement - Web APIs
set="utf-8"> <title>example new-window form submission</title> </head> <body> <form action="test.php" target="_blank"> <p><label>first name: <input type="text" name="firstname"></label></p> <p><label>last name: <input type="text" name="lastname"></label></p> <p><label><input type="password" name="pwd"></label></p> <fieldset> <legend>pet preference</legend> <p><label><input type="
radio" name="pet" value="cat"> cat</label></p> <p><label><input type="
radio" name="pet" value="dog"> dog</label></p> </fieldset> <fieldset> <legend>owned vehicles</legend> <p><label><input type="checkbox" name="vehicle" value="bike">i have a bike</label></p> <p><label><input type="checkbox" name="vehicle" value="car">i have a car</label></p> </fieldset> <p><button>submit</b...
HTMLImageElement.sizes - Web APIs
i sure can't.</p> <button id="break40">last width: 40em</button> <button id="break50">last width: 50em</button> </article> css article { margin: 1em; max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #880e4f; border-
radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, u...
HTMLMediaElement.play() - Web APIs
exceptions the promise's rejection handler is called with an exception name passed in as its sole input parameter (as opposed to a t
raditional exception being thrown).
In depth: Microtasks and the JavaScript runtime environment - Web APIs
starting with the addition of timeouts and intervals as part of the web api (settimeout() and setinterval()), the javascript environment provided by web browsers has g
radually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth.
IDBDatabase.createObjectStore() - Web APIs
request.onupg
radeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: fal...
IDBDatabase.deleteObjectStore() - Web APIs
example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupg
radeneeded = function(e) { var db = request.result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc.
IDBObjectStore.name - Web APIs
invalidstateerror either the object store has been deleted or the current transaction is not an upg
rade transaction; you can only rename indexes during upg
rade transactions; that is, when the mode is "versionchange".
IDBRequest - Web APIs
this property can be null for certain requests, for example those returned from idbfactory.open unless an upg
rade is needed.
IDBTransaction.mode - Web APIs
transactions in this mode are known as "upg
rade transactions." example in the following code snippet, we open a read/write transaction on our database and add some data to an object store.
IDBTransaction - Web APIs
transactions in this mode are known as "upg
rade transactions." even if these constants are now deprecated, you can still use them to provide backward compatibility if required (in chrome the change was made in version 21).
IDBVersionChangeEvent.oldVersion - Web APIs
example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupg
radeneeded = function(e) { var db = request.result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc.
IDBVersionChangeRequest - Web APIs
the new way to do it is to use the idbopendbrequest interface which has now the onblocked handler and the newly needed onupg
radeneeded one.
IndexedDB API - Web APIs
custom event interfaces this specification fires events with the following custom interface: idbversionchangeevent the idbversionchangeevent interface indicates that the version of the database has changed, as the result of an idbopendbrequest.onupg
radeneeded event handler function.
KeyboardEvent.code - Web APIs
function updateposition(offset) { let
rad = angle * (math.pi/180); position.x += (math.sin(
rad) * offset); position.y -= (math.cos(
rad) * offset); if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an ...
MediaDevices.getUserMedia() - Web APIs
if you have a deviceid from mediadevices.enumeratedevices(), you can use it to request a specific device: { video: { deviceid: mypreferredcame
radeviceid } } the above will return the camera you requested, or a different camera if that specific camera is no longer available.
Using the MediaStream Recording API - Web APIs
t appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-g
radient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, w...
MimeTypeArray - Web APIs
} else { // notify the user that flash is being deprecated and they // should upg
rade their browser.
MutationEvent - Web APIs
performance adding dom mutation listeners to a document profoundly deg
rades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).
MutationObserver - Web APIs
// select the node that will be observed for mutations const targetnode = document.getelementbyid('some-id'); // options for the observer (which mutations to observe) const config = { attributes: true, childlist: true, subtree: true }; // callback function to execute when mutations are observed const callback = function(mutationslist, observer) { // use t
raditional 'for loops' for ie 11 for(let mutation of mutationslist) { if (mutation.type === 'childlist') { console.log('a child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('the ' + mutation.attributename + ' attribute was modified.'); } } }; // create an observer instance linked to the cal...
Navigator.mediaSession - Web APIs
an internet
radio app, for example, can use setactionhandler() to let fhe media controls on a keyboard or elsehwere on the user's device be used to control the app's media playback.
Navigator.sendBeacon() - Web APIs
ensuring that data has been sent during the unloading of a document has t
raditionally been difficult, because user agents typically ignore asynchronous xmlhttprequests made in an unload handler.
Navigator.serviceWorker - Web APIs
the navigator.serviceworker read-only property returns the serviceworkercontainer object for the associated document, which provides access to registration, removal, upg
rade, and communication with the serviceworker.
Navigator - Web APIs
navigator.serviceworker read only returns a serviceworkercontainer object, which provides access to registration, removal, upg
rade, and communication with the serviceworker objects for the associated document.
Node.isConnected - Web APIs
ow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-
radius: 10px; opacity: 0; transition: 0.6s all; positions: absolute; bottom: 20px; left: 10px; z-index: 3 } `; // attach the created style element to the shadow dom shadow.appendchild(style); console.log(style.isconnected); // returns true polyfill node.isconnected can be polyfilled with the following code for ie10 and edgehtml: /* * node.isconnected polyfill for ie and edgehtml * ...
Node.isEqualNode() - Web APIs
html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-
radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 equals div 0: " + divlist[0].isequalnode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 equals div 1: " + divlist[0].isequalnode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 equals d...
Node.isSameNode() - Web APIs
html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-
radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 same as div 0: " + divlist[0].issamenode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 same as div 1: " + divlist[0].issamenode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 same as ...
OES_standard_derivatives - Web APIs
the extensions: gl.getextension('oes_standard_derivatives'); gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dg
radext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status comment oes_standard_derivativesthe definition of 'oes_standard_derivatives' in that specification.
RTCIceCandidate.relatedAddress - Web APIs
here's an sdp attribute line (a-line) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx
raddr 192.168.2.77 rport 32768 generation 0 the remote address, relatedaddress, is the dotted quad (for ipv4) or colon-delineated 64-bit address (for ipv6) immediately following the text "
raddr", or "192.168.2.77".
RTCIceCandidate.relatedPort - Web APIs
here's an sdp attribute line (a-line) describing an ice candidate discovered by the stun server: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 6502 typ srflx
raddr 192.168.2.77 rport 32768 generation 0 the remote port, relatedport, is the number immediately following the "rport" label on the a-line, or 32768.
RTCRtpSendParameters - Web APIs
deg
radationpreference specifies the preferred way the webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtcdeg
radationpreference enumerated string type, and the default is balanced.
RTCRtpSender.setParameters() - Web APIs
the available options are: deg
radationpreference specifies the preferred way the webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtcdeg
radationpreference enumerated string type, and the default is balanced.
ResizeObserverEntry.borderBoxSize - Web APIs
examples const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.borderboxsize && entry.borderboxsize.length > 0) { entry.target.style.border
radius = math.min(100, (entry.borderboxsize[0].inlinesize/10) + (entry.borderboxsize[0].blocksize/10)) + 'px'; } else { entry.target.style.border
radius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.
SVGEllipseElement - Web APIs
example svg content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse" onclick="outputsize();"/> </svg> javascript content function outputsize() { var ellipse = document.getelementbyid("ellipse"); // outputs "horizontal
radius: 100 vertical
radius: 60" console.log( 'horizontal
radius: ' + ellipse.rx.baseval.valueasstring, 'vertical
radius: ' + ellipse.ry.baseval.valueasstring ) } result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgellipseelement' in that specification.
SVGUnitTypes - Web APIs
the svgunittypes interface defines a commonly used set of constants used for reflecting g
radientunits, patterncontentunits and other similar attributes.
Sensor APIs - Web APIs
handling the errors gracefully so that the user experience is enhanced rather than deg
raded.
Server-sent events - Web APIs
t
raditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server.
ServiceWorkerGlobalScope: activate event - Web APIs
bubbles no cancelable no interface extendableevent event handler property serviceworkerglobalscope.onactivate examples the following snippet shows how you could use an activate event handler to upg
rade a cache.
Streams API - Web APIs
this is something browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is g
radually available to play, and sometimes you'll see images display g
radually as more is loaded.
TextEncoder.prototype.encodeInto() - Web APIs
if the output is expected to be long-lived, it makes sense to compute minimum allocation rounduptobucketsize(s.length), the maximum allocation size s.length * 3, and to have a chosen (as a t
radeoff between memory usage and speed) threshold t such that if rounduptobucketsize(s.length) + t >= s.length * 3, you simply allocate for s.length * 3.
TouchEvent - Web APIs
this event is also sent if the values of the
radius, rotation angle, or force attributes of a touch point change.
Using Touch Events - Web APIs
the new features include the x and y
radius of the ellipse that most closely circumscribes a touch point's contact area with the touch surface.
WebGLRenderingContext.makeXRCompatible() - Web APIs
exceptions this method doesn't throw t
raditional exceptions; instead, the promise rejects with one of the following errors as the value passed into the rejection handler: aborterror switching the context over to the webxr-compatible context failed.
WebGL constants - Web APIs
compressed_rgba_atc_interpolated_alpha_webgl 0x87ee compresses rgba textures using interpolated alpha encoding (useful when alpha transitions are g
radient).
Adding 2D content to a WebGL context - Web APIs
const fieldofview = 45 * math.pi / 180; // in
radians const aspect = gl.canvas.clientwidth / gl.canvas.clientheight; const znear = 0.1; const zfar = 100.0; const projectionmatrix = mat4.create(); // note: glmatrix.js always has the first argument // as the destination to receive the result.
Animating objects with WebGL - Web APIs
after translating to the initial drawing position for the square, we apply the rotation like this: mat4.rotate(modelviewmatrix, // destination matrix modelviewmatrix, // matrix to rotate squarerotation, // amount to rotate in
radians [0, 0, 1]); // axis to rotate around this rotates the modelviewmatrix by the current value of squarerotation, around the z axis.
WebRTC connectivity - Web APIs
after all, you were most likely just trying to upg
rade or downg
rade the connection, or to otherwise make adaptations to an ongoing session.
Signaling and video calling - Web APIs
though not currently supported, a candidate received after media is already flowing could theoretically also be used to downg
rade to a lower-bandwidth connection if needed.
Writing WebSocket client applications - Web APIs
establishing a websocket relies on the http upg
rade mechanism, so the request for the protocol upg
rade is implicit when we address the web server as ws://www.example.com or wss://www.example.com.
Fundamentals of WebXR - Web APIs
the width of the field of view is measured as the angle defining the arc from the far left edge of your field of view to the far right edge, and is specified in either degrees or
radians.
WebXR Device API - Web APIs
viewpoints and viewers: simulating cameras in webxr webgl (and therefore webxr) doesn't really have a concept of a camera, which is the t
raditional concept used to represent a viewpoint in 3d graphics.
Example and tutorial: Simple synth keyboard - Web APIs
n> <option value="custom">custom</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-
radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-s...
Web audio spatialization basics - Web APIs
let's set up a rotation rate, which we'll convert into a
radian range value for use in math.sin and math.cos later, when we want to figure out the new coordinates when we're rotating our boombox: // set up rotation constants const rotationrate = 60; // bigger number equals slower sound rotation const q = math.pi/rotationrate; //rotation increment in
radians we can also use this to work out degrees rotated, which will help with the css transforms we wil...
Window.screenLeft - Web APIs
) { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degto
rad(0), degto
rad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimationframe(positionelem); } window.requestanimationframe(positionelem); also in the code we include a snippet that detects whether screenleft is supported, and if not, polyfills in screenleft/screentop using window.screenx/wi...
Window.screenTop - Web APIs
) { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degto
rad(0), degto
rad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimationframe(positionelem); } window.requestanimationframe(positionelem); also in the code we include a snippet that detects whether screenleft is supported, and if not, polyfills in screenleft/screentop using window.screenx/wi...
Window.screenX - Web APIs
) { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degto
rad(0), degto
rad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimationframe(positionelem); } window.requestanimationframe(positionelem); these work in exactly the same way as screenx/screeny.
Window.screenY - Web APIs
) { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degto
rad(0), degto
rad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimationframe(positionelem); } window.requestanimationframe(positionelem); these work in exactly the same way as screenx/screeny.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
e: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-
radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[ <span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" oncl...
XRRenderState.inlineVerticalFieldOfView - Web APIs
the inlineverticalfieldofview read-only property of the xrrenderstate interface defines the angle of the field of view in
radians used when computing projection matrices for "inline" xrsession objects.
XRRenderState - Web APIs
inlineverticalfieldofview read only the default vertical field of view, defined in
radians, to use when the session is in inline mode.
XRRenderStateInit - Web APIs
inlineverticalfieldofview optional a floating-point value indicating the default field of view, in
radians, to be used when computing the projection matrix for an inline xrsession.
XRSession.updateRenderState() - Web APIs
inlineverticalfieldofview optional a floating-point value indicating the default field of view, in
radians, to be used when computing the projection matrix for an inline xrsession.
XRView.transform - Web APIs
if you instead need the more t
raditional view matrix, you can get using view.transform.inverse.matrix; this gets the underlying matrix of the transform's inverse.
Using the aria-labelledby attribute - Accessibility
</div> example 3:
radio groups in the example below, the container of a
radiogroup is associated with its label using the aria-labelledby attribute: <div id="
radio_label">my
radio label</div> <ul role="
radiogroup" aria-labelledby="
radio_label"> <li role="
radio">item #1</li> <li role="
radio">item #2</li> <li role="
radio">item #3</li> </ul> example 4: dialog label in the example below, the header elemen...
Using the aria-required attribute - Accessibility
d="true" /> <br/> <label for="lastname">last name:</label> <input id="lastname" type="text" aria-required="true" /> <br/> <label for="streetaddress">street address:</label> <input id="streetaddress" type="text" /> </form> working examples: tooltip example (includes the use of the aria-required attribute) notes used in aria roles combobox gridcell listbox
radiogroup spinbutton textbox tree related aria techniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in html5 ...
ARIA: switch role - Accessibility
witch.addeventlistener("click", handleclickevent, false); }); function handleclickevent(evt) { let el = evt.target; if (el.getattribute("aria-checked") == "true") { el.setattribute("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch pa
radigm.
ARIA: tab role - Accessibility
ole="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </div> <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>content for the third panel</p> </div> </div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position: relative; z-index: 1; background: white; border-
radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padding: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-
radius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-color: orange; outline: 1px solid orange; } there are ...
ARIA: listbox role - Accessibility
it is highly recommended to use the html select element, or a group of
radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free.
ARIA - Accessibility
it is also important to acknowledge that some people who rely on assistive technology are reluctant to upg
rade their software, for fear of losing the ability to interact with their computer and browser.
HTML To MSAA - Accessibility
cted n/a "activate" n/a input type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if intermediate property of dom element returns true state_system_ checked if checked property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state is changed input type="
radio" role_system_
radiobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" event_object_ statechange when state is changed label role_system_ statictext from child nodes n/a n/a n/a n/a n/a legend role_system_ statictext n/a n/a n/a label_for (0x1002), points to caption element n/a n/a li and ...
Text labels and names - Accessibility
examples <form> <fieldset> <legend>choose your favorite monster</legend> <input type="
radio" id="kraken" name="monster"> <label for="kraken">kraken</label><br/> <input type="
radio" id="sasquatch" name="monster"> <label for="sasquatch">sasquatch</label><br/> <input type="
radio" id="mothman" name="monster"> <label for="mothman">mothman</label> </fieldset> </form> you can see a live, interactive version of this example on the <fieldset> reference page.
:-moz-window-inactive - CSS: Cascading Style Sheets
html <div id="mybox"> <p>this is a box!</p> </div> css #mybox { background: linear-g
radient(to bottom, yellow, cyan); width: 200px; height: 200px; } #mybox:-moz-window-inactive { background: cyan; } result the result of this code is shown below.
::-webkit-meter-bar - CSS: Cascading Style Sheets
examples html <meter min="0" max="10" value="6">score out of 10</meter> css meter { /* reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } meter::-webkit-meter-bar { background: #eee; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset; border-
radius: 3px; } result ...
::-webkit-meter-suboptimum-value - CSS: Cascading Style Sheets
html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-webkit-meter-suboptimum-value { background: -webkit-g
radient linear, left top, left bottom; height: 100%; box-sizing: border-box; } result specifications not part of any standard.
::after (:after) - CSS: Cascading Style Sheets
</p> css span[data-descr] { position: relative; text-decoration: underline; color: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-
radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } result specifications specification status comment css pseudo-elements level 4the definition of '::after' in that specification.
:fullscreen - CSS: Cascading Style Sheets
syntax :fullscreen usage notes the :fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and t
raditional presentations.
:hover - CSS: Cascading Style Sheets
note: for an analogous effect, but based on the :checked pseudo-class (applied to hidden
radioboxes), see this demo, taken from the :checked reference page.
:target - CSS: Cascading Style Sheets
{ width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-
radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status comment html living standardthe definition of ':target' in that sp...
prefers-reduced-motion - CSS: Cascading Style Sheets
*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-
radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment media q...
shape - CSS: Cascading Style Sheets
rect the shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the t
raditional designs are appropriate.
Using CSS animations - CSS: Cascading Style Sheets
there are three key advantages to css animations over t
raditional script-driven animation techniques: they’re easy to use for simple animations; you can create them without even having to know javascript.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column: 1; grid-row: 2; } <div class="wrapper"> <div class="box box1"><a href="">one</a></di...
CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid rgb(233,171,88); border-
radius: 5px; background-color: rgba(233,171,88,.5); padding: 1em; color: #d9480f; } html <div class="wrapper"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> <div class="five">five</div> <div class="six">six</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; ...
CSS Logical Properties and Values - CSS: Cascading Style Sheets
style border-block-start-width border-block-style border-block-width border-color (logical keyword) border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-start-start-
radius border-start-end-
radius border-end-start-
radius border-end-end-
radius border-style (logical keyword) border-width (logical keyword) margin (logical keyword) margin-block margin-block-end margin-block-start margin-inline margin-inline-end margin-inline-start padding (logical keyword) padding-block padding-block-end padding-block-start padding-inline padding-inline-end ...
Using CSS transitions - CSS: Cascading Style Sheets
simply add a transition to the element and any change will happen smoothly: p { padding-left: 60px; } #foo { border-
radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; } you can play with this here: http://jsfiddle.net/9h261pzo/291/ detecting the start and completion of a transition you can use the transitionend event to detect that an animation has finished running.
CSS data types - CSS: Cascading Style Sheets
es 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> <g
radient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-
radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment ...
Tools - CSS: Cascading Style Sheets
this is not really yet a useful tool, but will be!linear-g
radient generatorthis tool can be used to create custom css3 linear-g
radient() backgrounds.
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-g
radient(rgb(219, 166, 166), rgb(0, 0, 172)); background-positi...
background-clip - CSS: Cascading Style Sheets
d extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p> css p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-g
radient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); } result specifications specification status ...
border-image-outset - CSS: Cascading Style Sheets
es to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image:
radial-g
radient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-outset' in that specification.
border - CSS: Cascading Style Sheets
amazing, isn't it?</div> css div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-
radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border' in that specification.
display - CSS: Cascading Style Sheets
n> <option>grid</option> <option>inline-grid</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; padding-top: 10px; } article { background-color: red; } article span { background-color: black; color: white; margin: 1px; } article, span { padding: 10px; border-
radius: 7px; } article, div { margin: 20px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((article) => { article.style.display = select.value; }); } select.addeventlistener('change', updatedisplay); updatedisplay(); result note: you can find more examples in the p...
grid-column-end - CSS: Cascading Style Sheets
/div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-
radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition ...
grid-column-start - CSS: Cascading Style Sheets
/div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-
radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition ...
grid-row-end - CSS: Cascading Style Sheets
/div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-
radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition ...
grid-row-start - CSS: Cascading Style Sheets
/div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-
radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-
radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-
radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition ...
image-rendering - CSS: Cascading Style Sheets
if system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to deg
rade the quality of and to what degree.
justify-content - CSS: Cascading Style Sheets
-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples setting flex item distribution css #container { display: flex; justify-content: space-between; /* can be changed in the live sample */ } #container > div { width: 100px; height: 100px; background: linear-g
radient(-45deg, #788cff, #b4c8ff); } html <div id="container"> <div></div> <div></div> <div></div> </div> <select id="justifycontent"> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="left">left</option> <option va...
justify-items - CSS: Cascading Style Sheets
; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-
radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'justify-items' in that specification.
justify-self - CSS: Cascading Style Sheets
grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } span:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-
radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'justify-self' in that specification.
<length-percentage> - CSS: Cascading Style Sheets
html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width: 75%; height: 200px; margin: 3rem; padding: 1%; border-
radius: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expre...
mask-mode - CSS: Cascading Style Sheets
n initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: blue linear-g
radient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.geteleme...
mask-position - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-g
radient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bo...
mask-repeat - CSS: Cascading Style Sheets
ontainer elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-g
radient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="s...
outline - CSS: Cascading Style Sheets
he computed value is 0outline-style: as specifiedanimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-
radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; } result specifications specification status comment css basic user interface module level 3the definition of 'outline' in that specification.
overscroll-behavior-block - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 3000px; width: 500px; background-color: white; background-image: repeating-linear-g
radient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; background-color: yellow; background-image: repeating-linear-g
radient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19...
overscroll-behavior-inline - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 400px; width: 3000px; background-color: white; background-image: repeating-linear-g
radient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px; background-color: yellow; background-image: repeating-linear-g
radient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19p...
place-self - CSS: Cascading Style Sheets
ed; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start center; } span:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-
radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'place-self' in that specification.
position - CSS: Cascading Style Sheets
<dd>at the drive-in</dd> <dd>aziz ansari</dd> </div> <div> <dt>c</dt> <dd>chromeo</dd> <dd>common</dd> <dd>converge</dd> <dd>crystal castles</dd> <dd>cursive</dd> </div> <div> <dt>e</dt> <dd>explosions in the sky</dd> </div> <div> <dt>t</dt> <dd>ted leo & the pharmacists</dd> <dd>t-pain</dd> <dd>thrice</dd> <dd>tv on the
radio</dd> <dd>two gallants</dd> </div> </dl> css * { box-sizing: border-box; } dl > div { background: #fff; padding: 24px 0 0 0; } dt { background: #b8c1c8; border-bottom: 1px solid #989ea4; border-top: 1px solid #717d85; color: #fff; font: bold 18px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; t...
scale - CSS: Cascading Style Sheets
ntsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <number>{1,3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-
radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
<transform-function> - CSS: Cascading Style Sheets
atey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-g
radient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { ...
transform - CSS: Cascading Style Sheets
10deg); transform: rotatez(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: translatez(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scalex(2); transform: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.07
rad); /* multiple function values */ transform: translatex(10px) rotate(10deg) translatey(5px); transform: perspective(500px) translate(10px, 0, 20px) rotatey(3deg); /* global values */ transform: inherit; transform: initial; transform: unset; the transform property may be specified as either the keyword value none or as one or more <transform-function> values.
translate - CSS: Cascading Style Sheets
]?where <length-percentage> = <length> | <percentage> examples html <div> <p class="translate">translation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-
radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
url() - CSS: Cascading Style Sheets
r: 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-g
radient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
white-space - CSS: Cascading Style Sheets
excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> .box { width: 300px; padding: 16px; border-
radius: 10px; } #css-code { background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #results { background-color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var results = document.queryselector("#results ...
zoom - CSS: Cascading Style Sheets
">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; border-
radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { background-color: gold; zoom: normal; } div#b { background-color: green; zoom: 200%; } div#c { background-color: blue; zoom: 2.9; } result specifications not part of any standard.
Ajax - Developer guides
server-sent events t
raditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server.
Video player styling basics - Developer guides
progress bar the <progress> element has the following basic style set up: .controls progress { display:block; width:100%; height:81%; margin-top:0.125rem; border:none; color:#0095dd; -moz-border-
radius:2px; -webkit-border-
radius:2px; border-
radius:2px; } like the <button> elements, <progress> also has a default border, which is removed here.
Audio and Video Delivery - Developer guides
streaming media tutorials live streaming web audio and video live streaming technology is often employed to relay live events such as sports, concerts and more generally tv and
radio programmes that are output live.
Mutation events - Developer guides
performance adding dom mutation listeners to a document profoundly deg
rades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).
Constraint validation - Developer guides
a valid date and time max range, number a valid number the value must be less than or equal to the value rangeoverflow constraint violation date, month, week a valid date datetime, datetime-local, time a valid date and time required text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox,
radio, file; also on the <select> and <textarea> elements none as it is a boolean attribute: its presence means true, its absence means false there must be a value (if set).
A hybrid approach - Developer guides
decisions like these are at the heart of mobile web development: be specific about what you would like to accomplish, and pick a practical approach while being aware of the t
radeoffs.
Developer guides
progressive web apps progressive web apps (pwas) use modern web apis along with t
raditional progressive enhancement strategy to create cross-platform web applications.
HTML attribute: minlength - HTML: Hypertext Markup Language
input { border: 2px solid currentcolor; } input:invalid { border: 2px dashed red; } input:invalid:focus { background-image: linear-g
radient(pink, lightgreen); } specifications specification status html living standardthe definition of 'minlength attribute' in that specification.
<a>: The Anchor element - HTML: Hypertext Markup Language
implicit aria role link when href attribute is present, otherwise no corresponding role permitted aria roles when href attribute is present: button checkbox menuitem menuitemcheckbox menuitem
radio option
radio switch tab treeitem when href attribute is not present: any dom interface htmlanchorelement examples linking to an absolute url html <a href="https://www.mozilla.com"> mozilla </a> result linking to relative urls html <a href="//example.com">scheme-relative url</a> <a href="/docs/web/html">origin-r...
<div>: The Content Division element - HTML: Hypertext Markup Language
html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-g
radient(180deg, #fff, #ddd 40%, #ccc); } result specifications specification status comment html living standardthe definition of '<div>' in that specification.
<form> - HTML: Hypertext Markup Language
ame" autocomplete="name"> </label> <button>save</button> </form> <!-- form which will send a post request to the current url --> <form method="post"> <label>name: <input name="submitted-name" autocomplete="name"> </label> <button>save</button> </form> <!-- form with fieldset, legend, and label --> <form method="post"> <fieldset> <legend>title</legend> <label><input type="
radio" name="
radio"> select me</label> </fieldset> </form> specifications specification status comment html living standardthe definition of '<form>' in that specification.
<input type="file"> - HTML: Hypertext Markup Language
x 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 what we've seen before — nothing special to comment on.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
result the output looks like this without a style sheet applied: with custom styles we can make more sense of this by adding some css: css we add a new style for <kbd> elements, key, which we can apply when rendering keyboard keys: kbd.key { border-
radius: 3px; padding: 1px 2px 0; border: 1px solid black; } html then we update the html to use this class on the keys in the output to be presented: <p>you can also create a new document by pressing <kbd><kbd class="key">ctrl</kbd>+<kbd class="key">n</kbd></kbd>.</p> result the result is just what we want!
<li> - HTML: Hypertext Markup Language
implicit aria role listitem when child of an ol, ul or menu permitted aria roles menuitem, menuitemcheckbox, menuitem
radio, option, none, presentation,
radio, separator, tab, treeitem dom interface htmllielement attributes this element includes the global attributes.
<menu> - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation,
radiogroup, tablist, toolbar or tree dom interface htmlmenuelement attributes this element includes the global attributes.
<ol>: The Ordered List element - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation,
radiogroup, tablist, toolbar, tree dom interface htmlolistelement attributes this element also accepts the global attributes.
<slot> - HTML: Hypertext Markup Language
examples <template id="element-details-template"> <style> details {font-family: "open sans light", helvetica, arial, sans-serif } .name {font-weight: bold; color: #217ac0; font-size: 120% } h4 { margin: 10px 0 -8px 0; background: #217ac0; color: white; padding: 2px 6px; border: 1px solid #cee9f9; border-
radius: 4px; } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="description">need description</slot></i> </summary> <div class="attributes"> <h4>attributes</h4> ...
<ul>: The Unordered List element - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation,
radiogroup, tablist, toolbar, tree dom interface htmlulistelement attributes this element includes the global attributes.
HTML documentation index - HTML: Hypertext Markup Language
132 <input type="
radio"> choosing options, element, form options, html, html input types, html forms, html input, input, input types, options,
radio buttons,
radio groups, reference, form,
radio,
radio button <input> elements of type
radio are generally used in
radio groups—collections of
radio buttons describing a set of related options.
Data URLs - HTTP
encoding data into base64 format base64 is a group of binary-to-text encoding schemes that represent binary data in an ascii string format by translating it into a
radix-64 representation.
Content negotiation - HTTP
t
raditionally, it was set to a different value for each locale for the browser, like iso-8859-1,utf-8;q=0.7,*;q=0.7 for a western european locale.
Access-Control-Allow-Headers - HTTP
access-control-allow-headers: x-custom-header, upg
rade-insecure-requests bypassing additional restrictions although cors-safelisted request headers are always allowed and don't usually need to be listed in access-control-allow-headers, listing them anyway will circumvent the additional restrictions that apply.
Connection - HTTP
except for the standard hop-by-hop headers (keep-alive, transfer-encoding, te, connection, trailer, upg
rade, 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.
CSP: referrer - HTTP
"none-when-downg
rade" this is the user agent's default behavior if no policy is specified.
Network Error Logging - HTTP
servfail) dns.address_changed for security reasons, if the server ip address that delivered the original report is different to the current server ip address at time of error generation, the report data will be downg
raded to only include information about this problem and the type set to dns.address_changed.
Functions - JavaScript
parseint() the parseint() function parses a string argument and returns an integer of the specified
radix (the base in mathematical numeral systems).
Loops and iteration - JavaScript
therefore, it is better to use a t
raditional for loop with a numeric index when iterating over arrays, because the for...in statement iterates over user-defined properties in addition to the array elements, if you modify the array object (such as adding custom properties or methods).
Using Promises - JavaScript
using async/await addresses most, if not all of these problems—the t
radeoff being that the most common mistake with that syntax is forgetting the await keyword.
JavaScript error reference - JavaScript
error: permission denied to access property "x"internalerror: too much recursionrangeerror: argument is not a valid code pointrangeerror: invalid array lengthrangeerror: invalid daterangeerror: precision 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: refer...
BigInt - JavaScript
bigint.prototype.tostring() returns a string representing the specified object in the specified
radix (base).
Function.name - JavaScript
can define a function with a name in a function expression: let object = { somemethod: function object_somemethod() {} }; console.log(object.somemethod.name); // logs "object_somemethod" try { object_somemethod } catch(e) { console.log(e); } // referenceerror: object_somemethod is not defined the name property is read-only and cannot be changed by the assigment operator: example below cont
radicts with what is said at the beginning of this section and doesn't work as described.
Intl.Collator() constructor - JavaScript
possible values include: "big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "t
rad", "unihan".
Intl.Locale.prototype.collation - JavaScript
for cjk characters (used in chinese) reformed reformed ordering (such as in swedish) search special collation type for string search searchjl special collation type for korean initial consonant search standard default ordering for each language stroke pinyin ordering for latin, stroke order for cjk characters (used in chinese) t
rad t
raditional style ordering (such as in spanish) unihan pinyin ordering for latin, unihan
radical-stroke ordering for cjk characters (used in chinese) zhuyin pinyin ordering for latin, zhuyin order for bopomofo and cjk characters (used in chinese) examples like other locale subtags, the collation type can be added to the intl.locale object via the locale...
JSON.stringify() - JavaScript
boolean, number, and string objects are converted to the corresponding primitive values during stringification, in accord with the t
raditional conversion semantics.
Math.imul() - JavaScript
if you use normal javascript floating point numbers in imul, you will experience a deg
rade in performance.
Destructuring assignment - JavaScript
setting a function parameter's default value function drawchart({size = 'big', coords = {x: 0, y: 0},
radius = 25} = {}) { console.log(size, coords,
radius); // do some chart drawing } drawchart({ coords: {x: 18, y: 30},
radius: 30 }); in the function signature for drawchart above, the destructured left-hand side is assigned to an empty object literal on the right-hand side: {size = 'big', coords = {x: 0, y: 0},
radius = 25} = {}.
Optional chaining (?.) - JavaScript
for instance: let potentiallynullobj = null; let x = 0; let prop = potentiallynullobj?.[x++]; console.log(x); // 0 as x was not incremented stacking the optional chaining operator with nested structures, it is possible to use optional chaining multiple times: let customer = { name: "carl", details: { age: 82, location: "pa
radise falls" // detailed address is unknown } }; let customercity = customer.details?.address?.city; // … this also works with optional chaining function call let duration = vacations.trip?.gettime?.(); combining with the nullish coalescing operator the nullish coalescing operator may be used after optional chaining in order to build a default value when none was found: let customer = { n...
Pipeline operator (|>) - JavaScript
the result is syntactic sugar in which a function call with a single argument can be written like this: let url = "%21" |> decodeuri; the equivalent call in t
raditional syntax looks like this: let url = decodeuri("%21"); syntax expression |> function the value of the specified expression is passed into the function as its sole parameter.
Authoring MathML - MathML
alternatively, you can use the more t
raditional javascript parsing of expressions at load time as all the other tools in this section do.
<menclose> - MathML
possible values are: value sample rendering rendering in your browser description longdiv (default) a2 + b2 long division symbol actuarial a2 + b2 actuarial symbol
radical a2 + b2 square root symbol.
MathML element reference - MathML
) g <mglyph> (displaying non-standard symbols) i <mi> (identifier) l <mlabeledtr> (labeled row in a table or a matrix) <mlongdiv> (long division notation) m <mmultiscripts> (prescripts and tensor indices) n <mn> (number) o <mo> (operator) <mover> (overscript) p <mpadded> (space around content) <mphantom> (invisible content with reserved space) r <mroot> (
radical with specified index) <mrow> (grouped sub-expressions) s <ms> (string literal) <mscarries> (annotations such as carries) <mscarry> (single carry, child element of <mscarries>) <msgroup> (grouped rows of <mstack> and <mlongdiv> elements) <msline> (horizontal lines inside <mstack> elements) <mspace> (space) <msqrt> (square root without an index) <msrow> (rows in <mstack> elements) ...
Web audio codec guide - Web media technologies
it was standardized in 1999 as part of the 3gpp audio standard used for both gsm and umts cellular telephony, and uses a multi-rate narrowband algorithm to encode audio frequencies at a telephony-g
rade quality level at around 7.4 kbps.
Digital audio concepts - Web media technologies
as a result, audio data is difficult to compress using t
raditional algorithms such as those used by generral-purpose tools like zip, which usually work by replacing repeating sequences of data with a shorthand representation.
Privacy, permissions, and information security
res the document in the frame should be allowed to access http public key pinning (hpkp) hpkp is used by servers to instruct a client to associate a specific public key with the server going forward in order to decrease the likelihood of man-in-the-middle attacks http strict transport security (hsts) hsts is used by servers to let them protect themselves from protocol downg
rade and cookie hijack attacks by letting sites tell clients that they can only use https to communicate with the server http/2 while http/2 technically does not have to use encryption, most browser developers are only supporting it when used with https, so it can be thought of in that regard as being security-related permissions api provides a way to determine the status of p...
Progressive web app structure - Progressive web apps (PWAs)
imports data from the games.js file: self.importscripts('data/games.js'); next, it creates a list of all the files to be cached, both from the app shell and the content: var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/g
raduate.eot', '/pwa-examples/js13kpwa/fonts/g
raduate.ttf', '/pwa-examples/js13kpwa/fonts/g
raduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icon...
Structural overview of progressive web apps - Progressive web apps (PWAs)
this list includes both app shell and content files: var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/g
raduate.eot', '/pwa-examples/js13kpwa/fonts/g
raduate.ttf', '/pwa-examples/js13kpwa/fonts/g
raduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icon...
Progressive web apps (PWAs)
progressive web apps are web apps that use emerging web browser apis and features along with t
raditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications.
class - SVG: Scalable Vector Graphics
ltglyph> <circle> <clippath> <defs> <desc> <ellipse> <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <feflood> <fegaussianblur> <feimage> <femerge> <femorphology> <feoffset> <fespecularlighting> <fetile> <feturbulence> <filter> <font> <foreignobject> <g> <glyph> <glyphref> <image> <line> <linearg
radient> <marker> <mask> <missing-glyph> <path> <pattern> <polygon> <polyline> <
radialg
radient> <rect> <stop> <svg> <switch> <symbol> <text> <textpath> <title> <tref> <tspan> <use> ...
onclick - SVG: Scalable Vector Graphics
thirty-seven elements are using this attribute: <a>, <altglyph>, <animate>, <animatemotion>, <animatetransform>, <circle>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <linearg
radient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <
radialg
radient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none ...
opacity - SVG: Scalable Vector Graphics
it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearg
radient id="g
radient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </linearg
radient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#g
radient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" /> </svg> usage ...
operator - SVG: Scalable Vector Graphics
two elements are using this attribute: <fecomposite> and <femorphology> html, body, svg { height: 100%; font: 20px arial, helvetica, sans-serif; } <svg viewbox="0 0 120 70" xmlns="http://www.w3.org/2000/svg"> <filter id="erode"> <femorphology operator="erode"
radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate"
radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be performed.
paint-order - SVG: Scalable Vector Graphics
example <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <linearg
radient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </linearg
radient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold"> <text x="200" y="75">stroke over</text> <text ...
transform - SVG: Scalable Vector Graphics
also, as a legacy from svg 1.1, <linearg
radient> and <
radialg
radient> support the g
radienttransform attribute, and <pattern> supports the patterntransform attribute, both of which act exactly like the transform attribute.
xlink:arcrole - SVG: Scalable Vector Graphics
ically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <linearg
radient>, <mpath>, <pattern>, <
radialg
radient>, <script>, <set>, <textpath>, <tref>, <use> usage notes value <iri> default value none animatable no <iri> this value specifies an iri reference that identifies some resource that describes the intended property.
xlink:type - SVG: Scalable Vector Graphics
twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <linearg
radient>, <mpath>, <pattern>, <
radialg
radient>, <script>, <set>, <textpath>, <tref>, and <use> usage notes value simple default value simple animatable no simple this value specifies that the referred resource is a simple link.
<g> - SVG: Scalable Vector Graphics
-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface.
<marker> - SVG: Scalable Vector Graphics
aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment svg markersthe definition of '<marker>' in that specification.
<mask> - SVG: Scalable Vector Graphics
y, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment css masking module level 1the definition of '<mask>' in that specification.
<missing-glyph> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgmissingglyphelement interface.
<pattern> - SVG: Scalable Vector Graphics
ndering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<pattern>' in that specification.
<svg> - SVG: Scalable Vector Graphics
-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<symbol> - SVG: Scalable Vector Graphics
-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsg
radient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> note: a <symbol> element itself is not meant to be rendered.
<view> - SVG: Scalable Vector Graphics
der:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <
radialg
radient id="g
radient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </
radialg
radient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#g
radient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#hal...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
ntation status unknown rgba, hsl, lab, icc named colors and device colors implementation status unknown color-profile removed implementation status unknown <color-profile> removed implementation status unknown paint servers change notes <solidcolor> (renamed solidcolor) not implemented (bug 1177032) fr attribute for <
radialg
radient> not implemented (bug 1240275) <mesh> (renamed meshg
radient) not implemented (bug 1238882) <meshrow> (renamed meshrow) not implemented (bug 1238882) <meshpatch> (renamed meshpatch) not implemented (bug 1238882) <hatch> not implemented (bug 1239147) <hatchpath> (renamed hatchpath) not implemented (bug 1239147) displ...
SVG Tutorial - SVG: Scalable Vector Graphics
introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes g
radients patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials.