Variable fonts guide - CSS: Cascading Style Sheets
the allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit.
... however, any value from -90–90 degrees is valid.
... note: the deg keyword is not used when utilizing font-variation-settings.
...And 3 more matches

filter - CSS: Cascading Style Sheets
syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-function> [<filter-function>]* | none for a reference to an svg <filter> element, use ...
...the value of angle defines the number of degrees around the color circle the input samples will be adjusted.
... a value of 0deg leaves the input unchanged.
...And 3 more matches

font-style - CSS: Cascading Style Sheets
syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10deg; /* global values */ font-style: inherit; font-style: initial; font-style: unset; the font-style property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is oblique.
...valid values are degree values of -90deg to 90deg inclusive.
... if an angle is not specified, an angle of 14 degrees is used.
...And 3 more matches

transform-origin - CSS: Cascading Style Sheets
this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center.
... top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1">&nbsp;</div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } transform: rotate(30deg); <div class="box2">&nbsp;</div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 0 0; <div class="box3">&nbsp;</div> .box3 { margin: 0.5em; width: 3em; height: ...
...3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 100% 100%; <div class="box4">&nbsp;</div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5">&nbsp;</div> .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em...
...And 3 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
the value can be specified in any <angle> unit supported by css, including degrees (deg), radians (rad), gradians (grad), or turns (turn).
...solid black; font: 16px "open sans", helvetica, arial, sans-serif; border-spacing: 0; border-collapse: collapse; } th, td { border: 1px solid black; padding:4px 6px; text-align: left; } th { background-color: hsl(0, 0%, 75%); } <table> <thead> <tr> <th scope="col">color in hsl notation</th> <th scope="col">example</th> </tr> </thead> <tbody> <tr> <td><code>hsl(90deg, 100%, 50%)</code></td> <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> </tr> <tr> <td><code>hsl(90, 100%, 50%)</code></td> <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> </tr> <tr> <td><code>hsl(0.15turn, 50%, 75%)</code></td> <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> </tr> <tr> <td><code>hsl(0.15turn, 90%, 75...
...%)</code></td> <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> </tr> <tr> <td><code>hsl(0.15turn, 90%, 50%)</code></td> <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> </tr> <tr> <td><code>hsl(270deg, 90%, 50%)</code></td> <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> </tr> </tbody> </table> note that when you omit the hue's unit, it's assumed to be in degrees (deg).
...And 3 more matches

Web video codec guide - Web media technologies
effect of source video format on encoded output the degree to which the format of the source video will affect the output varies depending on the codec and how it works.
... the more variability—such as noise—there is in the image, the more complex the compression process and the less success the algorithm is likely to have compressing the image to the same degree.
... the degree to which these affect the resulting encoded video will vary depending on the precise details of the situation, including which encoder you use and how it's configured.
...And 3 more matches

A basic 2D WebGL animation example - Web APIs
let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation timing let previoustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup(): window.addeventlistener("load", startup, false); function startup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: gl.fragment_shader, ...
... then the current rotation angle (in degrees) is set to 0.0, since we haven't performed any rotation yet, and the rotation speed (in degrees per screen refresh period, typically 60 fps) is set to 6.
...avertexposition = gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(avertexposition); gl.vertexattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); window.requestanimationframe(function(currenttime) { let deltaangle = ((currenttime - previoustime) / 1000.0) * degreespersecond; currentangle = (currentangle + deltaangle) % 360; previoustime = currenttime; animatescene(); }); } the first thing that needs to be done in order to draw a frame of the animation is to clear the background to the desired color.
...And 2 more matches

Using CSS transforms - CSS: Cascading Style Sheets
examples here is an unaltered image of the mdn logo: rotating here is the mdn logo rotated 90 degrees from its bottom-left corner.
... <img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis.
... <img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex.
...And 2 more matches

Using CSS transitions - CSS: Cascading Style Sheets
rty: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: eas...
...te; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration: 1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-...
...roperty: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 2s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease-...
...And 2 more matches

attr() - CSS: Cascading Style Sheets
30.5deg).
... 0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
... deg, grad, rad <angle> the attribute value is parsed as a css <number>, that is without the unit (e.g.
...And 2 more matches

<color> - CSS: Cascading Style Sheets
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.
... when written as a unitless <number>, it is interpreted as degrees, as specified in css color module level 3.
... by definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc.
...And 2 more matches

linear-gradient() - CSS: Cascading Style Sheets
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%, r...
...ed); /* color hint: a gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-gradient(.25turn, red, 10%, blue); /* multi-position color stop: a gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue */ linear-gradient(45deg, red 0 50%, blue 50% 100%); values <side-or-corner> the position of the gradient line's starting point.
... the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively.
...And 2 more matches

repeating-linear-gradient() - CSS: Cascading Style Sheets
syntax /* a repeating gradient tilted 45 degrees, starting blue and finishing red, repeating 3 times */ repeating-linear-gradient(45deg, blue, red 33.3%); /* a repeating gradient going from the bottom right to the top left, starting blue and finishing red, repeating every 20px */ repeating-linear-gradient(to left top, blue, red 20px); /* a gradient going from the bottom to top, starting blue, turning green after 40%, and finis...
...this gradient doesn't repeat because the last color stop defaults to 100% */ repeating-linear-gradient(0deg, blue, green 40%, red); /* a gradient repeating five times, going from the left to right, starting red, turning green, and back to red */ repeating-linear-gradient(to right, red 0%, green 10%, red 20%); values <side-or-corner> the position of the gradient line's starting point.
... the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively.
...And 2 more matches

glyph-orientation-horizontal - SVG: Scalable Vector Graphics
when the reference orientation direction is horizontal and the glyph-orientation-horizontal results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.
... otherwise, if the value of this attribute is not a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph.
... as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value <angle> default value 0deg animatable no <angle> the value of the angle is restricted to 0, 90, 180, and 270 degrees.
...And 2 more matches

Unconventional controls - Game development
we will need a few helper variables for our code to work — one for the purpose of calculating the degrees from radians, two for holding the horizontal and vertical amount of degrees our hand is leaning above the controller, one for the threshold of that lean, and one for the state of our hand's grab status.
... we next add these lines after all the event listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 180); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * todegrees); verticaldegree = math.round(hand.pitch() * todegrees); grabstrength = hand.grabstrength; output.innerhtml = 'leap motion: <br />' + ' roll: ' + horizontaldegree + '° <br />' + ' pitch: ' + verticaldegree + '° <br />' + ' strength: ' + grabstrength + ''; } }); the code above i...
...s calculating and assigning the horizontaldegree, verticaldegree and grabstrength values that we will use later on, and outputting it in html so we can see the actual values.
... if(horizontaldegree > degreethreshold) { playerx -= 5; } else if(horizontaldegree < -degreethreshold) { playerx += 5; } if(verticaldegree > degreethreshold) { playery += 5; } else if(verticaldegree < -degreethreshold) { playery -= 5; } if(grabstrength == 1) { alert('boom!'); } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } if the horizontaldegree value is greater than our degreethreshold, which is 30 in this case, then the ship will be moved left 5 pixels on every frame.

HTML forms in legacy browsers - Learn web development
graceful degradation is web developer's best friend graceful degradation 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 degradation.
... html input types the input types added in html5 are all useable, even in ancient browsers, because the way they degrade is highly predictable.
... note: modernizr has other awesome features to help you in dealing with unobstructive javascript and graceful degradation techniques.

