Search completed in 3.82 seconds.
SVGRadialGradientElement - Web APIs
the sv
gradial
gradientelement interface corresponds to the <radial
gradient> element.
...onaco,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/svg
gradientelement" 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">svg
gradientelement</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/sv
gradial
gradientelement" 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">sv
gradial
gradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svg
gradientelement.
...And 8 more matches
Using CSS gradients - CSS: Cascading Style Sheets
css
gradients are represented by the <
gradient> data type, a special type of <image> made of a progressive transition between two or more colors.
... you can choose between three types of
gradients: linear (created with the linear-
gradient() function), radial (created with radial-
gradient()), and conic (created with the conic-
gradient() function).
... you can also create repeating
gradients with the repeating-linear-
gradient(), repeating-radial-
gradient(), and repeating-conic-
gradient() 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
gradients as either fills or strokes.
... there are two types of
gradients: linear and radial.
... you must give the
gradient an id attribute; otherwise it can't be referenced by other elements inside the file.
...And 44 more matches
conic-gradient() - CSS: Cascading Style Sheets
the conic-
gradient() css function creates an image consisting of a
gradient with color transitions rotated around a center point (rather than radiating from the center).
... example conic
gradients include pie charts and color wheels.
... the result of the conic-
gradient() function is an object of the <
gradient> data type, which is a special kind of <image>.
...And 39 more matches
repeating-conic-gradient() - CSS: Cascading Style Sheets
the repeating-conic-
gradient() css function creates an image consisting of a repeating
gradient (rather than a single
gradient) with color transitions rotated around a center point (rather than radiating from the center).
... {{embedinteractiveexample("pages/css/function-repeating-conic-
gradient.html")}} the source for this interactive example is stored in a github repository.
... syntax /* starburst: a a blue on blue starburst: the
gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */ background: repeating-conic-
gradient( from 3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%, 60%) 10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the
gradient rotation in clockwise direction.
...And 38 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
linear-
gradient generator html content <div id="container"> <div id="
gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> ...
...iv 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="
gradient-axes"></div> <div id="
gradient-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 ...
...ne; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-
gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-
gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-
gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-
gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-
gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-
gradient(left, #fff 0%, rgba(255, 255, 255, ...
...And 37 more matches
linear-gradient() - CSS: Cascading Style Sheets
the linear-
gradient() 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 <
gradient> data type, which is a special kind of <image>.
... syntax /* a
gradient tilted 45 degrees, starting blue and finishing red */ linear-
gradient(45deg, blue, red); /* a
gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-
gradient(to left top, blue, red); /* color stop: a
gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */ linear-
gradient(0deg, blue, green 40%, red); /* color hint: a
gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the le...
...And 26 more matches
radial-gradient() - CSS: Cascading Style Sheets
the radial-
gradient() 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 <
gradient> data type, which is a special kind of <image>.
... syntax /* a
gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-
gradient(circle at center, red 0, blue, green 100%) values <position> the position of the
gradient, interpreted in the same way as background-position or transform-origin.
...And 21 more matches
repeating-linear-gradient() - CSS: Cascading Style Sheets
the repeating-linear-
gradient() css function creates an image consisting of repeating linear
gradients.
... it is similar to linear-
gradient() 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 <
gradient> data type, which is a special kind of <image>.
...And 19 more matches
repeating-radial-gradient() - CSS: Cascading Style Sheets
the repeating-radial-
gradient() css function creates an image consisting of repeating
gradients that radiate from an origin.
... it is similar to radial-
gradient() 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-
gradient() .
... the function's result is an object of the <
gradient> 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 up
grade an already established connection to a different protocol, using the up
grade header field.
...implementations can choose not to take advantage of an up
grade even if they support the new protocol, and in practice, this mechanism is used mostly to bootstrap a websockets connection.
... up
grading http/1.1 connections the up
grade 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 <
gradient> css data type is a special type of <image> that consists of a progressive transition between two or more colors.
... a css
gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio.
... syntax the <
gradient> data type is defined with one of the function types listed below.
...And 15 more matches
gradientUnits - SVG: Scalable Vector Graphics
the
gradientunits attribute defines the coordinate system used for attributes specified on the
gradient elements.
... two elements are using this attribute: <linear
gradient> and <radial
gradient> linear
gradient for <linear
gradient>,
gradientunits 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
gradient element is referenced (i.e., the user coordinate system for the element referencing the
gradient element via a fill or stroke property) and then applying the transform specified by attribute
gradienttransform.
...And 13 more matches
<radialGradient> - SVG: Scalable Vector Graphics
the <radial
gradient> element lets authors define radial
gradients that can be applied to fill or stroke of graphical elements.
... don't be confused with css radial-
gradient() as css
gradients can only apply to html elements where svg
gradient 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> <radial
gradient id="my
gradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radial
gradient> </defs> <!-- using my linear
gradient --> <circle cx="5" cy="5" r="4" fill="url('#my
gradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial
gradient.
...And 13 more matches
Upgrade - HTTP
the http 1.1 (only) up
grade header can be used to up
grade 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 up
grade 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 up
grade 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 <linear
gradient> element lets authors define linear
gradients that can be applied to fill or stroke of graphical elements.
... don't be confused with css linear-
gradient() as css
gradients can only apply to html elements where svg
gradient 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> <linear
gradient id="my
gradient"
gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </linear
gradient> </defs> <!-- using my linear
gradient --> <circle cx="5" cy="5" r="4" fill="url('#my
gradient')" /> </svg> attributes
gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes
gradienttransform this attribute provides additional transformation to the
gradient coordinate system.
...And 9 more matches
CanvasRenderingContext2D.createLinearGradient() - Web APIs
the canvasrenderingcontext2d.createlinear
gradient() method of the canvas 2d api creates a
gradient along the line connecting two given coordinates.
... this method returns a linear canvas
gradient.
... to be applied to a shape, the
gradient must first be assigned to the fillstyle or strokestyle properties.
...And 7 more matches
CanvasRenderingContext2D.createRadialGradient() - Web APIs
the canvasrenderingcontext2d.createradial
gradient() method of the canvas 2d api creates a radial
gradient using the size and coordinates of two circles.
... this method returns a canvas
gradient.
... to be applied to a shape, the
gradient must first be assigned to the fillstyle or strokestyle properties.
...And 7 more matches
SVGLinearGradientElement - Web APIs
the svglinear
gradientelement interface corresponds to the <linear
gradient> element.
...onaco,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/svg
gradientelement" 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">svg
gradientelement</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/svglinear
gradientelement" 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">svglinear
gradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svg
gradientelement.
...And 7 more matches
gradientTransform - SVG: Scalable Vector Graphics
the
gradienttransform attribute contains the definition of an optional additional transformation from the
gradient coordinate system onto the target coordinate system (i.e., userspaceonuse or objectboundingbox).
... this allows for things such as skewing the
gradient.
... two elements are using this attribute: <linear
gradient> and <radial
gradient> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <radial
gradient id="
gradient1"
gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radial
gradient> <radial
gradient id="
gradient2"
gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" ...
...And 6 more matches
IDBOpenDBRequest.onupgradeneeded - Web APIs
the onup
gradeneeded property of the idbopendbrequest interface is the event handler for the up
gradeneeded 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 up
grade the database structure, as shown in the example below.
... syntax idbopendbrequest.onup
gradeneeded = function(event) { ...
...And 5 more matches
SVGGradientElement - Web APIs
the svg
gradient interface is a base interface used by svglinear
gradientelement and sv
gradial
gradientelement.
...onaco,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/svg
gradientelement" 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">svg
gradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants ...
... svg
gradientelement.
gradientunits read only returns an svganimatedenumeration corresponding to the
gradientunits attribute on the given element.
...And 4 more matches
CSP: upgrade-insecure-requests - HTTP
the http content-security-policy (csp) up
grade-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 up
grade-insecure-requests directive is evaluated before block-all-mixed-content and if it is set, the latter is effectively a no-op.
... the up
grade-insecure-requests directive will not ensure that users visiting your site via links on third-party sites will be up
graded 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
CanvasGradient.addColorStop() - Web APIs
the canvas
gradient.addcolorstop() method adds a new color stop, defined by an offset and a color, to a given canvas
gradient.
... syntax void
gradient.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
gradient and 1 represents the end; an index_size_err is raised if the number is outside that range.
...And 3 more matches
CustomElementRegistry.upgrade() - Web APIs
the up
grade() method of the customelementregistry interface up
grades all shadow-containing custom elements in a node subtree, even before they are connected to the main document.
... syntax customelements.up
grade(root); parameters root a node instance with shadow-containing descendant elements that are to be up
graded.
... if there are no descendant elements that can be up
graded, no error is thrown.
...And 2 more matches
nsIHttpUpgradeListener
netwerk/protocol/http/nsihttpchannelinternal.idlscriptable the callback interface for nsihttpchannelinternal.httpup
grade; this is called when an http protocol up
grade 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 up
grade 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 up
grade 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 up
grade, call nsihttpchannelinternal.httpup
grade().
CanvasGradient - Web APIs
the canvas
gradient interface represents an opaque object describing a
gradient.
... it is returned by the methods canvasrenderingcontext2d.createlinear
gradient() or canvasrenderingcontext2d.createradial
gradient().
... canvas
gradient.addcolorstop() adds a new stop, defined by an offset and a color, to the
gradient.
... specifications specification status comment html living standardthe definition of 'canvas
gradient' in that specification.
IDBOpenDBRequest: upgradeneeded event - Web APIs
the up
gradeneeded 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 onup
gradeneeded examples this example opens a database and handles the up
gradeneeded event by making any necessary updates to the object store.
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('up
gradeneeded', event => { const db = event.target.result; console.log(`up
grading 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 onup
gradeneeded event handle...
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onup
gradeneeded = event => { const db = event.target.result; console.log(`up
grading 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 }); }; ...
Upgrade-Insecure-Requests - HTTP
the http up
grade-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 up
grade-insecure-requests csp directive.
... header type request header forbidden header name no syntax up
grade-insecure-requests: 1 examples a client's request signals to the server that it supports the up
grade mechanisms of up
grade-insecure-requests: get / http/1.1 host: example.com up
grade-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 up
grade mechanism.
... location: https://example.com/ vary: up
grade-insecure-requests specifications specification status comment up
grade insecure requeststhe definition of 'up
grade-insecure-requests' in that specification.
426 Upgrade Required - HTTP
the http 426 up
grade 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 up
grades to a different protocol.
... the server sends an up
grade header with this response to indicate the required protocol(s).
... status 426 up
grade required examples http/1.1 426 up
grade required up
grade: http/2.0 connection: up
grade 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 up
grade required hypertext transfer protocol (http/1.1): semantics and content ...
Applying styles and colors - Web APIs
you will learn how to add different colors, line styles,
gradients, patterns and shadows to your drawings.
... color is a string representing a css <color>, a
gradient object, or a pattern object.
... we'll look at
gradient and pattern objects later.
...And 22 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
gradient 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
gradients 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,
gradient, pattern, etc) applied to a shape.
...And 20 more matches
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
gradual change to the audioparam value.
... 537 canvas
gradient api, canvas, canvas
gradient,
gradients, interface, reference the canvas
gradient interface represents an opaque object describing a
gradient.
... it is returned by the methods canvasrenderingcontext2d.createlinear
gradient() or canvasrenderingcontext2d.createradial
gradient().
...And 19 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 down
grade 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
grades of support level, something like: a
grade: common/modern browsers — known to be capable.
... b
grade: older/less capable browsers — known not to be capable.
...And 14 more matches
Using IndexedDB - Web APIs
if the database doesn't already exist, it is created by the open operation, then an onup
gradeneeded 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 up
graded version number, an onup
gradeneeded 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 up
gradeneeded event trigger.
...And 14 more matches
Enhanced Extension Installation - Archive of obsolete content
the system for installation, up
grade and uninstall is not robust enough.
...there are not enough guards in the up
grade 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 up
grades.
...And 13 more matches
spreadMethod - SVG: Scalable Vector Graphics
the spreadmethod attribute determines how a shape is filled beyond the defined edges of a
gradient.
... two elements are using this attribute: <linear
gradient> and <radial
gradient> context notes value pad | reflect | repeat initial value pad animatable yes pad this value indicates that the final color of the
gradient fills the shape beyond the
gradient's edges.
... reflect this value indicates that the
gradient repeats in reverse beyond its edges.
...And 13 more matches
Bootstrapped extensions - Archive of obsolete content
this will be one of app_startup, addon_disable, addon_install, addon_up
grade, or addon_down
grade.
... shutdown called when the extensidisableon needs to shut itself down, such as when the application is quitting or when the extension is about to be up
graded or disabled.
...this will be one of app_shutdown, addon_disable, addon_uninstall, addon_up
grade, or addon_down
grade.
...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>, <linear
gradient>, <mpath>, <pattern>, <radial
gradient>, <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 linear
gradient for <linear
gradient>, xlink:href defines the reference to a different <linear
gradient> or <radial
gradient> element within the current svg document fragment.
... any <linear
gradient> attributes which are defined on the referenced element which are not defined on this element are inherited by this element.
...And 10 more matches
Index
--up
grade-merge up
grade an old database and merge it into a new database.
... --source-dir certdir identify the certificate database directory to up
grade.
... --source-prefix certdir give the prefix of the certificate and key databases to up
grade.
...And 8 more matches
NSS tools : certutil
--up
grade-merge up
grade an old database and merge it into a new database.
... --source-dir certdir identify the certificate database directory to up
grade.
... --source-prefix certdir give the prefix of the certificate and key databases to up
grade.
...And 8 more matches
certutil
--up
grade-merge up
grade an old database and merge it into a new database.
... --source-dir certdir identify the certificate database directory to up
grade.
... --source-prefix certdir give the prefix of the certificate and key databases to up
grade.
...And 8 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="
gradient" class="
gradient"> <div id="
gradient_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> ...
...0%; height: 1.5em; line-height: 1.5em; color: #aaa; text-align: right; } #controls .category > .group { border: 1px solid #ccc; border-radius: 3px; } /** * color picker */ @media (min-width: 960px) { #controls .colorpicker { width: 420px; } } @media (max-width: 959px) { #controls .colorpicker { width: 210px; } } #colorpicker { width: 100%; margin: 0 auto; } #colorpicker .
gradient { width: 200px; height: 200px; margin: 5px; background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); background: -moz-linear-
gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-
gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-
gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-
gradient(left, #fff 0%, r...
...gba(255, 255, 255, 0) 100%); background-color: #f00; float: left; } #colorpicker .hue { width: 200px; height: 30px; margin: 5px; background: url("https://mdn.mozillademos.org/files/5701/hue.png"); background: -moz-linear-
gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-
gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); float: left; } #colorpicker .alpha { width: 200px; height: 30px; margin: 5px; border: 1px solid #ccc; float: left; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #colorpicker #alpha { width: 100%; height: 100%; backgr...
...And 8 more matches
Backgrounds and borders - Learn web development
from adding
gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css.
... .box { background: linear-
gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties.
...
gradient backgrounds a
gradient — when used for a background — acts just like an image and is also set by using the background-image property.
...And 7 more matches
Color picker tool - CSS: Cascading Style Sheets
g-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-
gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-
gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-
gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-
gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-
gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-
gradient(left, #fff 0%, rgba(255, 255, 255, ...
...0) 100%); background: -o-linear-
gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-
gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-
gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-
gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-
gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-
gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -ms-linear-
gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, ...
... hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-
gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-
gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-
gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-radius: 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 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-
gradient(#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 <
gradient> data type, or part of the webpage, defined by the element() function, denoting the content to display.
...attr() 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()> | <
gradient><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
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 httpup
grade(in acstring aprotocolname, in nsihttpup
gradelistener 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.
... httpup
grade() allows for the use of http to bootstrap another protocol via the rfc 2616 up
grade request header in conjunction with a 101 level response.
... the nsihttpup
gradelistener will have its nsihttpup
gradelistener.ontransportavailable() method invoked if a matching 101 is processed.
...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-
gradient(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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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, '
grad' 88; wght (weight) is a registered axis, and
grad (
grade) is a custom one.
...
grade
grade may become one of the more common custom axes as it has a known history in typeface design.
... the practice of designing different
grades 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-
gradient(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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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-
gradient(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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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
gradient.
...&& <image><cf-final-image> = <image> | <color>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <
gradient><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()><rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...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-
gradient(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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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-
gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* multiple values */ mask-image: image(url(mask.png), skyblue), linear-
gradient(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.
...neapplies 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()> | <
gradient><mask-source> = <url>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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
shape-outside - CSS: Cascading Style Sheets
pe-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <
gradient> value */ shape-outside: linear-
gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-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.
...plied), the <image> with its uri made absolute, otherwise as specified.animation typeyes, as specified for <basic-shape>, otherwise no formal syntax none | <shape-box> | <basic-shape> | <image>where <shape-box> = <box> | margin-box<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <
gradient>where <box> = border-box | padding-box | content-box<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>where <length-percentage> = <length> | <percentage><shape-radius> = <length-percentage> | closest-side | farthest-side<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <le...
...And 5 more matches
Index - Archive of obsolete content
perhaps your target audience is people that are using older hardware, for example, and can't up
grade 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 up
grade their firefox installations.
...it provides mechanisms for installing, up
grading, and uninstalling these applications.
...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 onup
gradeneeded 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 up
grade 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 onup
gradeneeded handler (see below), etc.
... we won't cover up
grading databases in this simple tutorial.
...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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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-
gradient()> = linear-
gradient( [ <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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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-
gradient()> = linear-
gradient( [ <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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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-
gradient()> = linear-
gradient( [ <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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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-
gradient()> = linear-
gradient( [ <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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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-
gradient()> = linear-
gradient( [ <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()> | <
gradient>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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-
gradient()> = linear-
gradient( [ <angle> | to <side-or-corner> ]?
...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
gradient.
... creating shapes using a
gradient as a css
gradient is treated as an image, you can use a
gradient to generate your shape, by having transparent or semi-transparent areas as part of the
gradient.
... in this next example i have used generated content and floated this content, giving it a background image of a linear
gradient.
...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()> | <
gradient><length-percentage> = <length> | <percentage>where <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()>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-
gradient()> = linear-
gradient( [ <angle> | to <side-or-corner> ]?
...And 4 more matches
mask - CSS: Cascading Style Sheets
ength-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()> | <
gradient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>?
...)<
gradient> = <linear-
gradient()> | <repeating-linear-
gradient()> | <radial-
gradient()> | <repeating-radial-
gradient()> | <conic-
gradient()><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-
gradient()> = linear-
gradient( [ <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 up
grade (see also protocol up
grade mechanism).
... up
grade-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 up
grade-insecure-requests directive.
... up
grade the relevant rfc document for the up
grade header field is rfc 7230, section 6.7.
...And 4 more matches
href - SVG: Scalable Vector Graphics
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <linear
gradient>, <mpath>, <pattern>, <radial
gradient>, <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> linear
gradient for <linear
gradient>, href defines url referring to a template
gradient element; to be valid, the reference must be to a different <linear
gradient> or <radial
gradient> element.
... value <url> default value none animatable yes radial
gradient for <radial
gradient>, href defines url referring to a template
gradient element; to be valid, the reference must be to a different <linear
gradient> or <radial
gradient> element.
...And 4 more matches
r - SVG: Scalable Vector Graphics
two elements are using this attribute: <circle>, and <radial
gradient> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radial
gradient r="0" id="my
gradient000"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radial
gradient> <radial
gradient r="50%" id="my
gradient050"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radial
gradient> <radial
gradient r="100%" id="my
gradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radial
gradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> <r...
...ect x="20" y="120" width="60" height="60" fill="url(#my
gradient000)" /> <rect x="120" y="120" width="60" height="60" fill="url(#my
gradient050)" /> <rect x="220" y="120" width="60" height="60" fill="url(#my
gradient100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its size.
... radial
gradient for <radial
gradient>, r defines the radius of the end circle for the radial
gradient.
...And 4 more matches
y1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <linear
gradient> 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> linear
gradient for <linear
gradient>, y1 defines the y coordinate of the starting point of the
gradient vector used to map the
gradient stop values.
... the exact behavior of this attribute is influenced by the
gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the
gradient vector start at the top left corner of the bounding box of the shape it is applied to.
...And 4 more matches
y2 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <linear
gradient> 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> linear
gradient for <linear
gradient>, y2 defines the y coordinate of the ending point of the
gradient vector used to map the
gradient stop values.
... the exact behavior of this attribute is influenced by the
gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the
gradient vector end at the top right corner of the bounding box of the shape it is applied to.
...And 4 more matches
Patterns - SVG: Scalable Vector Graphics
like
gradients, 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> <linear
gradient id="
gradient1"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="blue"/> </linear
gradient> <linear
gradient id="
gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </linear
gradient> <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(#
gradient2)"/> <circle cx="25" cy="25" r="20" fill="url(#
gradient1)" fill-opacity="0.5"/> </pattern> </defs> <rect fill="url(#pattern)" stroke="black" width="200" height="200"/> </svg> screenshotlive s...
...ample inside the <pattern> element, you can include any of the other basic shapes you've included before, and each of them can be styled using any of the styles you've learned before, including
gradients and opacity.
...And 4 more matches
Repackaging Firefox - Archive of obsolete content
using an extension makes it far easier to keep track of your changes easily when the time comes to up
grade 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 up
grade path for users.
...that means that you will need to change the version of the dex, and that will cause any users with the earlier version to get unnecessarily up
graded.
...And 3 more matches
Gecko Compatibility Handbook - Archive of obsolete content
up
grade 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).
... up
grade 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.
... up
grade apis to use newer standards-conformant versions up
grade 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 3 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
gradients conic
gradients expand css
gradients 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-
gradient.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 60 no developer edition 60 no beta 60 no release 60 no preference name security.insecure_connection_text.enabled for normal browsing mode; security.insecure_connection_text.pbmode.enabled for private browsing mode up
grading mixed display content when enabled, this preference causes firefox to automatically up
grade requests for media content from http to https on secure pages.
...And 3 more matches
<angle> - CSS: Cascading Style Sheets
the <angle> css data type represents an angle value expressed in degrees,
gradians, radians, or turns.
... it is used, for example, in <
gradient>s and in some transform functions.
...
grad represents an angle in
gradians.
...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
gradient this example creates a <div> block with a
gradient background image.
... the
gradient is established as a css shape using shape-outside, so that pixels within the
gradient 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="
gradient-shape"></div> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit.
...And 3 more matches
x1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <linear
gradient> 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> linear
gradient for <linear
gradient>, x1 defines the x coordinate of the starting point of the
gradient vector used to map the
gradient stop values.
... the exact behavior of this attribute is influenced by the
gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the
gradient vector start at the left bounding limit of the shape it is applied to --> <linear
gradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </linear
gradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the
gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <linear
gradient 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 <linear
gradient> 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> linear
gradient for <linear
gradient>, x2 defines the x coordinate of the ending point of the
gradient vector used to map the
gradient stop values.
... the exact behavior of this attribute is influenced by the
gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the
gradient vector end at the right bounding limit of the shape it is applied to --> <linear
gradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </linear
gradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the
gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <linear
gradient x2="20%" id="g1"> <stop offset="0" stop-color="black...
...And 3 more matches
<stop> - SVG: Scalable Vector Graphics
the svg <stop> element defines a color and its position to use on a
gradient.
... this element is always a child of a <linear
gradient> or <radial
gradient> 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> <linear
gradient id="my
gradient"
gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </linear
gradient> </defs> <!-- using my linear
gradient --> <circle cx="5" cy="5" r="4" fill="url('#my
gradient')" /> </svg> attributes offset this attribute defines where the
gradient stop is placed along the
gradient vector.
...And 3 more matches
create fancy boxes - Learn web development
i want to be fancy.</div> okay, let's have fun with backgrounds: .fancy { padding : 1em; width: 100%; height: 200px; box-sizing: border-box; /* at the bottom of our background stack, let's have a misty grey solid color */ background-color: #e4e4d9; /* we stack linear
gradients on top of each other to create our color strip effect.
... as you will notice, color
gradients are considered to be images and can be manipulated as such */ background-image: linear-
gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-
gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-
gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), linear-
gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), linear-
gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%), linear-
gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%), linear-
gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%), linear-
gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%), linear-
gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%...
...), linear-
gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), linear-
gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), linear-
gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); }
gradients can be used in some very creative ways.
...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,
grade) { this.subject = subject; this.
grade =
grade; } } 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,
grade) { super(); // now 'this' is initialized by calling the parent constructor.
... this.subject = subject; this.
grade =
grade; } } there is no point having a sub-class if it doesn't inherit properties from the parent class.
...And 2 more matches
Testopia
testopia 3.0 (not yet released) if you up
graded 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 up
graded 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 up
grading, 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
gradient fill.
...consider an image that involves some complex
gradients and filters.
... if saved as a raster image then the work to rasterize the
gradients and filters takes place on the authors computer before the result is stored in the raster file.
...And 2 more matches
Extras
eight="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> <radial
gradient id="rad
grad1" 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;"/> </radial
gradient> </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(#rad
grad1)" 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> <radial
gradient id="rad
grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-...
...color:rgb(0,0,255); stop-opacity:.9;"/> </radial
gradient> </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(#rad
grad2)" 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> <linear
gradient id="
grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> </linear
gradient> <linear
gradient id="
grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> <stop offset="1...
...And 2 more matches
sslerr.html
up
graded 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-
grade encryption." the local system was configured to support the cipher suites permitted for domestic use.
...peer requires high-
grade encryption which is not supported." the remote system was configured to support the cipher suites permitted for domestic use.
...And 2 more matches
IDBRequest.transaction - Web APIs
if a version up
grade is needed when opening a database then during the up
gradeneeded 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 up
grade.
... following the up
grade, the transaction property will again be null.
...transaction 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 up
grade to access existing object stores: var openrequest = indexeddb.open('db', 2); console.log(openrequest.transaction); // will log "null".
...And 2 more matches
background-size - CSS: Cascading Style Sheets
css <
gradient>s have no intrinsic dimensions or intrinsic proportions.
... note: the behavior of <
gradient>s changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5).
... working with
gradients if you use a <
gradient> 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
HTTP Index - HTTP
105 csp: up
grade-insecure-requests csp, content-security-policy, directive, http, reference, requests, security, up
grade, up
grade-insecure-requests the http content-security-policy (csp) up
grade-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 up
grade-insecure-requests http, https, security, header the http up
grade-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 up
grade-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 up
grade request header.
...And 2 more matches
Web video codec guide - Web media technologies
additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where
gradients cannot be represented without visible stepping of the colors.
... lossy compression to some degree, artifacts and other forms of quality de
gradation 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...
... posterizing posterization occurs when the compression results in the loss of color detail in
gradients.
...And 2 more matches
cx - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <radial
gradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radial
gradient cx="25%" id="my
gradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radial
gradient> <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(#my
gradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
... radial
gradient for <radial
gradient>, cx defines the x-axis coordinate of the end circle for the radial
gradient.
... 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> <radial
gradient cx="0" id="my
gradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radial
gradient> <radial
gradient cx="50%" id="my
gradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radial
gradient> <radial
gradient cx="100%" id="my
gradient100"> <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 <radial
gradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radial
gradient cy="25%" id="my
gradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radial
gradient> <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(#my
gradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
... radial
gradient for <radial
gradient>, cy defines the y-axis coordinate of the end circle for the radial
gradient.
... 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> <radial
gradient cy="0" id="my
gradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radial
gradient> <radial
gradient cy="50%" id="my
gradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radial
gradient> <radial
gradient cy="100%" id="my
gradient100"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" ...
...And 2 more matches
-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>
gradient progid:dximagetransform.microsoft.
gradient( <properties> ) where <properties> = [ <enabled> | <endcolor> | <endcolorstr> | <
gradienttype> | <startcolor> | <startcolorstr> ]# where <enabled> = 'enabled=' [ true | false ] <endcolor> = 'startcolor=' <color> <endcolorstr> = 'startcolorstr=' <color> <
gradienttype> = '
gradienttype=' <integer> <startcolor> = 'startcolor=' <color> <startcolorstr> = ...
...
gradienttype default: 0 (equivalent to linear-
gradient(to bottom, …)) set to a non-zero value to make the
gradient horizontal (equivalent to linear-
gradient(to right, …)) startcolor the end color, supports only opaque colors in the #rrggbb notation.
... html <div class="
gradient horizontal"></div> <div class="
gradient vertical"></div> css html, body { overflow-x: hidden; max-width: 100vw; } .
gradient { width: 100vw; height: 60px; height: 50vh; } .
gradient.horizontal { -ms-filter: 'progid:dximagetransform.microsoft.
gradient(startcolorstr="#ffffff", endcolorstr="#000000",
gradienttype=1)'; background-image: linear-
gradient(to right, #ffffff 0%, #000000 100%); } .
gradient.vertical { -ms-filter: 'progid:dximagetransform.microsoft.
gradient(startcolorstr="#ffffff", endcolorstr="#000000",
gradienttype=0)'; background-image: linear-
gradient(to bottom, #ffffff 0%, #000000 100%); } result sp...
... 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
gradient background-image: linear-
gradient() 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.
HTML forms in legacy browsers - Learn web development
graceful de
gradation is web developer's best friend graceful de
gradation 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 de
gradation.
... html input types the input types added in html5 are all useable, even in ancient browsers, because the way they de
grade is highly predictable.
... note: modernizr has other awesome features to help you in dealing with unobstructive javascript and graceful de
gradation techniques.
Silly story generator - Learn web development
if so, we want to convert the weight and temperature values in the story from pounds and fahrenheit into stones and centi
grade.
... what you need to do is as follows: look up the formulae for converting pounds to stone, and fahrenheit to centi
grade.
... inside the line that defines the temperature variable, replace 94 with a calculation that converts 94 fahrenheit into centi
grade.
... concatenate ' centi
grade' onto the end of the result of the overall math.round() call.
Index
4 binary compatibility xpcom if mozilla decides to up
grade 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 up
grading to a new compiler without recompiling everything.
... 685 nsihttpup
gradelistener http, interfaces, interfaces:scriptable, reference, référence(2), xpcom interface reference this is used, for example, by websockets in order to up
grade an http channel to use the websocket protocol.
...this is especially useful when updating user interfaces, to avoid flicker or continuous selection changes, which may result in performance de
gradation (for example, if updating a view for each update).
IDBObjectStore - Web APIs
idbobjectstore.createindex() creates a new index during a version up
grade, returning a new idbindex object in the connected database.
... idbobjectstore.deleteindex() destroys the specified index in the connected database, used during a version up
grade.
... example this example shows a variety of different uses of object stores, from updating the data structure with idbobjectstore.createindex inside an onup
gradeneeded 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.onup
gradeneeded = 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
up
gradeneeded fired when an attempt was made to open a database with a version number higher than its current version.
... also available via the onup
gradeneeded property.
... example in the following example you can see the onup
gradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
...ata() 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.onup
gradeneeded = 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 })...
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 up
grade) 2011.1 for firefox, no live region support in ie as of 2011.2.
... de
grading gracefully from html5 to aria when delivering content to browsers that aren't html5-aware, you may want to consider gracefully de
grading to the use of aria where necessary.
... so, using the example of a progress bar, you can de
grade 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 de
grading progress bar</title></head> <body> <progress id="progress-bar" value="0" max="100">0% complete</progress> <button id="update-button">update</button> </body> </html> ...
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,
gradients 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-
gradient() radial-
gradient() repeating-linear-
gradient() repeating-radial-
gradient() conic-
gradient() repeating-conic-
gradient() url() element() image() cross-fade() data types <
gradient> <image> guides using css
gradients presents a specific type of css images,
gradients, and how to create and use these.
... specifications specification status comment css images module level 4 working draft added image-resolution, conic-
gradient(), and image() css images module level 3 candidate recommendation added image-orientation, image-rendering, object-fit and object-position compatibility standardthe definition of 'css
gradients' in that specification.
... living standard standardizes the -webkit prefixed
gradient value functions css values and units module level 3the definition of '<url>' in that specification.
CSS reference - CSS: Cascading Style Sheets
-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-widthcolumnsconic-
gradient()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()exffallb...
...tfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggap
grad<
gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin...
...:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-
gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionma...
...-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-
gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-
gradient()repeating-radial-
gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-ma...
<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 <
gradient> 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
gradient.
... 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-
gradient(blue, red) /* a <
gradient> */ 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-
gradient(), repeating-conic-
gradient(), and image-resolution.
Referrer-Policy - HTTP
referrer-policy: no-referrer referrer-policy: no-referrer-when-down
grade 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-down
grade (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-down
grade), 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-down
grade 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 up
grade request header.
... the server includes in this response an up
grade response header to indicate the protocol it switched to.
... the process is described in detail in the article protocol up
grade mechanism.
... http/1.1 101 switching protocols up
grade: websocket connection: up
grade specifications specification title rfc 7231, section 6.2.2: 101 switching protocol hypertext transfer protocol (http/1.1): semantics and content ...
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" | ~"
grad" | ~"rad")?
... where deg indicates degrees,
grad indicates
grads and rad indicates radians.
... when angles are used in an svg attribute, <angle> is instead defined as follows: angle ::= number ("deg" | "
grad" | "rad")?
...for example, to fill a rectangle with a linear
gradient, you first define a <linear
gradient> element and give it an id, as in: <linear
gradient xml:id="my
gradient">...</linear
gradient> you then reference the linear
gradient as the value of the fill attribute for the rectangle, as in the following example: <rect fill="url(#my
gradient)"/> 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 <linear
gradient> with only one color stop.
... this is less elegant, and unlike <solidcolor>, cannot itself be used in the definition of
gradients.
...--> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- linear
gradient with a single color stop is a less elegant way to achieve the same effect, but it works in current browsers.
... --> <linear
gradient id="my
gradient"> <stop offset="0" stop-color="green" /> </linear
gradient> </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 linear
gradient</text> <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#my
gradient)" fill="white"/> <circle cx="50" cy="165" r="35" fill="url(#my
gradient)"/> </svg> result ...
Clipping and masking - SVG: Scalable Vector Graphics
masking the effect of masking is most impressively presented with a
gradient.
... <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linear
gradient id="
gradient"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </linear
gradient> <mask id="mask"> <rect x="0" y="0" width="200" height="200" fill="url(#
gradient)" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="green" /> <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#mask)" /> </svg> you see a green-filled rect at the lowest layer and on top a red-filled rect.
...the content of the mask is a single rect element, that is filled with a black-to-white
gradient.
... as a result the pixels of the red rectangle use the luminance value of the mask content as the alpha value (the transparency), and we see a green-to-red
gradient as a result: screenshotlive sample transparency with opacity there is a simple possibility to set the transparency for a whole element.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
t> <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;"> <linear
gradient id="
gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </linear
gradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#
gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#
gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript.
...the element contains a
gradient and two shapes filled with the
gradient.
... the
gradient 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
gradient end-stop color to red.
CSS3 - Archive of obsolete content
it brings a lot of long-awaited novelties, like rounded corners, shadows,
gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
... support for linear-
gradient(), repeating-linear-
gradient(), radial-
gradient() and repeating-radial-
gradient().
... the conic-
gradient() and repeating-conic-
gradient() functional notation describing a new type of
gradient.
Extentsions FAQ - Archive of obsolete content
how can i backup some of the files before up
grade 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 up
grade?
... why extension preferences do not get changed until after it's up
grade?
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 up
grading the content of your web pages to conform to the world wide web consortium (w3c) web standards.
...how to up
grade 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 up
grading techniques presented in this article and more for those wishing to perfect their web pages.
Browser Detection and Cross Browser Support - Archive of obsolete content
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 up
grade 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 up
grade.
... by ceasing to support older browsers, you can provide a reason for users to up
grade.
Advanced styling effects - Learn web development
first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-
gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-
gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you could use it in a...
... first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-
gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-
gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -...
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-
gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); border: 3px solid purple; } again, there's nothing specific to tables here, but it is worthwhile to note a few things.
... we've also added a linear
gradient 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
gradient 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
gradients.
CSS values and units - Learn web development
this can be an actual image file pointed to via a url() function, or a
gradient.
... in the example below we have demonstrated an image and a
gradient in use as a value for the css background-image property.
... for example, understanding that <image> also allows you to create a color
gradient is useful but perhaps non-obvious knowledge to have!
Example 1 - Learn web development
; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-
gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing...
...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-
gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing...
...* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */ background : #f0f0f0; background : linear-
gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; box-sizing : bo...
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-
gradient(left,green,yellow); background-image: -webkit-
gradient(linear,left center,right center,from(green),to(yellow)); background-image: linear-
gradient(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-
gradient() function, which is used to generate a linear
gradient 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
gradients.
Android-specific test suites
all of the suites are configured by and invoked using
gradle.
... see http://checkstyle.sourceforge.net/index.html and https://docs.
gradle.org/2.14/userguide/checkstyle_plugin.html for more details.
... see http://findbugs.sourceforge.net/index.html and https://docs.
gradle.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/up
grade 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 up
grade.
... your add-on is up
graded, and the new code loads new frame scripts.
NSS 3.23 release notes
new functions in ssl.h ssl_setdown
gradecheckversion - set maximum version for new serverrandom anti-down
grade mechanism.
... clients that perform a version down
grade (which is a dangerous practice) call this with the highest version number that they possibly support.
... this gives them access to the version down
grade 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 up
graded version which fixes the problem, it is indicated by an asterisked remark in the parentheses.
... up
grade to a newer version if available, which corrects this problem.
...we recommend strongly that you urge users to up
grade 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 up
grade 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 up
grading to a new compiler without recompiling everything.
...if and when mozilla up
grades the compiler they use, your component will have to be rebuilt against the same compiler.
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
gradient.
... .registered { --registered: #c0ffee; background-image: linear-
gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-
gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registe...
...red: #c0ffee; background-image: linear-
gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-
gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while not functionally accurate, a good way to think about the difference between the unregistered property in the above example and the registered property is t...
CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the color,
gradient, or pattern to use inside shapes.
... syntax ctx.fillstyle = color; ctx.fillstyle =
gradient; ctx.fillstyle = pattern; options color a domstring parsed as css <color> value.
...
gradient a canvas
gradient object (a linear or radial
gradient).
CanvasRenderingContext2D.strokeStyle - Web APIs
the canvasrenderingcontext2d.strokestyle property of the canvas 2d api specifies the color,
gradient, or pattern to use for the strokes (outlines) around shapes.
... syntax ctx.strokestyle = color; ctx.strokestyle =
gradient; ctx.strokestyle = pattern; options color a domstring parsed as css <color> value.
...
gradient a canvas
gradient object (a linear or radial
gradient).
IDBDatabase.onversionchange - Web APIs
the onversionchange event handler of the idbdatabase interface handles the versionchange event, fired when a database structure change (idbopendbrequest.onup
gradeneeded event or idbfactory.deletedatabase) was requested elsewhere (most probably in another window/tab on the same computer).
...} example this example shows an idbopendbrequest.onup
gradeneeded 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.onup
gradeneeded = 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.createindex...
IDBDatabase: versionchange event - Web APIs
the versionchange event is fired when a database structure change (idbopendbrequest.onup
gradeneeded 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.onup
gradeneeded = 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', '...
...ue: 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.onup
gradeneeded = 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.onup
gradeneeded 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.onup
gradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
...dbopenrequest.onup
gradeneeded = 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 up
grade.
... example in the following example you can see the idbopendbrequest.onup
gradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
...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 //it is only implemented in recent browsers dbopenrequest.onup
gradeneeded = 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 up
gradeneeded 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.onup
gradeneeded = 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 up
graded because the app is open somewhere else."); } specifications specification status comment indexed database api 2.0the definition of 'onblocked' in that specification.
Writing a WebSocket server in C# - Web APIs
accepttcpclient(); 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 up
grade 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: up
grade" + eol + "up
grade: 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" ) ...
...1 = 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: up
grade\r\n" + "up
grade: 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 ...
<color> - CSS: Cascading Style Sheets
compatibility note: to prevent unexpected behavior, such as in a <
gradient>, 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,
grads, or turns in css color module level 4.
... interpolation in animations and
gradients, <color> values are interpolated on each of their red, green, and blue components.
element() - CSS: Cascading Style Sheets
the background element uses a
gradient, 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-
gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">this text is part of the background.
... see also image() image-set() <image> <
gradient> element() cross-fade() document.mozsetimageelement() ...
filter - CSS: Cascading Style Sheets
<use xlink:href="#myimage"/> </svg> </div> </td> <td><img alt="test_form_4_s.jpg" id="img4" class="internal default" src="/files/3715/test_form_4_s.jpg" style="width: 100%;" /></td> </tr> <tr> <td><img alt="test_form_4 distorded border - original image" id="img11" class="internal default" src="/files/8467/test_form_4_irregular-shape_opacity-
gradient.png" style="width: 100%;" /></td> <td><img alt="test_form_4 distorded border - live example" id="img12" class="internal default" src="/files/8467/test_form_4_irregular-shape_opacity-
gradient.png" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpola...
...tion-filters="srgb"> <defs> <image id="myimage2" xlink:href="/files/8467/test_form_4_irregular-shape_opacity-
gradient.png" width="213px" height="161px"/> </defs> <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"> <feoffset dx="5" dy="5.5" in="sourcealpha"/> <fegaussianblur stddeviation="2.5"/> <fecomponenttransfer> <fefunca type="table" tablevalues="0 0.8"/> </fecomponenttransfer> </filter> <use xlink:href="#myimage2" filter="url(#drop-shadow2)"/> <use xlink:href="#myimage2"/> </svg> </div> </td> <td><img alt="test_form_4 distorded border drop shadow - static example" id="img14" class="in...
...ternal default" src="/files/8469/test_form_4_irregular-shape_opacity-
gradient_drop-shadow.png" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter: drop-shadow(16px 16px 10px black); -webkit-filter: drop-shadow(16px 16px 10px black); -ms-filter: drop-shadow(16px 16px 10px black); filter: drop-shadow(16px 16px 10px black); } #img12 { width:100%; height:auto; -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); fil...
mix-blend-mode - CSS: Cascading Style Sheets
nd-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> <linear
gradient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </linear
gradient> <linear
gradient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </linearg...
...radient> <linear
gradient id="blue"> <stop offset="0" stop-color="hsl(240,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </linear
gradient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> multiply <div class="container multiply"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx...
...uto; 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-
gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-
gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { transform-origin: center; transform: rotate(-30deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill: url(#green); } .b { transform-origin: center; transform: rotate...
Mobile Web Development - Developer guides
you can also make use of css properties to implement visual effects like
gradients and shadows without images.
... for example, if you set a
gradient as a background for some text using a vendor-prefixed property like -webkit-linear-
gradient, it's best to include the other vendor-prefixed versions of the linear-
gradient() 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-
gradient rule.
<input type="datetime-local"> - HTML: Hypertext Markup Language
in other browsers, these de
grade 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 de
grade 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 up
grading to php 8 or 7, and up
grading your hardware to x86_64 or ia64.
Connection management in HTTP/1.x - HTTP
a related topic is the concept of http connection up
grades, wherein an http/1.1 connection is up
graded to a different protocol, such as tls/1.0, websocket, or even http/2 in cleartext.
... this protocol up
grade mechanism is documented in more detail elsewhere.
...short-lived connections do not make use of this efficiency feature of tcp, and performance de
grades 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 up
grade request header from the client, and indicates the protocol the server is switching to.
... 426 up
grade required the server refuses to perform the request using the current protocol but might be willing to do so after the client up
grades to a different protocol.
... the server sends an up
grade header in a 426 response to indicate the required protocol(s).
Performance fundamentals - Web Performance
but often trading some generality and quality for speed, such as using a static rendering instead of a css radial
gradient, 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
gradients and drop shadows.
...rendering large images and css
gradients can also take longer.
Graphic design for responsive sites - Progressive web apps (PWAs)
css3 drop shadows and
gradients), 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,
gradients 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 de
grade 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
gradients.
...: 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-
gradient(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
gradient and a nice background image for the wider layout.
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
example: masking for example, you can make a
gradient mask for html content using svg and css code similar to the following, inside your html document: <svg height="0"> <mask id="mask-1"> <linear
gradient id="
gradient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </linear
gradient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="300" ...
...height="100" fill="url(#
gradient-1)"/> </mask> </svg> .target { mask: url(#mask-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specified using a url to the id #mask-1, which is the id of the svg mask specified below it.
... everything else specifies details about the
gradient mask itself.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: <color>|inherit; animatable: yes color-interpolation it specifies the color space for
gradient interpolations, color animations, and alpha compositing.
... value: auto|optimizespeed|crispedges|geometricprecision |inherit; animatable: yes solid-color - value:; animatable: - solid-opacity - value:; animatable: - stop-color indicates what color to use at that
gradient stop.
... value: currentcolor|<color>|<icccolor>|inherit; animatable: yes stop-opacity defines the opacity of a given
gradient stop.
color-interpolation - SVG: Scalable Vector Graphics
the color-interpolation attribute specifies the color space for
gradient interpolations, color animations, and alpha compositing.
...for
gradients which make use of the href or the deprecated xlink:href attribute to reference another
gradient, the
gradient uses the propertyʼs value from the
gradient 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>, <linear
gradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radial
gradient>, <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
gradient.
... only one element is using this attribute: <radial
gradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radial
gradient id="
gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radial
gradient> <radial
gradient id="
gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radial
gradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#
gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#
gradient2)" style="transform: translatex(240px);" /> </svg> usage n...
...otes 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> <radial
gradient id="
gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radial
gradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#
gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family=...
fx - SVG: Scalable Vector Graphics
the fx attribute defines the x-axis coordinate of the focal point for a radial
gradient.
... only one element is using this attribute: <radial
gradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radial
gradient id="
gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radial
gradient> <radial
gradient id="
gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radial
gradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#
gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#
gradient2)" style="transform: translatex(240px);" /> </svg> usage no...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radial
gradient id="
gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radial
gradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#
gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <...
fy - SVG: Scalable Vector Graphics
the fy attribute defines the y-axis coordinate of the focal point for a radial
gradient.
... only one element is using this attribute: <radial
gradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radial
gradient id="
gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radial
gradient> <radial
gradient id="
gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radial
gradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#
gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#
gradient2)" style="transform: translatex(240px);" /> </svg> usage no...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radial
gradient id="
gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radial
gradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#
gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <...
requiredFeatures - SVG: Scalable Vector Graphics
ture#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#
gradient 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...
...ing, 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#
gradient the browser supports the <linear
gradient>, <radial
gradient> 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...
...text> <!-- 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#
gradient --> <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#
gradient" /> <text x="20" y="677">http://www.w3.org/tr/svg11/feature#
gradient</text> <!-- testing : http://www.w3.org/tr/svg11/feature#pattern --> <rect class="ko" x="10" y="685" height="25" width="430" /> <r...
stop-color - SVG: Scalable Vector Graphics
the stop-color attribute indicates what color to use at a
gradient stop.
... note: with respect to
gradients, svg treats the transparent keyword differently than css.
... svg does not calculate
gradients 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
gradient stop.
... the opacity value used for the
gradient 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
gradient stop.
SVG element reference - SVG: Scalable Vector Graphics
ix> <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> <linear
gradient> m <marker> <mask> <mesh> <mesh
gradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radial
gradient> <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>...
...composite>, <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>
gradient elements <linear
gradient>, <mesh
gradient>, <radial
gradient>, <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>, <linear
gradient>, <marker>, <mask>...
..., <mesh
gradient>, <metadata>, <pattern>, <radial
gradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <linear
gradient>, <mesh
gradient>, <pattern>, <radial
gradient>, <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-prof...
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> <radial
gradient id="fade" cx="0" cy="0" r="200"
gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radial
gradient> </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" cx="0"...
...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; } /*
gradient */ #fade-stop-1 { stop-color: blue; } #fade-stop-2 { stop-color: white; } /* petals */ .segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width); } .segment-fill:hover { fill: var(--segment-fill-fill-hover); stroke: var(--segment-fill-stroke-hover); } .segment-edge { fill: var(--segment-edge-fill); ...
...form="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> <radial
gradient id="fade" cx="0" cy="0" r="200"
gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radial
gradient> </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" cx="0"...
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 up
grade down
grade 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 up
grade down
grade if your add-on is disabled, then uninstalled, your onunload listener will only be called once, with the disable reason.
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 up
grade, uninstall, or disable the plugin.
...this allows the plugin to be treated like other firefox extensions; it can be up
graded, disabled, or uninstalled using the firefox user interface.
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 de
gradation from development related settings, and further isolating personal data (such as bookmarks, extensions, and settings) from your testing environment.
...however, these preferences can de
grade performance, so you may want to use a separate development profile when you enable these preferences.
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
gradients 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
gradients work best; highly detailed images will compete with the browser ui.
Archive of obsolete content
perhaps your target audience is people that are using older hardware, for example, and can't up
grade to the latest and greatest browsers.
...it brings a lot of long-awaited novelties, like rounded corners, shadows,
gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
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_up
grade /// addon_down
grade } 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_up
grade /// ...
...addon_down
grade } 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_up
grade /// addon_down
grade } 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_up
grade /// addon_down
grade } ...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
178 graceful de
gradation design, glossary, graceful de
gradation graceful de
gradation is a design philosophy that centers around trying to build a modern web site/application that will work in the newest browsers, but falls back to an experience that while not as good still delivers essential content and functionality in older browsers.
...in simpler terms: lossy compression causes data from the initial file to be lost, possibly causing de
gradation in quality.
A cool-looking box - Learn web development
a linear semi-transparent black
gradient that goes toward the bottom right corner.
... make it completely transparent at the start,
gradiating to around 0.2 opacity by 30% along, and remaining at the same color until the end.
Fundamental CSS comprehension - Learn web development
give the header a background
gradient 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
gradient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container.
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-
gradient(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
gradient when the input is required and invalid.
How to build custom form controls - Learn web development
m 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
gradients.
... */ background : #f0f0f0; background : linear-
gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width.
Client-Server Overview - Learn web development
on 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 up
grade-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 up
grade-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...
Package management basics - Learn web development
updating dependencies npm update yarn up
grade 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 up
grade the dependencies to beyond the range defined in the package.json — to do this you will need to install that version specifically.
Accessibility/LiveRegionDevGuide
as a result, care must be taken in an at-spi based application to minimize performance de
gradation by only acting on events that are truly live regions.
...the event should be filtered out as early as possible to prevent performance de
gradation.
Command line options
user profile -allow-down
grade firefox 67's down
grade protection prevents accidentally starting firefox in a profile running a later version of firefox.
...adding this option bypasses down
grade protection.
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 up
graded 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, up
grade_nspr_release and/or up
grade_nss_release.
Eclipse CDT
up
grading 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 de
grade its ability to index the source and provide good code assistance.
Site Identity Button
ething 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 down
graded 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 down
graded but no web console message will be displayed.
AddonManager
pending_up
grade this add-on will be up
graded after the application restarts.
... perm_can_up
grade this add-on can be up
graded.
gtstd.html
up
graded 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
grade 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
gradle as its build system.
... running the ./
gradlew tasks command at the top directory of the rhino distribution will print the list of available build targets.
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_down
grade default; indicates not to pass on the referrer when down
grading 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 down
grading 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
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 up
grade 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 up
grading to a new compiler without recompiling everything.
AudioParam.value - Web APIs
if any
gradiated or ramped value changing methods have been called and the current time is within the time range over which the
graduated change should occur, the value is updated based on the appropriate algorithm.
... these ramped or
gradiated value-changing methods include linearramptovalueattime(), settargetattime(), and setvaluecurveattime().
AudioParam - Web APIs
audioparam.linearramptovalueattime() schedules a
gradual linear change in the value of the audioparam.
... audioparam.exponentialramptovalueattime() schedules a
gradual exponential change in the value of the audioparam.
CSS.registerProperty() - Web APIs
we can now use that property to transition a
gradient on hover or focus.
... .registered { --my-color: #c0ffee; background-image: linear-
gradient(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-
gradient(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 specificati...
Using the CSS Painting API - Web APIs
by positioning some decorative generated content with ::before, or including background: linear-
gradient(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
gradient for each different color you wanted to create.
CanvasRenderingContext2D - Web APIs
gradients and patterns canvasrenderingcontext2d.createlinear
gradient() creates a linear
gradient along the line given by the coordinates represented by the parameters.
... canvasrenderingcontext2d.createradial
gradient() creates a radial
gradient given by the coordinates of the two circles represented by the parameters.
Compositing example - Web APIs
th(); 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
gradient = ctx.createlinear
gradient(oleft + halfwidth, otop, oleft + halfwidth, otop + halfwidth); var color = color.hsv_rgb({ h: (n + 300) % 360, s: 100, v: 100 });
gradient.addcolorstop(0, "rgba(0,0,0,0)");
gradient.addcolorstop(0.7, "rgba("+color.r+","+color.g+","+color.b+",1)");
gradient.addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.mo...
...veto(oleft + halfwidth, otop); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillstyle =
gradient; 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 = h...
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 lin
grad = ctx.createlinear
gradient(0, -75, 0, 75); lin
grad.addcolorstop(0, '#232256'); lin
grad.addcolorstop(1, '#143778'); ctx.fillstyle = lin
grad; 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
gradient that's drawn next.
Document Object Model (DOM) - Web APIs
t svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svg
gradientelement svggraphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglinear
gradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmesh
gradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpo...
...lygonelement sv
gradial
gradientelement 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 texture2d
gradext(sampler2d sampler, vec2 p, vec2 dpdx, vec2 dpdy) vec4 texture2dproj
gradext(sampler2d sampler, vec3 p, vec2 dpdx, vec2 dpdy) vec4 texture2dproj
gradext(sampler2d sampler, vec4 p, vec2 dpdx, vec2 dpdy) vec4 texturecube
gradext(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 = texture2d
gradext(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.
HTMLScriptElement.referrerPolicy - Web APIs
no-referrer-when-down
grade (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-down
grade.
IDBDatabase: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onup
gradeneeded = (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...
...le.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.onup
gradeneeded = (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.onup
gradeneeded = (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...
...eateindex('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.onup
gradeneeded = (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
ncelable 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.onup
gradeneeded = (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...
...transaction, 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.onup
gradeneeded = (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.onup
gradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
... dbopenrequest.onup
gradeneeded = 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("no...
IDBDatabase.onerror - Web APIs
} example this example shows an idbopendbrequest.onup
gradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
... dbopenrequest.onup
gradeneeded = 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 up
grade is needed (idbdatabase).
...bopenrequest.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.onup
gradeneeded = 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 up
grade transaction.
... you can only rename indexes during up
grade 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.onup
gradeneeded = (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.onup
gradeneeded = (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('up
gradeneeded', 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...
...10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onup
gradeneeded = 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.onup
gradeneeded = (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('min...
... 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.onup
gradeneeded = (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.onup
gradeneeded = 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...
...nsaction(['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.onup
gradeneeded = 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.onup
gradeneeded = 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 }); objectsto...
....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.onup
gradeneeded = 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
ncelable 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.onup
gradeneeded = (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...
...nst 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.onup
gradeneeded = (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.onup
gradeneeded event handler function.
...upon a version change (after an up
gradedneeded event), the success event will implement the idbversionchangeevent interface.
Service Worker API - Web APIs
this ensures that any functional events (like fetchevent) are not dispatched to the serviceworker, until it up
grades database schemas, and deletes outdated cache entries, etc.
... navigator.serviceworker returns a serviceworkercontainer object, which provides access to registration, removal, up
grade, and communication with the serviceworker objects for the associated document.
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 down
gradevideo() 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) { down
gradevideo(videoelem); } specifications specification status comment media playback qualitythe definition of 'videoplaybackquality: corruptedvideoframes' in that specification.
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
gradients.
... let's say we want to render a
gradient in which each corner of the square is a different color: red, blue, green, and white.
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 up
grade: websocket connection: up
grade 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 up
grade: websocket connection: up
grade 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 up
grade 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: up
grade\r\n" + "up
grade: 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-
gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear
gradient 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-
gradient(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.
Web APIs
hsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvas
gradient 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...
...fepointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svg
gradientelement svggraphicselement svghkernelement svgimageelement svglength svglengthlist svglineelement svglinear
gradientelement svgmpathelement svgmaskelement svgmatrix svgmeshelement svgmetadataelement svgmissingglyphelement svgnumber svgnumberlist svgpathelement svgpatternelement svgpoint svgpolygonelement svgpolylineelement svgpreserveaspectratio sv
gradial
gradientelement svgrect svgrecte...
-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> | <
gradient> | 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.
... <
gradient> a -webkit-
gradient function to be used as a mask image.
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
gradient: 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-
gradient(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
gradient (listed last) sitting underneath all previous 'images'.
CSS values and units - CSS: Cascading Style Sheets
grad gradians there are 400
gradians in a full circle.
... css images module level 4 working draft adds element(), image(), image-set(), conic-
gradient() css images module level 3 candidate recommendation initial definition of image.
CSS Tutorials - CSS: Cascading Style Sheets
css
gradients
gradients are images that transition smoothly from one color to another.
... there are several types of
gradients allowed in css: linear or radial, repeating or not.
attr() - CSS: Cascading Style Sheets
deg,
grad, 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 |
grad | rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <color> value html <div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div> css .background { height: 100vh; } .background { 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
gradient.
...on>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-
gradient(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-
gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-
gradient(red, blue) 27 / 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
gradient html <div id="
gradient">this element is surrounded by a
gradient-based border image!</div> css #
gradient { width: 200px; border: 30px solid; border-image: repeating-linear-
gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'bord...
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-
gradient() function atop a black background color to have a dark blue
gradient behind medium red text.
... css .my-box { background-color: black; background-image: linear-
gradient(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.
<easing-function> - CSS: Cascading Style Sheets
keywords for common cubic-bezier easing functions ease the animation starts slowly, accelerates sharply, and then slows
gradually towards the end.
...zier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > div { position: relative; height: 100px; } div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-
gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); const sta...
mask-size - CSS: Cascading Style Sheets
gradients are treated as images with no intrinsic dimensions or intrinsic proportion.
...ut 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-
gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%<...
offset-anchor - CSS: Cascading Style Sheets
each <section> has been styled with a linear
gradient 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-
gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); border: 1px solid #ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto; background: cyan; } .offset-anchor2 { offset-anchor: right top; background: purple; } .offset-anchor3 { offset-anchor: left bottom; background: magenta; } @keyframes move { 0% { offset-distance: 0%; } ...
Event reference
svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success up
gradeneeded 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 di...
... up
gradeneeded indexeddb an attempt was made to open a database with a version number higher than its current version.
<input type="date"> - HTML: Hypertext Markup Language
in unsupported browsers, the control de
grades gracefully to <input type="text">.
...as an example, the date picker on firefox for android looks like this: unsupporting browsers gracefully de
grade 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 de
grades 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 de
grade 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 de
grades 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 de
grade 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 de
grades gracefully to function identically to <input type="text">.
...for example, the week picker on chrome for android looks like this: non-supporting browsers gracefully de
grade 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
gradient 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
gradient 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 up
grading an existing http connection.
...notable headers are do not track (dnt) header to control privacy, x-frame-options, or up
grade-insecure-requests but many more exist.
Content-Security-Policy - HTTP
up
grade-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).
... up
grade insecure requests candidate recommendation adds up
grade-insecure-requests.
Index - HTTP
49 csp: up
grade-insecure-requests csp, directive, http, reference, security the http content-security-policy (csp) up
grade-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 up
grade-insecure-requests http, https, security, header the http up
grade-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 up
grade-insecure-requests csp directive.
HTTP resources and specifications - HTTP
proposed standard rfc 2817 up
grading 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 up
grade insecure requests up
grade 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...
Transitioning to strict mode - JavaScript
gradual transition strict mode has been designed so that the transition to it can be made
gradually.
...fortunately, this careful review can be done
gradually down the function granularity.
Populating the page: how browsers work - Web Performance
slow start
gradually increases the amount of data transmitted until the network's maximum bandwidth can be determined.
...tcp slow start
gradually builds up transmission speeds appropriate for the network's capabilities to avoid congestion.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
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/
graduate.eot', '/pwa-examples/js13kpwa/fonts/
graduate.ttf', '/pwa-examples/js13kpwa/fonts/
graduate.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 up
grade a service worker when a new version of the app containing new assets is available?
The building blocks of responsive design - Progressive web apps (PWAs)
these include rounded corners,
gradients, 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 de
grade.
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>, <linear
gradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radial
gradient>, <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> <radial
gradient id="
gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%...
..." stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radial
gradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#
gradient)" 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(#
gradient)" style="transform: translatex(240px);" /> <text x="290" y="50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed...
exponent - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linear
gradient id="
gradient"
gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </linear
gradient> </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(#
gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#
gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes <number> if the type attribute of the component element is set to gamma, this value specifies the exponent of the gamma function specifica...
fill - SVG: Scalable Vector Graphics
for shapes and text it's a presentation attribute that defines the color (or any svg paint servers like
gradients 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
gradient --> <defs> <radial
gradient id="my
gradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radial
gradient> </defs> <circle cx="150" cy="50" r="40" fill="url(#my
gradient)" /> <!-- keeping the final state of an animated circle which is a circle with a radius of 40.
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
gradient 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
gradient 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> <linear
gradient id="
gradient"
gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </linear
gradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0"/> <fefuncg type="linear" intercep...
...linear" intercept="0"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0.3"/> <fefuncg type="linear" intercept="0.1"/> <fefuncb type="linear" intercept="0.8"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#
gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#
gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter e...
stroke - SVG: Scalable Vector Graphics
the stroke attribute is a presentation attribute defining the color (or any svg paint servers like
gradients 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
gradient --> <defs> <linear
gradient id="my
gradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </linear
gradient> </defs> <circle cx="15" cy="5" r="4" fill="none" stroke="url(#my
gradient)" /> </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> <linear
gradient id="
gradient"
gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </linear
gradient> </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(#
gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#
gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer animatable yes <list-of-numbers> this value ...
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>, <linear
gradient>, <mpath>, <pattern>, <radial
gradient>, <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>, <linear
gradient>, <pattern>, <radial
gradient>, <script>, <textpath>, and <use> scalable vector graphics (svg) 1.1 (second edition)the definition of 'seed' in that specification.
<a> - SVG: Scalable Vector Graphics
value type: no-referrer|no-referrer-when-down
grade|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 elements
gradient 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.
<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" /> <linear
gradient id="my
gradient"
gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </linear
gradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#my
gradient')" /> </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 elements
gradient 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> <linear
gradient id="rainbow"
gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset="1" stop-color="#800080"></stop>...
... </linear
gradient> <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 1...
Filter effects - SVG: Scalable Vector Graphics
drop shadows, to provide a popular example, cannot be created reasonably with a combination of
gradients.
...while basic blurs can be achieved with the help of
gradients, the blur filter is needed to do anything beyond.
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)
graduation: 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.onup
gradeneeded = 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 up
grade down
grade isprivatebrowsingsupported this property indicates whether or not the add-on supports private browsing.
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 up
graded.
Canvas code snippets - Archive of obsolete content
draticcurveto', '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', 'createlinear
gradient', 'createradial
gradient', '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...
Promises - Archive of obsolete content
for use cases which are not easily served by other options, or for legacy code which cannot easily be up
graded to non-relational models, the sqlite.jsm module provides a clean, promise-based interface to sqlite databases.
Mozilla Application Framework in Detail - Archive of obsolete content
ras (the home page for the xml extras code module, which contains mozilla's web services support) soap scripts in mozilla (documentation on soap in mozilla from the engineer who implemented it) xpinstall, mozilla's cross platform installation technology one of the many things that makes the mozilla platform easy for both users and developers is that applications can be installed, extended, or up
graded with simple web page links.
XUL Events - Archive of obsolete content
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 de
grades the performance of subsequent dom operations in that document, and that removing the listeners later does not mitigate or reverse the effect.
Archived open Web documentation - Archive of obsolete content
if you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to up
grade: stopiteration the stopiteration object was used to tell the end of the iteration in the legacy iterator protocol.
Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms
forbidden header names start with proxy- or sec-, or are one of the following names: accept-charset accept-encoding access-control-request-headers access-control-request-method connection content-length cookie cookie2 date dnt expect feature-policy host keep-alive origin proxy- sec- referer te trailer transfer-encoding up
grade via note: the user-agent header is no longer forbidden, as per spec — see forbidden header name list (this was implemented in firefox 43) — it can now be set in a fetch headers object, or via xhr setrequestheader().
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
equest headers after a get request: get /home.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/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, br referer: https://developer.mozilla.org/testpage.html connection: keep-alive up
grade-insecure-requests: 1 if-modified-since: mon, 18 jul 2016 02:36:04 gmt if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-length header in this example is not a request header like the others, but an entity header: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0...
MDN Web Docs Glossary: Definitions of Web-related terms
r frame rate (fps) ftp ftu function fuzz testing g gaia garbage collection gecko general header gif gij git global object global scope global variable glyph gonk google chrome gpl gpu graceful de
gradation grid grid areas grid axis grid cell grid column grid container grid lines grid row grid tracks guard gutters gzip compression h hash head high-level programming language hmac hoisting host hotlink h...
Creating fancy letterheaded paper - Learn web development
add a background declaration to the letter that: fixes the top image to the top of the letter fixes the bottom image to the bottom of the letter adds a semi-transparent
gradient over the top of both of the previous backgrounds that gives the letter a bit of texture.
Organizing your CSS - Learn web development
you may have used a css property in a specific way to get around older browser incompatibilities, for example: .box { background-color: red; /* fallback for older browsers that don't support
gradients */ background-image: linear-
gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a little non-obvious.
How CSS is structured - Learn web development
write css rules that apply styling to different html elements: transform background-image, in particular
gradient 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.
Advanced form styling - Learn web development
so you could hide the actual from input using something like this: input[type="file"] { height: 0; padding: 0; opacity: 0; } and then style the label to act like a button, which when pressed will open the file picker as expected: label[for="file"] { box-shadow: 1px 1px 3px #ccc; background: linear-
gradient(to bottom, #eee, #ccc); border: 1px solid rgb(169, 169, 169); border-radius: 5px; text-align: center; line-height: 1.5; } label[for="file"]:hover { background: linear-
gradient(to bottom, #fff, #ddd); } label[for="file"]:active { box-shadow: inset 1px 1px 3px #ccc; } you can see the result of the above css styling in the below live example (see also styled-file-picker.html live,...
Example 2 - Learn web development
x */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-
gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-
gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ ...
Example 3 - Learn web development
x */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-
gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-
gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ ...
Example 4 - Learn web development
x */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-
gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-
gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ ...
Example 5 - Learn web development
x */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-
gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-
gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ ...
The web and web standards - Learn web development
this includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful de
gradation).
Document and website structure - Learn web development
html layout elements in more detail it's good to understand the overall meaning of all the html sectioning elements in detail — this is something you'll work on
gradually as you start to get more experience with web development.
Aprender y obtener ayuda - Learn web development
run code after several promises are fulfilled play a video stream from a webcam in the browser create a linear
gradient 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.
Basic animations - Web APIs
is.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.createlinear
gradient(t.x, t.y, t.x + this.w, t.y + this.h); i.length - 1 == e ?
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 canvas
gradient 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
gradually in most browsers.
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 up
graded, // then remove the placeholder.
ExtendableEvent - Web APIs
this ensures that any functional events (like fetchevent) are not dispatched until it up
grades database schemas and deletes the outdated cache entries.
Using Fetch - Web APIs
origin 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-down
grade, 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 ...
FileHandle API - Web APIs
var idbreq = window.indexeddb.open('myfilestoragedatabase'); // if necessary, let's create a datastore for the files idbreq.onup
gradeneeded = 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 ...
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
gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth.
The HTML DOM API - Web APIs
canvas
gradient 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: "up
grade 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", ...
IDBDatabase.createObjectStore() - Web APIs
request.onup
gradeneeded = 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.onup
gradeneeded = 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 up
grade transaction; you can only rename indexes during up
grade 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 up
grade is needed.
IDBTransaction.mode - Web APIs
transactions in this mode are known as "up
grade 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 "up
grade 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.onup
gradeneeded = 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 onup
gradeneeded 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.onup
gradeneeded event handler function.
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-
gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, w...
MimeTypeArray - Web APIs
} else { // notify the user that flash is being deprecated and they // should up
grade their browser.
MutationEvent - Web APIs
performance adding dom mutation listeners to a document profoundly de
grades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).
Navigator.serviceWorker - Web APIs
the navigator.serviceworker read-only property returns the serviceworkercontainer object for the associated document, which provides access to registration, removal, up
grade, and communication with the serviceworker.
Navigator - Web APIs
navigator.serviceworker read only returns a serviceworkercontainer object, which provides access to registration, removal, up
grade, and communication with the serviceworker objects for the associated document.
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 = texture2d
gradext(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.
PannerNode.coneInnerAngle - Web APIs
tialised 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 determines the size of the area in which the sound volume decreases
gradually // 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
gradually 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 th...
PannerNode.coneOuterAngle - Web APIs
tialised 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 determines the size of the area in which the sound volume decreases
gradually // 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
gradually 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 th...
PannerNode.coneOuterGain - Web APIs
tialised 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 determines the size of the area in which the sound volume decreases
gradually // 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
gradually 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 th...
PannerNode.orientationX - Web APIs
tialised 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 determines the size of the area in which the sound volume decreases
gradually // 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
gradually 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 th...
PannerNode.orientationY - Web APIs
tialised 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 determines the size of the area in which the sound volume decreases
gradually // 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
gradually 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 th...
PannerNode.orientationZ - Web APIs
tialised 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 determines the size of the area in which the sound volume decreases
gradually // 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
gradually 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 th...
RTCRtpSendParameters - Web APIs
de
gradationpreference specifies the preferred way the webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtcde
gradationpreference enumerated string type, and the default is balanced.
:-moz-window-inactive - CSS: Cascading Style Sheets
html <div id="mybox"> <p>this is a box!</p> </div> css #mybox { background: linear-
gradient(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-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-
gradient linear, left top, left bottom; height: 100%; box-sizing: border-box; } result specifications not part of any standard.
Using multi-column layouts - CSS: Cascading Style Sheets
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 de
gradation the column properties will just be ignored by non-columns-supporting browsers.
CSS data types - CSS: Cascading Style Sheets
pes defined by the set of css specifications include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <
gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <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 ...
Mozilla CSS extensions - CSS: Cascading Style Sheets
al 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
gradients -moz-linear-
gradient -moz-radial-
gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.
Tools - CSS: Cascading Style Sheets
this is not really yet a useful tool, but will be!linear-
gradient generatorthis tool can be used to create custom css3 linear-
gradient() backgrounds.
animation - CSS: Cascading Style Sheets
tart | 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-
gradient(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...
backdrop-filter - CSS: Cascading Style Sheets
.box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-
gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result specifications spe...
background-clip - CSS: Cascading Style Sheets
nd 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-
gradient(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 ...
<basic-shape> - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background: repeating-linear-
gradient(red, orange 50px); clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); animation: 4s poly infinite alternate ease-in-out; margin: 10px auto; } @keyframes poly { from { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); } to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, ...
border-image-outset - CSS: Cascading Style Sheets
:first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-
gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-outset' in that specification.
box-decoration-break - CSS: Cascading Style Sheets
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-
gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: solid; margin-left: 10px; font: 24px sans-serif; line-height: 2; } ...
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 de
grade the quality of and to what degree.
justify-content - CSS: Cascading Style Sheets
t-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples setting flex item distribution css #container { display: flex; justify-content: space-between; /* can be changed in the live sample */ } #container > div { width: 100px; height: 100px; background: linear-
gradient(-45deg, #788cff, #b4c8ff); } html <div id="container"> <div></div> <div></div> <div></div> </div> <select id="justifycontent"> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="left">left</option> <option va...
mask-mode - CSS: Cascading Style Sheets
on 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-
gradient(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-
gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bo...
mask-repeat - CSS: Cascading Style Sheets
container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-
gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="s...
offset-path - CSS: Cascading Style Sheets
0,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
gradient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the css radial
gradient size values from closest-side to farthest-corner, and the keyterm contain.
overscroll-behavior-block - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 3000px; width: 500px; background-color: white; background-image: repeating-linear-
gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; background-color: yellow; background-image: repeating-linear-
gradient(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-
gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px; background-color: yellow; background-image: repeating-linear-
gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19p...
<transform-function> - CSS: Cascading Style Sheets
latey(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-
gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { ...
url() - CSS: Cascading Style Sheets
or: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-
gradient(rgba(0, 0, 0, 1.0), transparent); /* as 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/") { ...
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 down
graded to only include information about this problem and the type set to dns.address_changed.
Math.imul() - JavaScript
if you use normal javascript floating point numbers in imul, you will experience a de
grade in performance.
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-
grade quality level at around 7.4 kbps.
Privacy, permissions, and information security
ures 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 down
grade 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/
graduate.eot', '/pwa-examples/js13kpwa/fonts/
graduate.ttf', '/pwa-examples/js13kpwa/fonts/
graduate.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/
graduate.eot', '/pwa-examples/js13kpwa/fonts/
graduate.ttf', '/pwa-examples/js13kpwa/fonts/
graduate.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...
class - SVG: Scalable Vector Graphics
altglyph> <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> <linear
gradient> <marker> <mask> <missing-glyph> <path> <pattern> <polygon> <polyline> <radial
gradient> <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>, <linear
gradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radial
gradient>, <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> <linear
gradient id="
gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </linear
gradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#
gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" /> </svg> usage ...
paint-order - SVG: Scalable Vector Graphics
example <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <linear
gradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </linear
gradient> <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, <linear
gradient> and <radial
gradient> support the
gradienttransform attribute, and <pattern> supports the patterntransform attribute, both of which act exactly like the transform attribute.
xlink:arcrole - SVG: Scalable Vector Graphics
rically 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>, <linear
gradient>, <mpath>, <pattern>, <radial
gradient>, <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>, <linear
gradient>, <mpath>, <pattern>, <radial
gradient>, <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.
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
gradienttransform
gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight m...
<g> - SVG: Scalable Vector Graphics
a-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 elements
gradient 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 elements
gradient 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 elements
gradient 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
ty, 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 elements
gradient 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 elements
gradient 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
endering, 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 elements
gradient 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
a-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 elements
gradient 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
a-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 elements
gradient 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
scriptive 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> <radial
gradient id="
gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radial
gradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#
gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizevi...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
n 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 <radial
gradient> not implemented (bug 1240275) <mesh> (renamed mesh
gradient) 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) display beha...