Search completed in 0.97 seconds.
Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms
polyfills can be used to build in missing features with javascript, but acceptable alternatives to features like styling and layout should be provided where possible, for example by using the css cascade, or html fallback behaviour. some good examples can be found in handling common html and css problems. it is a useful technique that allows web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents. ...
...s cascade, or html fallback behaviour. some good examples can be found in handling common html and css problems. it is a useful technique that allows web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents. progressive enhancement is related but different — often seen as going in the opposite direction to graceful
degredation. in reality both approaches are valid and can often complement one another. ...
Drawing graphics - Learn web development
th and fillstyle/strokestyle with paths as well as rectangles. a typical, simple path-drawing operation would look something like so: ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ctx.moveto(50, 50); // draw your path ctx.fill(); drawing lines let's draw an equilateral triangle on the canvas. first of all, add the following helper function to the bottom of your code. ...
....beginpath(); ctx.moveto(50, 50); // draw your path ctx.fill(); drawing lines let's draw an equilateral triangle on the canvas. first of all, add the following helper function to the bottom of your code. this converts
degree values to radians, which is useful because whenever you need to provide an angle value in javascript, it will nearly always be in radians, but humans usually think in
degrees. function
degtorad(
degrees) { return
degrees * math.pi / 180; }; next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything. that's where we'll start drawing our triangle. ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ctx.moveto(50, 50)...
... following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything. that's where we'll start drawing our triangle. ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ctx.moveto(50, 50); now add the following lines at the bottom of your script: ctx.lineto(150, 50); let triheight = 50 * math.tan(
degtorad(60)); ctx.lineto(100, 50+triheight); ctx.lineto(50, 50); ctx.fill(); let's run through this in order: first we draw a line across to (150, 50) — our path now goes 100 pixels to the right along the x axis. second, we work out the height of our equalateral triangle, using a bit of simple trigonometry. basically, we are drawing the triangle pointing downwards. the angles in an equala...
...And 19 more matches
Unconventional controls - Game development
ing is installed and the controller is connected to your computer we can proceed with implementing support in our little demo. first, we add a <script> tag with the url pointing at this file, and add <div id="output"></div> just before the closing </body> tag for outputting diagnostic information. ...
...ceed with implementing support in our little demo. first, we add a <script> tag with the url pointing at this file, and add <div id="output"></div> just before the closing </body> tag for outputting diagnostic information. ...
...r 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. ...
...And 12 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
on many browsers that don't yet have webxr implementations in place, and we smooth out any transient deviations from the specification that occur during these still somewhat experimental days of the webxr specification. options this example has a number of options you can configure by adjusting the values of constants before you load it in the browser. ...
...webxr implementations in place, and we smooth out any transient deviations from the specification that occur during these still somewhat experimental days of the webxr specification. options this example has a number of options you can configure by adjusting the values of constants before you load it in the browser. the code looks like this: const xrotation
degreespersecond = 25; const yrotation
degreespersecond = 15; const zrotation
degreespersecond = 35; const enablerotation = true; const allowmouserotation = true; const allowkeyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; xrotation
degreespersecond the number of
degrees of rotation to apply around the x axis per second. yrotation...
... enablerotation a boolean indicating whether or not to enable the rotation of the cube at all. allowmouserotation if true, you can use the mouse to pitch and yaw the view angle. ...
...And 11 more matches
repeating-conic-gradient() - CSS: Cascading Style Sheets
t.html")}} the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3
degrees so there is no up/down straight line */ background: repeating-conic-gradient( from 3
deg at 25% 25%, hsl(200, 100%, 50%) 0
deg 15
deg, hsl(200, 100%, 60%) 10
deg 30
deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction. <position> using the same length, order and keyterm values as the backgrou...
...endering of color stops in css gradients follows the same rules as color stops in svg gradients. description example repeating conic gradients include starbursts. the result of the repeating-conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>. if neither the first nor the last color stops include include a a color stop angle greater than 0
deg or less than 360
degrees respectively, the conic-gradient will not repeat. as with any gradient, a repeating-conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to, or the size the <image> is set to if it's set to something other than the element's size. because <gradient>s ...
...r the size the <image> is set to if it's set to something other than the element's size. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-conic-gradient() won't work on background-color and other properties that use the <color> data type. to create a conic gradient that doe not repeat, make the gradient a full 360
degree rotation, or use the conic-gradient() function instead. understanding repeating conic gradients the repeating-conic-gradient syntax is similar to the conic-gradient() and repeating-radial-gradient() syntax. like the non-repeating conic-gradient, the color-stops are placed around a gradient arc. like the repeating radial gradient, the size of the repeating section is the first color stop su...
...And 11 more matches
Index - Web APIs
, with a 95% confidence level, of the altitude expressed in meters. this value is null if the implementation doesn't support measuring altitude. 671 coordinates.heading api, coordinates, geolocation api, property, secure context, heading the coordinates.heading read-only property is a double representing the direction in which the device is traveling. 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). if coordinates.speed is 0, heading is nan. if the device is not able to provide heading information, this value is null. 672 coordinates.latitude api, coordinates, geolocati...
...ans that east is 90
degrees and west is 270
degrees). if coordinates.speed is 0, heading is nan. if the device is not able to provide heading information, this value is null. 672 coordinates.latitude api, coordinates, geolocation api, property, secure context, latitude the coordinates.latitude read-only property is a double representing the latitude of the position in decimal
degrees. 673 coordinates.longitude api, coordinates, gps, geolocation, geolocation api, global positioning system, property, read-only, reference, secure context, longitude the coordinates 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. together with a domt...
...terval, in milliseconds, at which data is obtained from the underlaying hardware. you can use this to determine the granularity of motion events. 840 devicemotionevent.rotationrate api, dom, dom reference, device orientation, experimental, mobile, motion, needsexample, orientation, property, reference returns the rate at which the device is rotating around each of its axes in
degrees per second. 841 deviceorientationevent api, device orientation api, experimental, interface, reference the deviceorientationevent provides web developers with information from the physical orientation of the device running the web page. 842 deviceorientationevent.deviceorientationevent() api, constructor, device orientation api, deviceorientationevent, expe...
...And 10 more matches
Web audio spatialization basics - Web APIs
ower — the default and the general way panning is figured out hrtf — this stands for 'head-related transfer function' and looks to take into account the human head when figuring out where the sound is. pretty clever stuff. let's use the hrtf model! const pannermodel = 'hrtf'; the coneinnerangle and coneouterangle properties specify where the volume emanates from. by default, both are 360
degrees. our boombox speakers will have smaller cones, which we can define. the inner cone is where gain (volume) is always emulated at a maximum and the outer cone is where the gain starts to drop away. the gain is reduced by the value of the coneoutergain value. let's create constants that store the values we'll use for these parameters later on: const innercone = 60; const outercone = 90; const o...
...moving the boombox now we're going to move our boombox around our 'room'. we've got some controls set up to do this. we can move it left and right, up and down, and back and forth; we can also rotate it. the sound direction is coming from the boombox speaker at the front, so when we rotate it, we can alter the sound's direction — i.e. make it project to the back when the boombox is rotated 180
degrees and facing away from us. we need to set up a few things for the interface. first, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up css transforms to actually do the movement. finally, we'll set some bounds so our boombox doesn't move too far in any direction: const movecontrols = document.queryselector('#move-control...
.... let's set up a rotation rate, which we'll convert into a radian range value for use in math.sin and math.cos later, when we want to figure out the new coordinates when we're rotating our boombox: // set up rotation constants const rotationrate = 60; // bigger number equals slower sound rotation const q = math.pi/rotationrate; //rotation increment in radians we can also use this to work out
degrees rotated, which will help with the css transforms we will have to create (note we need both an x and y-axis for the css transforms): // get
degrees for css const
degreesx = (q * 180)/math.pi; const
degreesy = (q * 180)/math.pi; let's take a look at our left rotation as an example. we need to change the x orientation and the z orientation of the panner coordinates, to move around the y-axis ...
...And 9 more matches
Using CSS gradients - CSS: Cascading Style Sheets
ass="diagonal-gradient"></div> div { width: 200px; height: 100px; } .diagonal-gradient { background: linear-gradient(to bottom right, blue, pink); } using angles if you want more control over its direction, you can give the gradient a specific angle. <div class="angled-gradient"></div> div { width: 120px; height: 120px; } .angled-gradient { background: linear-gradient(70
deg, blue, pink); } when using an angle, 0
deg creates a vertical gradient running bottom to top, 90
deg creates a horizontal gradient running left to right, and so on in a clockwise direction. negative angles run in the counterclockwise direction. declaring colors & creating effects all css gradient types are a range of position-dependent colors. the colors produced by css gradients can vary ...
...sparent, mistyrose), url("https://mdn.mozillademos.org/files/15525/critters.png"); } stacked gradients you can even stack gradients with other gradients. as long as the top gradients aren't entirely opaque, the gradients below will still be visible. <div class="stacked-linear"></div> div { width: 200px; height: 200px; } .stacked-linear { background: linear-gradient(217
deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127
deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336
deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); } using radial gradients radial gradients are similar to linear gradients, except that they radiate out from a central point. you can dictate where that central point is. you can also make them circular o...
... gradients include pie charts and color wheels, but they can also be used for creating checker boards and other intersting effects. the conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient, and the color-stops are percentages or
degrees: absolute lengths are not valid. in a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. with conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. similar to radial gradients, you can position the center of the gradient. similar to linear gradients, you can change the gradie...
...And 9 more matches
Hacking Tips
ou can force it to, by using the source command with the js-gdb.py file. setting a breakpoint in the generated code (from gdb, x86 / x86-64, arm) to set a breakpoint the generated code of a specific jsscript compiled with ionmonkey. set a breakpoint on the instruction you are interested in. ...
...fic jsscript compiled with ionmonkey. set a breakpoint on the instruction you are interested in. if you have no precise idea which function you are looking at, you can set a breakpoint on the js::ion::co
degenerator::visitstart function. optionally, a condition on the ins->id() of the lir instruction can be added to select precisely the instruction you are looking for. once the breakpoint is on co
degenerator function of the lir instruction, add a command to generate a static breakpoint in the generated code. ...
...at, you can set a breakpoint on the js::ion::co
degenerator::visitstart function. optionally, a condition on the ins->id() of the lir instruction can be added to select precisely the instruction you are looking for. once the breakpoint is on co
degenerator function of the lir instruction, add a command to generate a static breakpoint in the generated code. $ gdb --args js […] (gdb) b js::ion::co
degenerator::visitstart (gdb) command >call masm.breakpoint() >continue >end (gdb) r js> function f(a, b) { return a + b; } js> for (var i = 0; i < 100000; i++) f(i, i + 1); breakpoint 1, js::ion::co
degenerator::visitstart (this=0x101ed20, lir=0x10234e0) at /home/nicolas/mozilla/ionmonkey/js/src/ion/co
degenerator.cpp:609 609 } program received signal sigtrap, trace/breakpoint trap. 0x00007...
...And 8 more matches
conic-gradient() - CSS: Cascading Style Sheets
heels. the result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...e <gradient> data type, which is a special kind of <image>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...hub.com/mdn/interactive-examples and send us a pull request. ...
...And 8 more matches
create fancy boxes - Learn web development
ght: 200px; box-sizing: border-box; /* at the bottom of our background stack, let's have a misty grey solid color */ background-color: #e4e4d9; /* we stack linear gradients on top of each other to create our color strip effect. ...
...tack, let's have a misty grey solid color */ background-color: #e4e4d9; /* we stack linear gradients on top of each other to create our color strip effect. ...
...; /* we stack linear gradients on top of each other to create our color strip effect. ...
...And 5 more matches
Fundamentals of WebXR - Web APIs
film cameras to modern digital video cameras, including the cameras in computers and mobile devices. what is field of view? the field of view is, at its essence, the extent of the environment you are able to see at any one time. the width of the field of view is measured as the angle defining the arc from the far left edge of your field of view to the far right edge, and is specified in either
degrees or radians. a human eye is typically able to take in a fov of around 135°. assuming a person has two healthy eyes, their total field of view is about 200° to 220° wide. why is the fov wider with two eyes, but not double the single-eye fov? it's because the two eyes fovs overlap a lot. that overlap is what gives us depth perception; within the overlap area — which is around 115° across ...
... generally have a field of view of around 150°. because the fov is a matter of the size of the lenses and how close they are to the user's eyes, there are limitations on how wide the fov can get without installing lenses into the user's eyeballs. a wide fov can substantially improve the user's sense of immersion. however, increasing the fov can also increase the weight and cost of the headset.
degrees of freedom the term
degrees of freedom is an indication of how much freedom of movement the user has within the virtual world. this is directly related to how many types of movement the webxr hardware configuration is capable of recognizing and reproducing into the virtual scene. diagram showing the movements possible with 3
degree of freedom hardware: yaw, roll, and pitch. freedom o...
...eedom is an indication of how much freedom of movement the user has within the virtual world. this is directly related to how many types of movement the webxr hardware configuration is capable of recognizing and reproducing into the virtual scene. diagram showing the movements possible with 3
degree of freedom hardware: yaw, roll, and pitch. freedom of rotational movement the first three
degrees of freedom are rotational. ...
...And 4 more matches
linear-gradient() - CSS: Cascading Style Sheets
between two or more colors along a straight line. its result is an object of the <gradient> data type, which is a special kind of <image>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...an object of the <gradient> data type, which is a special kind of <image>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... gradient tilted 45
degrees, starting blue and finishing red */ linear-gradient(45
deg, 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(0
deg, blue, green 40%, red); /* color hint: a gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-gradient(.25turn, red, 10%, blue); /* multi-position color stop: a gradient tilted 45
degrees, with a red bottom-left half and a blue top-righ...
...And 4 more matches
transform-origin - CSS: Cascading Style Sheets
s the point around which a transformation is applied. for example, the transformation origin of the rotate() function is the center of rotation. this property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value. this means, this definition transform-origin: -100% 50%; transform: rotate(45
deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45
deg) translate(100%, -50%); by default, the origin of a transform is center. syntax /* one-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px; /* x-offset-ke...
... top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1"> </div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } transform: rotate(30
deg); <div class="box2"> </div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30
deg); -webkit-transform: rotate(30
deg); } transform: rotate(30
deg); transform-origin: 0 0; <div class="box3"> </div> .box3 { margin: 0.5em; width: 3em; height: ...
...ackground-color: palegreen; transform: rotate(30
deg); -webkit-transform: rotate(30
deg); } transform: rotate(30
deg); transform-origin: 0 0; <div class="box3"> </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(30
deg); -webkit-transform: rotate(30
deg); } transform: rotate(30
deg); transform-origin: 100% 100%; <div class="box4"> </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(30
deg); -webkit-transform: rotate(3...
...And 4 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
sible (from black to white). image courtesy of user sharkd on wikipedia, distributed under the cc by-sa 3.0 license. the value of the hue (h) component of an hsl color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. the value can be specified in any <angle> unit supported by css, including
degrees (
deg), radians (rad), gradians (grad), or turns (turn). but this doesn't control how vivid or dull, or how bright or dark the color is. the saturation (s) component of the color specifies what percentage of the final color is comprised of the specified hue. the rest is defined by the grey level provided by the luminance (l) component. think of it like creating the perfect paint color: yo...
...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(90
deg, 100%, 50%)</code></td> <td style="background-color: hsl(90
deg, 100%, 50%);"> </td> </tr> <tr> <td><code>hsl(90, 100%, 50%)</code></td> <td style="background-color: hsl(90, 100%, 50%);"> </td> </tr> <tr> <td><code>hsl(0.15turn, 50%, 75%)</code></td> <td style="background-color: hsl(0.15turn, 50%, 75%);"> </td> </tr> <tr> <td><code>hsl(0.15turn, 90%, 75...
... using color now that you know what css properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of colo...
...And 4 more matches
Web video codec guide - Web media technologies
sulting data larger as well. thus, it's always a tradeoff of size versus quality. in some situations, a greater sacrifice of quality in order to bring down the data size is worth that lost quality; other times, the loss of quality is unacceptable and it's necessary to accept a codec configuration that results in a correspondingly larger file. 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. if the codec converts the media into an internal pixel format, or otherwise represents the image using a means other than simple pixels, the format of the original image doesn't make any difference. however, things such as frame rate and, obviously, resolution will always have an impa...
...ttiness to the image) introduces variability. variability generally makes compression more difficult, resulting in more lost quality due to the need to drop details to achieve the same level of compression. 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. unless you configure the encoder in a way that ignores some or all of the variations caused by noise, the compressed video will be larger. resolution (width and height) higher resolution video, presented in the same screen size, will typically be able to more accurately portray the original scene, barring effects introduced during compression. the higher the resolution of a vid...
... caused by noise, the compressed video will be larger. resolution (width and height) higher resolution video, presented in the same screen size, will typically be able to more accurately portray the original scene, barring effects introduced during compression. the higher the resolution of a video, the larger it gets. this plays a key role in the final size of the video. 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. in addition to general codec options, the encoder could be configured to reduce the frame rate, to clean up noise, and/or to reduce the overall resolution of the video during encoding. effect of codec configuration on encoded o...
...And 4 more matches
TypeScript support in Svelte - Learn web development
ter, where we will look at different options for deploying our svelte applications, further resources, and more. 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/07-typescript-support or directly download the folder's content: npx
degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development mode. repl unfortunately, typescript support is not yet available in the repl. typescript: optional static typing for javascript typescript is a superset of javascript that provides features such as optional static typing, classes, interfaces, and generics. the goal...
...'s your decision. in the following sections we hope to give you more evidence to make up your mind about it. creating a svelte typescript project from scratch you can start a new svelte typescript project using the standard template. all you have to do is run the following terminal commands (run them somewhere where you are storing your svelte test projects — it creates a new directory): npx
degit sveltejs/template svelte-typescript-app cd svelte-typescript-app node scripts/setuptypescript.js this creates a starter project that includes typescript support, which you can then modify as you wish. then you'll have to tell npm to download dependencies and start the project in development mode, like we usually do: npm install npm run dev adding typescript support to an existing svelte...
...ject in development mode, like we usually do: npm install npm run dev adding typescript support to an existing svelte project to add typescript support to an existing svelte project you can follow these instructions. alternatively, you can download the setuptypescript.js file to a scripts folder inside your project's root folder, and then run node scripts/setuptypescript.js. ...
...And 3 more matches
filter - CSS: Cascading Style Sheets
like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...d: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } hue-rotate() the hue-rotate() function applies a hue rotation on the input image. ...
...t: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } hue-rotate() the hue-rotate() function applies a hue rotation on the input image. the value of angle defines the number of
degrees around the color circle the input samples will be adjusted. a value of 0
deg leaves the input unchanged. the lacuna value for interpolation is 0. ...
...And 3 more matches
repeating-linear-gradient() - CSS: Cascading Style Sheets
as no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-linear-gradient() won't work on background-color and other properties that use the <color> data type. ...
...of the element it applies to. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-linear-gradient() won't work on background-color and other properties that use the <color> data type. syntax /* a repeating gradient tilted 45
degrees, starting blue and finishing red, repeating 3 times */ repeating-linear-gradient(45
deg, 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 finishing red. this gradient doesn't repeat because the last color stop defaults to 100% */ repe...
... 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 finishing red. this gradient doesn't repeat because the last color stop defaults to 100% */ repeating-linear-gradient(0
deg, 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. if specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or ri...
...And 3 more matches
<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(360
deg)</option> <option>rotatex(360
deg)</option> <option>rotatey(360
deg)</option> <option>rotatez(360
deg)</option> <option>rotate3d(1, 1, 1, 90
deg)</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(17
deg, 13
deg)</option>...
...n>rotatex(360
deg)</option> <option>rotatey(360
deg)</option> <option>rotatez(360
deg)</option> <option>rotate3d(1, 1, 1, 90
deg)</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(17
deg, 13
deg)</option> <option>skewx(17
deg)</option> <option>skewy(17
deg)</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,...
...</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(135
deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30
deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { backgrou...
...And 3 more matches
transform - CSS: Cascading Style Sheets
overned by the css box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes. ...
...l except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes. ...
...inline boxes, table-column boxes, and table-column-group boxes. ...
...And 3 more matches
Using device orientation with 3D transforms - Developer guides
fferent rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotatex and then rotatey. 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("deviceorientati...
...he orientation of the device can be useful to create parallax effects or augmented reality. ...
... useful to create parallax effects or augmented reality. ...
...And 3 more matches
A basic 2D WebGL animation example - Web APIs
ct ratio and coordinate system // details let aspectratio; let currentrotation = [0, 1]; let currentscale = [1.0, 1.0]; // vertex information let vertexarray; let vertexbuffer; let vertexnumcomponents; let vertexcount; // rendering data shared with the // scalers. ...
...ver modified, but will be used repeatedly. this lets webgl consider any optimizations it can apply that may improve performance based on that information. with the vertex data now provided to webgl, we set vertexnumcomponents to the number of components in each vertex (2, since they're 2d vertexes) and vertexcount to the number of vertexes in the vertex list. 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. finally, animatescene() is called to render the first frame and schedule the rendering of the next frame of the animation. compiling and linking the shader program constructing and linking the program the buildshaderprogram() function ac...
...in this case, we set the viewport based on the size of the <canvas>, call clearcolor() to set the color to use when clearing content, then ...
...And 2 more matches
Geometry and reference spaces in WebXR - Web APIs
your code, or by using a transform to adjust the coordinates of all vertices. the most efficient way, of course, is to design your objects and code to use the same coordinate system as webgl does. the webgl coordinates and lengths are transformed automatically at render time to the size of the viewport in which the scene is being rendered. angles angles are specified using radians. ...
... coordinates of all vertices. the most efficient way, of course, is to design your objects and code to use the same coordinate system as webgl does. the webgl coordinates and lengths are transformed automatically at render time to the size of the viewport in which the scene is being rendered. angles angles are specified using radians. to convert
degrees to radians, simply multiply the value in
degrees by π/180. ...
...ign your objects and code to use the same coordinate system as webgl does. the webgl coordinates and lengths are transformed automatically at render time to the size of the viewport in which the scene is being rendered. angles angles are specified using radians. to convert
degrees to radians, simply multiply the value in
degrees by π/180. the following code snippet shows two simple functions,
degreestoradians() and radiansto
degrees(), which convert back and forth between the two units for measuring angles. ...
...And 2 more matches
Using CSS transforms - CSS: Cascading Style Sheets
eed a specific point as a parameter. transform specifies the transforms to apply to the element. it is a space-separated list of transforms, which are applied one after the other, as requested by the composition operation. composite transforms are effectively applied in order from right to left. ...
...rms to apply to the element. it is a space-separated list of transforms, which are applied one after the other, as requested by the composition operation. composite transforms are effectively applied in order from right to left. examples here is an unaltered image of the mdn logo: rotating here is the mdn logo rotated 90
degrees from its bottom-left corner. ...
...fectively applied in order from right to left. 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(90
deg); 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(10
deg) 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. you have to start by configuring the 3d space by giving it a perspective, then you ha...
...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(270
deg); -webkit-transform: rotate(270
deg); 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(270
deg); -webkit-transform: rotate(270
deg); 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(270
deg); -webkit-transform: rotate(270
deg); 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
<angle> - CSS: Cascading Style Sheets
it is used, for example, in <gradient>s and in some transform functions. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the <angle> data type consists of a <number> followed by one of the units listed below. as with all dimensions, there is no space between the unit literal and the number. the angle unit is optional after the number 0. optionally, it may be preceded by a single + or - sign. ...
...with all dimensions, there is no space between the unit literal and the number. the angle unit is optional after the number 0. optionally, it may be preceded by a single + or - sign. positive numbers represent clockwise angles, while negative numbers represent counterclockwise angles. for static properties of a given unit, any angle can be represented by various equivalent values. for example, 90
deg equals -270
deg, and 1turn equals 4turn. for dynamic properties, like when applying an animation or transition, the effect will nevertheless be different. units
deg represents an angle in
degrees. one full circle is 360
deg. examples: 0
deg, 90
deg, 14.23
deg. grad represents an angle in gradians. one full circle is 400grad. examples: 0grad, 100grad, 38.8grad. rad represents an angle in radia...
... an animation or transition, the effect will nevertheless be different. units
deg represents an angle in
degrees. one full circle is 360
deg. examples: 0
deg, 90
deg, 14.23
deg. grad represents an angle in gradians. one full circle is 400grad. examples: 0grad, 100grad, 38.8grad. rad represents an angle in radians. one full circle is 2π radians which approximates to 6.2832rad. 1rad is 180/π
degrees. examples: 0rad, 1.0708rad, 6.2832rad. turn represents an angle in a number of turns. one full circle is 1turn. examples: 0turn, 0.25turn, 1.2turn. ...
...And 2 more matches
font-style - CSS: Cascading Style Sheets
ntal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. when the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use font-synthesis to control this behavior). syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10
deg; /* 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. values normal selects a font that is classified as normal within a font-family. italic selects a font that is classified as italic. if no italic ve...
... selects a font classified as oblique, and additionally specifies an angle for the slant of the text. if one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. if no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. ...
...ssified as oblique, and additionally specifies an angle for the slant of the text. if one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. if no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. valid values are
degree values of -90
deg to 90
deg inclusive. if an angle is not specified, an angle of 14
degrees is used. positive values are slanted to the end of the line, while negative values are slanted towards the beginning. in general, for a requested angle of 14
degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm). variable ...
...And 2 more matches
rotate() - CSS: Cascading Style Sheets
for example, if you rotate before translating, the translation will be along the new axis of rotation! html <div>normal</div> <div class="rotate">rot...
...for example, if you rotate before translating, the translation will be along the new axis of rotation! html <div>normal</div> <div class="rotate">rotated</div> <div class="rotat...
... working draft initial definition ...
...And 2 more matches
Math - JavaScript
, indicating whether x is positive, negative, or zero. math.sin(x) returns the sine of x. math.sinh(x) returns the hyperbolic sine of x. math.sqrt(x) returns the positive square root of x. math.tan(x) returns the tangent of x. math.tanh(x) returns the hyperbolic tangent of x. math.trunc(x) returns the integer portion of x, removing any fractional digits. ...
... square root of x. math.tan(x) returns the tangent of x. math.tanh(x) returns the hyperbolic tangent of x. math.trunc(x) returns the integer portion of x, removing any fractional digits. examples converting between
degrees and radians the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() expect (and return) angles in radians. ...
....tanh(x) returns the hyperbolic tangent of x. math.trunc(x) returns the integer portion of x, removing any fractional digits. examples converting between
degrees and radians the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() expect (and return) angles in radians. ...
...And 2 more matches
azimuth - Archive of obsolete content
s allow for a fully three-dimensional stage. initial valuecenterapplies toall elementsinheritedyescomputed valuenormalized angleanimation typediscrete syntax <angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] | behind ] | leftwards | rightwards values angle audible source position is described as an angle within the range -360
deg to 360
deg. the value 0
deg means directly ahead in the center of the sound stage (this is the default value). 90
deg is to the right, 180
deg is behind, and 270
deg or -90
deg is to the left. positional keywords left-side: same as 270
deg. left-side behind: same as 270
deg. far-left: same as 300
deg. far-left behind: same as 240
deg. left: same as 320
deg. left behind: same as 220
deg. center-l...
...value 0
deg means directly ahead in the center of the sound stage (this is the default value). 90
deg is to the right, 180
deg is behind, and 270
deg or -90
deg is to the left. positional keywords left-side: same as 270
deg. left-side behind: same as 270
deg. far-left: same as 300
deg. far-left behind: same as 240
deg. left: same as 320
deg. left behind: same as 220
deg. center-left: same as 340
deg. center-left behind: same as 200
deg. center: same as 0
deg. center behind: same as 180
deg. center-right: same as 20
deg. center-right behind: same as 160
deg. right: same as 40
deg. right behind: same as 140
deg. far-right: same as 60
deg. far-right behind: same as 120
deg. right-side: same as 90
deg. right-side behind: same as 90
deg. behind: same as 180
deg. also used as a modifier for other ...
...
deg. center-right: same as 20
deg. center-right behind: same as 160
deg. right: same as 40
deg. right behind: same as 140
deg. far-right: same as 60
deg. far-right behind: same as 120
deg. right-side: same as 90
deg. right-side behind: same as 90
deg. behind: same as 180
deg. also used as a modifier for other positional keyword values, as above. leftwards: moves the sound counter-clockwise by 20
degrees, relative to the current angle. rightwards: moves the sound clockwise by 20
degrees, relative to the current angle. ...
...far-right behind: same as 120
deg. right-side: same as 90
deg. right-side behind: same as 90
deg. behind: same as 180
deg. also used as a modifier for other positional keyword values, as above. leftwards: moves the sound counter-clockwise by 20
degrees, relative to the current angle. rightwards: moves the sound clockwise by 20
degrees, relative to the current angle. examples h1 { azimuth: 30
deg; } td.a { azimuth: far-right; } /* 60
deg */ #12 { azimuth: behind far-right; } /* 120
deg */ p.comment { azimuth: behind; } /* 180
deg */ specifications specification status comment css level 2 (revision 1)the definition of 'azimuth' in that specification. recommendation initial definition. ...
Making decisions in your code — conditionals - Learn web development
sallowance = 10; } else { let childsallowance = 5; } nesting if ... else it is perfectly ok to put one if...else statement inside another one — to nest them. ...
... 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! if you want to go outside, make sure to put some sunscreen on.'; } } even though the code all works together, each if...else statement works completely independently of the other one. logical operators: and, or and not if you want to test multiple conditions without writing nested if...else statements, logical operators can help you. when used in conditions, the f...
...o true for the whole expression to return true. || — or; allows you to chain together two or more expressions so that one or more of them have to individually evaluate to true for the whole expression to return true. ...
... to return true. 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! if you want to go outside, make sure to put some sunscreen on.'; } so for example, the first code block will only be run if choice === 'sunny' and temperature < 86 return true. let's look at a quick or example: if (icecreamvanoutside || housestatus === 'on fire') { console.log('you should leave the house quickly.'); } else { console.log('probably should just sta...
Getting started with Svelte - Learn web development
information: "what is npm" on nodejs.org "introducing npx" on the npm blog "the easiest way to get started with svelte" on the svelte blog creating your first svelte app the easiest way to create a starter app template is to just download the starter template application. you can do that by visiting sveltejs/template on github or you can avoid having to download and unzip it and just use
degit. to create your starter app template, run the following terminal commands: npx
degit sveltejs/template moz-todo-svelte cd moz-todo-svelte npm install npm run dev note:
degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. this is much quicker than using git clone because it will not download all the history of the repo, or cr...
...e sent to production, they are just used for development purposes. .gitignore: tells git which files or folder to ignore from the project — useful if you decide to include your app in a git repo. rollup.config.js: svelte uses rollup.js as a module bundler. this configuration file tells rollup how to compile and build your app. if you prefer webpack you can create your starter project with npx
degit sveltejs/template-webpack svelte-app instead. scripts: contains setup scripts as required. currently should only contain setuptypescript.js, a script that sets up typescript support in svelte. we'll talk about this more in the last article. src: this directory is where the source code for your application lives — where you'll be creating the code for your app. app.svelte: this is the ...
...cle, you can just cd into the corresponding folder and start the app in dev mode to see what its current state should be, like this: cd 02-starting-our-todo-app npm install npm run dev if you want lo learn more about git and github, we've compiled a list of links to useful guides — see git and github. note: if you just want to download the files without cloning the git repo, you can use the
degit tool like this — npx
degit opensas/mdn-svelte-tutorial. you can also download a specific folder with npx
degit opensas/mdn-svelte-tutorial/01-getting-started.
degit won't create a local git repo, it will just download the files of the specified folder. using the svelte repl a repl (read–eval–print loop) is an interactive environment that allows you to enter commands and immediately see...
...ort todos from './components/todos.svelte', just replace it with a flat url, e.g. import todos from './todos.svelte'. the code so far 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/01-getting-started or directly download the folder's content: npx
degit opensas/mdn-svelte-tutorial/01-getting-started remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2 summary this brings us to the end of our initial look at svelte, including how to install it locally, create a starter app, and how the ba...
GeolocationCoordinates.heading - Web APIs
if geolocationcoordinates.speed is 0, heading is nan. if the device is not able to provide heading information, this value is null. ...
...if geolocationcoordinates.speed is 0, heading is nan. if the device is not able to provide heading information, this value is null. ...
...if geolocationcoordinates.speed is 0, heading is nan. if the device is not able to provide heading information, this value is null. ...
...if geolocationcoordinates.speed is 0, heading is nan. if the device is not able to provide heading information, this value is null. ...
PannerNode.coneInnerAngle - Web APIs
the coneinnerangle property's default value is 360, suitable for a non-directional source. syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.coneinnerangle = 360; value a double. example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. ...
...he pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector =
degrees => { // convert
degrees to radians and offset the angle so 0 points towards the listener const radians = (
degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation ...
... 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's default value is 0. syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.coneouterangle = 0; value a double. example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. ...
...he pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector =
degrees => { // convert
degrees to radians and offset the angle so 0 points towards the listener const radians = (
degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation ...
... 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
il (check out this article on wolfram mathworld for that), take this example for illustration. first, here's code that rotates a point around the origin without using matrices. // 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. below is the representation of a rotation about the x axis: let sin = math.sin; let cos = math.cos; // note: there is no...
...se numbers would be described as commutative. matrices are not guaranteed to be the same if the order is switched, so matrices are non-commutative. another mind-bender is that matrix multiplication in webgl and css needs to happen in the reverse order that the operations intuitively happen. 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. transformation = rotate * translate * scale composing multiple transformations the function that we will be using to compose our matrices is multiplyarrayofmatrices(), which is part of the set of utility functions introduced near the top of this article. it takes an array of matrices and multiplies them together, returning the resu...
...icle. it takes an array of matrices and multiplies them together, returning the result. in webgl shader code, this is built into the language and the * operator can be used. additionally this example uses scale() and translate() functions, which return matrices as defined above. 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...
...ces 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. they can easily be shared around in programs. different coordinate spaces can be described with matri...
Using the Web Animations API - Web APIs
an offset from her spinning. we’re going to focus on just alice for this tutorial. 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(360
deg) 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. in the @keyframes block we can see that 30% of the way through each loop (about .9 seconds in), alice’s color changes from black to a deep burgundy then back again by the end of the loop. moving it to javascript now let’s try creati...
...the end of the loop. moving it to javascript now let’s try creating the same animation with the web animations api. 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(360
deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects. each object represents a key from the original css. however, unlike css, the web animations api doesn’t need to explicitly be told the percentages along the animation for each key to appear at. it will automatically divide the animation into equal parts based on the number of keys you give...
...lled on any dom element that could be animated with css. and it can be written in several ways. ...
...the web animations api provides several useful methods for controlling playback. let’s take a look at pausing and p...
Variable fonts guide - CSS: Cascading Style Sheets
slant slant (represented by the slnt tag), or as it's often referred to, 'oblique' — is different to true italics in that it changes the angle of the letterforms but doesn’t perform any kind of character substitution. it is also variable, in that it is expressed as a numeric range. this allows the font to be varied anywhere along that axis. 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. font-style: oblique 14
deg; font-variation-settings: 'slnt' 14; the following live example's css can be edited to allow you to play with font slant/oblique values. ...
...rc: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; font-style: normal; } example for a font that includes both upright and italics: @font-face { font-family: 'myvariablefontname'; src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; font-style: oblique 0
deg 20
deg; } note: there is no set specific value for the upper-end
degree measurement in this case; they simply indicate that there is an axis so the browser can know to render upright or italic (remember that italics are only on or off) example for a font that contains only italics and no upright characters: @font-face { font-family: 'myvariablefontname'; src: 'path/to/font/file/myvariablefo...
...all browsers that support variable fonts will still render them if you set the format to just the file format, rather than format-variations (i.e. woff2 instead of woff2-variations), but it’s best to use the proper syntax if possible. note: supplying value ranges for font-weight, font-stret...
...all browsers that support variable fonts will still render them if you set the format to just the file format, rather than format-variations (i.e. woff2 instead of woff2-variations), but it’s best to use the proper syntax if possible. note: supplying value ranges for font-weight, font-stretch, an...
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...
... 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.setaxisangle = 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 ...
....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...
...on 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) { ...
attr() - CSS: Cascading Style Sheets
d by the css property, the default value is used. if the given unit is a relative length, attr() computes it to an absolute length. leading and trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value. angle <angle> the attribute value is parsed as a css <angle> dimension, that is including the unit (e.g. 30.5
deg). if it is not valid, that is not an angle or out of the range accepted by the css property, the default value is used. leading and trailing spaces are stripped. 0
deg, or, if 0
deg 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. 12.5), and inter...
... time <time> the attribute value is parsed as a css <time> dimension, that is including the unit (e.g. 30.5ms). if it is not valid, that is not a time or out of the range accepted by the css property, the default value is used. ...
... time <time> the attribute value is parsed as a css <time> dimension, that is including the unit (e.g. 30.5ms). if it is not valid, that is not a time or out of the range accepted by the css property, the default value is used. ...
...missing or contains an invalid value. if not set, css will use the default value defined for each <type-or-unit>. ...
image-orientation - CSS: Cascading Style Sheets
lements, with the possible exception of from-image. the flip and <angle> values were made obsolete in firefox 63. /* keyword values */ image-orientation: none; image-orientation: from-image; /* use exif data from the image */ /* global values */ image-orientation: inherit; image-orientation: initial; image-orientation: unset; /* obsolete values. obsolete since gecko 63 */ image-orientation: 90
deg; /* rotate 90
deg */ image-orientation: 90
deg flip; /* rotate 90
deg, and flip it horizontally */ image-orientation: flip; /* no rotation, only applies a horizontal flip */ syntax values none default initial value. will not apply any additional image rotation; the image is oriented as encoded or as other css property values dictate. from-image the exif information contained in the image wi...
...ntal flip */ syntax values none default initial value. will not apply any additional image rotation; the image is oriented as encoded or as other css property values dictate. from-image the exif information contained in the image will be used to rotate the image appropriately. <angle> obsolete since gecko 63 the <angle> of rotation to apply to the image. it is rounded to the nearest 90
deg (0.25turn). flip obsolete since gecko 63 the image is flipped horizontally (i.e., reflected) after the rotation given by the <angle> value is applied. if no <angle> is given, 0
deg is used. description this property is intended only to be used for the purpose of correcting the orientation of images which were shot with the camera rotated. it should not be used for arbitrary rotations. for a...
...form property with the rotate keyword to specify rotation. this includes any user-directed changes to the orientation of the image, or changes required for printing in portrait versus landscape orientation. if used in conjunction with other css properties, such as a <transform-function>, any image-orientation rotation is applied before any other transformations. ...
...the orientation of the image, or changes required for printing in portrait versus landscape orientation. if used in conjunction with other css properties, such as a <transform-function>, any image-orientation rotation is applied before any other transformations. ...
offset-rotate - CSS: Cascading Style Sheets
the offset-rotate css property defines the orientation/direction of the element as it is positioned along the offset-path. note: early versions of the spec called this property motion-rotation. syntax /* follow the path direction, with optional additional angle */ offset-rotate: auto; offset-rotate: auto 45
deg; /* 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: 90
deg; offset-rotate: .5turn; auto the element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis. this is the default value. <angle> the element has a constant clockwise rotation transformation applied to it by the specified rotation angle. ...
...lt value. <angle> the element has a constant clockwise rotation transformation applied to it by the specified rotation angle. auto <angle> if auto is followed by an <angle>, the computed value of the angle is added to the computed value of auto. reverse the element is rotated similar to auto, except it faces the opposite direction. it is the same as specifying a value of auto 180
deg. formal definition initial valueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; cli...
... working draft initial definition ...
... working draft initial definition ...
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(270
deg); -webkit-transform: rotate(270
deg); 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(270
deg); -webkit-transform: rotate(270
deg); 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(270
deg); -webkit-transform: rotate(270
deg); 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(270
deg); -webkit-transform: rotate(270
deg); 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-...
SVG documentation index - SVG: Scalable Vector Graphics
anged during an animation. 28 attributetype deprecated, needscompattable, svg, svg attribute the attributetype attribute specifies the namespace in which the target attribute and its associated values are defined. 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. 30 basefrequency filters, svg, svg attribute the basefrequency attribute represents the base frequency parameter for the noise function of the <feturbulence> filter primitive. 31 baseprofile deprecated, svg, svg attribute the baseprofile attribute describes the minimum svg language profile that the author believes is necessary to corr...
...ibute the edgemode attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. 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. note that the positive z-axis points towards the viewer of the content. 67 enable-background deprecated, svg, svg attribute the enable-background attribute specifies how the accumulation of the background image is managed. 68 end needscompattable, svg, svg attribute the end attribute defines an end value for the animation that can constrain the activ...
...ibute controls spacing between text characters, in addition to any spacing from the kerning attribute. 125 lighting-color svg, svg attribute, svg filter the lighting-color attribute defines the color of the light source for lighting filter primitives. 126 limitingconeangle filters, svg, svg attribute the limitingconeangle attribute represents the angle in
degrees between the spot light axis (i.e. the axis between the light source and the point to which it is pointing at) and the spot light cone. so it defines a limiting cone which restricts the region where the light is projected. no light is projected outside the cone. 127 local deprecated, svg, svg attribute the local attribute specifies the unique id for a locally stored color ...
...numoctaves attribute defines the number of octaves for the noise function of the <feturbulence> primitive. 145 onclick svg, svg attribute, events the onclick attribute specifies some script to run when the element is clicked. 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. 147 operator filters, needscompattable, svg, svg attribute the operator attribute as two meanings based on the context itʼs used in. either it defines the compositing or morphing operation to be performed. 148 order filters, svg, svg attribute the order attribute indicates the size of the matrix ...
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.overri
deglobal_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.overri
deglobal_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.overri
deglobal_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
rowser, chrome canary, chrome stable, chromium, glossary, webmechanics, google chrome google chrome is a free web browser developed by google. it's based on the chromium open source project. some key differences are described on the chromium wiki. chrome supports its own layout called blink. note that the ios version of chrome uses that platform's webview, not blink. 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. 179 grid css, css grid, glossary a css grid is ...
... 274 modem infrastructure, navigation a modem ("modulator-demodulator") is a device that converts digital information to analog signals and vice-versa, for sending data through networks. 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. the advantage of a modular system is that one can reason the parts independently 277 mozilla firefox browser, firefox, glossary, infrastructure, mozilla, mozilla firefox mozilla firefox is a free open-source browser whose development is overseen by ...
... event handling. 522 lossy compression beginner, composing, glossary, images, jpeg, lossy, web performance, compression lossy compression, or irreversible compression, is a data-compression method that uses inexact approximations and partial-data discarding to represent content. in simpler terms: lossy compression causes data from the initial file to be lost, possibly causing
degradation in quality. the process of such compression is irreversible; once lossy compression of the content has been performed, the content cannot be restored to its original state. therefore, content that has undergone lossy compression should generally not be further edited. 523 markup glossary, intro, markup, needscontent a markup language is one that is designed for defini...
HTML forms in legacy browsers - Learn web development
is one rule of thumb: keep it simple, also known as the "kiss principal". there are so many cases where we want forms that are "nicer" or "with advanced functionality", but building efficient html forms is not a question of design or technology. rather, it's about simplicity, intuitivess, and ease of user interaction. the tutorial, forms usability on ux for the masses, explains it well. 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. let's see some examples r...
...if a browser does not know the value of the type attribute of an <input> element, it will fall back as if the value were text. ...
... that depends on that api is loaded both : app.js, // once both files are loaded, this function is called in order to initialize the app. complete : function () { app.init(); } }); the modernizr team conveniently maintains a list of great polyfills. just pick what you need. note: modernizr has other awesome features to help you in dealing with unobstructive javascript and graceful
degradation techniques. please read the modernizr documentation. pay attention to performance even though scripts like modernizr are very aware of performance, loading a 200 kilobyte polyfill can affect the performance of your application. this is especially critical with legacy browsers; many of them have a very slow javascript engine that can make the execution of all your polyfills painful for ...
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(0
deg, #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(0
deg, #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(0
deg, #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;...
Starting our Svelte Todo list app - Learn web development
velte component, render it inside another component, pass data into it using props, and save its state. 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. repl to code along with us using the repl, start at https://svelte.dev/repl/b7b831ea3a354d3789cefbc31e2ca495?version=3.23.2 todo list app features this is how our todo list app wil look like once it's ready: using this ui our user will be able to: br...
... .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(-45
deg); 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...
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 summary with our markup and styling in place our todo list app is starting to take shape, and we have everything ready so ...
Working with Svelte stores - Learn web development
evelop our own custom store to persist the todo information to web storage, allowing our todos to persist over page reloads. 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. repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and events. i...
...from the svelte repl you won't be able to complete this step. for security reasons the svelte repl works in a sandboxed environment which will not let you access web torage, and you will get a "the operation is insecure" error. 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. so, to implement a custom store that saves its content to web storage, we will need a writable store that: initially reads the value from web storage, and if it's not present initializes it with a default value. whenever the value is modified, updates the store itself and also the data in local storage. moreover, because web storage only supports s...
...t transitions. it also has several easing functions to specify the rate of change over time. have a look at the ease visualizer to explore the various ease functions available. 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. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2 summary in this article we added two new features: an alert component and persisting todos to web storage. this allowed us to showca...
Handling common HTML and CSS problems - Learn web development
o implement their own version of a css (or javascript) feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. so for example: mozilla uses -moz- chrome/opera/safari use -webkit- microsoft uses -ms- here's some examples: -webkit-transform: rotate(90
deg); 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. until the feature was finalized and such browsers added a pr...
...ing, the main google logo had an id of hplogo. 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(90
deg)' test.style.webkittransform = 'rotate(90
deg)' 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. this is useful for finding out wha...
... browser and match what you've written so far. this is useful for finding out what versions of the property are implemented in that browser. at the time of writing, both firefox and chrome implemented -webkit- prefixed and non-prefixed versions of transform! 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(90
deg); -webkit-transform: rotate(90
deg); transform: rotate(90
deg); this ensures that all browsers that support any of the above forms of the property can make the feature work. it is worth putting the non-prefixed version last, because that will be the most up-to-date version, which you'll want browsers to use if possible. if for example a browser implements both the -webkit- version and the non-pref...
Detecting device orientation - Web APIs
data } orientation values explained the value reported for each axis indicates the amount of rotation around a given axis in reference to a standard coordinate frame. these are described in greater detail in the orientation and motion data explained article which is summarized below. ...
...coordinate frame. these are described in greater detail in the orientation and motion data explained article which is summarized below. 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. this represents a front to back motion of the device. the deviceorientationevent.gamma value represents the motion of the device around the y axis, represented in
degrees with values ranging from -90 to 90. this represents a left to right motion of the device. orientation example this example will work on any browser supporting the deviceorientation e...
... 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
this while using them. constructor deviceorientationevent.deviceorientationevent() creates a new deviceorientationevent. properties deviceorientationevent.absolute read only a boolean that indicates whether or not the device is providing orientation data absolutely. ...
...event.absolute read only a boolean that indicates whether or not the device is providing orientation data absolutely. 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. this represents a front to back motion of the device. 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. this represents a left to right motion of the device. deviceorientationevent.webkitcompassheading read only a number represents the diffe...
... deviceorientationevent.webkitcompassaccuracy read only the accuracy of the compass means that the deviation is positive or negative. it's usually 10. ...
MediaTrackConstraints - Web APIs
the sensor of one or more points of interest. this is either an object in the form { x:value, y:value } or an array of such objects, where value is a double-precision integer. exposurecompensation a constraindouble (a double-precision integer) specifying f-stop adjustment by up to ±3. ...
... sharpness a constraindouble (a double-precision integer) specifying the intensity of edges. ...
... sharpness a constraindouble (a double-precision integer) specifying the intensity of edges. focusdistance a constraindouble (a double-precision integer) specifying distance to a focused object. zoom a constraindouble (a double-precision integer) specifying the desired focal length. ...
PannerNode.coneOuterGain - Web APIs
he pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector =
degrees => { // convert
degrees to radians and offset the angle so 0 points towards the listener const radians = (
degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation ...
... 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
he pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector =
degrees => { // convert
degrees to radians and offset the angle so 0 points towards the listener const radians = (
degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation ...
... 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
he pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector =
degrees => { // convert
degrees to radians and offset the angle so 0 points towards the listener const radians = (
degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation ...
... 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
he pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector =
degrees => { // convert
degrees to radians and offset the angle so 0 points towards the listener const radians = (
degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation ...
... 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...
hue-rotate() - CSS: Cascading Style Sheets
ts. its result is a <filter-function>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax hue-rotate(angle) parameters angle the relative change in hue of the input sample, specified as an <angle>. ...
...ctive-examples and send us a pull request. syntax hue-rotate(angle) parameters angle the relative change in hue of the input sample, specified as an <angle>. a value of 0
deg leaves the input unchanged. a positive hue rotation increases the hue value, while a negative rotation decreases the hue value. the lacuna value for interpolation is 0. there is no minimum or maximum value; hue-rotate(n
deg) evaluates to n modulo 360. ...
...tate(angle) parameters angle the relative change in hue of the input sample, specified as an <angle>. a value of 0
deg leaves the input unchanged. a positive hue rotation increases the hue value, while a negative rotation decreases the hue value. the lacuna value for interpolation is 0. there is no minimum or maximum value; hue-rotate(n
deg) evaluates to n modulo 360. examples hue-rotate(-90
deg) /* same as 270
deg rotation */ hue-rotate(0
deg) /* no effect */ hue-rotate(90
deg) /* 90
deg rotation */ hue-rotate(.5turn) /* 180
deg rotation */ hue-rotate(405
deg) /* same as 45
deg rotation */ specifications specification status filter effects module level 1the definition of 'hue-rotate()' in that specification. working draft ...
<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...
... living standard html5the definition of '<input type="button">' in that specification. recommendation ...
... living standard html5the definition of '<input type="button">' in that specification. recommendation ...
<input type="range"> - HTML: Hypertext Markup Language
<input type="range" min="0" max="3.14" step="any"> this example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected. adding hash marks and labels the html specification gives browsers some flexibility on how to present the range control. nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser
degree, labels. the specification describes how to add custom points to the range control using the list attribute and a <datalist> element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control. range control mockups since browsers have this flexibility, and to date none support all of the features html defines for range cont...
...ion, making it vertical requires adding css to change the dimensions of the control so that it's taller than it is wide, like this: css #volume { height: 150px; width: 50px; } html <input type="range" id="volume" min="0" max="11" value="7" step="1"> result screenshotlive sample unfortunately, no major browsers currently support vertical range controls directly. transform: rotate(-90
deg) you can, however, create a vertical range control by drawing a horizontal range control on its side. the easiest way is to use css: by applying a transform to rotate the element, you can make it vertical. let's take a look. html the html needs to be updated to wrap the <input> in a <div> to let us correct the layout after the transform is performed (since transforms don't automatically affect...
...e slider so that the rotated slider fits into the reserved space without making a mess of things. .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(-90
deg); } the size of the control is set to be 150 pixels long by 20 pixels tall. the margins are set to 0 and the transform-origin is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. offsetting the origin by 75px on each axis means we will rotate around the center of that spa...
String.prototype.replace() - JavaScript
to the tolowercase() method. if we had tried to do this using the match without a function, the tolowercase() would have no effect. let newstring = propertyname.replace(/[a-z]/g, '-' + '$&'.tolowercase()); // won't work this is because '$&'.tolowercase() would first be evaluated as a string literal (resulting in the same '$&') before using the characters as a pattern. 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 function returns the celsius number ending with "c". for example, if the input number is "212f", the function returns "100c". if the number is "0f", the function returns "-17.77777777777778c". the regular expression t...
...f2c() then returns the celsius number. this function approximates perl's s///e flag. ...
...f2c() then returns the celsius number. this function approximates perl's s///e flag. ...
glyph-orientation-horizontal - SVG: Scalable Vector Graphics
the glyph-orientation-horizontal attribute affects the amount that hte current text position advances as each glyph is rendered. when the reference orientation direction is horizontal and the glyph-orientation-horizontal results in an orientation angle that is a multiple of 180
degrees, then the current text position is incremented according to the horizontal metrics of the glyph. 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. this attribute is applied only to text written in a horizontal writing-mode. note: as a presentation attribute, glyph-orientation-horizontal can be used as a css property. as a presentation attribute, it can be applied to any element but it ha...
...te is applied only to text written in a horizontal writing-mode. note: as a presentation attribute, glyph-orientation-horizontal can be used as a css property. ...
...entation-horizontal can be used as a css property. 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 0
deg animatable no <angle> the value of the angle is restricted to 0, 90, 180, and 270
degrees. if another angle is specified, it is rounded to the closest of the permitted values. a value of 0
deg indicates that all glyphs are set with the top of the glyphs oriented towards the reference orientation. a value of 90
deg indicates an orientation of 90
degrees clockwise from the reference orientation. specifications specification status comment scalable ve...
glyph-orientation-vertical - SVG: Scalable Vector Graphics
the glyph-orientation-vertical attribute affects the amount that hte current text position advances as each glyph is rendered. when the inline-progression-direction is vertical and the glyph-orientation-vertical results in an orientation angle that is a multiple of 180
degrees, then the current text position is incremented according to the vertical metrics of the glyph. otherwise, if the angle is not a multiple of 180
degrees, then the current text position is incremented according to the horizontal metrics of the glyph. this attribute is applied only to text written in a vertical writing-mode. note: as a presentation attribute, glyph-orientation-vertical can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following ...
...s a css property. 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 auto | <angle> default value auto animatable no auto fullwidth ideographic and fullwidth latin text will be set with a glyph orientation of 0
degrees. ideographic punctuation and other ideographic characters having alternate horizontal and vertical forms will use the vertical form of the glyph. text which is not fullwidth will be set with a glyph orientation of 90
degrees. this reorientation rule applies only to the first-level non-ideographic text. all further embedding of writing modes or bidirectional processing will be based on the f...
...entation form does not disable auto-ligature formation or similar context-driven variations.) the determination of which characters should be auto-rotated may vary across user agents. the determination is based on a complex interaction between country, language, script, character properties, font, and character context. <angle> the value of the angle is restricted to 0, 90, 180, and 270
degrees. if another angle is specified, it is rounded to the closest of the permitted values. a value of 0
deg indicates that all glyphs are set with the top of the glyphs oriented towards the reference orientation. a value of 90
deg indicates an orientation of 90
degrees clockwise from the reference orientation. specifications specification status comment scalable ve...
transform - SVG: Scalable Vector Graphics
if optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. if optional parameters x and y are supplied, the rotation is about the point (x, y). example html,body,svg { height:100% } <svg viewbox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="10" height="10" /> <!-- rotati...
... example html,body,svg { height:100% ...
... 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. 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="skewy(30)" /> </svg> specification specification status comment css transforms level 2the definition of 'transform' in that specificati...
Performance best practices in extensions - Archive of obsolete content
incorporating sets of features that are only needed under specific circumstances. this makes it easy to load chunks of your extension on the fly as needed, instead of loading everything all at once. while javascript modules can be extremely useful, and provide significant performance benefits, they should be used wisely. loading modules incurs a small cost, so breaking code up to an unnecessary
degree can be counter-productive. code should be modularized to the extent that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred. defer everything that you can most extensions have a load event listener in the main overlay that runs their startup functions. do as little as possible here. the browser window is blocked while your add...
...fox will appear to the user. if there is anything that can be done even a fraction of a second later, you can use an nsitimer or the window.settimeout() method to schedule that work for later. even a short delay can have a big impact. 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. zombie compartments are a particular kind of memory leak that you can detect with minimal effort. see the zombie compartments page, especially the proactive checking of add-ons section. see common causes of memory leaks in extensions for ways to avoid zombie compartments and other kinds of leaks. as well as looking for these specific kinds of leaks, it's worth exercising your...
Setting up an extension development environment - Archive of obsolete content
session. this will utilize distinctive development preferences in about:config. install firefox development extensions specifically for this new developer user profile. edit files in the extensions folder of this profile, and restart the application as this new developer profile. 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. you could be running two instances of firefox simultaneously. note: for an extended guide on how to set up even more user profiles, take a look at multiple firefox profiles. this particularly comes in handy for the use of all currently avail...
... cached ("fastload"). the -purgecaches command-line flag disables this behavior. alternatively, you can set the moz_purge_caches environment variable. see this bug for more information. development preferences there is a set of development preferences that, when enabled, allows you to view more information about application activity, thus making debugging easier. however, these preferences can
degrade performance, so you may want to use a separate development profile when you enable these preferences. accessing firefox development preferences to change preference settings in firefox or seamonkey, type about:config in the location bar. you can also use the extension developer's extension, which provides a menu interface for firefox settings. accessing thunderbird development preferences ...
Browser Detection and Cross Browser Support - Archive of obsolete content
h follows web standards. unfortunately, no other browser supports web standards as completely as gecko. this means web developers and authors are forced to continue to support other browsers which do not comply with the standards as fully. 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. these other browsers appear to be moving towards more complete support for the standards and there is hope that in the future web developers and authors will be able to dispense with browser detection at least with regard to features governed by standards. we are still faced with the question of how to develop standards based content while supporting the differing implementations of modern b...
...ore complete support for the standards and there is hope that in the future web developers and authors will be able to dispense with browser detection at least with regard to features governed by standards. 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. browser detection is key to accomplishing this task. browser detection history primer to understand why many common browser detection strategies are inappropriate, we must first look back on how these strategies came into being. in the earliest days of the web, html was very simple, not standardized and did not include any support for client side scripting.
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
draw(), add the following block — this checks to see if the value of rotatecount is above 359 (e.g. 360, a full circle). if so, it sets the value to its modulo of 360 (i.e. the remainder left over when the value is divided by 360) so the circle animation can continue uninterrupted, at a sensible, low value. 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 the key to the whole operation — you are setting the variable defined ea...
...min; return num; } next add the draw() function, which animates the spinner. 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. add the following two lines, which simply hide the results paragraph and spinner container using display: none;. result.style.display = 'none'; spinnercontainer.style.display = 'none'; next, define a reset() function, which sets the app back to the original sta...
Componentizing our Svelte app - Learn web development
objective: to learn how to break our app into components and share information among them. 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. repl to code along with us using the repl, start at https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 breaking the app into components in svelte, an application is composed from one or more components. a component is a reusable, self...
...ispatching lots of events. stores allows you to share reactive data among components that are not hierarchically related. we will look at stores later on in the series. 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. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 summary now we have all of our app's required functionality in place. we can display, add, edit and delete todos, mark them as c...
Deployment and next steps - Learn web development
ext chapter, where we will look at different options for deploying our svelte applications, further resources, and more. 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. compiling our app so far we've been running our app in development mode with npm run dev. as we saw earlier, this instruction tells svelte to compile our components and javascript files into a public/build/bundle.js file and all the css sections of our components into p...
...ry now. you might get a warning, but you can ignore this for now. our whole app is now just 21 kb — 8.3 kb when gzipped. there are no additional runtimes or dependencies to download, parse, execute, and keep running in memory. svelte analyzed our components and compiled the code to vanilla javascript. 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. note: there is also an official template for using webpack and also many community-maintained plugins for other bundlers. in the file package.json you can see that the dev and start scripts are just calling rollup: "scripts": { "build": "rollup -c", "dev": "rollup -c -w", "start": "sirv public" }, in ...
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
ld and add button for adding a new todo. todosstatus: displays the "x out of y items completed" status heading. 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. repl to code along with us using the repl, start at https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons. let's create a component that will be ...
...t have multiple todosstatus instances active, so you need a way to reference each particular instance. that's why you have to specify a variable to bind each specific instance to. 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. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 summary in this article we have finished adding all the required functionality to our app, plus we've taken care of a number of accessibili...
Dynamic behavior in Svelte: working with variables and props - Learn web development
render javascript expressions into our markup, modify the components state and iterating over lists. 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. repl to code along with us using the repl, start at https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 working with todos our todos.svelte component is currently just displaying static markup; let's start making it a bit more dynamic...
...out it and not rely on the visibility of top-level variables. besides, it's a good practice to make our code clear and explicit about what information it is using. 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. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 summary that will do for now! in this article we already implemented most of our desired functionality. our app can display...
Accessibility/LiveRegionDevGuide
ming schemes that are used to help an at determine if an event is an actual live region event or is the result of user action. filtering for performance the most significant difference between at-spi and iaccessible2 is that at-spi is an inter-process communication service while iaccessible2 runs in process. 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. these "non-live" events may be events originating from the chrome, user interaction in the chrome or document, document loading events, or real live region events from hidden tabs. with the goal of eliminating the "non-live" events, some sort of event filtering logic must be employed. the following is a list of potential filtering tech...
...for the event and can have values of "off", "polite", "assertive" and "rude". this property, along with an event's time stamp, determine the priority of a message within the priority queue. the following describes actions that should be taken for an event with the given politeness level: off: no action should be taken. the event should be filtered out as early as possible to prevent performance
degradation. polite: a message should be derived from the event and added to the queue. assertive: the queue should be purged of 'polite' messages and the new message should be added to the queue. speak should not be interrupted. rude: the queue should be purged of 'polite' and 'assertive' messages and the new message should be added to the queue. current utterances should be allowed to finish but...
Optimizing Applications For NSPR
the casual client may not encounter a need to know the details of the shortcomings to the level described here, but if and when clients become more sophisticated, these issues will certainly surface. this memo is by no way complete. multiplatform do not call any blocking system call from a local thread. ...
... threads on some platforms. if all the software linked into the application is not ported to the nspr api, the application may fail because of threads being preempted during critical sections. to disable thread preemption call <tt>pr_disableclockinterrupts()</tt>during initialization. interrupting threads (via <tt>pr_interrupt()</tt>) on threads blocked in i/o functions is implemented to various
degrees on different platforms. the unix based platforms all implement the function though there may be up to a 5 second delay in processing the request. the mechanism used to implement <tt>pr_interrupt()</tt> on the pthreads versions of nspr is flawed. no failure attributable to the flaw has shown up in any tests or products - yet. the specific area surrounding pthread's continuation thread has bee...
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_deco
degeneralname 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_enco
degeneralname 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_deco
degeneralname 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_enco
degeneralname 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
hat produces an ast, and a tree-walking code generator. semantic and lexical feedback are used to disambiguate hard cases such as missing semicolons, assignable expressions ("lvalues" in c parlance), and whether / is the division symbol or the start of a regular expression. the compiler attempts no error recovery; it bails out on the first error. the emitter does some constant folding and a few co
degen optimizations; about the fanciest thing it does is to attach source notes to the script for the decompiler's benefit. the decompiler implements function.tosource(), which reconstructs a function's source code. it translates postfix bytecode into infix source by consulting a separate byte-sized code, called source notes, to disambiguate bytecodes that result from more than one grammatical produ...
...e that defines almost everything there is to know about js bytecodes. see its major comment for how to use it. for now, a debugger will use it and its dependents such as jsopcode.h directly, but over time we intend to extend jsdbgapi.h to hide uninteresting details and provide conveniences. the code generator is split across paragraphs of code in jsparse.cpp, and the utility methods called on jsco
degenerator appear in jsemit.cpp. source notes generated by jsparse.cpp and jsemit.cpp are used in jsscript.cpp to map line number to program counter and back. jstypes.h fundamental representation types and utility macros. this file alone among all .h files in spidermonkey must be included first by .cpp files. it is not nested in .h files, as other prerequisite .h files generally are, since it is a...
nsIAccessibleText
s not represent an existing character its bounding box is defined in relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text. 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. void getcharacterextents( in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype ); parameters offset index of the character for which to return its bounding box. the valid range is 0..length. x x coordinate of the bounding box of the referenced character. y y coordinate of the bounding box of the referenced character. width width...
...s not represent an existing character its bounding box is defined in relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text. 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. void getrangeextents( in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coordtype ); parameters startoffset index of the character for which to return its bounding box. the valid range is 0..length. endoffset index of the character for which to return its bounding box. the valid range is 0..length. x x coordin...
nsIDOMGeoPositionCoords
nsidomgeopositioncoords interface describes a geographical location. dom/interfaces/geolocation/nsidomgeopositioncoords.idlscriptable please add a summary to this article. 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. read only. longitude double the user's current longitude, in
degrees. read only. altitude double the user's current altitude, in meters. zero if the device doesn't support altitude detection. read only. accuracy double the accuracy of position information, in meters. read only. altitudeaccuracy double the accuracy of altitude inform...
...eters. zero if the device doesn't support altitude detection. read only. accuracy double the accuracy of position information, in meters. read only. altitudeaccuracy double the accuracy of altitude information, in meters. zero if the device doesn't support altitude detection. read only. heading double the current heading at which the user is moving, in
degrees. read only. speed double the speed at which the user is moving, in meters per second (confirm this). read only. ...
nsIWebProgressListener
was received over an insecure channel. state_is_broken 0x00000001 this flag indicates an unknown security state. this may mean that the request is being loaded as part of a page in which some content was received over an insecure channel. state_is_secure 0x00000002 this flag indicates that the data corresponding to the request was received over a secure channel. the
degree of security is expressed by state_secure_high, state_secure_med, or state_secure_low. security strength flags these flags describe the security strength and accompany state_is_secure in a call to the onsecuritychange() method. these flags are mutually exclusive. these flags are not meant to provide a precise description of data transfer security. these are instead intended as a rough ...
...y exclusive. these flags are not meant to provide a precise description of data transfer security. these are instead intended as a rough indicator that may be used to, for example, color code a security indicator or otherwise provide basic data transfer security feedback to the user. 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. state identity flags these flags describe the level of identity verification in a call to the onsecuritychange() method. constant value description state_identity_ev_top...
CSSPrimitiveValue - Web APIs
a specific style property currently set in a block or to set a specific style property explicitly within the block. an instance of this interface might be obtained from the getpropertycssvalue() method of the cssstyledeclaration interface. a cssprimitivevalue object only occurs in a context of a css property. conversions are allowed between absolute values (from millimeters to centimeters, from
degrees to radians, and so on) but not between relative values. (for example, a pixel value cannot be converted to a centimeter value.) percentage values can't be converted since they are relative to the parent value (or another property value). there is one exception for color percentage values: since a color percentage value is relative to the range 0-255, a color percentage value can be converted ...
... css_attr the value is an attr() function. the value can be obtained by using the getstringvalue() method. css_cm the value is a <length> in centimeters. the value can be obtained by using the getfloatvalue() method. css_counter the value is a counter or counters function. the value can be obtained by using the getcountervalue() method. css_
deg the value is an <angle> in
degrees. the value can be obtained by using the getfloatvalue() method. css_dimension the value is a <number> with an unknown dimension. the value can be obtained by using the getfloatvalue() method. css_ems the value is a <length> in em units. the value can be obtained by using the getfloatvalue() method. css_exs the ...
CanvasRenderingContext2D.rotate() - Web APIs
the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. ...
... the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. ...
Applying styles and colors - Web APIs
there are three possible values for this property: round, bevel and miter. by default this property is set to miter. note that the linejoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case. ...
...nce between the inside and outside points of jonction of edges, to the total line width. 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. a miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angles, keeping miter joins only for obtuse or right angles. a miter limit equal to 1.0 is valid but will disable all miters. values below 1.0 are invalid for the miter limit. here's a little demo in which you can set miterlimit dynamically and see how this effects the shapes on the canvas. the blue l...
Drawing shapes with canvas - Web APIs
uld be drawn. radius is self-explanatory. the startangle and endangle parameters define the start and end points of the arc in radians, along the curve of the circle. these are measured from the x axis. the anticlockwise parameter is a boolean value which, when true, draws the arc anticlockwise; otherwise, the arc is drawn clockwise. 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 following example is a little more complex than the ones we've seen above. it draws 12 different arcs all with different angles and fills. the two for loops are for looping through the rows and columns of arcs. for each arc, we start a new path by calling beginpath(). in the...
...th different angles and fills. the two for loops are for looping through the rows and columns of arcs. for each arc, we start a new path by calling beginpath(). in the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in real life. the x and y coordinates should be clear enough. radius and startangle are fixed. 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. the statement for the clockwise parameter results in the first and third row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. finally, the if statement makes the top half stroked arcs and the bottom half filled arcs. note: th...
Element.animate() - Web APIs
ration in your options list: composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. for instance with transform, a translatex(-200px) would not override an earlier rotate(20
deg) value but result in translatex(-200px) rotate(20
deg). accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumulate or replace (see above). defaults to replace. r...
... duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360
deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied. specifications specification status comment web animations level 2the definition of 'keyframeanimationoptions.iterationcomposite' in that specification. draft added the iterationcomposite option. web animationsthe definition of 'animate()' in that specificati...
GeolocationCoordinates - Web APIs
the geolocationcoordinates interface represents the position and altitude of the device on earth, as well as the accuracy with which these properties are calculated. properties the geolocationcoordinates interface doesn't inherit any properties. 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. geolocationcoordinates.altitude read only secure context returns a double representing the position's altitude in meters, relative to sea level. this value can be null if the implementation cannot provide the data. geolocationcoordinates.accuracy read only secure con...
... of the latitude and longitude properties, expressed in meters. geolocationcoordinates.altitudeaccuracy read only secure context returns a double representing the accuracy of the altitude expressed in meters. this value can be null. geolocationcoordinates.heading read only secure context returns a double representing the direction towards which the device is facing. 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). if speed is 0, heading is nan. if the device is unable to provide heading information, this value is null. geolocationcoordinates.speed read only secure context returns a double representing t...
GlobalEventHandlers.ontransitioncancel - Web APIs
let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } box.onclick = function() { box.style.displ...
... let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } box.onclick = function() { box.style.display = 'none'; timeout = wind...
Intersection Observer API - Web APIs
lement isn't a descendant of a scrollable element, the viewport. to watch for intersection relative to the root element, specify null. whether you're using the viewport or some other element as the root, the api works the same way, executing a callback function you provide whenever the visibility of the target element changes so that it crosses desired amounts of intersection with the root. the
degree of intersection between the target element and its root is the intersection ratio. this is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0. creating an intersection observer create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the ot...
...lity which cross these thresholds. for example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer. 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. you can see if the target currently intersects the root by looking at the entry's isintersecting property; if its value is true, the target is at least partially intersecting the root element or document. this lets you determine whether the entry represents a transitio...
PointerEvent.tiltX - Web APIs
the range of values is -90 to 90, inclusive, where a positive value is a tilt to the right. for devices that do not support this property, the value is 0. example this example illustrates simple accessing of the tiltx and tilty properties. ...
...the range of values is -90 to 90, inclusive, where a positive value is a tilt to the right. for devices that do not support this property, the value is 0. example this example illustrates simple accessing of the tiltx and tilty properties. ...
PointerEvent.tiltY - Web APIs
the range of values is -90 to 90, inclusive, where a positive value is a tilt towards the user. for devices that do not support this property, the value is 0. example this example illustrates simple accessing of the tiltx and tilty properties. ...
...the range of values is -90 to 90, inclusive, where a positive value is a tilt towards the user. for devices that do not support this property, the value is 0. example this example illustrates simple accessing of the tiltx and tilty properties. ...
PointerEvent.twist - Web APIs
the value is in the range 0 to 359, inclusive. for devices that do not report twist, the value is 0. example when a pointerdown event is fired, different functions are called depending on the value of the event's twist property. ...
...the value is in the range 0 to 359, inclusive. for devices that do not report twist, the value is 0. example when a pointerdown event is fired, different functions are called depending on the value of the event's twist property. ...
PointerEvent - Web APIs
he range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively. pointerevent.tangentialpressure read only the normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control. 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. pen stylus) axis and the y axis. 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) axis and the x axis. pointerevent.twist read only the clockwise rotation of the pointer...
... y–z plane and the plane containing both the pointer (e.g. pen stylus) axis and the y axis. 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) axis and the x axis. pointerevent.twist read only the clockwise rotation of the pointer (e.g. pen stylus) around its major axis in
degrees, with a value in the range 0 to 359. pointerevent.pointertype read only indicates the device type that caused the event (mouse, pen, touch, etc.) pointerevent.isprimary read only indicates if the pointer represents the primary pointer of this pointer type. methods pointerevent.getcoalescedevents() returns a sequence of all pointerevent instances that were coalesced into the disp...
Pointer events - Web APIs
normalized pressure of the pointer input in the range of 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively. tangentialpressure the normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control. ...
...ely. tangentialpressure the normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control. 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. pen stylus) axis and the y axis. 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) axis and the x axis. twist the clockwise rotation of the pointer (e.g. pen stylus) around its major axis in
degrees, with a value in the range 0 to 359. pointertype indicates the device type that caused the event (mouse, pen, touch, etc.) isprimary indicates if the pointer rep...
Touch.radiusX - Web APIs
ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis indicated by the touch point's touch.rotationangle. likewise, the touch.radiusy property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by touch.rotationangle. the touch.rotationangle is the angle (in
degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center. the following simple code snippet, registers a single handler for the touchstart, touchmove and touchend events. when the src element is touched, the element's width and height will be calculate based on the touch point's radiusx and radiusy values and the element will then be rotated using the touch po...
... ...
Touch.rotationAngle - Web APIs
summary returns the rotation angle, in
degrees, of the contact area ellipse defined by touch.radiusx and touch.radiusy. the value may be between 0 and 90. together, these three values describe an ellipse that approximates the size and shape of the area of contact between the user and the screen. this may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example. note: this attribute has not been formally standardized. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. ...
...ontact between a fingertip and the screen or a small area representing the tip of a stylus, for example. note: this attribute has not been formally standardized. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. 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. example the touch.radiusx example includes an example of this property's usage. specifications specification status comment touch events – level 2 draft non-stable version. ...
WebGL best practices - Web APIs
r you will not work for them! avoid invalidating fbo attachment bindings almost any change to an fbo's attachment bindings will invalidate its framebuffer completeness. set up your hot framebuffers ahead of time. in firefox, setting the pref webgl.perf.max-warnings to -1 in about:config will enable performance warnings that include warnings about fb completeness invalidations. 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. for unchanged vaos, browsers can cache the fetch limits, whereas when vaos change, browsers must revalidate and recalculate limits. the overhead for this is relatively low, but re-using vaos means fewer vertexattribpointer calls...
...ng into a smaller backbuffer, and upscaling the result. consider reducing canvas.width and height and keeping canvas.style.width and height at a constant size. batch draw calls (prefer fewer-but-larger draw calls) fewer, larger draw operations will generally improve performance. if you have 1000 sprites to paint, try to do it as a single drawarrays() or drawelements() 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. these triangles are effectively skipped, which lets you start a new triangle strip unattached to your previous one, without having to split into multiple draw calls.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
hus enlarging that content when rendered to the view. there are differences between this and an optical zoom effect, but the result is generally close enough to get the job done. ...
...nd far clipping plane distances: function createperspectivematrix(viewport, fov
degrees, 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, fov
degrees, from
degrees to radians and computing the aspect ratio of the xrviewport specified by the viewport parameter, this function uses the glmatrix library's mat4.perspective() function to compute the perspective matrix. the perspective matrix encapsulates the field of view (technically, this is the vertical field of view), aspect ratio, and the near and far clipping planes within the 4x4 matrix ...
Window.screenX - Web APIs
also in the code we include a snippet that detects whether screenleft is supported, and if n...
... also in the code we include a snippet that detects whether screenleft is supported, and if not, polyfills...
Window.screenY - Web APIs
also in the code we include a snippet that detects whether screenleft is supported, and if n...
... also in the code we include a snippet that detects whether screenleft is supported, and if not, polyfills...
XRPose.emulatedPosition - Web APIs
ased on other sources. syntax let emulated = xrpose.emulatedposition; value a boolean which is true if the pose's position is computed based on estimates or is derived from sources other than direct sensor data. if the position is precisely gbased on direct sensor inputs, the value is false. usage notes there are two basic categories of xr tracking systems. a basic xr headset provides three
degrees of freedom (3dof), tracking the pitch, yaw, and roll of the user's head. no information is available about movement forward, backward, or to the sides. any such data is taken from other sources, such as keyboard or mouse inputs or game controllers. as such, the position is considered to be emulated, so the emulatedposition property is true. contrariwise, xr devices which can also track movem...
... roll of the user's head. no information is available about movement forward, backward, or to the sides. any such data is taken from other sources, such as keyboard or mouse inputs or game controllers. as such, the position is considered to be emulated, so the emulatedposition property is true. 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. the same notion applies not just to the user's head, but to any object. a hand controller that can directly report its position would have a value of false for this property as well. if its position is computed as an offset from another obje...
Web applications and ARIA FAQ - Accessibility
es where the browser supports an html5 tag that also exists in aria, there is usually no need to also add aria roles and states to the element. aria includes many roles, states, and properties that aren't available in html5, so these will continue to be useful to developers who use html5. for more information, steve faulkner has written a good overview of the relationship between html5 and aria.
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: <!doct...
...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> ... and here is the javascript code that will ensure the progress bar still works in older browsers: var progressbar = document.getelementbyid("progress-bar"); // check to see if the browser supports the html5 <pr...
font-style - CSS: Cascading Style Sheets
for a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-style descriptor to explicitly specify the font face's style. the values for the css descriptor is same as that of its corresponding font property. syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 30
deg; font-style: oblique 30
deg 50
deg; values normal selects the normal version of the font-family. italic specifies that font-face is an italicized version of the normal font. oblique specifies that the font-face is an artificially sloped version of the normal font. oblique with angle selects a font classified as oblique, and additionally specifies an angle for the slant of the text. ...
... on the other hand, if a true italicized version of the font family exists, we can include it in the src descriptor and specify the font style as italic, so that it is clear that the font is italicized. true italics use different glyphs and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality. these fonts are...
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
such as 1024 or -55. an integer may be preceded by a + or - symbol, with no space between the symbol and the integer. numbers a <number> represents a real number, which may or may not have a decimal point with a fractional component, for example 0.255, 128 or -1.2. numbers may also be preceded by a + or - symbol. dimensions a <dimension> is a <number> with a unit attached to it, for example 45
deg, 100ms, or 10px. the attached unit identifier is case insensitive. there is never a space or any other characters between a the number and the unit identifier: i.e. 1 cm is not valid. css uses dimensions to specify: <length> (distance units) <angle> <time> <frequency> <resolution> these are all covered in subsections below. distance units where a distance unit, also known as a length,...
...1in when including a length value, if the length is 0, the unit identifier is not required. otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between. 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. grad gradians there are 400 gradians in a full circle. rad radians there are 2π radians in a full circle. turn turns there is 1 turn in a full circle. time units time values are represented by the type <time>. when including a time value, the unit identifier -- the s or ms -- is required. i...
<color> - CSS: Cascading Style Sheets
hen you want multiple shades of a single hue). syntax hsl colors are expressed through the functional hsl() and hsla() notations. note: as of css colors level 4, hsla() is an alias for hsl(). in browsers that implement the level 4 standard, they accept the same parameters and behave the same way. 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=0
deg=360
deg, with the other colors spread around the circle, so green=120
deg, blue=240
deg, etc. as an <angle>, it implicitly wraps around such that -120
deg=240
deg, 480
deg=120
deg, -1turn=1turn, etc. s (saturation) and ...
... 1) /* full opaque green */ /* whitespace syntax */ rgba(51 170 51 / 0.4) /* 40% opaque green */ rgba(51 170 51 / 40%) /* 40% opaque green */ /* functional syntax with floats value */ rgba(255, 0, 153.6, 1) rgba(1e2, .5e1, .5e0, +.25e2%) hsl syntax variations /* these examples all specify the same color: a lavender. */ hsl(270,60%,70%) hsl(270, 60%, 70%) hsl(270 60% 70%) hsl(270
deg, 60%, 70%) hsl(4.71239rad, 60%, 70%) hsl(.75turn, 60%, 70%) /* these examples all specify the same color: a lavender that is 15% opaque. */ hsl(270, 60%, 50%, .15) hsl(270, 60%, 50%, 15%) hsl(270 60% 50% / .15) hsl(270 60% 50% / 15%) fully saturated colors notation description live hsl(0, 100%, 50%) red hsl(30, 100%, 50%) orange hsl(...
offset-path - CSS: Cascading Style Sheets
the offset-path css property specifies a motion path for an element to follow and defines the element's positioning within the parent container or svg coordinate system. ...
... url() references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path. <basic-shape> specifies a css shape including circ...
offset - CSS: Cascading Style Sheets
required for animating an element along a defined path. note: early versions of the spec called this property motion. ...
... offset-distance offset-path offset-position offset-rotate syntax /* offset position */ offset: auto; offset: 10px 30px; offset: none; /* offset path */ offset: ray(45
deg 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) 30
deg; offset: url(circle.svg) 50px 20
deg; /* including offset anchor */ offset: ray(45
deg 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 elementsinhe...
rotate - CSS: Cascading Style Sheets
the rotate css property allows you to specify rotation transforms individually and independently of the transform property. this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property. syntax /* keyword values */ rotate: none; /* angle value */ rotate: 90
deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, or z axis name plus angle */ rotate: x 90
deg; rotate: y 0.25turn; rotate: z 1.57rad; /* vector plus angle value */ rotate: 1 1 1 90
deg; values angle value an <angle> specifying the angle to rotate the affected element through, around the z axis. equivalent to a rotate() (2d rotation) function. x, y, or z axis name plus angle value the name of the axis you want to rotate the affected eleme...
... editor's draft initial definition. ...
shape-image-threshold - CSS: Cascading Style Sheets
the same gradient is also used as the image from which the shape is derived for establishing the float area, using the shape-outside p...
...the same gradient is also used as the image from which the shape is derived for establishing the float area, using the shape-outside property. the 20% opacity threshold for treating gradient pixels as part of the shap...
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, 30
deg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30
deg) 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...
...eg) 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(180
deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90
deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90
deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90
deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90
deg) translatez(50px); } result mat...
rotate3d() - CSS: Cascading Style Sheets
sformation that rotates an element around a fixed axis in 3d space, without deforming it. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. in 3d space, rotations have three
degrees of liberty, which together describe a single axis of rotation. the axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the transform-origin property). if, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the user agent will normalize it internally. a non-normalizable vector, such as the null vec...
...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, 60
deg); 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, 192
deg); 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, 30
deg); } .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(180
deg) translatez(50px); } .right { background: ...
...ems: 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(180
deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90
deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90
deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90
deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90
deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.geteleme...
<input type="date"> - HTML: Hypertext Markup Language
upport time and date+time input. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the input ui generally varies from browser to browser; see browser compatibility for further details. in unsupported browsers, the control
degrades gracefully to <input type="text">. among browsers with custom interfaces for selecting dates are chrome and opera, whose data control looks like so: the edge date control looks like: and the firefox date control looks like this: value a domstring representing a date in yyyy-mm-dd format, or empty events change and input supported common attributes ...
...ata directly to your server. if your server fails to validate the received data, disaster could strike with data that is badly-formatted, too large, of the wrong type, etc. handling browser support as mentioned, the major problem with date inputs at the time of writing is browser support. 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. the second problem is the more serious one; with date input supported, the value is normalized to the format yyyy-mm-dd. but with a text input, the browser has no recognition of what format the date should be in, and there are many different formats in which p...
<input type="datetime-local"> - HTML: Hypertext Markup Language
repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations. in other browsers, these
degrade gracefully to simple <input type="text"> controls. the control is intended to simply represent a local date and time, not necessarily the user's local date and time. in other words, an implementation should allow any valid combination of year, month, day, hour, and minute - even if such a combination is invalid in the user's local time zone (such as times within a daylight saving time spring...
...ta which is too large, is of the wrong type, and so forth). handling browser support as mentioned above, the major problem with using date inputs at the time of writing is browser support — only chrome/opera and edge support it on desktop, and most modern browsers on mobile. 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. the second problem is the most serious; as we mentioned earlier, with a datetime-local input, the actual value is always normalized to the format yyyy-mm-ddthh:mm. with a text input on the other hand, by default the browser has no recognition...
<input type="month"> - HTML: Hypertext Markup Language
bute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile browser versions — having usable implementations. 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. for those of you using a browser that doesn't support month, the screenshot below shows what it looks like in chrome and opera. clicking the down arrow on the right hand side brings up a date picker that lets you select the month and year. the m...
... of the wrong type, and so forth). handling browser support as mentioned above, the major problem with using date inputs at the time of writing is that many major browsers don't yet implement them all; only chrome/opera and edge support it on desktop, and most modern browsers on mobile. 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. the second problem is the more serious of the two. as mentioned earlier, with a month input the actual value is always normalized to the format yyyy-mm. on the other hand, in its default configuration, a text input has no idea what format the...
<input type="time"> - HTML: Hypertext Markup Language
<input> elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds). the control's user interface will vary from browser to browser. 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">. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. appearance chrome and opera in chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating ...
...dling browser support as mentioned above, safari and a few other, less common, browsers don't yet support time inputs natively. in general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. 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. the second problem is the more serious; as mentioned previously, time inputs' values are always normalized to the format hh:mm or hh:mm:ss. with a text input, on the other hand, by default the browser has no idea of what format the time shoul...
<input type="week"> - HTML: Hypertext Markup Language
red in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time. in non-supporting browsers, the control
degrades gracefully to function identically to <input type="text">. in chrome/opera the week control provides slots to fill in week and year values, a pop-up calendar interface to select them more visually, and an "x" button to clear the control's value. the edge week control is somewhat more elaborate, opening up week and year pickers with sliding reels. value a domstring represen...
...rowser support: safari and firefox don't support it on desktop, and old versions of ie don't support it. mobile platforms such as android and ios make really good use of such input types, providing specialist ui controls that make it really easy to select values in a touchscreen environment. 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. the second problem is the more serious. as mentioned earlier, with a week input the actual value is always normalized to the format yyyy-www. when the browser falls back to a generic text input, there's nothing to guide the user toward correc...
Protocol upgrade mechanism - HTTP
onnection header field. 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. see upgrading to a websocket connection for more details. if the server decides to upgrade the connection, it sends back a 101 switching protocols response status with an upgrade header that specifies the protocol(s) being switched to. if it does not (or cannot) upgrade the connection, it ignores the upgrade header and sends back a regular response (for ...
...istry. extensions which take parameters do so by using semicolon delineation. for example: sec-websocket-extensions: superspeed, colormode; depth=16 sec-websocket-key provides information to the server which is needed in order to confirm that the client is entitled to request an upgrade to websocket. this header can be used when insecure (http) clients wish to upgrade, in order to offer some
degree of protection against abuse. the value of the key is computed using an algorithm defined in the websocket specification, so this does not provide security. instead, it helps to prevent non-websocket clients from inadvertently, or through misuse, requesting a websocket connection. in essence, then, this key simply confirms that "yes, i really mean to open a websocket connection." this header i...
d - SVG: Scalable Vector Graphics
bézier curve. command parameters notes a (rx ry angle large-arc-flag sweep-flag x y)+ draw an arc curve from the current point to the coordinate x,y. 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. large-arc-flag allows to chose one of the large arc (1) or small arc (0), sweep-flag allows to chose one of the clockwise turning arc (1) or anticlockwise turning arc (0) the c...
...weep-flag dx dy)+ draw an arc curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. 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. large-arc-flag allows a choice of large arc (1) or small arc (0), sweep-flag allows a choice of a clockwise arc (1) or anticlockwise arc (0) the current point gets its x and y ...
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="-65
deg"> <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...
...outwards from both ends. <angle> this value indicates that the marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis. note: for example, if a value of 45 is given, then the marker's positive x-axis would be pointing down and right in the shape's coordinate system. <number> this value indicates an angle in
degrees. the marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis. specifications specification status comment scalable vector graphics (svg) 2the definition of 'orient' in that specification. candidate recommendation added the auto-start-reverse value and simplified the descriptions...
rotate - SVG: Scalable Vector Graphics
e auto and auto-reverse values allow the animated element's rotation to change dynamically as it travels along the path. if the value of rotate is auto, the element turns to align its right-hand side in the current direction of motion. if the value is auto-reverse, it turns its left-hand side in the current direction of motion. setting rotate's value to a number specifies a constant rotation, in
degrees, that does not change with the animation. the default value of 0 keeps the animated element in its original orientation. examples svg <svg width="400" height="120" viewbox="0 0 480 120" xmlns="http://www.w3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" ...
...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...
Content type - SVG: Scalable Vector Graphics
svg makes use of a number of data types. this article lists these types along with their syntax and descriptions of what they're used for. angle <angle> angles are specified in one of two ways. 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. for properties defined in css2, an angle unit identifier must be provided. for angle values in svg-specific properties and their corresponding presentation attributes, the angle unit identifier is optional. if not provided, the angle value is assumed to be in
degrees. in presentation attributes for all properties, whether defined in svg1.1 or in css2, the angle identifier, i...
... in the svg dom, <angle> values are represented using svgangle or svganimatedangle objects. ...
Basic Transformations - SVG: Scalable Vector Graphics
mple will render a rectangle, translated to the point (30,40) instead of (0,0). if the second value is not given, it is assumed to be 0. rotation rotating an element is quite a common task. 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. multiple transformations transformations can be concatenated easily just by separating them with spaces. for example, translate() and rotate() are common used transformations. <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 examp...
...transformations can be concatenated easily just by separating them with spaces. for example, translate() and rotate() are common used transformations. <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. skewing to make a rhombus out of our rectangle, the skewx() and skewy() transformations are available. each one takes an angle that determines how far the element will be skewed. scaling scale() changes the size of an element. it takes two numbers, the first being the x scale factor and the second being the y scale factor. the factors are taken as the ratio of the transformed dimension...
Paths - SVG: Scalable Vector Graphics
fill-opacity="0.5"/> </svg> the example shows a <path> element that goes diagonally across the page. at its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). in the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. for the second arc, though, the x-axis-rotation is set to -45
degrees. this rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image. for the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse. in a slightly modified example the two ell...
...was just barely expanded. the four different paths mentioned above are determined by the next two parameter flags. as mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. the first parameter is the large-arc-flag. 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. the second parameter is the sweep-flag. it determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles will be travelled around. the example below shows all four possible combinations, along with the two circles for each case. <svg...
XUL Migration Guide - Archive of obsolete content
gh-level api reference. if the supported apis do what you need, they're the best option: you get the benefits of compatibility across firefox releases and of the sdk's security model. apis like ui and panel are very generic and with the right content can be used to replace many specific xul elements. 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. some limitations are the result of intentional design choices. for example, action buttons appear by default in the main firefox toolbar (although users may relocate them by toolbar customization) because it makes for a better user experience for add-ons to expose their interfaces in a consistent way. in such cases it's worth considering changing your user inter...
Index - Archive of obsolete content
is crucial to creating maintainable, cross browser web content. this article reviews several approaches to browser detection, their usefulness in specific circumstances to arrive at a common sense approach to browser detection. 2080 browser feature detection compatibility, cross-browser_development, dom, gecko, obsolete, web development an experimental approach to discovering
degree of support for standards. 2081 css archive, css, obsolete, overview obsolete css features 2082 -moz-binding css, css property, css:mozilla extensions, deprecated, mozilla, non-standard, reference, xbl, xul, recipe:css-property the -moz-binding css property is used by mozilla-based applications to attach an xbl binding to a dom element. 2083 ...
Modularization techniques - Archive of obsolete content
e b inherits from nsisupports, performing a queryinterface() on it may not return the same interface. this important behavior is the only reliable mechanism for determining whether interfaces a and b are implemented by the same object.for simple objects, maintaining these behaviors is easy. aggregation, as we will see later, can complicate things. on the other hand, objects are allowed a certain
degree of flexibility in their implementations of addref() and release(). they can maintain a single reference count for the entire object, or individual reference counts for each interface. a static object would chose to ignore reference counts altogether. however, a poor implementation of these functions can have negative results, such as memory leaks or inadvertent access of freed objects. factor...
New Security Model for Web Services - Archive of obsolete content
larity, which domains are to be accessible or permitted from which other domains, but this requires extensive management which at best is quite error-prone for the end user and easily opens holes in a firewall that do not directly hurt the user who reconfigured his browser to try to access some external service but hurts the owners of other services behind the firewall. signed scripts a certain
degree of additional trust may be lent to a script by having the author digitally sign it. but signed scripts have not really caught on as they require certificates do not change the basic problem that some completely-unknown party has written a script that might now have access to internal resources. asking the user where the sandbox cannot otherwise determine whether the executing script should b...
The new nsString class implementation (1999) - Archive of obsolete content
,prbool aignorecase); }; nsstring the nsstring class is still with us as a subclass (wrapper) of nsstrimpl. by default, nsstrings use a 2-byte ucs2 character storage model. the nsstring class is very lightweight since it gets its functionality from the nsstrimpl static library. 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. also note that the new nsstring interface mimics fully the interface in the existing nsstring class found in mozilla/base/src/nsstring.h. nsautostring we still offer an nsautostring that provides its own stack based buffer. this very useful class allows programmers to take advantage of the nsstring/nsstrimpl implementati...
URIs and URLs - Archive of obsolete content
more about the specific syntax of the urls for that scheme. to stay almost generic necko contains three parsers for the main classes of standard urls. which one has to be used is defined by the implementation of nsiprotocolhandler for the scheme in question. the three main classes are: authority the urls have an authority segment, like "http". noauthority these urls have no or a
degenerated authority segment, like the "file" scheme. also this parser can identify drives if possible depending on the platform. standard it is not known if an authority segment exists or not, less syntax correction can be applied in this case. noteable differences necko does not support certain deprecated forms of relative urls, based on the following part of rfc 2396: if the sche...
Venkman Introduction - Archive of obsolete content
avascript code. venkman's keyboard shortcuts are the same as leading visual debugging environments, and gdb users should be familiar with venkman's /break, /step, /next, /finish, /frame, and /where commands. on windows, the javascript debugger compares favorably with visual interdev and other large web development tools. 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. starting the debugger the javascript debugger is automatically pre-installed in mozilla 1.x but must be installed separately in firefox and other gecko-based products, such as thunderbird and netscape 7.x. fortunately, the xpinstall technology makes it possible to install new application modules in firefox by just clicking a...
XUL Events - Archive of obsolete content
ges. domnoderemoved this event is sent when a node is removed from an element. 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. see mutation events for more details and mutation observers for a more efficient alternative. common xul events event description broadcast ...
Introduction to XUL - Archive of obsolete content
layout engine. the term "cross-platform ui" is somewhat misleading. ui designers will be able to create ui descriptions which will work on multiple platforms. but proper ui descriptions which take into account various platforms' differing ideas about proper placement of such things as dialog buttons will require some platform-specific work. a single xul specification can only cross-platform to a
degree. ui designers and build engineers will need to maintain separate, platform-specific versions of at least some xul documents. "xptoolkit" is rather synonymous with xpfe. though the former term seems more concrete than the other, and therefore is not an exact replacement, no one is completely certain why we have both. "xul" already introduced, is an application of xml used to describe the layo...
The Joy of XUL - Archive of obsolete content
ntation ("skin" consisting of css and images), and language-specific text labels ("locale" consisting of dtds and string bundles in .properties files). the layout and appearance of xul applications can be altered independently of the application definition and logic. further, the application can be localized for different languages and regions independently of its logic or presentation. this
degree of separation results in applications that are easier to maintain by programmers and readily customized by designers and language translators. the work flow of these interdependent activities is more easily coordinated than with html-based web applications, with less impact on the overall stability and quality of the system. easy customization, localization, or branding another...
Open and Save Dialogs - Archive of obsolete content
ilepicker); fp.init(window, "select a file", nsifilepicker.modeopen); first, a new file picker object is created and stored in the variable 'fp'. the 'init' function is used to initialize the file picker. this function takes three arguments, the window that is opening the dialog, the title of the dialog and the mode. the mode here is modeopen which is used for an open dialog. you can also use mo
degetfolder and modesave for the other two modes. these modes are constants of the nsifilepicker interface. default directory and filters there are two features you can set of the dialog before it is displayed. the first is the default directory that is displayed when the dialog is opened. the second is a filter that indicates the list of file types that are displayed in the dialog. this would ...
Gecko Compatibility Handbook - Archive of obsolete content
e the relevant w3c recommendations for html, css, and the dom existed. these earlier, non-standards based browsers differed in several ways from gecko: these browsers use proprietary (non-standard) html, css, and javascript. internet explorer 4 and netscape navigator 4 share support for a large part of the html 3.2 standard and basic javascript. while they support the css 1 standard to some
degree, the implementations are not complete and have non-standard features added. neither internet explorer 4 or netscape navigator 4 support the w3 dom. instead, each browser supports its own proprietary api for manipulating the content, style and position of html elements in a web page. in addition, internet explorer 4 and netscape navigator 4 use completely different methods of embedding third-...
2006-10-27 - Archive of obsolete content
ly. on the same day paul reed replied to cédric's posting by stating that they would like to close the directory before major releases but that unfortunately it wasn't that easy to do because the files must be readable, so mirrors can get the bits to serve them on the release day. 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. urk responded to the posting on the same day by mentioning that they should discuss this with the fedora project and see what their solution to the problem is. urk stated that currently fedora has their release 6 directory locked out with access forbidden via web and ftp while the mirrors are mirroring for the release tuesday. meetings there were no meetings thi...
Digital Signatures - Archive of obsolete content
for a discussion of the way this works, see "introduction to public-key cryptography." the significance of a digital signature is comparable to the significance of a handwritten signature. once you have signed some data, it is difficult to deny doing so later, assuming that the private key has not been compromised or out of the owner's control. 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. in some situations, a digital signature may be as legally binding as a handwritten signature. original document information author(s): ella deon lackey last updated date: 2012 copyright information: © 2012 red hat, inc. link: red hat certificate system common criteria certif...
Encryption and Decryption - Archive of obsolete content
cryption key can be calculated from the decryption key and vice versa. with most symmetric algorithms, the same key is used for both encryption and decryption, as shown in figure 1. implementations of symmetric-key encryption can be highly efficient, so that users do not experience any significant time delay as a result of the encryption and decryption. symmetric-key encryption also provides a
degree of authentication, since information encrypted with one symmetric key cannot be decrypted with any other symmetric key. thus, as long as the symmetric key is kept secret by the two parties using it to encrypt communications, each party can be sure that it is communicating with the other as long as the decrypted messages continue to make sense. symmetric-key encryption is effective only if the...
Introduction to Public-Key Cryptography - Archive of obsolete content
e strong evidence that the person identified by that certificate did indeed send that message. similarly, a digital signature on an html form, combined with a certificate that identifies the signer, can provide evidence, after the fact, that the person identified by that certificate did agree to the contents of the form. 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. client authentication is an essential element of network security within most intranets or extranets. the sections that follow contrast two forms of client authentication: password-based authentication. almost all server software permits client authenticat...
Introduction to SSL - Archive of obsolete content
server's list of trusted cas. this confirmation might be important if the server, for example, is a bank sending confidential financial information to a customer and wants to check the recipient's identity. 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. confidentiality is important for both parties to any private transaction. in addition, all data sent over an encrypted ssl connection is protected with a mechanism for detecting tampering-that is, for automatically determining whether the data has been altered in transit. the ssl protocol includes two sub-protocols: the ssl record protocol and the ssl handshake protocol. ...
TCP/IP Security - Archive of obsolete content
r layers perform functions of which the higher layers are not aware. security controls that are available at each layer include: application layer. separate controls must be established for each application. for example, if an application needs to protect sensitive data sent across networks, the application may need to be modified to provide this protection. 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. designing a cryptographically sound application protocol is very difficult, and implementing it properly is even more challenging, so creating new application layer security controls is likely to create vulnerabilities. also, so...
Browser Feature Detection - Archive of obsolete content
among the methods of browser detection, many people recommend using the existence of specific properties or methods in a browser's dom to detect the browser type and whether it supports a given operation. this test takes that idea to the extreme and tests a large number of properties and methods to determine the level of support a browser has for particular standards and reports a rating as the percentage of names the browser defines. this article has generally never been more than a way to show off firefox web compatibility, rather than something truly informative in a broader sense. therefore, given that it's also badly out of date, it's been archived. ...
XForms Custom Controls - Archive of obsolete content
om knowledge will certainly not hurt. but even if you are only comfortable with a couple of these technologies, we hope that the possibilities outlined below will inspire you to learn more where you need to. implementation status the framework we use in the mozilla xforms processor is very much a "work in progress". please keep in mind that just about everything we mention here may change to some
degree as we continue to work on it. work has just started in the w3c xforms working group to investigate the custom control issue, so eventually (hopefully?) there will be an "official" and common way to customize your form's user interface across all xforms processors. why do you need this you will probably find that your need for customization will fall into one of the following categories: custo...
Archived open Web documentation - Archive of obsolete content
es. rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross browser web content. this article reviews several approaches to browser detection, their usefulness in specific circumstances to arrive at a common sense approach to browser detection. 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. e4x ...
Audio for Web games - Game development
y y y opera mobile 46+ y y y y safari (ios) 7+ y/n* n n y android browser 67+ y y y y there's a full compatibility chart for mobile and desktop htmlmediaelement support here. * note: safari 7 has issues playing if you try and start all pieces of audio simultaneously. if you stagger playback you may have some
degree of success. note: concurrent audio playback is tested using our concurrent audio test example, where we attempt to play three pieces of audio at the same time using the standard audio api. note: simple autoplay functionality is tested with our autoplay test example. note: volume changeability is tested with our volume test example. mobile workarounds although mobile browsers can pr...
Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
dern functionality, while polyfills are often used to add missing features with javascript. special notice should be taken of accessibility. acceptable alternatives should be provided where possible. progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents. graceful
degradation is related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement. in reality both approaches are valid and can often complement one another. learn more general knowledge progressive enhancement on wikipedia ...
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. the advantage of a modular system is that one can reason the parts independently learn more modularity on wikipedia ...
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
instead.</p> </video> the controls attribute provides play/pause buttons, seek bar, etc. — the basic controls you'd expect from a media player. it looks like so in firefox and chrome: however, there are problems with these controls: they are not keyboard accessible in most browsers, i.e. you can't tab between the controls inside the native player. opera and chrome provide this to some
degree, but it still isn't ideal. different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide. to remedy this, we can create our own custom controls. let's look at how. creating custom audio and video controls html5 video and audio share an api — html media element — which allow...
Advanced styling effects - Learn web development
is blur() — this function can be passed a value to indicate how much the image should be blurred. the second is grayscale(); by using a percentage we are setting how much color we want to be removed. play with the percentage and pixel parameters in the live example to see how the images change. you could also swap the values for some others. try contrast(200%), invert(100%) or hue-rotate(20
deg) on the live example below. take a look at the mdn page for filter for many other options you could try. you can apply filters to any element and not just images. some of the filter options available do very similar things to other css features, for example drop-shadow() works in a very similar way and gives a similar effect to box-shadow or text-shadow. the really nice thing about filters howe...
Backgrounds and borders - Learn web development
n how to style the background and border of boxes. styling backgrounds in css the css background property is a shorthand for a number of background longhand properties that we will meet in this lesson. if you discover a complex background property in a stylesheet, it might seem a little hard to understand as so many values can be passed in at once. .box { background: linear-gradient(105
deg, 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. background colors the background-color property ...
CSS values and units - Learn web development
are all classed as numeric: data type description <integer> an <integer> is a whole number such as 1024 or -55. <number> a <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2. <dimension> a <dimension> is a <number> with a unit attached to it, for example 45
deg, 5s, or 10px. <dimension> is an umbrella category that includes the <length>, <angle>, <time>, and <resolution> types. <percentage> a <percentage> represents a fraction of some other value, for example 50%. percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length. lengths the numeric type you will com...
CSS FAQ - Learn web development
xperimental features, instead implementing those features only on nightly browser versions or similar. if you need to use prefixes in your work, you are advised to write your code in a way that uses the prefixed versions first, but then includes a non-prefixed standard version afterwards so it can automatically override the prefixed versions where supported. for example: -ms-transform: rotate(90
deg); -webkit-transform: rotate(90
deg); transform: rotate(90
deg); 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. note: see the mozilla css extensions page for more information on the mozilla-prefixed css properties. how does z-index relate to positioning? the z-index pro...
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(90
deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0
deg, #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(90
deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0
deg, #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(90
deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0
deg, #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(90
deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0
deg, #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
box-sizing : border-box; /* we need extra room for the down arrow we will add */ padding : .1em 2.5em .2em .5em; width : 10em; /* 100px */ border : .2em solid #000; border-radius : .4em; box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* the first declaration is for browsers that do not support linear gradients. */ background : #f0f0f0; background : linear-gradient(0
deg, #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. if the content overflows, we display an ellipsis */ display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow: ellipsis; vertical-align: top; } we don't need an extra element...
Other form controls - Learn web development
see an implementation example of this on the <input type="range"> reference page. and browsers that support <datalist>s and <input type="color"> should display a customized palette of colors as the default, while still making the full color palette available. in this case, different browsers behave differently from case to case, so consider such uses as progressive enhancement, and ensure they
degrade gracefully. other form features there are a few other form features that are not as obvious as the ones we have already mentioned, but still useful in some situations, so we thought it would be worth giving them a brief mention. note: you can find the examples from this section on github as other-examples.html (see it live also). meters and progress bars meters and progress bars are vi...
Styling web forms - Learn web development
your form should now look like this: note: if your example does not work quite like you expected and you want to check it against our version, you can find it on github — see it running live (also see the source code).
The web and web standards - Learn web development
studies. cross-browser compatibility is the practice of trying to make sure your webpage works across as many devices as possible. 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). it also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures. responsive web design is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. an obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more com...
Responsive images - Learn web development
le and serve the appropriate size depending upon the device accessing the data on the website. to make things more complicated, some devices have high resolution screens that need larger images than you might expect to display nicely. this is essentially the same problem, but in a slightly different context. 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. however, they aren't suitable for all image types. vector images are great for simple graphics, patterns, interface elements, etc., but it starts to get very complex to create a vector-based image with the kind of detail that you'd find in say, a photo. raster image formats such as jpegs are more suited ...
Choosing the right approach - Learn web development
if you need to run your animation at a slower framerate, you'll need to use setinterval() or recursive settimeout(). browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for an...
General asynchronous programming concepts - Learn web development
e, we have two buttons: a "fill canvas" button that when clicked fills the available <canvas> with 1 million blue circles. a "click me for alert" button that when clicked shows an alert message. 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. the first operation blocks the second one until it has fin...
Object building practice - Learn web development
e what color we want the shape to be — we set it to our ball's color property. next, we use the arc() method to trace an arc shape on the paper. its parameters are: the x and y position of the arc's center — we are specifying the ball's x and y properties. the radius of the arc — in this case, the ball's size property. 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). that gives us a complete circle. if you had specified only 1 * pi, you'd get a semi-circle (180
degrees). last of all, we use the fill() method, which basically states "finish drawing the path we star...
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(-45
deg); 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
such incompatibility problems persisted well into the early 2000s, as old browsers were still being used and still needed supporting. this is one of the main reasons why libraries like jquery came into existence — to abstract away differences in ...
Links and Resources
ibility resource site) at university of toronto. dive into accessibility - another great, easy-to-understand resource on accessible website authoring. color contrast analyzer by juicy studio: an excellent tool for checking if webpages use/have sufficient color contrast, sufficient brightness difference by comparing background and foreground (text) colors. this tool will measure accurately the
degree of legibility of a webpage. ...
Eclipse CDT
d in the code assistance section above. second, eclipse cdt's indexer needs an object directory because virtually all mozilla source files include header files (directly or indirectly) that have been copied to or generated in the object directory. 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. how can i open eclipse for multiple trees at once? to be able to open more than one workspace at a time, you currently need to launch a separate eclipse process for each workspace. on mac, create a script called something like open-my-workspace.py, give it the following contents, replacing the bold paths as appropriate, and ...
Eclipse CDT Manual Setup
..."/"leaving directory..." lines), and the build must not be silenced/quietened. 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. these requirements aren't a very good fit with the typical mozilla developer's wish to minimize build times, implying parallelized, silenced builds. the consequences of the above observations are this: it is strongly recommended that you invoke your normal (re)builds from the command line, ex...
HTMLIFrameElement.sendTouchEvent()
s pixels. y an array of numbers representing the y position of each touch point relative to the browser <iframe>'s visible area in css pixels. rx an array of numbers representing the x radius of each touch point in css pixels. ry an array of numbers representing the y radius of each touch point in css pixels. rotationangles an array of numbers representing the angle of each touch point in
degrees. forces an array of numbers representing the intensity of each touch in the range 0–1. count the number of touches that should be performed. modifiers a number representing a key pressed at the same time the mouse button was clicked: 1 : alt 2 : ctrl 4 : shift 8 : meta 16 : alt gr 32 : caps lock 64 : fn 128 : num lock 256 : scroll 512 : symbol lock 10...
JS_NewContext
ntext. otherwise it returns null. for more details about contexts, see jscontext. for sample code that creates and initializes a jscontext, see jsapi user guide. the stackchunksize parameter does not control the javascript stack size. (the jsapi does not provide a way to adjust the stack depth limit.) passing a large number for stackchunksize is a mistake. in a debug build, large chunk sizes can
degrade performance dramatically. the usual value of 8192 is recommended. the application must call js_destroycontext when it is done using the context. before a jsruntime may be destroyed, all the jscontexts associated with it must be destroyed. the new jscontext initially has no global object. the new jscontext is associated with the calling thread. no other thread may use it or destroy it. se...
Handling Mozilla Security Bugs
urity vulnerabilities are different from other bugs, because their consequences are potentially so severe: users' private information (including financial information) could be exposed, users' data could be destroyed, and users' systems could be used as platforms for attacks on other systems. 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. the mozilla project is a public software development project, and thus we have an inherent bias towards openness. in particular, we understand and acknowledge the concerns of those who believe that all information about security vulnerabilities should be publicly disclosed as soon as it is known, so that users may take immediate step...
Index
ace reference lets the observer know when a batch operation in places is about to start or end. the observer can then pause updates or events until the batch is completed, so that it won't handle the large number of updates that are about to be notified. 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). 800 nsinavhistoryresulttreeviewer developing mozilla, extensions, interfaces, interfaces:scriptable, places, xpcom, xpcom api reference, xpcom interface reference this object removes itself from the associated result when the tree is detached; this prevents circular references. it's important to be aware of this—if ...
IAccessibleText
t represent an existing character its bounding box is defined in relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text(). 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. [propget] hresult characterextents( [in] long offset, [in] enum ia2coordinatetype coordtype, [out] long x, [out] long y, [out] long width, [out] long height ); parameters offset index of the character for which to return its bounding box. the valid range is 0..length. coordtype specifies if the coordinates are relative to the screen or to the parent window. x x coordinate of...
mozIRegistry
s and it isn't really under my jurisdiction, so there's nothing about it here right now. in the future, i'll either add the information about it or at least put in a link to it's documentation. higher-level application components this box represents all the potential user's of the core registry/repository interfaces. your code (most likely) falls in this box. these components will, to various
degrees, need to use other components to do their thing. those other components presumably implement particular xpcom interfaces. so how do you go about creating an object that can provide the interface your component requires? one way is to create instances by using nsrepository. nsrepository is essentially a mapping from xpcom clsids to class factories, plus code to manage that mapping, including f...
nsIDOMSimpleGestureEvent
aarg); attributes attribute type description delta double the delta value indicating how far the gesture moved. for update events, this indicates the movement since the previous update; for the mozrotategesture and mozmagnifygesture events, this indicates the total movement that occurred while the event was being processed. the value is specified in
degrees for rotation events (where positive values indicate clockwise rotation and negative values indicate counter-clockwise rotation). for magnify gestures, the units are implementation-specific; however, positive values indicate zooming in, and negative values indicate zooming out. read only. note: on mac os x, the units used for magnification gestures by the underlying operating system api a...
nsIDOMWindowUtils
h of the touches. axs an array of x offsets in css pixels for each touch to be sent to the window. ays an array of y offsets in css pixels for each touch to be sent to the window. arxs an array of touch x radii in css pixels for each touch to be sent to the window. arys an array of touch y radii in css pixels for each touch to be sent to the window. arotationangles an array of angles in
degrees for each touch's touch oval. aforces an array of forces (from 0 to 1) indicating the amount of pressure applied at each touch point. count the number of touches; this is the number of entries in each of the preceding arrays. amodifiers modifiers pressed. using constants defined in nsidomnsevent. obsolete since gecko 15.0 using constants defined as modifier_*. aignorerootscrollframes...
nsIFilePicker
) index of the filter which is currently selected in the file picker dialog. set this to choose a particular filter to be selected by default. constants mode constants these constants are used to specify the type of file picker to create when calling init(). constant value description modeopen 0 load a file. modesave 1 save a file. mo
degetfolder 2 select a folder/directory. modeopenmultiple 3 load multiple files. return value constants these values are returned by show() or passed as an argument to open()'s callback, indicating the result of the file picker activity. constant value description returnok 0 the file picker dialog was closed by the user hitting 'ok' ...
nsIMsgIdentity
y are only used for migration and backward compatability. use dobcc and dobcclist instead. bccothers boolean bcclist astring dobcc boolean dobcclist astring draftfolder astring stationeryfolder astring showsavemsgdlg boolean directoryserver astring overri
deglobalpref boolean autocompletetomydomain boolean if this is false, don't append the user's domain to an autocomplete address with no matches. valid boolean determines if the ui should use this identity and the wizard uses this to determine whether or not to ask the user to complete all the fields. smtpserverkey astring the preferred smtp server ...
nsINavHistoryResultObserver
methods batching() lets the observer know when a batch operation in places is about to start or end. the observer can then pause updates or events until the batch is completed, so that it won't handle the large number of updates that are about to be notified. 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). void batching( in boolean atogglemode ); parameters atogglemode specify true to start batch mode or false to finish the batch. containerclosed() obsolete since gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) called when a container node's state changes from opened to closed. note: this method wa...
nsIObserver
d once you're ready to start observing (for example a window's load event). observer = new myobserver(); destruction - this should be fired once you're done observing (for example a window's unload event). failure to do so may result in memory leaks. observer.unregister(); "get everything" - note that "*" is an acceptable value (be careful with this, because it observes many events, and can
degrade performance). observer.register("*"); see also nsiobserverservice observer_notifications ...
nsIScreen
ption brightness_dim 0 the screen is fully dimmed (that is, off). brightness_full 1 the screen is at full brightness. brightness_levels 2 the number of different brightness levels. 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. methods getavailrect() returns a rectangle indicating the portion of the screen that is available for use. note: this returns a rectangle representing the region of...
nsIZipWriter
but note that if dir doesnt exist zw.open throws problems //var path = fp.file.path; //returns c:\users\3k2kyc1\documents\prefs\prefs var xpi = fu.file(dir.path + '\\' + dir.
Reference Manual
; // error: |operator delete| is private ns_release(foo); // error: |release| is private of course, the most important safety feature provided by nscomptr is that it addrefs and releases automatically at the appropriate times. casting never use old-style c/c++ casts on an nscomptr. an old-style cast is guaranteed to compile, even if it can't do the right thing. old-style casts
degenerate into the equivalent of reinterpret_cast if no conversion is defined. such a cast can easily by-pass nscomptrs machinery, causing leaks, type mismatches, and other calamities. // old-style c/c++ casts by-pass |nscomptr|s machinery and cause leaks... nsresult rv; nscomptr<nsifoo> foo = ...; // ... rv = getfoo( (nsifoo**)&foo ); rv = getfoo( &(nsifoo*)foo ); // ...
Autoconfiguration in Thunderbird
the goal of autoconfiguration is to make it very easy for users to configure the connection of thunderbird to their email servers. in many cases, people should be able to download and install thunderbird, enter their real name, email address and password in the account setup wizard and have a fully functioning mail client and get and send their mail as securely as possible. ...
Plug-in Basics - Plugins
for the function in the reference section describes the difference. plug-ins and platform independence a plug-in is a dynamic code module that is native to the specific platform on which the browser is running. it is a code library, rather than an application or an applet, and runs only from the browser. 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. this guide notes platform-specific differences in coding for the ms windows, mac os x, and unix platforms. you can use the plug-in api to write plug-ins that are media type driven and provide high performance by taking advantage of native code. plug-ins give you an opportunity to seamlessly integrate platform-dependent cod...
BaseAudioContext.createWaveShaper() - Web APIs
instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ... function makedistortioncurve(amount) { var k = typeof amount === 'number' ? 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; }; ... distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status comment web audio apithe definition of 'createwaveshaper()'...
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
lue or can't be converted into the specified unit, a domexception is raised. syntax var floatvalue = cssprimitivevalue.getfloatvalue(unit); parameters unittype an unsigned short representing the code for the unit type, in which the value should be returned. valid values are: constant description css_cm the value is a <length> in centimeters. css_
deg the value is an <angle> in
degrees. css_dimension the value is a <number> with an unknown dimension. css_ems the value is a <length> in em units. css_exs the value is a <length> in ex units. css_grad the value is an <angle> in grads. css_hz the value is a <frequency> in hertz. the value can be obtained by using th...
CSSPrimitiveValue.primitiveType - Web APIs
description css_attr the value is an attr() function. the value can be obtained by using the getstringvalue() method. css_cm the value is a <length> in centimeters. the value can be obtained by using the getfloatvalue() method. css_counter the value is a counter or counters function. the value can be obtained by using the getcountervalue() method. css_
deg the value is an <angle> in
degrees. the value can be obtained by using the getfloatvalue() method. css_dimension the value is a <number> with an unknown dimension. the value can be obtained by using the getfloatvalue() method. css_ems the value is a <length> in em units. the value can be obtained by using the getfloatvalue() method. css_exs the value is a <l...
CSSPrimitiveValue.setFloatValue() - Web APIs
e float value, the value will be unchanged and a domexception will be raised. syntax cssprimitivevalue.setfloatvalue(unittype, floatvalue); parameters unittype an unsigned short representing the code for the unit type, in which the value should be returned. valid values are: constant description css_cm the value is a <length> in centimeters. css_
deg the value is an <angle> in
degrees. css_dimension the value is a <number> with an unknown dimension. css_ems the value is a <length> in em units. css_exs the value is a <length> in ex units. css_grad the value is an <angle> in grads. css_hz the value is a <frequency> in hertz. the value can be obtained by using th...
CSSUnparsedValue.CSSUnparsedValue() - Web APIs
the cssunparsedvalue() constructor creates a new cssunparsedvalue object which represents property values that reference custom properties. syntax var cssunparsedvalue = new cssunparsedvalue(members) parameters members an array whose values must be either a usvstring or a cssvariablereferencevalue. examples let value = new cssunparsedvalue( ['4
deg'] ), values = new cssunparsedvalue( ['1em', '#445566', '-45px'] ); console.log( value ); // cssunparsedvalue {0: "4
deg", 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. working draft initial definition. ...
CanvasRenderingContext2D.filter - Web APIs
e bigger the blur, so the shadow becomes bigger and lighter. negative values are not allowed. <color>: see <color> values for possible keywords and notations. grayscale() a css <percentage>. converts the drawing to grayscale. a value of 100% is completely grayscale. a value of 0% leaves the drawing unchanged. hue-rotate() a css <angle>. applies a hue rotation on the drawing. a value of 0
deg leaves the input unchanged. invert() a css <percentage>. inverts the drawing. a value of 100% means complete inversion. a value of 0% leaves the drawing unchanged. opacity() a css <percentage>. applies transparency to the drawing. a value of 0% means completely transparent. a value of 100% leaves the drawing unchanged. saturate() a css <percentage>. saturates the drawing. a value of 0% mean...
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...
Transformations - Web APIs
er of radians. the rotation center point is always the canvas origin. to change the center point, we will need to move the canvas by using the translate() method. a rotate example in this example, we'll use the rotate() method to first rotate a rectangle from the canvas origin and then from the center of the rectangle itself with the help of translate(). reminder: angles are in radians, not
degrees. to convert, we are using: radians = (math.pi/180)*
degrees. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30, 100, 100); ctx.rotate((math.pi / 180) * 25); // grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(30, 30, 100, 10...
Crypto.getRandomValues() - Web APIs
ns this method can throw an exception under error conditions. domexception (name: quotaexceedederror) the requested length exceeds 65,536 bytes. usage notes don't use getrandomvalues() to generate encryption keys. instead, use the generatekey() method. there are a few reasons for this; for example, getrandomvalues() is not guaranteed to be running in a secure context. there is no minimum
degree of entropy mandated by the web cryptography specification. user agents are instead urged to provide the best entropy they can when generating random numbers, using a well-defined, efficient pseudorandom number generator built into the user agent itself, but seeded with values taken from an external source of pseudorandom numbers, such as a platform-specific random number function, the unix /de...
DOMMatrix - Web APIs
specified origin. also returns itself. by default, the scaling factor is 1 for all three axes, and the origin is (0, 0, 0). returns itself. dommatrix.scale3dself() modifies the matrix by applying the specified scaling factor to all three axes, centered on the given origin. returns itself. dommatrix.rotateself() modifies the matrix by rotating itself around each axis by the specified number of
degrees. returns itself. dommatrix.rotateaxisangleself() modifies the matrix by rotating it by the specified angle around the given vector. returns itself. dommatrix.rotatefromvectorself() modifies the matrix by rotating it by the angle between the specified vector and (1, 0). returns itself. dommatrix.setmatrixvalue() replaces the contents of the matrix with the matrix described by the specifi...
DOMMatrixReadOnly - Web APIs
these have the default value of 1. the original matrix is not modified. dommatrixreadonly.rotateaxisangle() returns a new dommatrix created by rotating the source matrix by the given angle around the specified vector. the original matrix is not modified. dommatrixreadonly.rotate() returns a new dommatrix created by rotating the source matrix around each of its axes by the specified number of
degrees. the original matrix is not altered. dommatrixreadonly.rotatefromvector() returns a new dommatrix created by rotating the source matrix by the angle between the specified vector and (1, 0). the original matrix is not modified. dommatrixreadonly.scale() returns a new dommatrix created by scaling the source matrix by the amount specified for each axis, centered on the given origin. by defau...
DeviceMotionEvent.DeviceMotionEvent() - Web APIs
e on the three axis x, y and z. acceleration is expressed in m/s2. accelerationincludinggravity: an object giving the acceleration of the device on the three axis x, y and z with the effect of gravity. acceleration is expressed in m/s2. rotationrate: an object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. rotation rate is express in
degrees per seconds. interval: a number representing the interval of time, in milliseconds, at which data is obtained from the device. specifications not part of any specifications. ...
DeviceMotionEvent.rotationRate - Web APIs
note: if the hardware isn't capable of providing this information, this property returns null. syntax var rotationrate = devicemotionevent.rotationrate; value the rotationrate property is a read only object describing the rotation rates of the device around each of its axes: alpha the rate at which the device is rotating about its z axis; that is, being twisted about a line perpendicular to the screen. beta the rate at which the device is rotating about its x axis; that is, front to back. gamma the rate at which the device is rotating about its y axis; that is, side to side. ...
DeviceMotionEvent - Web APIs
d in m/s2. devicemotionevent.accelerationincludinggravityread only an object giving the acceleration of the device on the three axis x, y and z with the effect of gravity. acceleration is expressed in m/s2. devicemotionevent.rotationrateread only an object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. rotation rate is expressed in
degrees per seconds. devicemotionevent.intervalread only a number representing the interval of time, in milliseconds, at which data is obtained from the device. example window.addeventlistener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); }); specifications specification status comment deviceorientation event specificationthe defi...
DeviceMotionEventRotationRate - Web APIs
a devicemotioneventrotationrate object provides information about the rate at which the device is rotating around all three axes. 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. specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventrotationrate' in that specification. editor's draft ...
DeviceOrientationEvent.DeviceOrientationEvent() - Web APIs
vent constructor creates a new deviceorientationevent. syntax var deviceorientationevent = new deviceorientationevent(type[, options]) parameters type either "deviceorientation" or "deviceorientationabsolute". if the later, then options.absolute should be true. 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. this represents a front to back motion of the device. gamma: a number representing the motion of the device around the y axis, express in
degrees with values ranging from -90 to 90. this represents a left to right motion of the...
Introduction to the DOM - Web APIs
nodename # dom property of document object p_list = doc.getelementsbytagname("para") for more information on what technologies are involved in writing javascript on the web, see javascript technologies overview. accessing the dom you don't have to do anything special to begin using the dom. 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. when you create a script–whether it's inline in a <script> element or included in the web page by means of a script loading instruction–you can immediately begin using the api for the document or wi...
EffectTiming.direction - Web APIs
tarts by going from the end of the animation sequence toward the beginning the first iteration, then goes forward during the second, and so forth. 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(10
deg)' }, { transform: 'rotate(-40
deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'direction' in that specification. working draft editor's draft. ...
EffectTiming.fill - Web APIs
orizontally inside its container. note that there's no rotation applied. javascript content now let's check out the javascript. first we'll define the two objects that describe the keyframes and the timing configuration to use, then we'll actually see the code that triggers and runs the animation when the "animatebutton" button is clicked. var boxrotationkeyframes = [ { transform: "rotate(-90
deg)" }, { transform: "rotate(90
deg)" } ]; the boxrotationkeyframes object is an array of keyframes, each describing the state of the affected element at a point in the animation process. in this case, we have just two keyframes; the first defines what affect is applied to the element immediately after the animation first begins to play, and the second defines the effect applied to the element in...
EffectTiming.iterations - Web APIs
t was made to set the value of this property to a negative number or nan. the property's value is left unchanged. 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(10
deg)' }, { transform: 'rotate(-40
deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'iterations' in that specification. working draft editor's draft. ...
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. specifications specification status comment geolocation apithe definition of 'geolocationcoordinates.latitude' in that specification. recommendation initial specification. ...
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. together with a domtimestamp indicating a time of measurement, the geolocationcoordinates object is part of the geolocationposition interface, which is the object type returned by geolocation api functions that obtain and return a geographical position. 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. the value is defined by the world geodetic system 1984 specification (wgs 84). note: the zero meridian (also known as the prim...
GestureEvent - Web APIs
tion regarding multi-touch gestures. events using this interface include gesturestart, gesturechange, and gestureend. gestureevent derives from uievent, which in turn derives from event. constructor gestureevent() creates a gestureevent object. properties this interface also inherits properties of its parents, uievent and event. gestureevent.rotation read only change in rotation (in
degrees) since the event's beginning. positive values indicate clockwise rotation; negative values indicate anticlockwise rotation. initial value: 0.0 gestureevent.scale read only distance between two digits since the event's beginning. expressed as a floating-point multiple of the initial distance between the digits at the beginning of the gesture. values below 1.0 indicate an inward pinch (zoom ...
GlobalEventHandlers.ontransitionend - Web APIs
let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } result the resulting content looks like this: notice what happens wh...
HTMLElement: transitioncancel event - Web APIs
in this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. for the transition end event to fire, stay hovered over the transition until the transition ends. const message = ...
HTMLElement: transitionend event - Web APIs
in this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. for the transition end event to fire, stay hovered over the transition until the transition ends. const message = ...
HTMLElement: transitionrun event - Web APIs
const el = document.queryselector('.transition'); const message = document.queryselector('.message'); el.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { ...
HTMLElement: transitionstart event - Web APIs
const transition = document.queryselector('.transition'); const message = document.queryselector('.message'); transition.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); transition.addeventlistener('transiti...
In depth: Microtasks and the JavaScript runtime environment - Web APIs
main code to continue to run while waiting for the results of a request. however, code running at a more fundamental level—such as code comprising a library or framework—may need a way to schedule code to be run at a safe time while still executing on the main thread, independent of the results of any single request or task. 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. the microtask queue has been around for a while, but it's historiclaly been used only internally in order to drive things like promises. the addition of queuemicrotask(), exposing it to web developers, creates a unified queue for microtasks ...
IntersectionObserver - Web APIs
with an ancestor element or with a top-level document's viewport. the ancestor element or viewport is referred to as the root. when an intersectionobserver is created, it's configured to watch for given ratios of visibility within the root. 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. constructor intersectionobserver.intersectionobserver() creates a new intersectionobserver object which will execute a specified callback function when it detects that a target element's visibility has crossed one or more thresholds. properties intersectionobserver.root read only the element or d...
KeyboardEvent.code - Web APIs
oke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be using. shipsize contains the size of the ship the player is moving around, for convenience. position is used to track the position of the ship within the play field. 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). finally, spaceship is set to refer to the element with the id "spaceship", which is the svg polygon representing the ship the player controls. let shipsize = { width: 30, height: 30 }; let position = { x...
KeyframeEffect.setKeyframes() - Web APIs
responding list will be repeated as needed. implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360
deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied. attributes keyframes may specify property-value pairs for any of the animatable css properties. the property names are specified using camel-case so for example background-color becomes backgroundcolor and background-position-x becomes backgroundpositionx. shorthand values such as margin are also ...
KeyframeEffectOptions - Web APIs
gins and ends. properties composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. for instance with transform, a translatex(-200px) would not override an earlier rotate(20
deg) value but result in translatex(-200px) rotate(20
deg). accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumulate or replace (see above). defaults to replace. p...
MouseEvent.mozInputSource - Web APIs
user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mouseevent.mozinputsource read-only property on mouseevent provides information indicating the type of device that generated the event. 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). syntax var source = instanceofmouseevent.mozinputsource; return value the following values are possible. constant name value desription moz_source_unknown 0 the input device is unknown. moz_source_mouse 1 the event was generated by a mouse (or mouse-like device). ...
MouseEvent - Web APIs
ad of using this deprecated (and non-standard) property, you should instead use pointerevent and look at its pressure property. mouseevent.mozinputsource read only the type of device that generated the event (one of the moz_source_* constants listed below). 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.webkitforce read only the amount of pressure applied when clicking mouseevent.x read only alias for mouseevent.clientx. mouseevent.y read only alias for mouseevent.clienty constants mouseevent.webkit_force_at_mouse_down read only minimum force necessary for a normal click mouseeven...
MutationEvent - Web APIs
s replacement: the story so far / existing points of consensus" post to public-webapps). mutation observers are the proposed replacement for mutation events in dom4. they are expected to be included in firefox 14 and chrome 18. the practical reasons to avoid the mutation events are performance issues and cross-browser support. 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!). moreover, removing the listeners does not reverse the damage. the performance effect is limited to the documents that have the mutation event listeners. cross-browser support these events are not implemented consistently across different browsers, for example: ie prior to version 9 didn't...
PannerNode - Web APIs
lue are set and retrieved using different syntaxes, since they're stored as audioparam values. retrieval is done by accessing, for example, pannernode.positionx. while setting the same property is done with pannernode.positionx.value. this is why these values are not marked read only, which is how they appear in the webidl. 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. pannernode.coneoutergain a double value describing the amount of volume reduction outside the cone defined by the coneouterangle attribute.
performance.now() - Web APIs
text, but this was changed. in shared or service workers, the value in the worker might be higher than that of the main context because that window can be created after those workers. it's important to keep in mind that to mitigate potential security threats such as spectre, browsers typically round the returned value by some amount in order to be less predictable. this inherently introduces a
degree of inaccuracy by limiting the resolution or precision of the timer. for example, firefox rounds the returned time to 1 millisecond increments. the precision of the returned value is subject to change if/when the security concerns are alleviated through other means. syntax t = performance.now(); example const t0 = performance.now(); dosomething(); const t1 = performance.now(); console.log(...
Pointer Lock API - Web APIs
if you lock one iframe, you cannot try to lock another iframe and transfer the target to it; pointer lock will error out. to avoid this limitation, first unlock the locked iframe, and then lock the other. while iframes work by default, "sandboxed" iframes block pointer lock. the ability to avo...
RTCRtpSendParameters - Web APIs
the webrtc api's rtcrtpsendparameters dictionary is used to specify the parameters for an rtcrtpsender when calling its setparameters() method. properties in addition to the properties below, rtcrtpsendparameters inherits the properties from the rtcrtpparameters interface.
degradationpreference specifies the preferred way the webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtc
degradationpreference enumerated string type, and the default is balanced. encodings an array of rtcrtpencodingparameters objects, each specifying the parameters for a single codec that could be used to encode the track's media. priority a string from the rtcprioritytype enumerated type which indicates the encoding's priority. the d...
RTCRtpSender.setParameters() - Web APIs
s well as the encoding configuration for a specific media track on the webrtc connection. syntax var promise = rtcrtpsender.setparameters(parameters) parameters parameters an object conforming with the rtcrtpsendparameters dictionary, specifying options for the rtcrtpsender; these include potential codecs that could be use for encoding the sender's track. 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 rtc
degradationpreference enumerated string type, and the default is balanced. encodings an array of rtcrtpencodingparameters objects, each specifying the parameters for a single codec that could be used to encode the tra...
SVGAngle - Web APIs
ct operates in one of two modes: reflect the base value of a reflected animatable attribute (being exposed through the baseval member of an svganimatedangle), be detached, which is the case for svgangle objects created with svgsvgelement.createsvgangle(). constants svg_angletype_unknown some unknown type of value. svg_angletype_unspecified a unitless <number> interpreted as a value in
degrees. svg_angletype_
deg an <angle> with a
deg unit. svg_angletype_rad an <angle> with a rad unit. svg_angletype_grad an <angle> with a grad unit. properties unittype the type of the value as specified by one of the svg_angletype_* constants defined on this interface. value the value as a floating point value, in user units. setting this attribute will cause valueinspecifiedunits an...
SVGSVGElement - Web APIs
bars. svgsvgelement.createsvgnumber() creates an svgnumber object outside of any document trees. the object is initialized to 0. svgsvgelement.createsvglength() creates an svglength object outside of any document trees. the object is initialized to 0 user units. svgsvgelement.createsvgangle() creates an svgangle object outside of any document trees. the object is initialized to a value of 0
degrees (unitless). svgsvgelement.createsvgpoint() creates an svgpoint object outside of any document trees. the object is initialized to the point (0,0) in the user coordinate system. svgsvgelement.createsvgmatrix() creates an svgmatrix object outside of any document trees. the object is initialized to the identity matrix. svgsvgelement.createsvgrect() creates an svgrect object outside of any ...
Sensor APIs - Web APIs
nsor api is insufficient for feature detection. the existence of an actual sensor must be confirmed as well. this is where defensive programming is needed. defensive programming requires three strategies. checking for thrown errors when instantiating a sensor object. listening for errors thrown during its use. handling the errors gracefully so that the user experience is enhanced rather than
degraded. the code example below illustrates these principles. the try...catch block catches errors thrown during sensor instantiation. it implements a handler for sensor.onerror to catch errors thrown during use. the only time anything is shown to the user is when permissions need to be requested and when the sensor type isn't supported by the device. if a feature policy blocks use of a feature ...
Using Service Workers - Web APIs
fox 44, when appcache is used to provide offline support for a page a warning message is now displayed in the console advising developers to use service workers instead (bug 1204581.) service workers should finally fix these issues. 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. using a service worker you can easily set an app up to use cached assets first, thus providing a default experience even when offline, before then getting more data from the network (commonly known as offline first). this is already available with native apps, which is one of the main reasons native apps are often chosen over w...
SpeechRecognition: nomatch event - Web APIs
the nomatch event of the web speech api is fired when the speech recognition service returns a final result with no significant recognition. this may involve some
degree of recognition, which doesn't meet or exceed the confidence threshold. bubbles no cancelable no interface speechrecognitionevent event handler property onnomatch examples you can use the nomatch event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('nomatch', function() { console.log('speech not recognized'); }); or use the onnomatch event handler property: recognition.onnomatch = function() { console.log('speech not recognized'); } specifications speci...
SpeechRecognition.onnomatch - Web APIs
note: the onnomatch handler does not yet work properly in firefox — the speech recognition system always returns a positive match, and then guesses at what item in the grammar it found. ...
SpeechRecognition - Web APIs
ished capturing audio. also available via the onaudioend property. end fired when the speech recognition service has disconnected. also available via the onend property. error fired when a speech recognition error occurs. also available via the onerror property. nomatch fired when the speech recognition service returns a final result with no significant recognition. this may involve some
degree of recognition, which doesn't meet or exceed the confidence threshold. also available via the onnomatch property. result fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app. also available via the onresult property. soundstart fired when any sound — recognisable speech or not — h...
Touch() - Web APIs
and defaulting to 0, of type float, that is the the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by rotationangle, in css pixels of the same scale as screeny; 0 if no value is known. the value must not be negative. "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. the value must be greater than or equal to 0 and less than 90. if the ellipse described by radiusx and radiusy is circular, then rotationangle has no effect. the user agent may use 0 as the value in this case, or it may use any other value in the allowed range. (for example, the u...
Touch - Web APIs
turns the x radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screenx. touch.radiusy read only returns the y radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screeny. 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. touch.forceread only returns the amount of pressure being applied to the surface by the user, as a float between 0.0 (no pressure) and 1.0 (maximum pressure). methods this interface has no method and no parent, and doesn't inheri...
TouchEvent - Web APIs
a touchlist of all the touch objects that are both currently in contact with the touch surface and were also started on the same element that is the target of the event. touchevent.touches read only a touchlist of all the touch objects representing all current points of contact with the surface, regardless of target or changed status. touchevent.rotation read only change in rotation (in
degrees) since the event's beginning. positive values indicate clockwise rotation; negative values indicate anticlockwise rotation. initial value: 0.0 touchevent.scale read only distance between two digits since the event's beginning. expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. values below 1.0 indicate an inward pinch (zoom ou...
Using Touch Events - Web APIs
h additional implementations are in progress. some new features regarding a touch point's touch area - the area of contact between the user and the touch surface - are in the process of being standardized. the new features include the x and y radius of the ellipse that most closely circumscribes a touch point's contact area with the touch surface. 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. what about pointer events? the introduction of new input mechanisms results in increased application complexity to handle various input events, such as key events, mouse events, pen/stylus events, and touch events. to help address this...
WaveShaperNode.curve - Web APIs
instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ... function makedistortioncurve(amount) { var k = typeof amount === 'number' ? 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; }; ... distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status comment web audio apithe definition of 'curve' in that spec...
WaveShaperNode.oversample - Web APIs
instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ... function makedistortioncurve(amount) { var k = typeof amount === 'number' ? 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; }; ... distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status comment web audio apithe definition of 'oversample' in that...
WaveShaperNode - Web APIs
instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ... function makedistortioncurve(amount) { var k = typeof amount === 'number' ? 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; }; ... distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status comment web audio apithe definition of 'waveshapernode' in ...
Adding 2D content to a WebGL context - Web APIs
g gl.enable(gl.depth_test); // enable depth testing gl.depthfunc(gl.lequal); // near things obscure far things // clear the canvas before we start drawing on it. gl.clear(gl.color_buffer_bit | gl.depth_buffer_bit); // create a perspective matrix, a special matrix that is // used to simulate the distortion of perspective in a camera. // our field of view is 45
degrees, with a width/height // ratio that matches the display size of the canvas // and we only want to see objects between 0.1 units // and 100 units away from the camera. const fieldofview = 45 * math.pi / 180; // in radians const aspect = gl.canvas.clientwidth / gl.canvas.clientheight; const znear = 0.1; const zfar = 100.0; const projectionmatrix = mat4.create(); // note: gl...
Lighting a WebXR setting - Web APIs
on, we provide some basic mixed reality lighting guidelines to consider as you construct, render, and light your scene. while some of these are also useful in any other 3d setting, most are specific to virtual reality and, in some cases even more so, to augmented reality. 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. obviously, there are exceptions to this guideline, such as when your scene represents an otherworldly or alien setting, or when your goal is to create an unsettling visual effect. realism in light source placement when possible, you should try to make your virtual light sources correspond to object...
Rendering and the WebXR frame animation callback - Web APIs
seconds. in some cases, this saves time later. in other situations, you need the time in milliseconds, so you wouldn't need to change anything. with the elapsed time in hand, your rendering code has the means to compute just how much every moving object has moved in the time elapsed. for instance, if an object is rotating, you might apply the rotation like this: const xdeltarotation = (xrotation
degreespersecond * radians_per_
degree) * deltatime; const ydeltarotation = (yrotation
degreespersecond * radians_per_
degree) * deltatime; const zdeltarotation = (zrotation
degreespersecond * 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. without this, the shape would rotate by the given a...
Starting up and shutting down a WebXR session - Web APIs
vr api. the polyfill is maintained alongside the specification, and is kept up to date with the specification. additionally, it is updated to maintain compatibility with browsers as their support for webxr and other technologies related to it and to the implementation of the polyfill change over time. 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 api emulator extension the mozilla webxr team has created a webxr api emulator browser extension, compatible with both firefox and chrome, which emulates the webxr api, simulating a variety of compatible devices such as the htc vive, the oculus go and oculus quest, samsung gear, and google cardboard. with the...
WebXR Device API - Web APIs
ough their headset or other appropriate display device. webxr device api concepts and usage example webxr hardware setup while the older webvr api was designed solely to support virtual reality (vr), webxr provides support for both vr and augmented reality (ar) on the web. support for ar functionality is added by the webxr augmented reality module. a typical xr device can have either 3 or 6
degrees of freedom and might or might not have an external positional sensor. the equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like. accessing the webxr api to gain access to the webxr api within the context of a given window, use the navigator.xr property, which returns an xrsystem ob...
Keyframe Formats - Web APIs
responding list will be repeated as needed. implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360
deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied. attributes keyframes may specify property-value pairs for any of the animatable css properties. the property names are specified using camel-case so for example background-color becomes backgroundcolor and background-position-x becomes backgroundpositionx. shorthand values such as margin are also ...
Window.orientation - Web APIs
its only possible values are -90, 0, 90, and 180. positive values are clockwise; negative values are counterclockwise. ...
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 - Web APIs
ultiple pages. window.mozanimationstarttime the time in milliseconds since epoch at which the current animation cycle began. use animation.starttime instead. window.mozpaintcount returns the number of times the current document has been rendered to the screen in this window. this can be used to compute rendering performance. window.orientation read only returns the orientation in
degrees (in 90
degree increments) of the viewport relative to the device's natural orientation. window.pkcs11 formerly provided access to install and remove pkcs11 modules. window.returnvalue the return value to be returned to the function that called window.showmodaldialog() to display the window as a modal dialog. methods this interface inherits methods from the eventtarget interface and...
XRHandedness - Web APIs
if a gripspace is present, that means the input source is a hand-held device of some sort, so it should be rendered visibly if possible. if gripspace is non-null, the function proceeds to get the pose for the gripspace transformed into the current r...
XRInputSource.handedness - Web APIs
if a gripspace is present, that means the input source is a hand-held device of some sort, so it should be rendered visibly if possible. if gripspace is non-null, the function proceeds to get the pose for the gripspace transformed into the current r...
XRPermissionDescriptor.optionalFeatures - Web APIs
urned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six
degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor...
XRPermissionDescriptor.requiredFeatures - Web APIs
urned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six
degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor...
XRPermissionStatus.granted - Web APIs
urned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six
degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor...
XRPose - Web APIs
, and motion for further details and an example with thorough explanations of what's going on. properties xrpose.transform read only a xrrigidtransform which provides the position and orientation of the pose relative to the base xrspace. 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). if any component of the transform is computed or created artificially (such as by using mouse or keyboard controls to move through space), this value is instead true, indicating that the transform is in part emulated i...
XRReferenceSpace - Web APIs
urned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six
degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor...
XRReferenceSpaceType - Web APIs
urned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six
degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor...
XRSession.environmentBlendMode - Web APIs
this is used to differentiate between fully-immersive vr sessions and ar sessions which render over a pass-through image of the real world, possibly partially transparently. the value is a domstring which contains one of the values defined by the xrenvironmentblendmode enumerated type. important: environmentblendmode is part of the webxr augmented reality module, which has not yet reached a stable state. you should use caution when using its features. ...
XRSession.requestReferenceSpace() - Web APIs
urned object. xrboundedreferencespace local a tracking space whose native origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six
degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor...
ARIA - Accessibility
note that aria was invented after html4, so does not validate in html4 or its xhtml variants. however, the accessibility gains it provides far outweigh any technical invalidity. in html5, all aria attributes validate. the new landmark elements (<main>, <header>, <nav> etc) have built-in aria roles, so there is no need to duplicate them. support like any other web technology, there are varying
degrees of support for aria. support is based on the operating system and browser being used, as well as the kind of assistive technology interfacing with it. in addition, the version of the operating system, browser, and assistive technology are contributing factors. older software versions may not support certain aria roles, have only partial support, or misreport its functionality. it is also imp...
Accessibility FAQ - Accessibility
for interface design with xul, follow the accessibile xul authoring guidelines (archive.org). i'm interested in helping promote the fine accessibility features that firefox provides, what can i do? join the firefox accessibility adv...
font-stretch - CSS: Cascading Style Sheets
rmal 100% semi-expanded 112.5% expanded 125% extra-expanded 150% ultra-expanded 200% variable fonts most fonts have a particular width which corresponds to one of the keyterm values. 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. for this, percentage ranges are useful. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying glyph widths. accessibility concerns people with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a low contrast color ratio. mdn understanding wcag...
font-weight - CSS: Cascading Style Sheets
semi bold (demi bold) 700 bold 800 extra bold (ultra bold) 900 black (heavy) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping. 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. for truetype or opentype variable fonts, the "wght" variation is used to implement varying weights. accessibility concerns people experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (thin/hairline) or 200 (extra light), especially if the font has a low contrast color ratio. mdn understanding wcag, guid...
@font-face - CSS: Cascading Style Sheets
font-stretch a font-stretch value. 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-stretch: 50% 200%; font-style a font-style value. 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 20
deg 50
deg; font-weight a font-weight value. 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-weight: 100 400; font-variant a font-variant value. font-feature-settings allows control over advanced typographic features in opentype fonts. font-variation-settings allows low-level control over opentyp...
@media - CSS: Cascading Style Sheets
etect if the user has requested that the system minimize the amount of animation or motion it uses. 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. because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. a browser might also offer additional measures in this area; for example, if firefox's "resist fingerprinting" setting is enabled, many media queries report default values rather than val...
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
am, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 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. therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in supporting browsers. conclusion css3 columns are a layout primitive that will help web developers make the best use of screen real estate. imaginative developers may find many ...
Layout and the containing block - CSS: Cascading Style Sheets
ding: 5%; /* == (5vw - (width of vertical scrollbar)) */ background: cyan; } example 5 in this example, the paragraph's position is absolute, so its containing block is <section>, which is the nearest ancestor with a transform property that isn't none. ...
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:default
deg<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
background at least partially transparent. /* 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(120
deg); 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. <filter-function-list>...
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(180
deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90
deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90
deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90
deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90
deg) 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(60
deg, 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...
element() - CSS: Cascading Style Sheets
cool, huh?</p> </div> </div> the <div> element with the id "mybackground1" is used as the background for the content including the paragraph "this box uses the element with the #mybackground1 id as its background!". a somewhat more bizarre example this example uses a hidden <button> element in a repeating pattern as its background. this ...
<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
800 extra bold (ultra bold) 900 black (heavy) 950 extra black (ultra black) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping. 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. for truetype or opentype variable fonts, the "wght" variation is used to implement varying widths. for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in which font-weight can be any number between 1 and 1000. html <header> <input type="range" id="weight" name="weight" min="1" max="1000" /> <label for...
image-rendering - CSS: Cascading Style Sheets
of the image. in particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. this is intended for images such as photos. high-quality identical to smooth, but with a preference for higher-quality scaling. 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. crisp-edges the image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. suitable algorithms include nearest-neighbor and other non-smoothing scaling algorithms such as 2×sai and hqx-family algorithms. this value is intended for pixel-art images, ...
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(-45
deg, #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(-30
deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90
deg); fill: url(#green); } .b { transform-origin: center; transform: rotate(210
deg); 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
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax values <alpha-value> a <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). any value outside the interval, though valid, is clamped to the nearest limit in the range. ...
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(180
deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90
deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90
deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90
deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90
deg) 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(180
deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90
deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90
deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90
deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90
deg) translatez(50px); ...
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(-15
deg) rotatey(30
deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15
deg) rotatey(30
deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15
deg) rotatey(30
deg); } .top { background-color: skyblue; transform: rotatex(90
deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90
deg) translate3d(0, 0, 50px); } .front { backgr...
rotateX() - CSS: Cascading Style Sheets
homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. 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(45
deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatex()' in that specification. editor's draft initial definition ...
rotateY() - CSS: Cascading Style Sheets
homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. 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(60
deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatey()' in that specification. editor's draft initial definition ...
rotateZ() - CSS: Cascading Style Sheets
ogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. 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(45
deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatez()' in that specification. editor's draft initial definition ...
scaleY() - CSS: Cascading Style Sheets
except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scaley(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property). note: scaley(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1). transform: rotatex(180
deg); === 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. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10 0s 1000s0001 1000s0001 10000s0000100001 ...
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(10
deg); /* equal to skewx(10
deg) */ 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(10
deg, 10
deg); background-color: pink; } result specifications specification status comment css transforms level 1t...
Mouse gesture events - Developer guides
d mozrotategestureupdate events. the delta value is the cumulative change over the course of handling the entire sequence of rotate gesture events. event fields mouse gesture events have additional fields providing information about the gesture. these are: direction the direction in which the swipe moved. delta the amount by which the gesture moved; for rotation, this value is in
degrees. positive values are clockwise and negative values are counterclockwise. for magnification, this value is implementation-specific, but the value is positive for zooming in and negative for zooming out. direction constants the direction field in the gesture events can take one of the following values: simplegestureevent.direction_left leftward swipe. simplegestureevent.direction_...
Mutation events - Developer guides
s replacement: the story so far / existing points of consensus" post to public-webapps). mutation observers are the proposed replacement for mutation events in dom4. they are expected to be included in firefox 14 and chrome 18. the practical reasons to avoid the mutation events are performance issues and cross-browser support. 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!). moreover, removing the listeners does not reverse the damage. the performance effect is limited to the documents that have the mutation event listeners. cross-browser support these events are not implemented consistently across different browsers, for example: ie prior to version 9 didn't...
Orientation and motion data explained - Developer guides
nsidered in relation to the standard orientation of the screen; this is the "portrait" orientation on most devices. on a laptop computer, the orientation is considered in relation to the keyboard. if you want to detect changes in device orientation in order to compensate, you can use the orientationchange event. 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. alpha rotation around the z axis -- that is, twisting the device -- causes the alpha rotation angle to change: the alpha angle is 0° when top of the device is pointed directly toward the earth's north pole, and increases as the device is rotated toward the left. beta rotatio...
Rich-Text Editing in Mozilla - Developer guides
+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7gox0sakkgqgdmgkbi0njgmeimpgdk5+wacewed0ywblhguz4hw5oduekrblt7dtg
degxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+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+wacewed0ywblhguz4hw5oduekrblt7dtg
degxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+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
y time a new browser comes out, you must adjust your algorithm to accommodate it. and false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally. 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. this is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like xhtml-mp or the older wml. this factor aside, there is one case where this strategy really shines over other methods. if the functionality you would like to provide to your users on mobile de...
<div>: The Content Division element - HTML: Hypertext Markup Language
style to the <div> using css. note the use of the class attribute on the <div> to apply the style named "shadowbox" to the element. 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(180
deg, #fff, #ddd 40%, #ccc); } result specifications specification status comment html living standardthe definition of '<div>' in that specification. living standard no changes since the latest snapshot html5the definition of '<div>' in that specification. recommendation obsoleted align html 4.01 specificationthe definition of '<div>' in ...
<em>: The Emphasis element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
<mark>: The Mark Text element - HTML: Hypertext Markup Language
ortion of the document's content which is likely to be relevant to the user's current activity. this might be used, for example, to indicate the words that matched a search operation. don't use <mark> for syntax highlighting purposes; instead, use the <span> element with appropriate css applied to it. 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. examples marking text of interest in this first example, a <mark> element is used to mark some text within a quote which is of particular interest to the user. <blockquote> it is a period of civil war. rebel spaceships, striking from a hidden base, have won their first victory against the evil galactic empire. durin...
<meter>: The HTML Meter element - HTML: Hypertext Markup Language
f a <form> in the same document. if this attribute is not set, the <button> is associated with its ancestor <form> element, if any. this attribute is only used if the <meter> element is being used as a form-associated element, such as one displaying a range corresponding to an <input type="number">. 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. this is allowed, as it will default to 0. html <p>he got a <meter low="69" high="80" max="100" value="84">b</meter> on the exam.</p> result on google chrome, the resulting meter looks like this: specifications ...
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
nes <strong> as representing "strong importance for its contents." this is an important distinction to make. while <em> is used to change the meaning of a sentence as spoken emphasis does ("i love carrots" vs. "i love carrots"), <strong> is used to give portions of a sentence added importance (e.g., "warning! this is very dangerous.") both <strong> and <em> can be nested to increase the relative
degree of importance or stress emphasis, respectively. examples basic example <p>before proceeding, <strong>make sure you put on your safety goggles</strong>.</p> the resulting output: labeling warnings <p><strong>important:</strong> before proceeding, make sure you add plenty of butter.</p> this results in: specifications specification status comment html liv...
HTML elements reference - HTML: Hypertext Markup Language
translation. if the content is time- or date-related, the <time> element must be used. <dfn> the html definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence. <em> the html <em> element marks text that has stress emphasis. the <em> element can be nested, with each level of nesting indicating a greater
degree of emphasis. <i> the html idiomatic text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. <kbd> the html keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other t...
HTML documentation index - HTML: Hypertext Markup Language
om the obsolete html <element> element was part of the web components specification; it was intended to be used to define new custom dom elements. 97 <em>: the emphasis element element, html, html text-level semantics, reference, web the html <em> element marks text that has stress emphasis. the <em> element can be nested, with each level of nesting indicating a greater
degree of emphasis. 98 <embed>: the embed external content element element, embedding content, external content, html, html embedded content, html5, plugins, reference, web, embed the html <embed> element embeds external content at the specified point in the document. this content is provided by an external application or other source of interactive content such as a browser plug...
Browser detection using the user agent - HTTP
you would use new regexp("(?<=look_behind_stuff)"); instead of /(?<=look_behind_stuff)/, even in the lookbehind supported section of your code. progressive enhancement this design technique involves developing your web site in 'layers', using a bottom-up approach, starting with a simpler layer and improving the capabilities of the site in successive layers, each using more features. 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. this can be harder to do, and less effective, than progressive enhancement, but may be useful in some cases. mobile device detection arguably the most common use and misuse of user agent sniffing is to detect if the device is a mobile d...
Connection management in HTTP/1.x - HTTP
d connections. each http request is completed on its own connection; this means a tcp handshake happens before each http request, and these are serialized. the tcp handshake itself is time-consuming, but a tcp connection adapts to its load, becoming more efficient with more sustained (or warm) connections. 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. this model is the default model used in http/1.0 (if there is no connection header, or if its value is set to close). in http/1.1, this model is only used when the connection header is sent with a value of close. unless dealing with a very old system, which doesn't support a persistent connection, there is no compelling r...
Content negotiation - HTTP
acy risk (http fingerprinting) as several representations of a given resource are sent, shared caches are less efficient and server implementations are more complex. the accept header the accept header lists the mime types of media resources that the agent is willing to process. 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. the accept header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an html page or an image, a video, or a script: it is different when fetching a document entered in the address bar or an element linked via an <img>, <video> or <audio> element. browsers are free to use the value of the hea...
Loops and iteration - JavaScript
ript for loop is similar to the java and c for loop. a for statement looks as follows: for ([initialexpression]; [conditionexpression]; [incrementexpression]) statement when a for loop executes, the following occurs: the initializing expression initialexpression, if any, is executed. this expression usually initializes one or more loop counters, but the syntax allows an expression of any
degree of complexity. this expression can also declare variables. the conditionexpression expression is evaluated. if the value of conditionexpression is true, the loop statements execute. if the value of condition is false, the for loop terminates. (if the condition expression is omitted entirely, the condition is assumed to be true.) the statement executes. to execute multiple statements, use a b...
Math.imul() - JavaScript
ven arguments. description math.imul() allows for 32-bit integer multiplication with c-like semantics. this feature is useful for projects like emscripten. because imul() is a static method of math, you always use it as math.imul(), rather than as a method of a math object you created (math is not a constructor). if you use normal javascript floating point numbers in imul, you will experience a
degrade in performance. this is because of the costly conversion from a floating point to an integer for multiplication, and then converting the multiplied integer back into a floating point. the reason imul exists is because it is faster in only one (so far) circumstance: asmjs. asmjs allows for jist-optimizers to more easily implement internal integers in javascript. multiplying two numbers stored ...
Math.tan() - JavaScript
n the math.tan() method returns a numeric value that represents the tangent of the angle. because tan() is a static method of math, you always use it as math.tan(), rather than as a method of a math object you created (math is not a constructor). 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 gettan
deg(
deg) { var rad =
deg * math.pi/180; return math.tan(rad); } specifications specification ecmascript (ecma-262)the definition of 'math.tan' in that specification. ...
<mmultiscripts> - MathML
for example, a number is a 0-dimensional array, or a 0th-order tensor. a 1-dimensional array (e.g. vectors) is a 1st-order tensor and so 2nd-order tensors are needed to represent square matrices. to learn more about the mathematical background of tensors refer to the entry on wikipedia. ...
MathML documentation index - MathML
ther children are representing row contents and are treated identically to children of <mtr> elements. 19 <mmultiscripts> mathml, mathml reference, mathml:element, mathml:script and limit schemata the mathml <mmultiscripts> element allows you to create tensor-like objects. in a descriptive way tensors are multidimensional matrices (mathematical imprecise but exemplified). the
degree of a tensor depends on the dimensionality of a representative array. for example, a number is a 0-dimensional array, or a 0th-order tensor. a 1-dimensional array (e.g. vectors) is a 1st-order tensor and so 2nd-order tensors are needed to represent square matrices. to learn more about the mathematical background of tensors refer to the entry on wikipedia. 20 <mn> mathml, mathml r...
Web audio codec guide - Web media technologies
n ear is not a perfect interpreter of audio, and of the fact that the human brain can pluck the important information out of imperfect or noisy audio. they strip away audio frequencies that aren't used much, tolerate loss of precision in the decoded output, and use other methods to lose audio content, quality, and fidelity to produce smaller encoded media. upon decoding, the output is, to varying
degrees, still understandable. the specific codec used—and the compression configuration selected—determine how close to the original, uncompressed audio signal the output seems to be when heard by the human ear. because of the differences in how lossy codecs work compared to lossless ones, especially the fact that lossless ones have to be much more conservative with their compression, lossy cod...
Digital audio concepts - Web media technologies
le maximizing the percieved fidelity of the sound. an algorithm employing psychoacoustics may use any of the techniques mentioned here, and will almost certainly apply others as well. 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? lossy vs lossless compression if loss of detail and potentially fidelity is unacceptable or undesirable, a lossless codec is preferred. on the other hand, if some
degree of reduction of audio fidelity is okay, a lossy codec can be used. generally, lossy compre...
Handling media support issues in web content - Web media technologies
the availability of choices is good for the user, in that they can choose the format that suits their needs best. there is a drawback, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each web browser developer is left to its own devices when deciding which media file types and codecs to support. ...
Codecs used by WebRTC - Web media technologies
webrtc. the rtp payload format for opus is found in rfc 7587. you can find more general information about opus and its capabilities, and how other apis can support opus, in the corresponding section of our guide to audio codecs used on the web. both the speech and general audio modes should be supported. opus's scalability and flexibility are useful when dealing with audio that may have varying
degrees of complexity. its support of in-band stereo signals allows support for stereo without complicating the demultiplexing process. the entire range of bit rates supported by opus (6 kbps to 510 kbps) is supported in webrtc, with the bit rate allowed to be dynamically changed. higher bit rates typically improve quality. bit rate recommendations given a 20 millisecond frame size, the following ...
Progressive web app structure - Progressive web apps (PWAs)
behind pwas, let's look at the recommended structure of an actual app. we will start with analyzing the js13kpwa application, why it is built that way, and what benefits it brings. architecture of an app there are two main, different approaches to rendering a website — on the server or on the client. they both have their advantages and disadvantages, and you can mix the two approaches to some
degree. server-side rendering (ssr) means a website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content. it works great across browsers, but it suffers in terms of time navigating between pages and therefore general perceived performance — loading a page requires a new round trip to the server. client-side rendering (csr...
Graphic design for responsive sites - Progressive web apps (PWAs)
r images need to feature some level of interactivity, such as links, other clickable areas, or animation, there are a number of options available. css as well as adding programmatic graphical effects to links (and anywhere else you might want them), css3 also allows you to write declarative animations and transitions. 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. javascript javascript has functions that enable developers to create animations, and any other type of interactivity you want. it is very powerful when combined with other technologies, although its complexity is a barrier for non-developers. svg svg, just...
The building blocks of responsive design - Progressive web apps (PWAs)
l effects where possible, rather than relying on image files. these include rounded corners, gradients, and drop shadows. these scale as the resolution changes or the browser zooms. 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. you could also try using svg to create interface elements. svg produces vector graphics and is supported well across modern browsers, with polyfills available for older browser support. using web fonts for displaying icons is an effective technique for keeping file size and http requests down, and this is supported well across modern and older browsers. ...
Structural overview of progressive web apps - Progressive web apps (PWAs)
application. in this structural overview, we'll look at the features that make up a standard web application, as well as some design patterns you can follow when building your pwa. architecture of an app there are two main, different approaches to rendering a website — on the server or on the client. they both have their advantages and disadvantages, and you can mix the two approaches to some
degree. server-side rendering (ssr) means a website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content. it works great across browsers, but it suffers in terms of time navigating between pages and therefore general perceived performance — loading a page requires a new round trip to the server. client-side rendering (csr...
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. only one element is using this attribute: <fedistantlight> html, body, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default v...
direction - SVG: Scalable Vector Graphics
ext-anchor and inline-size properties. it also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override. 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. in many cases, the bidirectional unicode algorithm produces the desired result automatically, so this attribute doesn't need to be specified in those cases. for other cases, such as when using right-to-left languages, it may be sufficient to add the direction attribute to the outermost <svg> element, and allow that direction to inh...
limitingConeAngle - SVG: Scalable Vector Graphics
the axis between the light source and the point to which it is pointing at) and the spot light cone. so it defines a limiting cone which restricts the region where the light is projected. no light is projected outside the cone. ...
stroke-miterlimit - SVG: Scalable Vector Graphics
om a miter to a bevel. 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. usage context value <number> default value 4 animatable yes the value of stroke-miterlimit must be greater than or equal to 1. browser compatibility the compatibility table on this page is g...
values - SVG: Scalable Vector Graphics
-numbers> the value is a list of numbers, which is interpreted differently depending on the value of the type attribute: for type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma. for type="saturate", values is a single real number value (0 to 1). for type="huerotate", values is a single one real number value (
degrees). for type="luminancetoalpha", values is not applicable. specifications specification status comment filter effects module level 1the definition of 'values for <fecolormatrix>' in that specification. working draft no change svg animations level 2the definition of 'values for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>'...
<ellipse> - SVG: Scalable Vector Graphics
the <ellipse> element is an svg basic shape, used to create ellipses based on a center coordinate, and both their x and y radius. 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. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y position of the ellipse. value type: <length>|<percentage> ; default value: 0; animatable: yes rx the radius of the ellipse on the x axis. value type: auto|<length>|<per...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
rgetx’ attribute, "targety" represents the value of the ‘targety’ attribute, "kernelmatrix" represents the value of the ‘kernelmatrix’ attribute, "divisor" represents the value of the ‘divisor’ attribute, and "bias" represents the value of the ‘bias’ attribute. 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. to illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows: 0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255 and you define a...
SVG animation with SMIL - SVG: Scalable Vector Graphics
ibutename="cx" from="0" to="500" dur="5s" repeatcount="indefinite" /> </circle> </svg> animating the transform attributes the <animatetransform> element let you animate transform attributes. this new element is necessary because we are not animating a simple attribute like x which is just a number. rotation attributes look like this: rotation(theta, x, y), where theta is the angle in
degrees, and x and y are absolute positions. in the example below, we animate the center of the rotation and the angle. <svg width="300" height="100"> <title>svg smil animate with transform</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> <animatetransform attr...
Fills and Strokes - SVG: Scalable Vector Graphics
idth of this stroke. strokes are drawn centered around the path. in the example above, the path is shown in pink, and the stroke in black. the second attribute affecting strokes is the stroke-linecap property, demonstrated above. this controls the shape of the ends of lines. 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. square has essentially the same appearance, but stretches the stroke slightly beyond the actual path. the distance that the stroke goes beyond the path is half the stroke-width. round produces a rounded effect on the end of the stroke. the radius of this curve is also controlled by the stroke-width. use stroke-linejoin to control how th...
Texts - SVG: Scalable Vector Graphics
numbers, that are one by one applied to the single characters of the tspan element. dx start drawing the text with a horizontal offset dx from the default current position. here, too, you may provide a list of values that are applied to consecutive characters, hence piling up the offset over time. likewise, there are y and dy for vertical displacement. rotate rotate all characters by this
degree. a list of numbers makes each character rotate to its respective value, with remaining characters rotating according to the last value. textlength this is a more obscure attribute giving the calculated length of the string. it is meant to allow the rendering engine to fine-tune the positions of the glyphs when its own measured text length doesn't meet the one provided here. textpath this ...
Axes - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes there are thirteen different axes in the xpath specification. an axis represents a relationship to the context node, and is used to locate nodes relative to that node on the tree. the following is an extremely brief description of the thirteen available axes and the
degree of support available in gecko. for further information on using xpath expressions, please see the for further reading section at the end of transforming xml with xslt document. also see the 'axes' section in the xpath spec. ancestor indicates all the ancestors of the context node beginning with the parent node and traveling through to the root node. ancestor-or-self indicates the context node and all of its ancestors, in...
Functions - XPath
for further information on using xpath/xslt functions, please see the for further reading page. ...
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
use the {{listsubpages}} macro once the bcd for <xsl:fallback>, <xsl:import>, <xsl:namespace-alias>, <xsl:number>, <xsl:output>, <xsl:stylesheet>, <xsl:text> and <xsl:value-of> is fully migrated. <xsl:apply-imports><xsl:apply-templates><xsl:attribute-set><xsl:attribute><xsl:call-template><xsl:choose><xsl:comment><xsl:copy-of><xsl:copy><xsl:decimal-format><xsl:elemen...