Making decisions in your code — conditionals - Learn web development
for example, we could update our weather forecast application to show a further set of choices depending on what the temperature is: if (choice === 'sunny') { if (temperature < 86) { para.textcontent = 'it is ' + temperature + ' degrees outside — nice and sunny.
... let\'s go out to the beach, or the park, and get an ice cream.'; } else if (temperature >= 86) { para.textcontent = 'it is ' + temperature + ' degrees outside — really hot!
... to give you an and example, the previous example snippet can be rewritten to this: if (choice === 'sunny' && temperature < 86) { para.textcontent = 'it is ' + temperature + ' degrees outside — nice and sunny.
... let\'s go out to the beach, or the park, and get an ice cream.'; } else if (choice === 'sunny' && temperature >= 86) { para.textcontent = 'it is ' + temperature + ' degrees outside — really hot!

nsIScreen
screen rotation constants requires gecko 13.0(firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) constant value description rotation_0_deg 0 0° of rotation (that is, no rotation, or default orientation).
... rotation_90_deg 1 90° of rotation.
... rotation_180_deg 2 180° of rotation.
... rotation_270_deg 3 270° of rotation.

nsIWebProgressListener
the degree of security is expressed by state_secure_high, state_secure_med, or state_secure_low.
... constant value description state_secure_high 0x00040000 this flag indicates a high degree of security.
... state_secure_med 0x00010000 this flag indicates a medium degree of security.
... state_secure_low 0x00020000 this flag indicates a low degree of security.

Detecting device orientation - Web APIs
the deviceorientationevent.alpha value represents the motion of the device around the z axis, represented in degrees with values ranging from 0 to 360.
... the deviceorientationevent.beta value represents the motion of the device around the x axis, represented in degrees with values ranging from -180 to 180.
... the deviceorientationevent.gamma value represents the motion of the device around the y axis, represented in degrees with values ranging from -90 to 90.
... border-radius: 100%; } now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var output = document.queryselector('.output'); var maxx = garden.clientwidth - ball.clientwidth; var maxy = garden.clientheight - ball.clientheight; function handleorientation(event) { var x = event.beta; // in degree in the range [-180,180] var y = event.gamma; // in degree in the range [-90,90] output.innerhtml = "beta : " + x + "\n"; output.innerhtml += "gamma: " + y + "\n"; // because we don't want to have the device upside down // we constrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // to make computation easier we shift the range of // ...

DeviceOrientationEvent - Web APIs
deviceorientationevent.alpha read only a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360.
... deviceorientationevent.beta read only a number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180.
... deviceorientationevent.gamma read only a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90.
... deviceorientationevent.webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360.

GeolocationCoordinates - Web APIs
geolocationcoordinates.latitude read only secure context returns a double representing the position's latitude in decimal degrees.
... geolocationcoordinates.longitude read only secure context returns a double representing the position's longitude in decimal degrees.
...this value, specified in degrees, indicates how far off from heading true north the device is.
... 0 degrees represents true north, and the direction is determined clockwise (which means that east is 90 degrees and west is 270 degrees).

PannerNode.coneInnerAngle - Web APIs
the coneinnerangle property of the pannernode interface is a double value describing the angle, in degrees, of a cone inside of which there will be no volume reduction.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value 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 ...
...: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.curren...

PannerNode.coneOuterAngle - Web APIs
the coneouterangle property of the pannernode interface is a double value describing the angle, in degrees, of a cone outside of which the volume will be reduced by a constant value, defined by the coneoutergain property.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value 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 ...
...: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.curren...

Matrix math for the web - Web APIs
// manually rotating a point about the origin without matrices let point = [10, 2]; // calculate the distance from the origin let distance = math.sqrt(point[0] * point[0] + point[1] * point[1]); // the equivalent of 60 degrees, in radians let rotationinradians = math.pi / 3; let transformedpoint = [ math.cos(rotationinradians) * distance, math.sin(rotationinradians) * distance ]; it is possible to encode these type of steps into a matrix, and do it for each of the x, y, and z dimensions.
...for instance, to scale something down by 80%, move it down 200 pixels, and then rotate about the origin 90 degrees would look something like the following in pseudo-code.
... let transformmatrix = mdn.multiplyarrayofmatrices([ rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); view on jsfiddle finally, a fun step to show how matrices work is to reverse the steps to bring the matrix back to the original identity matrix.
... let transformmatrix = mdn.multiplyarrayofmatrices([ scale(1.25, 1.25, 1.25), // step 6: scale back up translate(0, -200, 0), // step 5: move back up rotatearoundzaxis(-math.pi * 0.5), // step 4: rotate back rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); why matrices are important matrices are important because they comprise a small set of numbers that can describe a wide range of transformations in space.

Geometry and reference spaces in WebXR - Web APIs
to convert degrees to radians, simply multiply the value in degrees by π/180.
... the following code snippet shows two simple functions, degreestoradians() and radianstodegrees(), which convert back and forth between the two units for measuring angles.
... const radians_per_degree = math.pi / 180.0; let degreestoradians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks.
... for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.

Using the Web Animations API - Web APIs
here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes alice’s color and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely.
... representing keyframes the first thing we need is to create a keyframe object corresponding to our css @keyframes block: var alicetumbling = [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects.
...instead of making objects for keyframes and timing properties, we could just pass their values in directly, like so: document.getelementbyid("alice").animate( [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ], { duration: 3000, iterations: infinity } ); what’s more, if we only wanted to specify the duration of the animation and not its iterations (by default, animations iterate once), we could pass in the milliseconds alone: document.getelementbyid("alice").animate( [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000...
...' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ], 3000); controlling playback with play(), pause(), reverse(), and updateplaybackrate() while we can write css animations with the web animations api, where the api really comes in handy is manipulating the animation’s playback.

image-orientation - CSS: Cascading Style Sheets
obsolete since gecko 63 */ image-orientation: 90deg; /* rotate 90deg */ image-orientation: 90deg flip; /* rotate 90deg, and flip it horizontally */ image-orientation: flip; /* no rotation, only applies a horizontal flip */ syntax values none default initial value.
...it is rounded to the nearest 90deg (0.25turn).
...if no <angle> is given, 0deg is used.
... formal definition initial value0degapplies toall elementsinheritedyescomputed valuean <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turnanimation typediscrete formal syntax from-image | <angle> | [ <angle>?

<transform-function> - CSS: Cascading Style Sheets
<div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="select-form"> <label>select a transform function</label> <select> <option selected>choose a function</option> <option>rotate(360deg)</option> <option>rotatex(360deg)</option> <option>rotatey(360deg)</option> <option>rotatez(360deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option> <option>scale(1.5)</option> <option>scalex(1.5)</option> <option>scaley(1.5)</option> <option>scalez(1.5)</option> <option>scale3d(1, 1.5, 1.5)</option> <option>skew(17deg, 13deg)</option>...
... <option>skewx(17deg)</option> <option>skewy(17deg)</option> <option>translate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; ...
... align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; } javascript const selectelem = document.queryselector('s...
...elect'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; }, 2000) } }) result specifications specification status comment css transforms level 2the definition of '<transform-function>' in that specification.

transition-duration - CSS: Cascading Style Sheets
perty: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-i...
...lute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration:1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-...
...-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:2s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:2s; -webkit-transition-timing-function: ease-in-...
...-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:4s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:4s; -webkit-transition-timing-function: ease-in-...

Using device orientation with 3D transforms - Developer guides
here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality.
... this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation matr...
...ix rm00 = c + x*x * t, rm10 = z*s + y*x * t, rm20 = -y*s + z*x * t, rm01 = -z*s + x*y * t, rm11 = c + y*y * t, rm21 = x*s + z*y * t, rm02 = y*s + x*z * t, rm12 = -x*s + y*z * t, rm22 = c + z*z * t, to_deg = 180 / math.pi, ea = [], n = math.sqrt( rm22 * rm22 + rm20 * rm20 ); // rotation matrix to euler angles ea[1] = math.atan2( -rm21, n ); if ( n > 0.001 ) { ea[0] = math.atan2( rm01, rm11 ); ea[2] = math.atan2( rm20, rm22 ); } else { ea[0] = 0; ea[2] = ( rm21 > 0 ?
... 1 : -1 ) * math.atan2( -rm10, rm00 ); } return { alpha: -ea[0] * to_deg - 180, beta: -ea[1] * to_deg, gamma: ea[2] * to_deg }; } ...

Math - JavaScript
examples converting between degrees and radians the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() expect (and return) angles in radians.
... since humans tend to think in degrees, and some functions (such as css transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two: function degtorad(degrees) { return degrees * (math.pi / 180); }; function radtodeg(rad) { return rad / (math.pi / 180); }; calculating the height of an equalateral triangle if we want to calculate the height of an equalateral triangle, and we know its side length is 100, we can use the formulae length of the adjacent multiplied by the tangent of the angle is equal to the opposite.
... in javascript, we can do this with the following: 50 * math.tan(degtorad(60)).
... we use our degtorad() function to convert 60 degrees to radians, as math.tan() expects an input value in radians.

String.prototype.replace() - JavaScript
replacing a fahrenheit degree with its celsius equivalent the following example replaces a fahrenheit degree with its equivalent celsius degree.
... the fahrenheit degree should be a number ending with "f".
...the number of fahrenheit degree is accessible to the function through its second parameter, p1.
... the function sets the celsius number based on the fahrenheit degree passed in a string to the f2c() function.

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.
...if not provided, the angle value is assumed to be in degrees.
... when angles are used in an svg attribute, <angle> is instead defined as follows: angle ::= number ("deg" | "grad" | "rad")?

SVG documentation index - SVG: Scalable Vector Graphics
29 azimuth filters, svg, svg attribute the azimuth attribute specifies the direction angle for the light source on the xy plane (clockwise), in degrees from the x axis.
... 66 elevation filters, svg, svg attribute the elevation attribute specifies the direction angle for the light source from the xy plane towards the z-axis, in degrees.
... 126 limitingconeangle filters, svg, svg attribute the limitingconeangle attribute represents the angle in degrees between the spot light axis (i.e.
... 146 opacity svg, svg attribute the opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
il.identity.id1.draft_folder", "imap://" + env_user + "@imap-int.int-evry.fr/drafts"); lockpref("mail.identity.id1.drafts_folder_picker_mode", "0"); lockpref("mail.identity.id1.fcc_folder", "imap://" + env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_picker_mode", "0"); lockpref("mail.identity.id1.organization", "int evry france"); lockpref("mail.identity.id1.overrideglobal_pref", true); lockpref("mail.identity.id1.reply_to", ""); //imap lockpref("mail.server.server2.hostname", "imap-int.int-evry.fr"); lockpref("mail.server.server2.issecure", true); lockpref("mail.server.server2.login_at_startup", true); lockpref("mail.server.server2.max_cached_connections", 5); //lockpref("mail.server.server2.name", "jehan.procaccia@int-evry.fr"); lockpref("mail.server.server...
...; lockpref("mail.identity.id1.fcc_folder", "imap://" + env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_picker_mode", "0"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templates"); lockpref("mail.identity.id1.tmpl_folder_picker_mode", "0"); lockpref("mail.identity.id1.valid", true); lockpref("mail.identity.id1.overrideglobal_pref", true); lockpref("mail.server.server1.download_on_biff", true); lockpref("mail.server.server1.login_at_startup", true); lockpref("mail.server.server1.username", env_user); lockpref("mail.server.server1.delete_model", 0); //smtp lockpref("mail.identity.id1.smtpserver", "smtp1"); defaultpref("mail.smtpserver.smtp1.auth_method", 0); lockpref("mail.smtpservers", "smtp1"); lockpref("mail.s...
...; lockpref("mail.identity.id1.fcc_folder", "imap://" + env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_picker_mode", "0"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templates"); lockpref("mail.identity.id1.tmpl_folder_picker_mode", "0"); lockpref("mail.identity.id1.valid", true); lockpref("mail.identity.id1.overrideglobal_pref", true); lockpref("mail.server.server1.download_on_biff", true); lockpref("mail.server.server1.login_at_startup", true); lockpref("mail.server.server1.username", env_user); lockpref("mail.server.server1.delete_model", 0); //smtp defaultpref("mail.identity.id1.smtpserver", "smtp1"); defaultpref("mail.smtpserver.smtp1.auth_method", 0); defaultpref("mail.smtpservers", "smtp1"); defaultpre...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
178 graceful degradation design, glossary, graceful degradation graceful degradation 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.
... 275 modern web apps composing, glossary, modern web apps see progressive web apps 276 modularity codingscripting, glossary the term modularity refers to the degree to which a system's components may be separated and recombined, it is also division of a software package into logical units.
...in simpler terms: lossy compression causes data from the initial file to be lost, possibly causing degradation in quality.

create fancy boxes - Learn web development
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.
... .fancy { position: relative; background-color: #ffc; padding: 2rem; text-align: center; max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top : 80%; max-width: 200px; box-shadow: 0px 13px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding color and images within the background, so it could worth digging into managing colors and images.

Example 1 - Learn web development
*/ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border...
... 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 : border...
... 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 : border-box;...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
note that this isn't strictly necessary, but it is easier to work with values of 0–359 degrees than values like "128000 degrees".
... if (rotatecount > 359) { rotatecount %= 360; } next, below the previous block add the following line to actually rotate the spinner: spinner.style.transform = `rotate(${rotatecount}deg)`; at the very bottom inside the draw() function, insert the following line.
...this is very similar to the version from the simple spinner example, earlier: function draw(timestamp) { if(!starttime) { starttime = timestamp; } rotatecount = (timestamp - starttime) / 3; if(rotatecount > 359) { rotatecount %= 360; } spinner.style.transform = 'rotate(' + rotatecount + 'deg)'; raf = requestanimationframe(draw); } now it is time to set up the initial state of the app when the page first loads.

Object building practice - Learn web development
the last two parameters specify the start and end number of degrees around the circle that the arc is drawn between.
... here we specify 0 degrees, and 2 * pi, which is the equivalent of 360 degrees in radians (annoyingly, you have to specify this in radians).
...if you had specified only 1 * pi, you'd get a semi-circle (180 degrees).

Starting our Svelte Todo list app - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/02-starting-our-todo-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app remember to run npm install && npm run dev to start your app in development mode.
... .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } with our markup styled, everything now looks better: the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-sve...
...lte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode.

Working with Svelte stores - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode.
...in order to follow this section you'll have to clone the repo and go to the mdn-svelte-tutorial/06-stores folder or you can directly download the folder's content with npx degit opensas/mdn-svelte-tutorial/06-stores.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/07-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-next-steps remember to run npm install && npm run dev to start your app in development mode.

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.
... store a reference to this element in a variable, for example: const test = document.getelementbyid('hplogo'); now try to set a new value for the css property you are interested in on that element; you can do this using the style property of the element, for example try typing these into the javascript console: test.style.transform = 'rotate(90deg)' test.style.webkittransform = 'rotate(90deg)' as you start to type the property name representation after the second dot (note that in javascript, css property names are written in lower camel case, not hyphenated), the javascript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far.
... once you've found out which prefixes you need to support, you should write them all out in your css, for example: -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); this ensures that all browsers that support any of the above forms of the property can make the feature work.

nsIDOMGeoPositionCoords
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports attributes attribute type description latitude double the user's current latitude, in degrees.
... longitude double the user's current longitude, in degrees.
... heading double the current heading at which the user is moving, in degrees.

Drawing shapes with canvas - Web APIs
note: angles in the arc function are measured in radians, not degrees.
... to convert degrees to radians you can use the following javascript expression: radians = (math.pi/180)*degrees.
...the endangle starts at 180 degrees (half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.

DeviceMotionEventRotationRate - Web APIs
properties devicemotioneventrotationrate.alpha read only the amount of rotation around the z axis, in degrees per second.
... devicemotioneventrotationrate.beta read only the amount of rotation around the x axis, in degrees per second.
... devicemotioneventrotationrate.gamma read only the amount of rotation around the y axis, in degrees per second.

DeviceOrientationEvent.DeviceOrientationEvent() - Web APIs
options optional options are as follows: alpha: a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360.
... beta: a number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180.
... gamma: a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90.

MediaTrackConstraints - Web APIs
colortemperature a constraindouble (a double-precision integer) specifying a desired color temperature in degrees kelvin.
... contrast a constraindouble (a double-precision integer) specifying the degree of difference between light and dark.
... saturation a constraindouble (a double-precision integer) specifying the degree of color intensity.

PannerNode.coneOuterGain - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value 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 ...
...: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.curren...

PannerNode.orientationX - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value 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 ...
...: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.curren...

PannerNode.orientationY - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value 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 ...
...: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.curren...

PannerNode.orientationZ - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
... new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value 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 ...
...: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.curren...

PointerEvent - Web APIs
pointerevent.tiltx read only the plane angle (in degrees, in the range of -90 to 90) between the y–z plane and the plane containing both the pointer (e.g.
... pointerevent.tilty read only the plane angle (in degrees, in the range of -90 to 90) between the x–z plane and the plane containing both the pointer (e.g.
...pen stylus) around its major axis in degrees, with a value in the range 0 to 359.

Pointer events - Web APIs
tiltx the plane angle (in degrees, in the range of -90 to 90) between the y–z plane and the plane containing both the pointer (e.g.
... tilty the plane angle (in degrees, in the range of -90 to 90) between the x–z plane and the plane containing both the pointer (e.g.
...pen stylus) around its major axis in degrees, with a value in the range 0 to 359.

WebGL best practices - Web APIs
and to a lesser degree, vao attachments (vertexattribpointer, disable/enablevertexattribarray) drawing from static, unchanging vaos is faster than mutating the same vao for every draw call.
... it's common to use "degenerate triangles" if you need to draw discontinuous objects as a single drawarrays(triangle_strip) call.
... degenerate triangles are triangles with no area, therefore any triangle where more than one point is in the same exact location.

Web applications and ARIA FAQ - Accessibility
degrading gracefully from html5 to aria when delivering content to browsers that aren't html5-aware, you may want to consider gracefully degrading to the use of aria where necessary.
... so, using the example of a progress bar, you can degrade 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 degrading progress bar</title></head> <body> <progress id="progress-bar" value="0" max="100">0% complete</progress> <button id="update-button">update</button> </body> </html> ...

Linear-gradient Generator - CSS: Cascading Style Sheets
ner.clientwidth; var h = this.container.clientheight; var max_size = math.sqrt(w * w + h * h) + 50; this.axis.style.width = max_size + 'px'; this.axis.style.left = (w - max_size)/2 - 1 + 'px'; this.mw = w / 2; this.mh = h / 2; }; gradientaxis.prototype.updateaxisangle = function updateaxisangle(e) { var px = e.clientx - this.centerx; var py = e.clienty - this.centery; var deg = -math.atan2(py, px) * radian; var pmod = math.sqrt(px * px + py * py); this.lsize = (this.mw * math.abs(px) + this.mh * math.abs(py)) / pmod; if (this.state === true) slidermanager.setvalue('axis-rotation', deg | 0, false); this.angle = deg; this.updatecss(); axesmanager.updatecssgradient(); this.px = px; this.py = py; this.pmod = pmod; }; gradientaxis.prototype.setax...
...isangle = function setaxisangle(deg) { var rad = -deg * inv_radian; var px = math.cos(rad); var py = math.sin(rad); this.lsize = this.mw * math.abs(px) + this.mh * math.abs(py); this.angle = deg; this.updatecss(); axesmanager.updatecssgradient(); this.px = px; this.py = py; this.pmod = 1; }; /* ui methods - apply css */ gradientaxis.prototype.updatecss = function updatecss() { this.line.style.width = 2 * this.lsize + 'px'; this.axis.style.transform = 'rotate('+ -this.angle +'deg)'; this.axis.style.webkittransform = 'rotate('+ -this.angle +'deg)'; }; gradientaxis.prototype.updategradient = function updategradient() { var p = this.firstpoint; if (p === null) return; this.gradient = p.cssvalue; p = p.nextpoint; while(p) { this.gradient += ', '...
... + p.cssvalue; p = p.nextpoint; }; axesmanager.updatecssgradient(); }; // this is the standard syntax gradientaxis.prototype.getcssgradient = function getcssgradient() { return 'linear-gradient('+ (-this.angle + 90 | 0) +'deg, ' + this.gradient + ')'; }; /** * axesmanager */ var axesmanager = (function axesmanager() { var lg_axes = []; var activeaxis = null; var activeshortcut = null; var axes_menu = null; var gradient_container = null; var add_axis_btn; var delete_axis_btn; var delete_point_btn; var update_output; var dragelem; var createstartaxis = function createstartaxis(angle) { if (activeaxis) activeaxis.deactivate(); var axisid = getnextaxisid(); var axis = new gradientaxis(gradient_container, axisid); var color = new hsvco...

hue-rotate() - CSS: Cascading Style Sheets
a value of 0deg leaves the input unchanged.
...there is no minimum or maximum value; hue-rotate(ndeg) evaluates to n modulo 360.
... examples hue-rotate(-90deg) /* same as 270deg rotation */ hue-rotate(0deg) /* no effect */ hue-rotate(90deg) /* 90deg rotation */ hue-rotate(.5turn) /* 180deg rotation */ hue-rotate(405deg) /* same as 45deg rotation */ specifications specification status filter effects module level 1the definition of 'hue-rotate()' in that specification.

offset-rotate - CSS: Cascading Style Sheets
syntax /* follow the path direction, with optional additional angle */ offset-rotate: auto; offset-rotate: auto 45deg; /* follow the path direction but facing the opposite direction of `auto` */ offset-rotate: reverse; /* keep a constant rotation regardless the position on the path */ offset-rotate: 90deg; offset-rotate: .5turn; auto the element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis.
...it is the same as specifying a value of auto 180deg.
... html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30deg; } @keyframes move { 100% { offset-distance: 100%; } } result specifications specification status comment motion path module level 1the definition of 'offset-rotate' in that specification.

transform - CSS: Cascading Style Sheets
syntax /* keyword values */ transform: none; /* function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: translatez(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scalex(2); transform: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg...
...); transform: skewx(30deg); transform: skewy(1.07rad); /* multiple function values */ transform: translatex(10px) rotate(10deg) translatey(5px); transform: perspective(500px) translate(10px, 0, 20px) rotatey(3deg); /* global values */ transform: inherit; transform: initial; transform: unset; the transform property may be specified as either the keyword value none or as one or more <transform-function> values.
...<zero> ] )<rotatex()> = rotatex( [ <angle> | <zero> ] )<rotatey()> = rotatey( [ <angle> | <zero> ] )<rotatez()> = rotatez( [ <angle> | <zero> ] )<perspective()> = perspective( <length> )where <length-percentage> = <length> | <percentage> examples translating and rotating an element html <div>transformed element</div> css div { border: solid red; transform: translate(30px, 20px) rotate(20deg); width: 140px; height: 60px; } result more examples please see using css transforms and <transform-function> for more examples.

<input type="range"> - HTML: Hypertext Markup Language
nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels.
... transform: rotate(-90deg) you can, however, create a vertical range control by drawing a horizontal range control on its side.
... .slider-wrapper { display: inline-block; width: 20px; height: 150px; padding: 0; } then comes the style information for the <input> element within the reserved space: .slider-wrapper input { width: 150px; height: 20px; margin: 0; transform-origin: 75px 75px; transform: rotate(-90deg); } the size of the control is set to be 150 pixels long by 20 pixels tall.

transform - SVG: Scalable Vector Graphics
transform="scale(4)" /> <!-- vertical scale --> <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1,4)" /> <!-- horizontal scale --> <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4,1)" /> <!-- no scale --> <circle cx="0" cy="0" r="10" fill="black" /> </svg> rotate the rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point.
...10" /> <!-- rotation is done around the point 0,0 --> <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" /> <!-- rotation is done around the point 10,10 --> <rect x="0" y="0" width="10" height="10" fill="green" transform="rotate(100,10,10)" /> </svg> skewx the skewx(<a>) transform function specifies a skew transformation along the x axis by a degrees.
... example html,body,svg { height:100% } <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="6" height="6" /> <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewx(30)" /> </svg> skewy the skewy(<a>) transform function specifies a skew transformation along the y axis by a degrees.

Basic Transformations - SVG: Scalable Vector Graphics
use the rotate() transformation for this: <svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg> this example shows a square that is rotated by 45 degrees.
... the value for rotate() is given in degrees.
... <svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> </svg> this example shows again the small square shown above that this time is also rotated by 45 degrees.

Performance best practices in extensions - Archive of obsolete content
loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive.
... general performance tips avoid creating memory leaks memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance.

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 degradation from development related settings, and further isolating personal data (such as bookmarks, extensions, and settings) from your testing environment.
...however, these preferences can degrade performance, so you may want to use a separate development profile when you enable these preferences.

Browser Detection and Cross Browser Support - Archive of obsolete content
fortunately, other browsers such as opera (versions 7 & later) and to a lesser extent, internet explorer (versions 5.5 & later) also support the standards to a degree.
... we are still faced with the question of how to develop standards based content while supporting the differing implementations of modern browsers while at the same time supporting (to a lesser degree) older and less capable browsers.

Componentizing our Svelte app - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode.

Deployment and next steps - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/08-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/08-next-steps remember to run npm install && npm run dev to start your app in development mode.
... a look behind the svelte compilation process by default, when you create a new app with npx degit sveltejs/template my-svelte-project, svelte will use rollup as the module bundler.

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode.

Dynamic behavior in Svelte: working with variables and props - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode.

Accessibility/LiveRegionDevGuide
as a result, care must be taken in an at-spi based application to minimize performance degradation by only acting on events that are truly live regions.
...the event should be filtered out as early as possible to prevent performance degradation.

Optimizing Applications For NSPR
this has proven to be quite challenging, a challenge that was met to a large degree, but there is always room for improvement.
... interrupting threads (via <tt>pr_interrupt()</tt>) on threads blocked in i/o functions is implemented to various degrees on different platforms.

Certificate functions
3.2 and later cert_decodecertfrompackage mxr 3.4 and later cert_decodecertificatepoliciesextension mxr 3.2 and later cert_decodecertpackage mxr 3.2 and later cert_decodecrldistributionpoints mxr 3.10 and later cert_decodedercrl mxr 3.2 and later cert_decodedercrlwithflags mxr 3.6 and later cert_decodegeneralname mxr 3.4 and later cert_decodenameconstraintsextension mxr 3.10 and later cert_decodeocspresponse mxr 3.6 and later cert_decodeoidsequence mxr 3.2 and later cert_decodeprivkeyusageperiodextension mxr 3.10 and later cert_decodetruststring mxr 3.4 and later cert_decodeusernotice mxr 3.2 and late...
...er cert_encodealtnameextension mxr 3.7 and later cert_encodeandaddbitstrextension mxr 3.5 and later cert_encodeauthkeyid mxr 3.5 and later cert_encodebasicconstraintvalue mxr 3.5 and later cert_encodecertpoliciesextension mxr 3.12 and later cert_encodecrldistributionpoints mxr 3.5 and later cert_encodegeneralname mxr 3.4 and later cert_encodeinfoaccessextension mxr 3.12 and later cert_encodeinhibitanyextension mxr 3.12 and later cert_encodenoticereference mxr 3.12 and later cert_encodeocsprequest mxr 3.6 and later cert_encodepolicyconstraintsextension mxr 3.12 and later cert_encodepolicymappingextension ...

NSS functions
3.2 and later cert_decodecertfrompackage mxr 3.4 and later cert_decodecertificatepoliciesextension mxr 3.2 and later cert_decodecertpackage mxr 3.2 and later cert_decodecrldistributionpoints mxr 3.10 and later cert_decodedercrl mxr 3.2 and later cert_decodedercrlwithflags mxr 3.6 and later cert_decodegeneralname mxr 3.4 and later cert_decodenameconstraintsextension mxr 3.10 and later cert_decodeocspresponse mxr 3.6 and later cert_decodeoidsequence mxr 3.2 and later cert_decodeprivkeyusageperiodextension mxr 3.10 and later cert_decodetruststring mxr 3.4 and later cert_decodeusernotice mxr 3.2 and late...
...er cert_encodealtnameextension mxr 3.7 and later cert_encodeandaddbitstrextension mxr 3.5 and later cert_encodeauthkeyid mxr 3.5 and later cert_encodebasicconstraintvalue mxr 3.5 and later cert_encodecertpoliciesextension mxr 3.12 and later cert_encodecrldistributionpoints mxr 3.5 and later cert_encodegeneralname mxr 3.4 and later cert_encodeinfoaccessextension mxr 3.12 and later cert_encodeinhibitanyextension mxr 3.12 and later cert_encodenoticereference mxr 3.12 and later cert_encodeocsprequest mxr 3.6 and later cert_encodepolicyconstraintsextension mxr 3.12 and later cert_encodepolicymappingextension ...

SpiderMonkey Internals
the emitter does some constant folding and a few codegen optimizations; about the fanciest thing it does is to attach source notes to the script for the decompiler's benefit.
...the code generator is split across paragraphs of code in jsparse.cpp, and the utility methods called on jscodegenerator appear in jsemit.cpp.

nsIAccessibleText
its height typically being the maximal height of all the characters in the text or the height of the preceding character, its width being at least one pixel so that the bounding box is not degenerate.
...its height typically being the maximal height of all the characters in the text or the height of the preceding character, its width being at least one pixel so that the bounding box is not degenerate.

CSSPrimitiveValue - Web APIs
conversions are allowed between absolute values (from millimeters to centimeters, from degrees to radians, and so on) but not between relative values.
... css_deg the value is an <angle> in degrees.

Applying styles and colors - Web APIs
15; ctx.linecap = linecap[i]; ctx.beginpath(); ctx.moveto(25 + i * 50, 10); ctx.lineto(25 + i * 50, 140); ctx.stroke(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample a linejoin example the linejoin property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).
...it is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join: miterlimit = max miterlength / linewidth = 1 / sin ( min θ / 2 ) the default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.

Transformations - Web APIs
reminder: angles are in radians, not degrees.
... to convert, we are using: radians = (math.pi/180)*degrees.

DeviceMotionEventRotationRate: alpha - Web APIs
this property indicates the rate of rotation around the z axis -- in degrees per second -- in a devicemotioneventrotationrate object.
... return value alpha a double indicating the rate of rotation around the z axis, in degrees per second.

DeviceMotionEventRotationRate: beta - Web APIs
this property indicates the rate of rotation around the x axis -- in degrees per second -- in a devicemotioneventrotationrate object.
... return value beta a double indicating the rate of rotation around the x axis, in degrees per second.

DeviceMotionEventRotationRate: gamma - Web APIs
this property indicates the rate of rotation around the y axis -- in degrees per second -- in a devicemotioneventrotationrate object.
... return value gamma a double indicating the rate of rotation around the y axis, in degrees per second.

Element.animate() - Web APIs
for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg).
...for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied.

GeolocationCoordinates.heading - Web APIs
this value, specified in degrees, indicates how far off from heading due north the device is.
... zero degrees represents true true north, and the direction is determined clockwise (which means that east is 90 degrees and west is 270 degrees).

GeolocationCoordinates.latitude - Web APIs
the geolocationcoordinates.latitude read-only property is a double representing the latitude of the position in decimal degrees.
... syntax let lat = geolocationcoordinatesinstance.latitude value a double representing the latitude of the position in decimal degrees.

GeolocationCoordinates.longitude - Web APIs
the geolocationcoordinates interface's read-only longitude property is a double-precision floating point value which represents the longitude of a geographical position, specified in decimal degrees.
... syntax let longitude = geolocationcoordinatesinstance.longitude value the value in longitude is the geographical longitude of the location on earth described by the coordinates object, in decimal degrees.

Intersection Observer API - Web APIs
the degree of intersection between the target element and its root is the intersection ratio.
... when the callback is invoked, it receives a list of intersectionobserverentry objects, one for each observed target which has had the degree to which it intersects the root change such that the amount exposed crosses over one of the thresholds, in either direction.

KeyboardEvent.code - Web APIs
moverate and turnrate are the number of pixels forward and backward each keystroke moves the ship and how many degrees of rotation the left and right steering controls apply per keystroke.
... angle is the current amount of rotation applied to the ship, in degrees; it starts at 0° (pointing straight up).

PannerNode - Web APIs
pannernode.coneinnerangle is a double value describing the angle, in degrees, of a cone inside of which there will be no volume reduction.
... pannernode.coneouterangle a double value describing the angle, in degrees, of a cone outside of which the volume will be reduced by a constant value, defined by the coneoutergain attribute.

PointerEvent.tiltX - Web APIs
the tiltx read-only property of the pointerevent interface is the angle (in degrees) between the y-z plane of the pointer and the screen.
... syntax var tiltx = pointerevent.tiltx; return value tiltx the angle in degrees between the y-z plane of the pointer (stylus) and the screen.

PointerEvent.tiltY - Web APIs
the tilty read-only property of the pointerevent interface is the angle (in degrees) between the x-z plane of the pointer and the screen.
... syntax var tilty = pointerevent.tilty; return value tilty the angle in degrees between the x-z plane of the pointer (stylus) and the screen.

PointerEvent.twist - Web APIs
the twist read-only property of the pointerevent interface represents the clockwise rotation of the pointer (e.g., pen stylus) around its major axis, in degrees.
... syntax var twist = pointerevent.twist; return value a long value representing the amount of twist, in degrees, applied to the transducer (pointer).

SVGAngle - Web APIs
svg_angletype_unspecified a unitless <number> interpreted as a value in degrees.
... svg_angletype_deg an <angle> with a deg unit.

Touch.radiusX - Web APIs
the touch.rotationangle is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center.
... src.style.width = touch.radiusx * 2 + 'px'; src.style.height = touch.radiusy * 2 + 'px'; src.style.transform = "rotate(" + touch.rotationangle + "deg)"; }; specifications specification status comment touch events – level 2 draft non-stable version.

Touch.rotationAngle - Web APIs
summary returns the rotation angle, in degrees, of the contact area ellipse defined by touch.radiusx and touch.radiusy.
... syntax var angle = touchitem.rotationangle; return value angle the number of degrees of rotation to apply to the described ellipse to align with the contact area between the user and the touch surface.

XRPose.emulatedPosition - Web APIs
a basic xr headset provides three degrees of freedom (3dof), tracking the pitch, yaw, and roll of the user's head.
... contrariwise, xr devices which can also track movement forward and backward as well as laterally—six degree of freedom (6dof) devices—don't require any information from other sources to determine the user's position, so the value of emulatedposition is false.

font-style - CSS: Cascading Style Sheets
syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 30deg; font-style: oblique 30deg 50deg; values normal selects the normal version of the font-family.
...ormal syntax normal | italic | oblique <angle>{0,2} examples specifying an italic font style as an example, consider the garamond font family, in its normal form, we get the following result: @font-face { font-family: garamond; src: url('garamond.ttf'); } the italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially sloped by a few degrees.

Box-shadow generator - CSS: Cascading Style Sheets
rotate" data-type="sub"></div> <div class="ui-slider" data-topic="rotate" data-min="-360" data-max="360" data-step="1" data-value="0"> </div> <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> width </div> <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> <div class="ui-slider" data-topic="width" data-min="0" data-max="1000" data-step="1" data-value="200"> ...
...px'; outputmanager.updateproperty(this.id, 'width', this.width + 'px'); } cssclass.prototype.setheight = function setheight(value) { this.height = value; this.node.style.height = this.height + 'px'; outputmanager.updateproperty(this.id, 'height', this.height + 'px'); } // browser support cssclass.prototype.setrotate = function setrotate(value) { var cssvalue = 'rotate(' + value +'deg)'; this.node.style.transform = cssvalue; this.node.style.webkittransform = cssvalue; this.node.style.mstransform = cssvalue; if (value !== 0) { if (this.rotate === 0) { outputmanager.toggleproperty(this.id, 'transform', true); outputmanager.toggleproperty(this.id, '-webkit-transform', true); outputmanager.toggleproperty(this.id, '-ms-transform', true); } } else { ...

CSS values and units - CSS: Cascading Style Sheets
dimensions a <dimension> is a <number> with a unit attached to it, for example 45deg, 100ms, or 10px.
... angle units angle values are represented by the type <angle> and accept the following values: unit name description deg degrees there are 360 degrees in a full circle.

offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment ...
...starting from the position of the box and 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.

offset - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: offset-anchor offset-distance offset-path offset-position offset-rotate syntax /* offset position */ offset: auto; offset: 10px 30px; offset: none; /* offset path */ offset: ray(45deg closest-side); offset: path('m 100 100 l 300 100 l 200 300 z'); offset: url(arc.svg); /* offset path with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30...
...deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand:offset...

rotate - CSS: Cascading Style Sheets
syntax /* keyword values */ rotate: none; /* angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* vector plus angle value */ rotate: 1 1 1 90deg; values angle value an <angle> specifying the angle to rotate the affected element through, around the z axis.
...n hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.

matrix3d() - CSS: Cascading Style Sheets
d="example-element" tabindex="0"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90...
...,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } result matrix translation and scale example another transform3d() example, which implements an animated combined translate and scale.

rotate() - CSS: Cascading Style Sheets
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
... html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div> css div { position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translatex(180px); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(45deg); } result specifications specification status comment css transforms level 1the definition of 'rotate()' in that specification.

rotate3d() - CSS: Cascading Style Sheets
in 3d space, rotations have three degrees of liberty, which together describe a single axis of rotation.
...a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 examples rotating on the y-axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } result rotating on a custom axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg); background-color: pink; } result specifications specification status comment ...

transform-style - CSS: Cascading Style Sheets
ight">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </div> css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: ...
...rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment css transforms level 2the definition of 'transform-style' in that specification.

<input type="button"> - HTML: Hypertext Markup Language
r height = canvas.height = window.innerheight-85; var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var colorpicker = document.queryselector('input[type="color"]'); var sizepicker = document.queryselector('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]'); // covert degrees to radians function degtorad(degrees) { return degrees * math.pi / 180; }; // update sizepicker output value sizepicker.oninput = function() { output.textcontent = sizepicker.value; } // store mouse pointer coordinates, and whether the button is pressed var curx; var cury; var pressed = false; // update mouse pointer coordinates document.onmousemove = function(e) { curx = (window.ev...
...telement.scrolltop : document.body.scrolltop); } canvas.onmousedown = function() { pressed = true; }; canvas.onmouseup = function() { pressed = false; } clearbtn.onclick = function() { ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); } function draw() { if(pressed) { ctx.fillstyle = colorpicker.value; ctx.beginpath(); ctx.arc(curx, cury-85, sizepicker.value, degtorad(0), degtorad(360), false); ctx.fill(); } requestanimationframe(draw); } draw(); specifications specification status comments html living standardthe definition of '<input type="button">' in that specification.

<input type="date"> - HTML: Hypertext Markup Language
in unsupported browsers, the control degrades gracefully to <input type="text">.
...as an example, the date picker on firefox for android looks like this: unsupporting browsers gracefully degrade to a text input, but this creates problems in consistency of user interface (the presented controls are different) and data handling.

<input type="datetime-local"> - HTML: Hypertext Markup Language
in other browsers, these degrade 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 degrade 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="month"> - HTML: Hypertext Markup Language
in browsers that don't support month inputs, the control degrades 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 degrade 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 degrades 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 degrade 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 degrades gracefully to function identically to <input type="text">.
...for example, the week picker on chrome for android looks like this: non-supporting browsers gracefully degrade 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.

Protocol upgrade mechanism - HTTP
this means that a typical request that includes upgrade would look something like: get /index.html http/1.1 host: www.example.com connection: upgrade upgrade: example/1, foo/2 other headers may be required depending on the requested protocol; for example, websocket upgrades allow additional headers to configure details about the websocket connection as well as to offer a degree of security in opening the connection.
...this header can be used when insecure (http) clients wish to upgrade, in order to offer some degree of protection against abuse.

Math.tan() - JavaScript
examples using math.tan() math.tan(1); // 1.5574077246549023 because the math.tan() function accepts radians, but it is often easier to work with degrees, the following function accepts a value in degrees, converts it to radians and returns the tangent.
... function gettandeg(deg) { var rad = deg * math.pi/180; return math.tan(rad); } specifications specification ecmascript (ecma-262)the definition of 'math.tan' in that specification.

Digital audio concepts - Web media technologies
all of this means there is a fundamental question that has to be asked and answered before choosing a codec: given the content of the sound, the usage context, and the target audience, is it acceptable to lose some degree of audio fidelity, and if so, how much; or is it necessary that, upon decoding the data, the result be identical to the source audio?
...on the other hand, if some degree of reduction of audio fidelity is okay, a lossy codec can be used.

d - SVG: Scalable Vector Graphics
the center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: rx and ry are the two radii of the ellipse; angle represents a rotation (in degrees) of the ellipse relative to the x-axis; large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
...the center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: rx and ry are the two radii of the ellipse; angle represents a rotation (in degrees) of the ellipse relative to the x-axis; large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.

orient - SVG: Scalable Vector Graphics
0%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg...
... <number> this value indicates an angle in degrees.

rotate - SVG: Scalable Vector Graphics
setting rotate's value to a number specifies a constant rotation, in degrees, that does not change with the animation.
...he motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications specification status comment svg animations level 2the definition of 'rotate' in that spe...

Paths - SVG: Scalable Vector Graphics
for the second arc, though, the x-axis-rotation is set to -45 degrees.
...it simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle.

XUL Migration Guide - Archive of obsolete content
but there are some notable limitations in the sdk apis and even a fairly simple ui may need some degree of redesign to work with them.

Index - Archive of obsolete content
2080 browser feature detection compatibility, cross-browser_development, dom, gecko, obsolete, web development an experimental approach to discovering degree of support for standards.

Modularization techniques - Archive of obsolete content
on the other hand, objects are allowed a certain degree of flexibility in their implementations of addref() and release().

New Security Model for Web Services - Archive of obsolete content
signed scripts a certain degree of additional trust may be lent to a script by having the author digitally sign it.

The new nsString class implementation (1999) - Archive of obsolete content
in addition to the nsstrimpl api shown above, nsstring, nsautostring and nscstring all offer additional api's (that all degrade to those found in nsstrimpl) for construction, searching and comparison.

URIs and URLs - Archive of obsolete content
noauthority these urls have no or a degenerated authority segment, like the "file" scheme.

Venkman Introduction - Archive of obsolete content
on other platforms, including mac os and unix, it is alone in offering this degree of flexibility, depth, and power in a visual debugging environment.

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 degrades the performance of subsequent dom operations in that document, and that removing the listeners later does not mitigate or reverse the effect.

Introduction to XUL - Archive of obsolete content
a single xul specification can only cross-platform to a degree.

The Joy of XUL - Archive of obsolete content
this degree of separation results in applications that are easier to maintain by programmers and readily customized by designers and language translators.

Open and Save Dialogs - Archive of obsolete content
you can also use modegetfolder and modesave for the other two modes.

splitter - Archive of obsolete content
id="tree1" flex="1" height="300" enablecolumndrag="true"> <treecols> <treecol id="name" label="name" flex="1"/> <splitter class="tree-splitter"/> <treecol id="id" label="id" flex="1"/> <splitter class="tree-splitter"/> <treecol id="date" label="date" flex="1"/> <splitter class="tree-splitter"/> </treecols> <treechildren/> </tree> splitter resizing and overflow the degree to which a splitter will resize a box, and what happens during the resize and after the limit is reached, depends on the height (or width) specified for the box as an attribute or in css, the min-height (or min-width), the intrinsic height of the box contents, and the presence or absence of a collapse attribute on the splitter.

Gecko Compatibility Handbook - Archive of obsolete content
while they support the css 1 standard to some degree, the implementations are not complete and have non-standard features added.

2006-10-27 - Archive of obsolete content
paul suggested that the best way to deal with this would be to ask people to wait, and let them know that they're degrading their user experience.

Digital Signatures - Archive of obsolete content
this quality of digital signatures provides a high degree of nonrepudiation; that is, digital signatures make it difficult for the signer to deny having signed the data.

Encryption and Decryption - Archive of obsolete content
symmetric-key encryption also provides a degree of authentication, since information encrypted with one symmetric key cannot be decrypted with any other symmetric key.

Introduction to Public-Key Cryptography - Archive of obsolete content
in addition to authentication, the digital signature in both cases ensures a degree of nonrepudiation-that is, a digital signature makes it difficult for the signer to claim later not to have sent the email or the form.

Introduction to SSL - Archive of obsolete content
an encrypted ssl connection requires all information sent between a client and a server to be encrypted by the sending software and decrypted by the receiving software, thus providing a high degree of confidentiality.

TCP/IP Security - Archive of obsolete content
while this provides a very high degree of control and flexibility over the application’s security, it may require a large resource investment to add and configure controls properly for each application.

Browser Feature Detection - Archive of obsolete content
an experimental approach to discovering degree of support for standards.

XForms Custom Controls - Archive of obsolete content
please keep in mind that just about everything we mention here may change to some degree as we continue to work on it.

Archived open Web documentation - Archive of obsolete content
browser feature detection an experimental approach to discovering degree of support for standards css obsolete css features displaying notifications (deprecated) firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.

Audio for Web games - Game development
if you stagger playback you may have some degree of success.

Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
graceful degradation is related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement.

lossy compression - MDN Web Docs Glossary: Definitions of Web-related terms
in simpler terms: lossy compression causes data from the initial file to be lost, possibly causing degradation in quality.

Modularity - MDN Web Docs Glossary: Definitions of Web-related terms
the term modularity refers to the degree to which a system's components may be separated and recombined, it is also division of a software package into logical units.

MDN Web Docs Glossary: Definitions of Web-related terms
ner 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 degradation 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 ...

Accessible multimedia - Learn web development
opera and chrome provide this to some degree, but it still isn't ideal.

Advanced styling effects - Learn web development
try contrast(200%), invert(100%) or hue-rotate(20deg) on the live example below.

Backgrounds and borders - Learn web development
.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties.

CSS values and units - Learn web development
<dimension> a <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or 10px.

CSS FAQ - Learn web development
for example: -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); note: for more information on dealing with prefixed properties, see handling common html and css problems — handling css prefixes from our cross-browser testing module.

Example 2 - Learn web development
-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top :...

Example 3 - Learn web development
-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top :...

Example 4 - Learn web development
-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top :...

Example 5 - Learn web development
-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top :...

How to build custom form controls - Learn web development
*/ 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.

Other form controls - Learn web development
in this case, different browsers behave differently from case to case, so consider such uses as progressive enhancement, and ensure they degrade gracefully.

Styling web forms - Learn web development
lid; /* resize : none; */ overflow: auto; } styling the submit button the <button> element is really convenient to style with css; you can do whatever you want, even using pseudo-elements: button { padding : 5px; font : bold .6em sans-serif; border : 2px solid #333; border-radius: 5px; background : none; cursor : pointer; transform : rotate(-1.5deg); } button:after { content : " >>>"; } button:hover, button:focus { outline : none; background : #000; color : #fff; } the final result and voila!

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 degradation).

Responsive images - Learn web development
you might think that vector images would solve these problems, and they do to a certain degree — they are small in file size and scale well, and you should use them wherever possible.

Choosing the right approach - Learn web development
e live on github (see the source code also): const spinner = document.queryselector('div'); let rotatecount = 0; let starttime = null; let raf; function draw(timestamp) { if(!starttime) { starttime = timestamp; } rotatecount = (timestamp - starttime) / 3; if(rotatecount > 359) { rotatecount %= 360; } spinner.style.transform = 'rotate(' + rotatecount + 'deg)'; raf = requestanimationframe(draw); } draw(); pitfalls you can't choose a specific framerate with requestanimationframe().

General asynchronous programming concepts - Learn web development
function expensiveoperation() { for(let i = 0; i < 1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degtorad(0), degtorad(360), false); ctx.fill() } } fillbtn.addeventlistener('click', expensiveoperation); alertbtn.addeventlistener('click', () => alert('you clicked me!') ); if you click the first button and then quickly click the second one, you'll see that the alert does not appear until the circles have finished being rendered.

Beginning our React todo list - Learn web development
.c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } save and look back at your browser, and your app should now have reasonable styling.

Styling Vue components with CSS - Learn web development
left: 0; width: 40px; height: 40px; border: 2px solid currentcolor; background: transparent; } .custom-checkbox > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .custom-checkbox > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .custom-checkbox > input[type="checkbox"]:checked + label::after { opacity: 1; } @media only screen and (min-width: 40rem) { label, input, .custom-checkbox { font-size: 19px; font-size: 1.9rem; line-height: 1.31579; } } now we need to add some css clas...

Handling common JavaScript problems - Learn web development
trouble with javascript historically, javascript was plagued with cross-browser compatibility problems — back in the 1990s, the main browser choices back then (internet explorer and netscape) had scripting implemented in different language flavours (netscape had javascript, ie had jscript and also offered vbscript as an option), and while at least javascript and jscript were compatible to some degree (both based on the ecmascript specification), things were often implemented in conflicting, incompatible ways, causing developers many nightmares.

Links and Resources
this tool will measure accurately the degree of legibility of a webpage.

Eclipse CDT
without an object directory, the indexer would find that a lot of header files are missing when processing the source files, which would significantly degrade its ability to index the source and provide good code assistance.

Eclipse CDT Manual Setup
conversely, note this very carefully: if you configure eclipse to invoke a build process that is parallelized, silenced, or that fails to identify the directory that the compiler is being run from, then it will mess up the compiler options that eclipse associates with your files, and that in turn will significantly degrade the quality of the code assistance that eclipse will provide after it next re-indexes the code.

HTMLIFrameElement.sendTouchEvent()
rotationangles an array of numbers representing the angle of each touch point in degrees.

Automated performance testing and sheriffing
current list of automated systems we are tracking (at least to some degree): talos: the main performance system, run on virtually every check-in to an integration branch build metrics: a grab bag of performance metrics generated by the build system arewefastyet: a generic javascript and web benchmarking system areweslimyet: a memory benchmarking tool ...

JSObjectOps.dropProperty
(that is, for each object, all property accesses happened in some order, and what each thread observed was consistent with that order: no stale reads, for example.) however, spidermonkey does not guarantee this high degree of serialization.

JS_NewContext
in a debug build, large chunk sizes can degrade performance dramatically.

Handling Mozilla Security Bugs
thus people have strong feelings about how security-related bugs are handled, and in particular about the degree to which information about such bugs is publicly disclosed.

Index
this is especially useful when updating user interfaces, to avoid flicker or continuous selection changes, which may result in performance degradation (for example, if updating a view for each update).

IAccessibleText
its height typically being the maximal height of all the characters in the text() or the height of the preceding character, its width being at least one pixel so that the bounding box is not degenerate.

mozIRegistry
these components will, to various degrees, need to use other components to do their thing.

nsIDOMSimpleGestureEvent
the value is specified in degrees for rotation events (where positive values indicate clockwise rotation and negative values indicate counter-clockwise rotation).

nsIDOMWindowUtils
arotationangles an array of angles in degrees for each touch's touch oval.

nsIFilePicker
modegetfolder 2 select a folder/directory.

nsIMsgIdentity
bccothers boolean bcclist astring dobcc boolean dobcclist astring draftfolder astring stationeryfolder astring showsavemsgdlg boolean directoryserver astring overrideglobalpref boolean autocompletetomydomain boolean if this is false, don't append the user's domain to an autocomplete address with no matches.

nsINavHistoryResultObserver
this is especially useful when updating user interfaces, to avoid flicker or continuous selection changes, which may result in performance degradation (for example, if updating a view for each update).

nsIObserver
observer.unregister(); "get everything" - note that "*" is an acceptable value (be careful with this, because it observes many events, and can degrade performance).

nsIZipWriter
nly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x80}; //https://developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.modegetfolder); fp.appendfilters(ci.nsifilepicker.filterall | ci.nsifilepicker.filtertext); var rv = fp.show(); if (rv == ci.nsifilepicker.returnok) { var dir = fp.file; //dir must exist, as the user selected it.

Reference Manual
old-style casts degenerate into the equivalent of reinterpret_cast if no conversion is defined.

Autoconfiguration in Thunderbird
author: ben bucksch please do not change this document without consulting the author thunderbird 3.1 and later (and 3.0 to some degree) includes mail account autoconfiguration functionality.

Plug-in Basics - Plugins
although plug-ins are platform-specific, the plug-in api is designed to provide the maximum degree of flexibility and to be functionally consistent across all platforms.

BaseAudioContext.createWaveShaper() - Web APIs
amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...

CSS numeric factory functions - Web APIs
tax css.number(number); css.percent(number); // <length> css.em(number); css.ex(number); css.ch(number); css.ic(number); css.rem(number); css.lh(number); css.rlh(number); css.vw(number); css.vh(number); css.vi(number); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.dpi(number); css.dpcm(number); css.dppx(number); // <flex> css.fr(number); examples we use the css.vmax() numeric factory function to create a cssunitvalue: let height = css.vmax(50); console.log( height ); // cssu...

CSSPrimitiveValue.getFloatValue() - Web APIs
css_deg the value is an <angle> in degrees.

CSSPrimitiveValue.primitiveType - Web APIs
css_deg the value is an <angle> in degrees.

CSSPrimitiveValue.setFloatValue() - Web APIs
css_deg the value is an <angle> in degrees.

CSSUnparsedValue.CSSUnparsedValue() - Web APIs
examples let value = new cssunparsedvalue( ['4deg'] ), values = new cssunparsedvalue( ['1em', '#445566', '-45px'] ); console.log( value ); // cssunparsedvalue {0: "4deg", length: 1} console.log( values ); // cssunparsedvalue {0: "1em", 1: "#445566", 2: "-45px", length: 3} specifications specification status comment css typed om level 1the definition of 'cssunparsedvalue' in that specification.

CanvasRenderingContext2D.filter - Web APIs
a value of 0deg leaves the input unchanged.

CanvasRenderingContext2D.lineJoin - Web APIs
degenerate segments with a length of zero (i.e., with all endpoints and control points at the exact same position) are also ignored.

CanvasRenderingContext2D.rotate() - Web APIs
you can use degree * math.pi / 180 to calculate a radian from a degree.

Compositing example - Web APIs
ctx.fillstyle = "rgba(0,255,0,1)"; ctx.arc(160, 100, 100, math.pi*2, 0, false); ctx.fill(); ctx.restore(); ctx.beginpath(); ctx.fillstyle = "#f00"; ctx.fillrect(0,0,30,30) 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.createlineargradient(oleft + halfwidth, otop, oleft + halfwidth, otop + halfwidth); var color = color.hsv_rgb({ h: (n + 300) % 360, s: 100, v: 100 }); gradient.addcolorstop(0, "rgba(0,0,0,0)"); gradient.addcolorstop(0.7, "rgba...

Crypto.getRandomValues() - Web APIs
there is no minimum degree of entropy mandated by the web cryptography specification.

DOMMatrix - Web APIs
dommatrix.rotateself() modifies the matrix by rotating itself around each axis by the specified number of degrees.

DOMMatrixReadOnly - Web APIs
dommatrixreadonly.rotate() returns a new dommatrix created by rotating the source matrix around each of its axes by the specified number of degrees.

DeviceMotionEvent.DeviceMotionEvent() - Web APIs
rotation rate is express in degrees per seconds.

DeviceMotionEvent.rotationRate - Web APIs
returns the rate at which the device is rotating around each of its axes in degrees per second.

DeviceMotionEvent - Web APIs
rotation rate is expressed in degrees per seconds.

DeviceOrientationEvent.alpha - Web APIs
returns the rotation of the device around the z axis; that is, the number of degrees by which the device is being twisted around the center of the screen.

DeviceOrientationEvent.beta - Web APIs
returns the rotation of the device around the x axis; that is, the number of degrees, ranged between -180 and 180, by which the device is tipped forward or backward.

DeviceOrientationEvent.gamma - Web APIs
returns the rotation of the device around the y axis; that is, the number of degrees, ranged between -90 and 90, by which the device is tilted left or right.

Introduction to the DOM - Web APIs
different browsers have different implementations of the dom, and these implementations exhibit varying degrees of conformance to the actual dom standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible via javascript.

EffectTiming.direction - Web APIs
examples in the forgotten key example, alice waves her arm up and down by passing her an alternate value for her direction property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'direction' in that specification.

EffectTiming.fill - Web APIs
var boxrotationkeyframes = [ { transform: "rotate(-90deg)" }, { transform: "rotate(90deg)" } ]; the boxrotationkeyframes object is an array of keyframes, each describing the state of the affected element at a point in the animation process.

EffectTiming.iterations - Web APIs
examples in the forgotten key example, alice waves her arm up and down the entire time the page is open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'iterations' in that specification.

GestureEvent - Web APIs
gestureevent.rotation read only change in rotation (in degrees) since the event's beginning.

GlobalEventHandlers.ontransitioncancel - Web APIs
#0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.

GlobalEventHandlers.ontransitionend - Web APIs
yle: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.

HTMLElement: transitioncancel event - Web APIs
live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.

HTMLElement: transitionend event - Web APIs
in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.

HTMLElement: transitionrun event - Web APIs
in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.

HTMLElement: transitionstart event - Web APIs
in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.

In depth: Microtasks and the JavaScript runtime environment - Web APIs
microtasks are another solution to this problem, providing a finer degree of access by making it possible to schedule code to run before the next iteration of the event loop begins, instead of having to wait until the next one.

IntersectionObserver - Web APIs
the configuration cannot be changed once the intersectionobserver is created, so a given observer object is only useful for watching for specific changes in degree of visibility; however, you can watch multiple target elements with the same observer.

KeyframeEffect.setKeyframes() - Web APIs
for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied.

KeyframeEffectOptions - Web APIs
for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg).

MouseEvent.mozInputSource - Web APIs
this lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).

MouseEvent - Web APIs
this lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).

MutationEvent - Web APIs
performance adding dom mutation listeners to a document profoundly degrades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).

performance.now() - Web APIs
this inherently introduces a degree of inaccuracy by limiting the resolution or precision of the timer.

Pointer Lock API - Web APIs
y position: " + y; if (!animation) { animation = requestanimationframe(function() { animation = null; canvasdraw(); }); } } the canvasdraw() function draws the ball in the current x and y positions: function canvasdraw() { ctx.fillstyle = "black"; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = "#f00"; ctx.beginpath(); ctx.arc(x, y, radius, 0, degtorad(360), true); ctx.fill(); } iframe limitations pointer lock can only lock one iframe at a time.

RTCRtpSendParameters - Web APIs
degradationpreference specifies the preferred way the webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtcdegradationpreference enumerated string type, and the default is balanced.

RTCRtpSender.setParameters() - Web APIs
the available options are: degradationpreference specifies the preferred way the webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtcdegradationpreference enumerated string type, and the default is balanced.

SVGSVGElement - Web APIs
the object is initialized to a value of 0 degrees (unitless).

Sensor APIs - Web APIs
handling the errors gracefully so that the user experience is enhanced rather than degraded.

Using Service Workers - Web APIs
service worker syntax is more complex than that of appcache, but the trade off is that you can use javascript to control your appcache-implied behaviors with a fine degree of granularity, allowing you to handle this problem and many more.

SpeechRecognition: nomatch event - Web APIs
this may involve some degree of recognition, which doesn't meet or exceed the confidence threshold.

SpeechRecognition.onnomatch - Web APIs
the onnomatch property of the speechrecognition interface represents an event handler that will run when the speech recognition service returns a final result with no significant recognition (when the nomatch event fires.) this may involve some degree of recognition, which doesn't meet or exceed the confidence threshold.

SpeechRecognition - Web APIs
this may involve some degree of recognition, which doesn't meet or exceed the confidence threshold.

Touch() - Web APIs
"rotationangle", optional and defaulting to 0, of type float, that is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center; 0 if no value is known.

Touch - Web APIs
touch.rotationangle read only returns the angle (in degrees) that the ellipse described by radiusx and radiusy must be rotated, clockwise, to most accurately cover the area of contact between the user and the surface.

TouchEvent - Web APIs
touchevent.rotation read only change in rotation (in degrees) since the event's beginning.

Using Touch Events - Web APIs
the touch point's rotation angle - the number of degrees of rotation to apply to the described ellipse to align with the contact area - is also be standardized as is the amount of pressure applied to a touch point.

WaveShaperNode.curve - Web APIs
amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...

WaveShaperNode.oversample - Web APIs
amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...

WaveShaperNode - Web APIs
amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...

Adding 2D content to a WebGL context - Web APIs
// our field of view is 45 degrees, with a width/height // ratio that matches the display size of the canvas // and we only want to see objects between 0.1 units // and 100 units away from the camera.

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
the following function returns a projection perspective matrix that integrates the specified field of view angle as well as the given near and far clipping plane distances: function createperspectivematrix(viewport, fovdegrees, nearclip, farclip) { const fovradians = fov * (math.pi / 180.0); const aspectratio = viewport.width / viewport.height; const transform = mat4.create(); mat4.perspective(transform, fovradians, aspectratio, nearclip, farclip); return transform; } after converting the fov angle, fovdegrees, from degrees to radians and computing the aspect ratio of the xrviewport s...

Lighting a WebXR setting - Web APIs
since your scene is intended to represent a setting a person or their avatar can exist within, you should try to achieve some degree of consistency and realism in terms of the positioning and presentation of your light sources.

Rendering and the WebXR frame animation callback - Web APIs
for instance, if an object is rotating, you might apply the rotation like this: const xdeltarotation = (xrotationdegreespersecond * radians_per_degree) * deltatime; const ydeltarotation = (yrotationdegreespersecond * radians_per_degree) * deltatime; const zdeltarotation = (zrotationdegreespersecond * radians_per_degree) * deltatime; this computes the amount by which the object has rotated around each of the three axes since the last time the frame was drawn.

Starting up and shutting down a WebXR session - Web APIs
be sure to read the readme carefully; the polyfill comes in several versions depending on what degree of compatibility with newer javascript features your target browsers include.

WebXR Device API - Web APIs
a typical xr device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.

Keyframe Formats - Web APIs
for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied.

Window: deviceorientation event - Web APIs
bubbles no cancelable no interface deviceorientationevent event handler property window.ondeviceorientation examples if (window.deviceorientationevent) { window.addeventlistener("deviceorientation", function(event) { // alpha: rotation around z-axis var rotatedegrees = event.alpha; // gamma: left to right var lefttoright = event.gamma; // beta: front back motion var fronttoback = event.beta; handleorientationevent(fronttoback, lefttoright, rotatedegrees); }, true); } var handleorientationevent = function(fronttoback, lefttoright, rotatedegrees) { // do something amazing }; specifications specif...

Window.orientation - Web APIs
summary returns the orientation in degrees (in 90-degree increments) of the viewport relative to the device's natural orientation.

Window.screenLeft - Web APIs
elem() { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degtorad(0), degtorad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimationframe(positionelem); } window.requestanimationframe(positionelem); also in the code we include a snippet that detects whether screenleft is supported, and if not, polyfills in screenleft/screentop using window.scree...

Window.screenTop - Web APIs
elem() { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degtorad(0), degtorad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimationframe(positionelem); } window.requestanimationframe(positionelem); also in the code we include a snippet that detects whether screenleft is supported, and if not, polyfills in screenleft/screentop using window.scree...

Window.screenX - Web APIs
elem() { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degtorad(0), degtorad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimationframe(positionelem); } window.requestanimationframe(positionelem); these work in exactly the same way as screenx/screeny.

Window.screenY - Web APIs
elem() { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degtorad(0), degtorad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimationframe(positionelem); } window.requestanimationframe(positionelem); these work in exactly the same way as screenx/screeny.

Window - Web APIs
window.orientation read only returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.

XRHandedness - Web APIs
updateinputsources(session, frame, refspace) { for (let source of session.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, refspace); if (grippose) { myrenderhandobject(grippose, inputsource.handedness); } } } } this function, which would be called every animation frame (or possibly just periodically, depending on the degree of smoothness required and any performance constraints), scans the list of input sources looking for any which have a gripspace which isn't null.

XRInputSource.handedness - Web APIs
updateinputsources(session, frame, refspace) { for (let source of session.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, refspace); if (grippose) { myrenderhandobject(grippose, inputsource.handedness); } } } } this function, which would be called every animation frame (or possibly just periodically, depending on the degree of smoothness required and any performance constraints), scans the list of input sources looking for any which have a gripspace which isn't null.

XRPermissionDescriptor.optionalFeatures - Web APIs
for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.

XRPermissionDescriptor.requiredFeatures - Web APIs
for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.

XRPermissionStatus.granted - Web APIs
for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.

XRPose - Web APIs
xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer).

XRReferenceSpace - Web APIs
for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.

XRReferenceSpaceType - Web APIs
for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.

XRSession.environmentBlendMode - Web APIs
the xrsession interface's read-only environmentblendmode property identifies if—and to what degree—the computer-generated imagery is overlaid atop the real world.

XRSession.requestReferenceSpace() - Web APIs
for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment.

ARIA - Accessibility
support like any other web technology, there are varying degrees of support for aria.

Accessibility FAQ - Accessibility
assistive technology compatibility - documents assistive technologies for windows, linux, unix, mac os x and the degree of compatibility with firefox what can i do to make sure my mozilla extensions are accessible?

::before (:before) - CSS: Cascading Style Sheets
le-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code example running live.

font-stretch - CSS: Cascading Style Sheets
however some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

font-weight - CSS: Cascading Style Sheets
however some fonts, called variable fonts, can support a range of weights with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

@font-face - CSS: Cascading Style Sheets
since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg; font-weight a font-weight value.

@media - CSS: Cascading Style Sheets
security because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.

Detecting CSS animation support - CSS: Cascading Style Sheets
if( animation === false ) { // animate in javascript fallback } else { elem.style[ animationstring ] = 'rotate 1s linear infinite'; var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ '}'; if( document.stylesheets && document.stylesheets.length ) { document.stylesheets[0].insertrule( keyframes, 0 ); } else { var s = document.createelement( 'style' ); s.innerhtml = keyframes; document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); } } this...

Color picker tool - CSS: Cascading Style Sheets
entlistener('click', this.pickcolor.bind(this)); samples.push(this); }; colorsample.prototype.updatebgcolor = function updatebgcolor() { this.node.style.backgroundcolor = this.color.getcolor(); }; colorsample.prototype.updatecolor = function updatecolor(color) { this.color.copy(color); this.updatebgcolor(); }; colorsample.prototype.updatehue = function updatehue(color, degree, steps) { this.color.copy(color); var hue = (steps * degree + this.color.hue) % 360; if (hue < 0) hue += 360; this.color.sethue(hue); this.updatebgcolor(); }; colorsample.prototype.updatesaturation = function updatesaturation(color, value, steps) { var saturation = color.saturation + value * steps; if (saturation <= 0) { this.node.setattribute('data-hidden', 'true...

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 degradation the column properties will just be ignored by non-columns-supporting browsers.

Layout and the containing block - CSS: Cascading Style Sheets
<body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { transform: rotate(0deg); width: 400px; height: 160px; background: lightgray; } p { position: absolute; left: 80px; top: 30px; width: 50%; /* == 200px */ height: 25%; /* == 40px */ margin: 5%; /* == 20px */ padding: 5%; /* == 20px */ background: cyan; } ...

CSS reference - CSS: Cascading Style Sheets
cter-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()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionf...

backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied to the backdrop.

backface-visibility - CSS: Cascading Style Sheets
display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); ...

background-clip - CSS: Cascading Style Sheets
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 comment...

border-image - CSS: Cascading Style Sheets
/* 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 'border-image' in that specification.

element() - CSS: Cascading Style Sheets
idth: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.

<filter-function> - CSS: Cascading Style Sheets
ttribute('data-unit', ''); } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { slider.value = 0; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'hue-rotate') { slider.value = 0; slider.min = 0; slider.max = 360; slider.step = 1; slider.setattribute('data-unit', 'deg'); } } function setdiv(filter) { if(filter === 'drop-shadow') { divelem.style.filter = `${selectelem.value}(${math.round(slider.value)}${slider.getattribute('data-unit')} ${math.round(slider.value)}${slider.getattribute('data-unit')} ${math.round(math.abs(slider.value/2))}${slider.getattribute('data-unit')})`; } else { divelem.style.filter = `${selectelem.value}(${slider.value}${sl...

font-weight - CSS: Cascading Style Sheets
however some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

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 degrade the quality of and to what degree.

justify-content - CSS: Cascading Style Sheets
on> = 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 value="right"...

mix-blend-mode - CSS: Cascading Style Sheets
.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(210deg); fill: url(#blue); } .isolate .group { isolation: isolate; } .normal .item { mix-blend-mode: normal; } .multiply .item { mix-blend-mode: multiply; } .screen .item { mix-blend-mode: screen; } .overlay .item { ...

opacity - CSS: Cascading Style Sheets
opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

perspective-origin - CSS: Cascading Style Sheets
{ display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /...

perspective - CSS: Cascading Style Sheets
display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); ...

shape-image-threshold - CSS: Cascading Style Sheets
</p> css #gradient-shape { width: 150px; height: 150px; float: left; background-image: linear-gradient(30deg, black, transparent 80%, transparent); shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2; } the shape is established here using background-image with a linear gradient rather than an image file.

shape-outside - CSS: Cascading Style Sheets
/* 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.

transform-box - CSS: Cascading Style Sheets
50%; /*+++++++++++++++++++++++++++*/ /* if i remove this rule the pen won't work properly on chrome for mac, ff, safari will still work properly on chrome for pc & opera*/ transform-box: fill-box; /*alternatively i can use transform-origin:15px 15px;*/ /*+++++++++++++++++++++++++++*/ animation: rotatebox 3s linear infinite; } @keyframes rotatebox { to { transform: rotate(360deg); } full credit for this example goes to pogany; see this codepen for a live version.

perspective() - CSS: Cascading Style Sheets
ox-closer"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front { backgr...

rotateX() - CSS: Cascading Style Sheets
1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatex(45deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatex()' in that specification.

rotateY() - CSS: Cascading Style Sheets
cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatey(60deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatey()' in that specification.

rotateZ() - CSS: Cascading Style Sheets
cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatez(45deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatez()' in that specification.

scaleY() - CSS: Cascading Style Sheets
transform: rotatex(180deg); === transform: scaley(-1); syntax scaley(s) values s is a <number> representing the scaling factor to apply on the ordinate of each point of the element.

skew() - CSS: Cascading Style Sheets
homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; } result specifications specification status comment css transforms level 1t...

skewX() - CSS: Cascading Style Sheets
s coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewx(10deg); /* equal to skew(10deg) */ background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewx()' in that specification.

skewY() - CSS: Cascading Style Sheets
s coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewy(40deg); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewy()' in that specification.

Mouse gesture events - Developer guides
delta the amount by which the gesture moved; for rotation, this value is in degrees.

Mutation events - Developer guides
performance adding dom mutation listeners to a document profoundly degrades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).

Orientation and motion data explained - Developer guides
about rotation rotation is described about any given axis in terms of the number of degrees of difference between the device's coordinate frame and the earth coordinate frame, and is measured in degrees.

Rich-Text Editing in Mozilla - Developer guides
+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7gox0sakkgqgdmgkbi0njgmeimpgdk5+wacewed0ywblhguz4hw5oduekrblt7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="...

Making content editable - Developer guides
+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7gox0sakkgqgdmgkbi0njgmeimpgdk5+wacewed0ywblhguz4hw5oduekrblt7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="...

Separate sites for mobile and desktop - Developer guides
when it is right to choose this option firstly, if your target audience includes users on older or low-end feature phones, it is worth noting that you may need to employ this strategy to some degree no matter what.

<div>: The Content Division element - HTML: Hypertext Markup Language
html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); } result specifications specification status comment html living standardthe definition of '<div>' in that specification.

<em>: The Emphasis element - HTML: Hypertext Markup Language
the <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

<mark>: The Mark Text element - HTML: Hypertext Markup Language
don't confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of relevance, while <strong> indicates spans of text of importance.

<meter>: The HTML Meter element - HTML: Hypertext Markup Language
examples simple example html <p>heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p> result on google chrome, the resulting meter looks like this: high and low range example note that in this example the min attribute is omitted.

<strong>: The Strong Importance element - HTML: Hypertext Markup Language
this is very dangerous.") both <strong> and <em> can be nested to increase the relative degree of importance or stress emphasis, respectively.

HTML elements reference - HTML: Hypertext Markup Language
the <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

HTML documentation index - HTML: Hypertext Markup Language
the <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

Browser detection using the user agent - HTTP
graceful degradation this is a top-down approach in which you build the best possible site using all the features you want, then tweak it to make it work on older browsers.

Connection management in HTTP/1.x - HTTP
short-lived connections do not make use of this efficiency feature of tcp, and performance degrades from optimum by persisting to transmit over a new, cold connection.

Content negotiation - HTTP
it is comma-separated lists of mime types, each combined with a quality factor, a parameter indicating the relative degree of preference between the different mime types.

Loops and iteration - JavaScript
this expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity.

Math.imul() - JavaScript
if you use normal javascript floating point numbers in imul, you will experience a degrade in performance.

<mmultiscripts> - MathML
the degree of a tensor depends on the dimensionality of a representative array.

MathML documentation index - MathML
the degree of a tensor depends on the dimensionality of a representative array.

Web audio codec guide - Web media technologies
upon decoding, the output is, to varying degrees, still understandable.

Handling media support issues in web content - Web media technologies
one of the realities of working with audio and video presentation and manipulation on the web is that there are a number of media formats available, of varying degrees of popularity and with a variety of capabilities.

Codecs used by WebRTC - Web media technologies
opus's scalability and flexibility are useful when dealing with audio that may have varying degrees of complexity.

Progressive web app structure - Progressive web apps (PWAs)
they both have their advantages and disadvantages, and you can mix the two approaches to some degree.

Graphic design for responsive sites - Progressive web apps (PWAs)
these may not be supported in older browsers like ie6-8, but they generally degrade gracefully, are fairly easy to write, and become much more flexible and powerful when combined with javascript and other technologies.

The building blocks of responsive design - Progressive web apps (PWAs)
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 degrade.

Structural overview of progressive web apps - Progressive web apps (PWAs)
they both have their advantages and disadvantages, and you can mix the two approaches to some degree.

azimuth - SVG: Scalable Vector Graphics
the azimuth attribute specifies the direction angle for the light source on the xy plane (clockwise), in degrees from the x axis.

direction - SVG: Scalable Vector Graphics
it applies only to glyphs oriented perpendicular to the inline-base direction, which includes the usual case of horizontally-oriented latin or arabic text and the case of narrow-cell latin or arabic characters rotated 90 degrees clockwise relative to a top-to-bottom inline-base direction.

elevation - SVG: Scalable Vector Graphics
the elevation attribute specifies the direction angle for the light source from the xy plane towards the z-axis, in degrees.

limitingConeAngle - SVG: Scalable Vector Graphics
the limitingconeangle attribute represents the angle in degrees between the spot light axis (i.e.

opacity - SVG: Scalable Vector Graphics
the opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.

stroke-miterlimit - SVG: Scalable Vector Graphics
the ratio of miter length (distance between the outer tip and the inner corner of the miter) to stroke-width is directly related to the angle (theta) between the segments in user space by the formula: stroke-miterlimit = miterlength stroke-width = 1 sin ( θ 2 ) for example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.

values - SVG: Scalable Vector Graphics
for type="huerotate", values is a single one real number value (degrees).

<ellipse> - SVG: Scalable Vector Graphics
note: ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute.

<feConvolveMatrix> - SVG: Scalable Vector Graphics
note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.

SVG animation with SMIL - SVG: Scalable Vector Graphics
rotation attributes look like this: rotation(theta, x, y), where theta is the angle in degrees, and x and y are absolute positions.

Fills and Strokes - SVG: Scalable Vector Graphics
there are three possible values for stroke-linecap: butt closes the line off with a straight edge that's normal (at 90 degrees) to the direction of the stroke and crosses its end.

Texts - SVG: Scalable Vector Graphics
rotate rotate all characters by this degree.

Axes - XPath
the following is an extremely brief description of the thirteen available axes and the degree of support available in gecko.

Functions - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the following is an annotated list of core xpath functions and xslt-specific additions to xpath, including a description, syntax, a list of arguments, result-type, source in the appropriate w3c recommendation, and degree of present gecko support.

XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
the expression to be evaluated is placed inside curly brackets: <img src="{$image-dir}/mygraphic.jpg"/> this would result in the following: <img src="/images/mygraphic.jpg"/> the element annotations that follow include a description, a syntax listing, a list of required and optional attributes, a description of type and position, its source in the w3c recommendation and an explanation of the degree of present gecko support.