VisualViewport.scale - Web APIs
the scale read-only property of the visualviewport interface returns the pinch-zoom scaling factor applied to the visual viewport.
... syntax var scale = visualviewport.scale value a double.
... specifications specification status comment visual viewport apithe definition of 'scale' in that specification.

Index - Web APIs
the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
...later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default.
... 575 canvasrenderingcontext2d.imagesmoothingenabled api, canvas, canvasrenderingcontext2d, property, reference the imagesmoothingenabled property of the canvasrenderingcontext2d interface, part of the canvas api, determines whether scaled images are smoothed (true, default) or not (false).
...And 17 more matches

Image file type and format guide - Web media technologies
file extension(s) .apng specification wiki.mozilla.org/apng_specification browser compatibility chrome 59, edge 12, firefox 3, opera 46, safari 8 maximum dimensions 2,147,483,647×2,147,483,647 pixels supported color modes color mode bits per component (d) description greyscale 1, 2, 4, 8, and 16 each pixel consists of a single d-bit value indicating the brightness of the greyscale pixel.
... greyscale with alpha 8 and 16 each pixel is represented by two d-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is.
...storage browser compatibility all versions of chrome, edge, firefox, internet explorer, opera, and safari maximum dimensions either 32,767×32,767 or 2,147,483,647×2,147,483,647 pixels, depending on the format version supported color modes color mode bits per component (d) description greyscale 1 each bit represents a single pixel, which can be either black or white.
...And 17 more matches

WebGL model view projection - Web APIs
it assumes a knowledge of basic matrix math using translation, scale, and rotation matrices.
... the model, view, and projection matrices individual transformations of points and polygons in space in webgl are handled by the basic transformation matrices like translation, scale, and rotation.
... in this case, for every frame of the animation a series of scale, rotation, and translation matrices move the data into the desired spot in clip space.
...And 15 more matches

Using the viewport meta tag to control layout on mobile browsers
to mitigate this problem, apple introduced the "viewport meta tag" in safari ios to let web developers control the viewport's size and scale.
... viewport basics a typical mobile-optimized site contains something like the following: <meta name="viewport" content="width=device-width, initial-scale=1"> the width property controls the size of the viewport.
... it can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in css pixels at a scale of 100%.
...And 13 more matches

Digital video concepts - Web media technologies
contemplating human vision we're able to represent an image this way because the human eye sees far more detail in greyscale than in color, thanks to biology.
... because the eye has vastly more rods than cones (about 120 million rods to around 6 or 7 million cones), we see detail in greyscale, with color being far less detailed.
... in essence, our eyes are like a camera with two image sensor chips: one greyscale and one color.
...And 8 more matches

Numeric Controls - Archive of obsolete content
scales a scale element may also be used to select from a range of values.
... instead of a textbox however, a sliding scale is used.
... the user may drag the thumb of the scale to adjust the value.
...And 7 more matches

Responsive design - Learn web development
using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger.
... this enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixellated if the column becomes wider than the image.
...basically, you would take an image that was at the largest size that might be needed, and scale it down.
...And 6 more matches

Using images - Web APIs
ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(30, 96); ctx.lineto(70, 66); ctx.lineto(103, 76); ctx.lineto(170, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } the resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method adds two new parameters and lets us place scaled images on the canvas.
... drawimage(image, x, y, width, height) this adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
...this is done simply by looping and placing the scaled images at different positions.
...And 6 more matches

filter - CSS: Cascading Style Sheets
syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-function> [<filter-function>]* | none for a reference t...
... table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: 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, #img13 { width:100%; height:auto; } grayscale() the grayscale() function converts the input image to grayscale.
...a value of 100% is completely grayscale.
...And 6 more matches

Transformations - Web APIs
with transformations there are more powerful ways to translate the origin to a different position, rotate the grid and even scale it.
...translate, rotate and scale – see below).
...this can be used to draw scaled down or enlarged shapes and bitmaps.
...And 5 more matches

Matrix math for the web - Web APIs
function matrixarraytocssmatrix(array) { return 'matrix3d(' + array.join(',') + ')'; } // grab the dom element let moveme = document.getelementbyid('move-me'); // returns a result like: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1);" let matrix3drule = matrixarraytocssmatrix(translationmatrix); // set the transform moveme.style.transform = matrix3drule; view on jsfiddle scale matrix a scale matrix makes something larger or smaller in one or more of the three dimensions: width, height, and depth.
... let w = 1.5; // width (x) let h = 0.7; // height (y) let d = 1; // depth (z) let scalematrix = [ w, 0, 0, 0, 0, h, 0, 0, 0, 0, d, 0, 0, 0, 0, 1 ]; view on jsfiddle rotation matrix a rotation matrix is used to rotate a point or object.
...this means that if a translation, rotation, and scale matrix are all combined together, when the order of the matrices is reversed and re-applied then the original points are returned.
...And 5 more matches

Scaling - Game development
scaling refers to how the game canvas will scale on different screen sizes.
... we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later.
... the phaser scale object there's a special scale object available in phaser with a few handy methods and properties available.
...And 4 more matches

Using the CSS Typed Object Model - Web APIs
.2rem; } button { --maincolor: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.95); } let's add the class to a button (a button which does nothing).
...tedstylemap(); // cssmathsum example let btnwidth = allcomputedstyles.get('width') console.log( btnwidth ); // cssmathsum console.log( btnwidth.values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( btnwidth.operator ); // 'sum' // csstransformvalue let transform = allcomputedstyles.get('transform'); console.log( transform ); // csstransformvalue {0: cssscale, 1: csstranslate, length: 2, is2d: true} console.log( transform.length ); // 1 console.log( transform[0] ); // cssscale {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log( transform[0].x ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {val...
... the value of cssmathvalue.operator is sum: let btnwidth = allcomputedstyles.get('width') console.log( btnwidth ); // cssmathsum console.log( btnwidth.values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( btnwidth.operator ); // 'sum' csstransformvalue with cssscale the display: inline-block; also enables transforming.
...And 4 more matches

Border-image generator - CSS: Cascading Style Sheets
> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </di...
... freader.readasdataurl(file); return false; }; freader.onload = function(e) { imagecontrol.loadremoteimage(e.target.result); }; var load = function load() { browse.click(); }; browse.setattribute('type', 'file'); browse.style.display = 'none'; browse.onchange = loadimage; return { load: load }; })(); var imagecontrol = (function imagecontrol() { var scale = 0.5; var imgsource = new image(); var imgstate = null; var selected = null; var topics = ['slice', 'width', 'outset']; var properties = {}; properties['border1'] = { fill : false, slice_values : [27, 27, 27, 27], width_values : [20, 20, 20, 20], outset_values : [0, 0, 0, 0], slice_units : [0, 0, 0, 0], width_units : [0, 0, 0, 0], outset_units : [0, 0, 0,...
...rop['fill']); dropdownmanager.setvalue('image-repeat-x', prop['repeat'][0]); dropdownmanager.setvalue('image-repeat-y', prop['repeat'][1]); inputslidermanager.setvalue('preview-width', prop['size'][0]); inputslidermanager.setvalue('preview-height', prop['size'][1]); inputslidermanager.setvalue('preview-area-height', prop['preview_area']); }; var update = function update() { scale = math.min(300, (30000 / this.width) | 0); setscale(scale); inputslidermanager.setvalue('scale', scale, false); subject.style.backgroundimage = 'url("' + this.src + '")'; preview.style.borderimagesource = 'url("' + this.src + '")'; guidelines['slice-top'].setmax(this.height); guidelines['slice-right'].setmax(this.width); guidelines['slice-bottom'].setmax(this.height); g...
...And 4 more matches

Standard metadata names - HTML: Hypertext Markup Language
initial-scale a positive number between 0.0 and 10.0 defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.
... maximum-scale a positive number between 0.0 and 10.0 defines the maximum amount to zoom in.
... it must be greater or equal to the minimum-scale or the behaviour is undefined.
...And 4 more matches

SVGTransform - Web APIs
svg transform interface svgtransform is the interface for one of the component transformations within an svgtransformlist; thus, an svgtransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute.
... interface overview also implement none methods void setmatrix(in svgmatrix matrix) void settranslate(in float tx, in float ty) void setscale(in float sx, in float sy) void setrotate(in float angle, in float cx, in float cy) void setskewx(in float angle) void setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly svgmatrix matrix constants svg_transform_unknown = 0 svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale = 3 svg_transform_rotat...
... svg_transform_matrix 1 a matrix(…) transformation svg_transform_translate 2 a translate(…) transformation svg_transform_scale 3 a scale(…) transformation svg_transform_rotate 4 a rotate(…) transformation svg_transform_skewx 5 a skewx(…) transformation svg_transform_skewy 6 a skewy(…) transformation properties name type description type unsigned short the type of the value as specified by one of the svg_transform_* consta...
...And 3 more matches

<transform-function> - CSS: Cascading Style Sheets
scaling (resizing) scale() scales an element up or down on the 2d plane.
... scale3d() scales an element up or down in 3d space.
... scalex() scales an element up or down horizontally.
...And 3 more matches

transform - CSS: Cascading Style Sheets
the transform css property lets you rotate, scale, skew, or translate an element.
...3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: translatez(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scalex(2); transform: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.07rad); /* multiple function values */ transform: translatex(10px) rotate(10deg) translatey(5px); transform: perspective(500px) translate(10px, 0, 20px) rotatey(3deg); /* global values */ transform: inherit; ...
...lies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <transform-list>where <transform-list> = <transform-function>+where <transform-function> = <matrix()> | <translate()> | <translatex()> | <translatey()> | <scale()> | <scalex()> | <scaley()> | <rotate()> | <skew()> | <skewx()> | <skewy()> | <matrix3d()> | <translate3d()> | <translatez()> | <scale3d()> | <scalez()> | <rotate3d()> | <rotatex()> | <rotatey()> | <rotatez()> | <perspective()>where <matrix()> = matrix( <number>#{6} )<translate()> = translate( <length-percentage> , <length-percentage>?
...And 3 more matches

textbox - Archive of obsolete content
increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).
... type: integer the maximum value that the scale or number box may be set to.
... the default value is 100 for scales and infinity for number boxes.
...And 2 more matches

Building up a basic demo with A-Frame - Game development
add this just before the closing </a-scene> element: <a-camera position="0 1 4" cursor-visible="true" cursor-scale="2" cursor-color="#0095dd" cursor-opacity="0.5"> </a-camera> we've also defined a cursor for the given camera, using the cursor-* attributes (by default it is invisible.) — we've set its scale so it will more easily visible, its color, and some opacity so it won't completely covering the objects behind it.
... animation we've already used rotation and position to move the shapes on the scene, and we can also scale them.
...add the following <a-animation> element to your torus: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotation="10 0 0" position="-3 1 0"> <a-animation attribute="scale" to="1 0.5 1" direction="alternate" dur="2000" repeat="indefinite" easing="linear"> </a-animation> </a-entity> the attribute we want to animate for the torus is scale.
...And 2 more matches

Building up a basic demo with Three.js - Game development
we can also scale the shapes, or change their positions.
... scaling we can also scale an object.
...add the following lines, just below the requestanimationframe() invocation: t += 0.01; torus.scale.y = math.abs(math.sin(t)); we use math.sin, ending up with quite an interesting result.
...And 2 more matches

Animations and tweens - Game development
go to your ballhitbrick() function, find your brick.kill(); line, and replace it with the following: var killtween = game.add.tween(brick.scale); killtween.to({x:0,y:0}, 200, phaser.easing.linear.none); killtween.oncomplete.addonce(function(){ brick.kill(); }, this); killtween.start(); let's walk through this so you can see what's happening here: when defining a new tween you have to specify which property will be tweened — in our case, instead of hiding the bricks instantly when hit by the ball, we will make their width and h...
...eight scale to zero, so they will nicely disappear.
... to the end, we use the add.tween() method, specifying brick.scale as the argument as this is what we want to tween.
...And 2 more matches

Server-side web frameworks - Learn web development
"web application frameworks") are software frameworks that make it easier to write, maintain and scale web applications.
...at this point you may need to scale horizontally (share the load by distributing your site across a number of web servers and databases) or scale "geographically" because some of your customers are based a long way away from your server.
... the web framework you choose can make a big difference on how easy it is to scale your site.
...And 2 more matches

A basic 2D WebGL animation example - Web APIs
let gl = null; let glcanvas = null; // aspect 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.
...tup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: gl.fragment_shader, id: "fragment-shader" } ]; shaderprogram = buildshaderprogram(shaderset); aspectratio = glcanvas.width/glcanvas.height; currentrotation = [0, 1]; currentscale = [1.0, aspectratio]; vertexarray = new float32array([ -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5 ]); vertexbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, vertexbuffer); gl.bufferdata(gl.array_buffer, vertexarray, gl.static_draw); vertexnumcomponents = 2; vertexcount = vertexarray.length/vertexnumcomponents; currentangle = 0.0; r...
...the scaling vector, as we saw in the vertex shader, is used to scale the coordinates to fit the -1.0 to 1.0 range.
...And 2 more matches

Accessibility: What users can do to browse more safely - Accessibility
there is a github repository for it at https://github.com/0ui/gif-scrubber beeline reader beeline reader has a browser extension that allows you to set up for grayscale and dyslexi font, among other things take advantage operating system accessibility features most operating systems such as windows 10, have accessibility options that are surprisingly powerful.
... grayscale those who have sufferred traumatic brain injury (tbi) may be highly sensitive to color; it can require such a great "investment of cognitive energy" on their part, there's no energy for other daily tasks.
... enabling grayscale presentation of the content reduces the cognitive workload.
...And 2 more matches

image-rendering - CSS: Cascading Style Sheets
the user agent will scale an image when the page author specifies dimensions other than its natural size.
...for example, if the natural size of an image is 100×100px, but its actual dimensions are 200×200px (or 50×50px), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering.
... this property has no effect on non-scaled images.
...And 2 more matches

mask-size - CSS: Cascading Style Sheets
values <length> a <length> value scales the mask image to the specified length in the corresponding dimension.
... <percentage> a <percentage> value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of mask-origin.
... auto a keyword that scales the mask image in the corresponding directions in order to maintain its intrinsic proportion.
...And 2 more matches

object-fit - CSS: Cascading Style Sheets
values contain the replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box.
... scale-down the content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
... formal definition initial valuefillapplies toreplaced elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: contain</h2> <img class="contain" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="contain narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: cover</h2> <img class="cover" src="https://udn.realityripple.com/...
...And 2 more matches

text-rendering - CSS: Cascading Style Sheets
certain aspects of fonts — such as kerning — don't scale linearly.
... in svg, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system.
... but if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead.
...And 2 more matches

Web video codec guide - Web media technologies
is a large-scale spatial interference pattern produced when a pattern in the source image and the manner in which the encoder operates are slightly out of alignment spatially.
...hile level 6.3 can reach 120 fps compression lossy dct-based algorithm supported frame sizes 8 x 8 pixels to 65,535 x 65535 pixels with each dimension allowed to take any value between these supported color modes profile color depths chroma subsampling main 8 or 10 4:0:0 (greyscale) or 4:2:0 high 8 or 10 4:0:0 (greyscale), 4:2:0, or 4:4:4 professional 8, 10, or 12 4:0:0 (greyscale), 4:2:0, 4:2:2, or 4:4:4 hdr support yes variable frame rate (vfr) support yes browser compatibility feature chrome edge fi...
...r interesting profiles: profile color depths chroma subsampling constrained baseline (cbp) 8 4:2:0 baseline (bp) 8 4:2:0 extended (xp) 8 4:2:0 main (mp) 8 4:2:0 high (hip) 8 4:0:0 (greyscale) and 4:2:0 progressive high (prohip) 8 4:0:0 (greyscale) and 4:2:0 high 10 (hi10p) 8 to 10 4:0:0 (greyscale) and 4:2:0 high 4:2:2 (hi422p) 8 to 10 4:0:0 (greyscale), 4:2:0, and 4:2:2 high 4:4:4 predictive 8 to 14 4:0:0 (greyscale), 4:2:0, 4:2:2, and 4:4:4 ...
...And 2 more matches

dominant-baseline - SVG: Scalable Vector Graphics
it is used to determine or re-determine a scaled-baseline-table.
... a scaled-baseline-table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-table, and a baseline-table font-size.
...when the initial value, auto, would give an undesired result, this property can be used to explicitly set the desired scaled-baseline-table.
...And 2 more matches

Building up a basic demo with PlayCanvas editor - Game development
click on the box to bring up its entity sidebar — you'll see options for changing its position, rotation, and scale.
... this time instead of rotating the object we will try to scale it.
...add this code to the initialize() function: this.timer = 0; and those two lines to the update() function: this.timer += dt; this.entity.setlocalscale(1, math.abs(math.sin(this.timer)), 1); the setlocalscale() method applies the given values to the x, y and z axes of the object.
... in our case we're modifying the scale of the cylinder on the y axis, giving it as a value the math.sin() of the timer, with math.abs() applied to the result of that to have the values always above zero (0-1; sin values are normally between -1 and 1.) this gives us a nice scaling effect as a result.

Building up a basic demo with the PlayCanvas engine - Game development
animation we already used translate or rotate to adjust the position of the shapes; we could also change their positions directly with setposition, or scale them.
... scaling we can also scale a given object — there's a function for that called setlocalscale.
... add the following, again into the callback: cylinder.setlocalscale(1, math.abs(math.sin(timer)), 1); here we are using math.sin to scale the cylinder in a cycle, bigger and smaller again.
... we're wrapping the y scale value in math.abs to pass the absolute values (greater or equal to 0); sin varies between -1 and 0, and for negative values the cylinder scaling can render unexpectedly (in this case it looks black half the time.) now onto the movement part.

Sizing items in CSS - Learn web development
a common use of max-width is to cause images to scale down if there is not enough space to display them at their intrinsic width while making sure they don't become larger than that width.
...the third box contains the same image again, also with max-width: 100% set; in this case you can see how it has scaled down to fit into the box.
... this technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately.
... you should, however, not use this technique to load really large images and then scale them down in the browser.

Firefox UI considerations for web developers
if no high-resolution icon is found, a screenshot is taken of the site; this screenshot is then scaled and cropped to fit in the space allotted to the icon.
...firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes.
...the screenshot is then drawn in the icon box, which scales and crops the image as needed to fit.
... that image is then scaled down to be 96 pixels wide and is used in the user interface as seen in the example.

nsIContentView
method overview void scrollby(in float dxpx, in float dypx); void scrollto(in float xpx, in float ypx); void setscale(in float xscale, in float yscale); attributes attribute type description contentheight float read only.
... setscale() sets the content view's scale for each axis.
... void setscale( in float xscale, in float yscale ); parameters xscale horizontal scaling factor; specify 1.0 to use the natural size of the content.
... yscale vertical scaling factor; specify 1.0 to use the natural size of the content.

nsIDOMWindowUtils
this api is entirely separate from textzoom and fullzoom; a resolution scale can be applied together with both textzoom and fullzoom.
...setresolution together with setdisplayport() can be used to implement a non-reflowing scale-zoom in concert with another entity that can draw with a scale.
... for example, to scale a content |window| inside a <browser> by a factor of 2.0.
... window.setdisplayport()(x, y, oldw / 2.0, oldh / 2.0); window.setresolution(2.0, 2.0); // elsewhere browser.setviewportscale(2.0, 2.0); the caller of this method must have universalxpconnect privileges.

Work with animations - Firefox Developer Tools
the box below contains a grayscale icon, representing firefox developer edition.
...the timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).
...if you hover over a dot, you'll see the value assigned to that property at that point in the timeline: this is essentially a visual representation of the animation's keyframes: var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)' }, { filter: 'grayscale(100%)', offset: 0.333 }, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)' } ]; application to the example applying all this to our example, we can see that: the animation involved two elements, span#no...
... the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar.

CanvasRenderingContext2D.drawImage() - Web APIs
if not specified, the image is not scaled in width when drawn.
...if not specified, the image is not scaled in height when drawn.
... for example, if you load an image and specify the optional size parameters in its constructor, you will have to use the naturalwidth and naturalheight properties of the created instance to properly calculate things like crop and scale regions, rather than element.width and element.height.
...com/samples/db/f374e9c6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in css pixels for the canvas element canvas.width = this.naturalwidth; canvas.height = this.naturalheight; // will draw the image as 300x227, ignoring the custom size of 60x45 // given in the constructor ctx.drawimage(this, 0, 0); // to use the custom size we'll have to specify the scale parameters // using the element's width and height properties - lets draw one // on top in the corner: ctx.drawimage(this, 0, 0, this.width, this.height); } result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d: drawimage' in that specification.

Basic animations - Web APIs
function clock() { var now = new date(); var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 150, 150); ctx.translate(75, 75); ctx.scale(0.4, 0.4); ctx.rotate(-math.pi / 2); ctx.strokestyle = 'black'; ctx.fillstyle = 'white'; ctx.linewidth = 8; ctx.linecap = 'round'; // hour marks ctx.save(); for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(100, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); ctx.linewidth = 5; f...
... img.src = 'https://mdn.mozillademos.org/files/4553/capitan_meadows,_yosemite_national_park.jpg'; var canvasxsize = 800; var canvasysize = 200; var speed = 30; // lower is faster var scale = 1.05; var y = -4.5; // vertical offset // main program var dx = 0.75; var imgw; var imgh; var x = 0; var clearx; var cleary; var ctx; img.onload = function() { imgw = img.width * scale; imgh = img.height * scale; if (imgw > canvasxsize) { // image larger than canvas x = canvasxsize - imgw; } if (imgw > canvasxsize) { // image width larger than can...
... <canvas id="canvas" width="800" height="200"></canvas> mouse following animation <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <script> var cn; //= document.getelementbyid('cw'); var c; var u = 10; const m = { x: innerwidth / 2, y: innerheight / 2 }; window.onmousemove = function(e) { ...
... body { margin: 0; padding: 0; background-color: rgba(0,0,0,0.05); } </style> </head> <body> <canvas id="cw"></canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nokia 1100:snake..member berries</title> </head> <body> <div class="keypress hide"> <div class="up" onclick="emit(38)">&#8593;</div> <div class="right" onclick="emit(39)">&#8594;</div> <div class="left" onclick="emit(37)">&#8592;</div> <div class="down" onclick="emit(40)">&#8595;</div> ...

Pixel manipulation with canvas - Web APIs
the grayscale function simply uses the average of red, green and blue.
...see grayscale on wikipedia for more information.
... <canvas id="canvas" width="300" height="227"></canvas> <div> <input id="grayscalebtn" value="grayscale" type="button"> <input id="invertbtn" value="invert" type="button"> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height); var data = imagedata.data; var invert = function() { for (var i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; // red data[i + 1] = 255 - data[i + 1]; // green data[i + 2] = 255 - data[i + 2]; // blue ...
...} ctx.putimagedata(imagedata, 0, 0); }; var grayscale = function() { for (var i = 0; i < data.length; i += 4) { var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.putimagedata(imagedata, 0, 0); }; var invertbtn = document.getelementbyid('invertbtn'); invertbtn.addeventlistener('click', invert); var grayscalebtn = document.getelementbyid('grayscalebtn'); grayscalebtn.addeventlistener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details.

DOMMatrixReadOnly - Web APIs
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 default, the x and z axes are scaled by 1 and the y axis has no default scaling value.
... dommatrixreadonly.scale3d() returns a new dommatrix created by scaling the source 3d matrix by the given factor along all its axes, centered on the specified origin point.
... dommatrixreadonly.scalenonuniform() returns a new dommatrix created by applying the specified scaling on the x, y, and z axes, centered at the given origin.

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
if you want to scale up by a factor of 2, you need to multiply each component by 2.0.
... to scale down by the same amount, multiply them by -2.0.
... in matrix terms, this is performed using a transform matrix with scaling factored into it, like this: let scaletransform = [ sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1 ]; this matrix represents a transform that scales up or down by a factor indicated by (sx, sy, sz), where sx indicates the scaling factor along the x axis, sy the scaling factor along the y axis, and sz the factor for the z axis.
... if the same scaling factor is to be applied in every direction, you can create a simple function to generate the scaling transform matrix for you: function createscalingmatrix(f) { return [ f, 0, 0, 0, 0, f, 0, 0, 0, 0, f, 0, 0, 0, 0, 1 ]; } with the transform matrix in hand, we simply apply the transform scaletransform to the vector (or vertex) myvector: let myvector = [2, 1, -3]; let scaletransform = [ 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1 ]; vec4.transformmat4(myvector, myvector, scaletransform); or, using scaling along every axis by the same factor using the createscalingmatrix() function shown above: let myvector = [2, 1, -3]; vec4.transformmat4(myvector, myvector, createscalin...

Window.devicePixelRatio - Web APIs
var size = 200; canvas.style.width = size + "px"; canvas.style.height = size + "px"; // set actual size in memory (scaled to account for extra pixel density).
... var scale = window.devicepixelratio; // change to 1 on retina screens to see blurry canvas.
... canvas.width = math.floor(size * scale); canvas.height = math.floor(size * scale); // normalize coordinate system to use css pixels.
... ctx.scale(scale, scale); ctx.fillstyle = "#bada55"; ctx.fillrect(10, 10, 300, 300); ctx.fillstyle = "#ffffff"; ctx.font = '18px arial'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = "i love mdn"; ctx.filltext(textstring, x, y); monitoring screen resolution or zoom level changes in this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check the value of devicepixelratio to handle any updates we need to.

Web Accessibility: Understanding Colors and Luminance - Accessibility
for example, it has been demonstrated that some colors are more likely to cause epileptic fits than others; there is an interesting observation in a discussion thread, "what is the “grayscale” setting for in accessibility options?" in which one of the participants states: "i have photo-triggered ocular migraines and wish everything had a greyscale option.
... even better a red or violet scale, but that is probably very specific to me." red desaturation tests the human eye is so sensitively "tuned" to red, that opthamolegists set up a test using it.
... window.getcomputedstyle() returns values using rgb decimal reference scale.
... see also mdn accessibilty accessibility learning path color <color> web accessibility for seizures and physical reactions color blindness discussions (general) what is the “grayscale” setting for in accessibility options?

Resizing background images with background-size - CSS: Cascading Style Sheets
by doing so, you can scale the image upward or downward as desired.
...g/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background.
... here we scale a 32x32 pixel favicon to 300x300 pixels: .square2 { background-image: url(favicon.png); background-size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; } as you can see, the css is actually essentially identical, save the name of the image file.
... contain the contain value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container.

Cubic Bezier Generator - CSS: Cascading Style Sheets
width: 40px; } function updatecanvas() { var x1 = document.getelementbyid('x1').value; var y1 = document.getelementbyid('y1').value; var x2 = document.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5; // size of 0.1 tick on the rulers var scaling; //limitation: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute whe...
...getcontext('2d'); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw the rulers ctx.beginpath(); ctx.strokestyle = "black"; // draw the y axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i * 10) / 10, -3 * basic_scale_size + cx(0), cy(i) + 4); // limitation the constant 4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.
...closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.filltext("output (value ratio)", -cy(0), -3 * basic_scale_size + cx(0)); ctx.restore(); // draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "center"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.filltext(math.round(i * 10) / 10, cx(i), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size } ...
... ctx.lineto(lx(i), cy(0)); } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size ctx.stroke(); ctx.closepath(); // draw the bézier curve ctx.beginpath(); ctx.moveto(cx(0), cy(0)); ctx.strokestyle = 'blue'; ctx.beziercurveto(cx(x1), cy(y1), cx(x2), cy(y2), cx(1), cy(1)); ctx.stroke(); ctx.closepath(); // draw the p2 point (with a line to p0) ctx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x1), cy(y1)); ctx.lineto(cx(0), cy(0)); ctx.stroke(); ctx.closepath(); ctx.begi...

Audio and video manipulation - Developer guides
having native audio and video in the browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video.
... for example, let's process a video to display it in greyscale.
... in this case, we'll show both the source video and the output greyscale frames.
... ordinarily, if you were implementing a "play video in greyscale" feature, you'd probably add display: none to the style for the <video> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames.

Basic Transformations - SVG: Scalable Vector Graphics
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.
...that means, the units you specify for the element and its children might not follow the 1:1 pixel mapping, but are also distorted, skewed, translated and scaled according to the transformation.
... <svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> </svg> the resulting rectangular in the above example will be 100x100px.

Patterns - SVG: Scalable Vector Graphics
it defaults to "objectboundingbox" as it did above, so a value of 1 is scaled to the width/height of the object you're applying the pattern to.
... the caveat here is that if the object changes size, the pattern itself will scale to fit it, but the objects inside will not.
...="0" y="0" width=".125" height=".125" fill="url(#gradient2)"/> <circle cx=".125" cy=".125" r=".1" fill="url(#gradient1)" fill-opacity="0.5"/> </pattern> now, because the pattern content is in the same unit system as the pattern, we don't have to offset the box so that the pattern starts in the correct place, and if the object size was changed to a larger one, the pattern would automatically scale so that it had the same number of objects and repeats inside it.
...o they don't change shape if the object does: <pattern id="pattern" x="10" y="10" width="50" height="50" patternunits="userspaceonuse"> <rect x="0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="url(#gradient1)" fill-opacity="0.5"/> </pattern> of course, this means the pattern won't scale if you change your object size later.

widget - Archive of obsolete content
if the content is an image, it is automatically scaled to be 16x16 pixels.
... if the content is an image, it is automatically scaled to be 16x16 pixels.
... if the content is an image, it is automatically scaled to be 16x16 pixels.

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
figure 21: a textbox for numeric input sliders the scale element is used similarly to the volume slider in windows, allowing the user to vary a value by moving a slider up/down or left/right (see listing 28 and figure 22).
... note: although this control is also known as a slider, the slider element already exists in xul as a part of a scrollbar, so this element has been named "scale".
... <hbox> <scale orient="horizontal" min="-100" max="100" value="0"/> <scale orient="vertical" min="0" max="100" value="50"/> </hbox> listing 29: the scale element figure 22: output from listing 29 « previousnext » ...

Bounding volume collision detection with THREE.js - Game development
so any transformations such as scale, position, etc.
...for instance: knot.scale.set(2, 2, 2); knotbsphere.radius = knot.geometry.radius * 2; intersection tests point vs.
... var box3 = new three.box3(); box3.setfromobject(knotboxhelper); if we change the mesh position, rotation, scale, etc.

Crisp pixel art look with image-rendering - Game development
original size 4x size 4x size (scaled with an image editor) none vendor's algorithm nearest-neighbor algorithm a css-based solution the good news is that you can use css to automatically do the up-scaling, which not only solves the blur problem, but also allows you to use the images in their original, smaller size, thus saving download time.
...if the canvas was created with a 128 pixel width, for example, we would set the css width to 512px if we wanted a 4x scale.
...the original image we want to upscale looks like this: here's some html to create a simple canvas: <canvas id="game" width="128" height="128"></canvas> css to size the canvas and render a crisp image: canvas { width: 512px; height: 512px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } and some javascript to set up the canvas and load the image: ...

Mozilla’s UAAG evaluation report
checkpoint information (same scaled used on w3c's uaag implementation reports pages) rating scale c: complete implementation vg: very good implementation, almost all requirements satisfied g: good implementation, most important requirements satisfied p: poor implementation, some requirements satisfied and/or difficult for user to access feature ni: not implemented nr: not rated na...
... rating scale c: complete implementation vg: very good implementation, almost all requirements satisfied g: good implementation, most important requirements satisfied p: poor implementation, some requirements satisfied and/or difficult for user to access feature ni: not implemented nr: not rated na: not applicable guideline 7.
...(p2) ni no end user accessibility documentation yet rating scale c: complete implementation vg: very good implementation, almost all requirements satisfied g: good implementation, most important requirements satisfied p: poor implementation, some requirements satisfied and/or difficult for user to access feature ni: not implemented nr: not rated na: not applicable ...

SVG Guidelines
scalability, with caveats one of the primary advantages of svg is that as it is scaled it does not pixelate.
... however, this is not to say that it always does away with the need to have a collection of raster images for display at different scales.
...while svg may scale well enough for flat-ish icons without a lot of detail, for icons that try to pack in a lot of detail graphic artists generally want to be able to pixel tweak.

CanvasRenderingContext2D.filter - Web APIs
grayscale() a css <percentage>.
... converts the drawing to grayscale.
... a value of 100% is completely grayscale.

CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
the imagesmoothingenabled property of the canvasrenderingcontext2d interface, part of the canvas api, determines whether scaled images are smoothed (true, default) or not (false).
... syntax ctx.imagesmoothingenabled = value; options value a boolean indicating whether to smooth scaled images or not.
...the first image is drawn at its natural size, the second is scaled to 3x and drawn with image smoothing enabled, and the third is scaled to 3x but drawn with image smoothing disabled.

Optimizing canvas - Web APIs
don’t scale images in drawimage cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in drawimage().
...the best case is to not scale the canvas, or have a smaller canvas and scale up rather than a bigger canvas and scale down.
... var scalex = window.innerwidth / canvas.width; var scaley = window.innerheight / canvas.height; var scaletofit = math.min(scalex, scaley); var scaletocover = math.max(scalex, scaley); stage.style.transformorigin = '0 0'; //scale from top left stage.style.transform = 'scale(' + scaletofit + ')'; turn off transparency if your application uses canvas and doesn’t need a transparent backdrop, set the alpha option to false when creating a drawing context with htmlcanvaselement.getcontext().

DOMMatrix - Web APIs
dommatrix.scalenonuniformself() modifies the matrix by applying the specified scaling on the x, y, and z axes, centered at the given origin.
... dommatrix.scaleself() modifies the matrix by applying the specified scaling factors, with the center located at the specified origin.
... dommatrix.scale3dself() modifies the matrix by applying the specified scaling factor to all three axes, centered on the given origin.

Element.msZoomTo() - Web APIs
scalefactor[in]: floating-point.
... the scale factor (mscontentzoomfactor) to zoom to.
... example /* zooming in on an element while still keeping it centered in the viewport */ var args = { contentx: target.offsetleft + target.offsetwidth/2; contenty: target.offsettop + target.offsetheight/2; scalefactor: 2.0; } zoomer.mszoomto(args); see also microsoft api extensions ...

RTCRtpEncodingParameters - Web APIs
scaleresolutiondownby only used for senders whose track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding.
...a value of 2.0 scales the video frames down by a factor of 2 in each dimension, resulting in a video 1/4 the size of the original.
... the value must not be less than 1.0 (you can't use this to scale the video up).

RTCRtpSendParameters.encodings - Web APIs
scaleresolutiondownby only used for senders whose track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding.
...a value of 2.0 scales the video frames down by a factor of 2 in each dimension, resulting in a video 1/4 the size of the original.
... the value must not be less than 1.0 (you can't use this to scale the video up).

VisualViewport - Web APIs
visualviewport.scale read only returns the pinch-zoom scaling factor applied to the visual viewport.
... var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling.

Viewport concepts - CSS: Cascading Style Sheets
the visual viewport is the visual portion of a screen not including on-screen keyboards, areas outside of a pinch-zoom area, or other feature that doesn't scale with the dimensions of a page.
...it should preferably be set to device-width, which is the width of the screen in css pixels at a scale of 100%.
... there are other properties, including maximum-scale, minimum-scale, and user-scalable, which control whether users can zoom the page in or out, but the default values are the best for accessibility and user experience, so these can be omitted.

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
level-indicator div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; } <div>lorem</div> safari relevancy-level-indicator div{ color: black; -moz-appearance: relevancy-level-indicator; -webkit-appearance: relevancy-level-indicator; } <div>lorem</div> safari scale-horizontal div { color: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; } <div>lorem</div> firefox scalethumbend div { color: black; -moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; } <div>lorem</div> firefox scalethumb-horizontal div { ...
...color: transparent; -moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; } <div>lorem</div> firefox scalethumbstart div { color: black; -moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; } <div>lorem</div> firefox scalethumbtick div { color: black; -moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; } <div>lorem</div> firefox scalethumb-vertical div { color: black; -moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; } <div>lorem</div> firefox scale-vertical div { color: transparent; -moz-appearance: scale-vertical; -webki...
...t-appearance: scale-vertical; } <div>lorem</div> firefox scrollbarthumb-horizontal div { color: black; -moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; } <div>lorem</div> firefox scrollbarthumb-vertical div { color: black; -moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; } <div>lorem</div> firefox scrollbartrack-horizontal div { color: black; -moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; } <div>lorem</div> firefox scrollbartrack-vertical div { color: black; -moz-appearance: scrollbartrack-ve...

backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied...
...l valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>?
... )<grayscale()> = grayscale( <number-percentage> )<hue-rotate()> = hue-rotate( <angle> )<invert()> = invert( <number-percentage> )<opacity()> = opacity( [ <number-percentage> ] )<saturate()> = saturate( <number-percentage> )<sepia()> = sepia( <number-percentage> )where <number-percentage> = <number> | <percentage><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?

background-size - CSS: Cascading Style Sheets
values contain scales the image as large as possible without cropping or stretching the image.
... cover scales the image as large as possible without stretching the image.
... auto scales the background image in the corresponding direction such that its intrinsic proportions are maintained.

<filter-function> - CSS: Cascading Style Sheets
grayscale() converts the image to grayscale.
... html <div></div> <ul> <li> <label for="filter-select">choose a filter function:</label> <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cl...
...slider.setattribute('data-unit', ''); } else if(filter === 'drop-shadow') { slider.value = 0; slider.min = -20; slider.max = 40; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'opacity') { slider.value = 1; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setattribute('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 === 'dro...

font-smooth - CSS: Cascading Style Sheets
auto - allow the browser to select an optimization for font smoothing, typically grayscale.
... grayscale - render text with grayscale antialiasing, as opposed to the subpixel.
... for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-color: black; color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard.

matrix3d() - CSS: Cascading Style Sheets
} .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } result matrix translation and scale example another transform3d() example, which implements an animated combined translate and scale.
... { height: 100vh; /* centering content */ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; } .foo { width: 50%; padding: 1em; color: white; background: #ff8c66; border: 2px dashed black; text-align: center; font-family: system-ui, sans-serif; font-size: 14px; /* setting up animation for better demonstration */ animation: motionscale 2s alternate linear infinite; } @keyframes motionscale { from { /* identity matrix is used as basis here.
... the matrix below describes the following transformations: translates every x point by -50px translates every y point by -100px translates every z point by 0 scales down by 10% */ transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, -50,-100,0,1.1 ); } 50% { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,0.9 ); } to { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 50,100,0,1.1 ) } } result specifications specification status comment css transforms level 2the definition of 'matrix3d()' in that specification.

DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm...
... ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm or do it in all in one command.
... ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \ -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \ -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \ -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm 2.

preserveAspectRatio - SVG: Scalable Vector Graphics
scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.
... meet or slice reference the meet or slice reference is optional and, if provided, must be one of the following keywords: meet (the default) - scale the graphic such that: aspect ratio is preserved the entire viewbox is visible within the viewport the viewbox is scaled up as much as possible, while still meeting the other criteria in this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the viewbox (i.e., the area into which the viewbox will draw...
... slice - scale the graphic such that: aspect ratio is preserved the entire viewport is covered by the viewbox the viewbox is scaled down as much as possible, while still meeting the other criteria in this case, if the aspect ratio of the viewbox does not match the viewport, some of the viewbox will extend beyond the bounds of the viewport (i.e., the area into which the viewbox will draw is larger than the viewport).

transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
...ntal translation --> <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> <!-- vertical translation --> <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> <!-- both horizontal and vertical translation --> <rect x="5" y="5" width="40" height="40" fill="yellow" transform="translate(50,50)" /> </svg> scale the scale(<x> [<y>]) transform function specifies a scale operation by x and y.
... example html,body,svg { height:100% } <svg viewbox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- uniform scale --> <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" /> <!-- vertical scale --> <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1,4)" /> <!-- horizontal scale --> <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4,1)" /> <!-- no scale --> <circle cx="0" cy="0" r="10" fill="black" /> </svg> rotate the rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point.

<feDisplacementMap> - SVG: Scalable Vector Graphics
the formula for the transformation looks like this: p'(x,y) ← p( x + scale * (xc(x,y) - 0.5), y + scale * (yc(x,y) - 0.5)) where p(x,y) is the input image, in, and p'(x,y) is the destination.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in in2 scale xchannelselector ychannelselector dom interface this element implements the svgfedisplacementmapelement interface.
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<fedisplacementmap>' in that specification.

<metadata> - SVG: Scalable Vector Graphics
--> <g id="hub" transform="translate(80 45)"> <title>hub</title> <use xlink:href="#hub" transform="scale(0.75)"/> </g> <!-- use the computer symbol.
... --> <g id="computera" transform="translate(20 170)"> <title>computer a</title> <use xlink:href="#computer" transform="scale(0.5)"/> </g> <!-- use the same computer symbol.
... --> <g id="computerb" transform="translate(300 170)"> <title>computer b</title> <use xlink:href="#computer" transform="scale(0.5)"/> </g> <!-- draw cable a.

Canvas code snippets - Archive of obsolete content
xt = this.ctx = canvas.getcontext('2d'); if (!canvas2dcontext.prototype.arc) { canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'put...
...= remotecanvas.canvas_height + 'px'; canvas.width = remotecanvas.canvas_width; canvas.height = remotecanvas.canvas_height; var windowwidth = window.innerwidth - 25; var windowheight = window.innerheight; var ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, remotecanvas.canvas_width, remotecanvas.canvas_height); ctx.save(); ctx.scale(remotecanvas.canvas_width / windowwidth, remotecanvas.canvas_height / windowheight); ctx.drawwindow(remotewindow, 0, 0, windowwidth, windowheight, 'rgb(255, 255, 255)'); ctx.restore(); }; usage: var remotecanvas = new remotecanvas(); remotecanvas.load(); convert image files to base64 strings the following code ge...

CSS3 - Archive of obsolete content
the supported transforms are: matrix(), translate(), translatex(), translatey(), scale(), scalex(), scaley(), rotate(), skewx(), and skewy().
... the support of tri-dimensional transforms to be applied to any element by adding the css transform-style, perspective, perspective-origin, and backface-visibility properties and extended the transform property with the following transforms are: matrix 3d(), translate3d(), translatez(), scale3d(), scalez(), rotate3d(), rotatex(), rotatey(), rotatez(), and perspective().

dir - Archive of obsolete content
normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code.
... reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales).

max - Archive of obsolete content
« xul reference home type: integer the maximum value that the scale or number box may be set to.
... the default value is 100 for scales and infinity for number boxes.

XUL element attributes - Archive of obsolete content
normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code.
... reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales).

XUL Reference - Archive of obsolete content
e image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbar...
...on notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign ...

XUL controls - Archive of obsolete content
<richlistbox> <richlistitem> <image src="happy.png"/> </richlistitem> <richlistitem> <image src="sad.png"/> </richlistitem> <richlistitem> <image src="angry.png"/> </richlistitem> </richlistbox> richlistbox reference related elements: richlistitem <scale> a scale displays a bar with a thumb that may be slid across the bar to select between a range of values.
... <scale min="1" max="10"/> scale reference <splitter> allows the user to adjust the division of space between elements.

button - Archive of obsolete content
normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code.
... reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales).

toolbarbutton - Archive of obsolete content
normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code.
... reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales).

Common Firefox theme issues and solutions - Archive of obsolete content
"about" pages about:addons disabled add-on icons are not grey scale in tools > add-ons, the icons of disabled icons need to be converted to grey scale.
... to accomplish this copy the file chrome://mozapps/skin/extensions/extensions.svg from the default theme into the mozapps/extensions/ folder of your theme and add the following style rule to the css file extensions.css: .addon[active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); opacity:0.3; } about:memory about:memory nodes do not collapse the styling of about:memory is a little messed up in that nodes do not collapse as they should when clicked on.

Index - Game development
56 scaling 2d, beginner, canvas, games, javascript, phaser, tutorial scaling refers to how the game canvas will scale on different screen sizes.
... we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later.

Building up a basic demo with Babylon.js - Game development
animation we already used position and rotation to adjust the position of the shapes; we could also scale them.
... scaling add this line below the previous one to scale the torus: torus.scaling.z = math.abs(math.sin(t*2))+0.5; there's a little bit of adjustment made to make the animation look and feel nice.

2D maze game with device orientation - Game development
var ball = { _width: 320, _height: 480 }; ball.boot = function(game) {}; ball.boot.prototype = { preload: function() { this.load.image('preloaderbg', 'img/loading-bg.png'); this.load.image('preloaderbar', 'img/loading-bar.png'); }, create: function() { this.game.scale.scalemode = phaser.scalemanager.show_all; this.game.scale.pagealignhorizontally = true; this.game.scale.pagealignvertically = true; this.game.state.start('preloader'); } }; the main ball object is defined and we're adding two variables called _width and _height that are the width and the height of the game canvas — they will help us position the elements on the scre...
...in this tutorial we used phaser, but there are a number of other frameworks worth considering too like impactjs, construct 2 or playcanvas — it depends on your preferences, coding skills (or lack thereof), project scale, requirements and other aspects.

Index - MDN Web Docs Glossary: Definitions of Web-related terms
in vector images, they are used to model smooth curves that can be scaled indefinitely.
...the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.

Overflowing content - Learn web development
why not scale the size of the container to fit all the content?
...in addition, some of the methods discussed in sizing items in css may help you create boxes that scale better with varying amounts of content.

Beginner's guide to media queries - Learn web development
the viewport meta tag if you look at the html source in the above example, you'll see the following element included in the head of the document: <meta name="viewport" content="width=device-width,initial-scale=1"> this is the viewport meta tag — it exists as a way control how mobile browsers render content.
... to remedy this, including a viewport meta tag like the one above on your page tells the browser "don't render the content with a 960 pixel viewport — render it using the real device width instead, and set a default initial scale level for better consistency." the media queries will then kick in as expected.

How does the Internet work? - Learn web development
of course a single router can't scale that far, but, if you read carefully, we said that a router is a computer like any other, so what keeps us from connecting two routers together?
... by connecting computers to routers, then routers to routers, we are able to scale infinitely.

UI pseudo-classes - Learn web development
for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out another dom elemen...
... as a recap, the :checked code from our styled radio buttons example looks like so: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } you can try it out here: basically, we build the styling for the radio button "inner circle" using the ::before pseudo element, but set a scale(0) transform on it.

TypeScript support in Svelte - Learn web development
there seems to be a broad consensus that typescript is particularly well suited for large-scale projects, with many developers working on the same code base.
... and it is indeed being used by several large-scale projects, like angular 2, vue 3, ionic, visual studio code, jest and even the svelte compiler.

Styling Vue components with CSS - Learn web development
up, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
... to use the scoped modifier, create a <style> element inside todoitem.vue, at the bottom of the file, and give it a scoped attribute: <style scoped> </style> next, copy the following css into the newly created <style> element: .custom-checkbox > .checkbox-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; color: #0b0c0c; display: block; margin-bottom: 5px; } .custom-checkbox > .checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; box-sizing: border-box; width: 100...

nsIAccessibleProvider
ker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001016 xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface.
... xformscalendarwidget 0x00002102 used for calendar widget that is used by xforms elements.

nsIMarkupDocumentViewer
defaultcharacterset acstring forcecharacterset acstring fullzoom float the amount by which to scale all lengths.
... prevdoccharacterset acstring textzoom float the amount by which to scale all text.

Animation inspector example: Web Animations API - Firefox Developer Tools
nt <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)...
...', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); var iconanimation = icon.animate(iconkeyframeset, iconkeyframeoptions); var noteanimation = note.animate(notekeyframeset, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; function animatechannel(e) { if (e.button != 0) { return; } if (e.target.id != "icon") { return; } if (firsttime) { iconanimation.play(); note...

CanvasPattern.setTransform() - Web APIs
javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas ...
...-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.create...

CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.scale() adds a scaling transformation to the canvas units by x horizontally and by y vertically.
... image smoothing canvasrenderingcontext2d.imagesmoothingenabled image smoothing mode; if disabled, images will not be smoothed if scaled.

Applying styles and colors - Web APIs
a 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.
...note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterlimit property (whose default value is 10.0 in the html <canvas>), so the miterlimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.

Document: wheel event - Web APIs
examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel.
... <div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: document.addeventlistener('wheel', zoom); specificati...

Element: wheel event - Web APIs
examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel.
... <div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: el.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specificati...

GestureEvent - Web APIs
initial value: 0.0 gestureevent.scale read only distance between two digits since the event's beginning.
... nochrome android no support nofirefox android no support noopera android no support nosafari ios full support 2samsung internet android no support noscale non-standardchrome no support noedge no support nofirefox no support noie no support noopera no support nosafari full support 9we...

GlobalEventHandlers.onwheel - Web APIs
examples this example shows how to scale an element using the mouse (or other pointing device) wheel.
... html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; result specification specification status comment html living standardthe defi...

HTMLCanvasElement.toDataURL() - Web APIs
ty with jpegs var fullquality = canvas.todataurl('image/jpeg', 1.0); // data:image/jpeg;base64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs.
... color in this example): html <img class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelement('canvas'), octx = ocanvas.getcontext('2d'); for (var nwidth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimgid = 0; nimgid < nimgslen; nimgid++) { ocolorimg = aimages[nimgid]; nwidth = ocolorimg.offsetwidth; nheight = ocolorimg.offs...

MSGestureEvent - Web APIs
msgestureevent.scale read only the difference in scale (for zoom gestures) from the previous msgestureevent of the current gesture.
... nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support noscale non-standardchrome no support noedge no support 12 — 79firefox no support noie full support 10opera no support nosafari no support nowebview andro...

MediaTrackConstraints - Web APIs
allowed values are none and crop-and-scale.
...crop-and-scale means that the user agent can use cropping and downscaling on the camera output in order to satisfy other constraints that affect the resolution.

ReadableStream.pipeThrough() - Web APIs
next, we log the contents of the readable stream, use pipethrough() to send it to a new function that creates a gray-scaled version of the stream, then log the new stream's contents too.
... // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(rs => logreadablestream('fetch response stream', rs)) // create a gray-scaled png stream out of the original .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png chunk stream', rs)) specifications specification status comment streamsthe definition of 'pipethrough()' in that specification.

SVGMatrix - Web APIs
svgmatrix.scale() post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix.
... svgmatrix.scalenonuniform() post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix.

SVGSVGElement - Web APIs
w will represent the target of the link if the initial view was a link into the svg document fragment using an svg view specification fragment identifier (i.e., #svgview(…)), then: the values for viewbox, preserveaspectratio, zoomandpan, transform and viewtarget within currentview will correspond to the values from the svg view specification fragment identifier svgsvgelement.currentscale on an outermost <svg> element, this float attribute indicates the current scale factor relative to the initial view to take into account user magnification and panning operations.
... dom attributes currentscale and currenttranslate are equivalent to the 2×3 matrix [a b c d e f] = [currentscale 0 0 currentscale currenttranslate.x currenttranslate.y].

SVGTransformList - Web APIs
in order to do this we create a separate svgtransform object for each transformation -- such as translate, rotate, and scale.
... var svgroot = evt.target.parentnode; // svgtransformlist of the element that has been clicked on var tfmlist = evt.target.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(50,5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); tfmlist.appenditem(rotate); tfmlist.appenditem(scale); } ]]> </script> <polygon fill="orange" stroke="black" stroke-width="5" points="100,225 ...

Touch() - Web APIs
finger, stylus) along the axis indicated by rotationangle, in css pixels of the same scale as screenx; 0 if no value is known.
...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.

Touch - Web APIs
the value is in pixels of the same scale as screenx.
...the value is in pixels of the same scale as screeny.

VRStageParameters - Web APIs
the vrstageparameters interface of the webvr api represents the values describing the the stage area for devices that support room-scale experiences.
... examples var info = document.queryselector('p'); var vrdisplay; navigator.getvrdisplays().then(function(displays) { vrdisplay = displays[0]; var stageparams = vrdisplay.stageparameters; // stageparams is a vrstageparameters object if(stageparams === null) { info.textcontent = 'your vr hardware does not support room-scale experiences.' } else { info.innerhtml = '<strong>display stage parameters</strong>' + '<br>sitting to standing transform: ' + stageparams.sittingtostandingtransform + '<br>play area width (m): ' + stageparams.sizex + '<br>play area depth (m): ' + stageparams.sizey } }); specifications specification status comment ...

Visual Viewport API - Web APIs
the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification.

WebGLRenderingContext.getUniformLocation() - Web APIs
gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(uglobalcolor, [0.1, 0.7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the resulting animation in action.
... then the three uniforms' values are set: the uscalingfactor uniform — a 2-component vertex — receives the horizontal and vertical scaling factors from the variable currentscale.

WebGLRenderingContext.polygonOffset() - Web APIs
the webglrenderingcontext.polygonoffset() method of the webgl api specifies the scale factors and units to calculate depth values.
... syntax void gl.polygonoffset(factor, units); parameters factor a glfloat which sets the scale factor for the variable depth offset for each polygon.

Advanced techniques: Creating and sequencing audio - Web APIs
when outputting sound to a file or speakers we need to have a number to represent 0db full scale — the numerical limit of the fixed point media or dac.
... in floating point audio, 1 is a convenient number to map to "full scale" for mathematical operations on signals, so oscillators, noise generators and other sound sources typically output bipolar signals in the range -1 to 1.

XRWebGLLayer() - Web APIs
framebufferscalefactor optional a floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel size for the frame buffer.
... the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution.

XRWebGLLayerInit - Web APIs
framebufferscalefactor optional a floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel size for the frame buffer.
... the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution.

viewport-fit - CSS: Cascading Style Sheets
contain the viewport is scaled to fit the largest rectangle inscribed within the display.
... cover the viewport is scaled to fill the device display.

Color picker tool - CSS: Cascading Style Sheets
les { width: 375px; height: 114px; max-height: 218px; margin: 0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolute; float: left; transition: all 0.2s; } #picker-samples .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #picker-samples .sample[data-active='true'] { border-color: #999; } #picker-samples .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; positio...
...ht: inherit; } #color-palette .palette { width: 456px; height: 38px; margin: 3px; padding: 3px; display: table; background-color: #fff; } #color-palette .palette .sample { width: 30px; height: 30px; margin: 3px; position: relative; border: 1px solid #ddd; float: left; transition: all 0.2s; } #color-palette .palette .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #color-palette .controls { } #color-palette .controls > * { float: left; } #color-palette .controls > *:hover { cursor: pointer; } #color-palette .controls .lock { width: 24px; height: 24px; margin: 10px; padding: 3px; background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); background-repeat: no-repeat; background-position: bottom righ...

CSS reference - CSS: Cascading Style Sheets
stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indetermi...
...ntentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-pad...

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
this ensures that its width:height ratio is always 3:4, unless it's deliberately scaled to a disproportionate size (that is, by explicitly specifying both width and height that aren't of that ratio).
... background: url(no-dimensions-or-ratio.svg); background-size: contain; the rendered output looks like this: source: one specified dimension, no intrinsic ratio similarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area.

animation - CSS: Cascading Style Sheets
tion | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div class="cel...
...ex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.a...

border-image-slice - CSS: Cascading Style Sheets
these are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.
...the sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an svg image).

text-size-adjust - CSS: Cascading Style Sheets
to map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.
... since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable.

text-underline-offset - CSS: Cascading Style Sheets
it is recommended to use em units so the offset scales with the font size.
...a percentage inherits as a relative value, and so therefore scales with changes in the font.

transform-origin - CSS: Cascading Style Sheets
transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5">&nbsp;</div> .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: scale(1.7); <div class="box6">&nbsp;</div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); } transform: scale(1.7); transform-origin: 0 0; <div class="box7">&nbsp;</div> .box7 { margin: 0.5em; width: 3em; height: 3em; ...
...border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); transform-origin: 0 0; -webkit-transform-origin: 0 0; } transform: scale(1.7); transform-origin: 100% -30%; <div class="box8">&nbsp;</div> .box8 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; } transform: skewx(50deg); transform-origin: 100% -30%; <div class="box9">&nbsp;</div> .box9 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewx(50deg); -webkit-transform: s...

Graphic design for responsive sites - Progressive web apps (PWAs)
programmatic images you should also try to use programmatic/vector graphics as much as possible, as they theoretically scale infinitely so will still look crisp at high resolutions.
...in addition, canvases are just raster images, so the text created inside them is not accessible, plus they don't scale well.

The building blocks of responsive design - Progressive web apps (PWAs)
this makes the dimensions scale up and down nicely along with the viewport width.
...these scale as the resolution changes or the browser zooms.

vector-effect - SVG: Scalable Vector Graphics
the scale of that user coordinate system does not change in spite of any transformation changes from a host coordinate space.
... example example: vector-effect="non-scaling-stroke" <svg viewbox="0 0 500 240"> <!-- normal --> <path d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- scaled --> <path transform="translate(100,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- fixed--> <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> </svg> result specifications specification status comme...

SVG documentation index - SVG: Scalable Vector Graphics
183 scale filters, svg, svg attribute the scale attribute defines the displacement scale factor to be used on a <fedisplacementmap> filter primitive.
... 211 surfacescale filters, needscompattable, svg, svg attribute the surfacescale attribute represents the height of the surface for a light filter primitive.

Filter effects - SVG: Scalable Vector Graphics
rsion="1.1"> <defs> <!-- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <!-- litpaint --> <fespecularlighting in="blur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fecomposite in="specout" in2="sourcealpha" operator="in" result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" ...
... step 3 <fespecularlighting in="offsetblur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fespecularlighting> takes in "offsetblur", generates a lighting effect, and stores the result in the buffer "specout".

SVG and CSS - SVG: Scalable Vector Graphics
"m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(342)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> </g> <g id="inner-petals" transform="rotate(9) scale(0.33)"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a...
...algradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <use id="outer-petals" xlink:href="#petals"/> <use id="inner-petals" xlink:href="#petals" transform="rotate(9) scale(0.33)"/> </g> </svg> what next?

package.json - Archive of obsolete content
a larger icon will work, but may either scaled and possibly distorted) or might break parts of firefox ui.

Chapter 1: Introduction to Extensions - Archive of obsolete content
these are sophisticated extensions that can be considered full-scale applications in their own right, essentially using firefox as the development platform.

Adding Events and Commands - Archive of obsolete content
your ui can easily scale this way.

The Box Model - Archive of obsolete content
using the former allows the ui to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations.

levelchange - Archive of obsolete content
property type description batterymanager.level double (float) the system's battery charging level scaled from 0 to 1.0.

Index - Archive of obsolete content
1900 scale xul elements, xul reference a scale (sometimes referred to as a "slider") allows the user to select a value from a range.

Creating regular expressions for a microsummary generator - Archive of obsolete content
here are several other urls of this style: http://cgi.ebay.com/firefox-2002-dvd_w0qqitemz130017517168qqihz003qqcategoryz617qqcmdzviewitem http://cgi.ebay.com/ahm-ho-scale-firefox-tank-car_w0qqitemz290019763032qqihz019qqcategoryz19130qqcmdzviewitem http://cgi.ebay.com/inuyasha-anime-pin-of-kirara-kilala-firefox_w0qqitemz170019463424qqihz007qqcategoryz39557qqcmdzviewitem based on these examples, it looks like the urls all start with "http://cgi.ebay.com/", they all contain the string "qqitemz" followed by the item number, and they all end with the string "qqcmdzv...

Prism - Archive of obsolete content
host window prism provides a simple, scaled down browser window for running web applications.

New Skin Notes - Archive of obsolete content
edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-size; width: 88%; and max-width set to 95% or something like that.

movetoclick - Archive of obsolete content
« xul reference home movetoclick type: boolean if true, clicking the slide area of the scale moves the thumb directly to that position.

increment - Archive of obsolete content
« xul reference home increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).

Deprecated and defunct markup - Archive of obsolete content
--neil 03 march 2011 <sidebarheader> not true, still in use --neil 03 march 2011 <slider> (clickable tray in <scrollbar> which holds <thumb>; do not use alone) also used as part of <scale> --neil 03 march 2011 <spinner> (spinbox; <spinbuttons> with a textbox whereby spinning affects value in textbox; not usable) <spring> (use @flex instead) <strut> (replaced by @debug?) <tabcontrol> (contained tabbox and tabpanel) <text> (like <label> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars) <textfield> (like <textbox>) <thumb...

Index - Archive of obsolete content
1169 scale xul elements, xul reference a scale (sometimes referred to as a "slider") allows the user to select a value from a range.

decrease - Archive of obsolete content
« xul reference home method of: scale textbox decrease() return type: no return value decreases the value of the scale or number box by the increment.

decreasePage - Archive of obsolete content
« xul reference home method of: scale decreasepage() return type: no return value decreases the value of the scale by the pageincrement.

increase - Archive of obsolete content
« xul reference home method of: scale textbox increase() return type: no return value increases the value of the scale or number box by the increment.

increasePage - Archive of obsolete content
« xul reference home method of: scale increasepage() return type: no return value increases the value of the scale by the page increment.

accessibleType - Archive of obsolete content
xullistheader 1025 xullistitem 100c xulmenubar 100d xulmenuitem 100e xulmenupopup 100f xulmenuseparator 1010 xulpane 1011 xulprogressmeter 1012 xulscale 1013 xulstatusbar 1014 xulradiobutton 1015 xulradiogroup 1016 xultab 1017 xultabbox 1018 xultabs 1019 xultext 101a xultextbox 101b ...

scrollbar - Archive of obsolete content
increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).

Introduction to Public-Key Cryptography - Archive of obsolete content
at the other end of the scale, for certificates that identify people who can authorize large expenditures or make other sensitive decisions, the issuing process may require notarized documents, a background check, and a personal interview.

XForms Range Element - Archive of obsolete content
characteristics analogous widget is <xul:scale/>, which is available in fx 3.0 only if the incremental attribute has the value true, the value of the bound node will be updated upon each movement of the slider's thumb.

Introduction to game development for the Web - Game development
svg (scalable vector graphics) lets you build vector graphics that scale smoothly regardless of the size or resolution of the user's display.

Square tilemaps implementation: Static maps - Game development
we need to supply the atlas image, the coordinates and dimensions of the tile inside the atlas, and the target coordinates and size (a different tile size in here would scale the tile.) so, for instance, to draw the tree tile, which is the third in the atlas, at the screen coordinates (128, 320), we would call drawimage() with these values: context.drawimage(atlasimage, 192, 0, 64, 64, 128, 320, 64, 64); in order to support atlases with multiple rows and columns, you would need to know how many rows and columns there are to be able to compute the source x and y.

Physics - Game development
final code check the latest code should look like this: var ball; function preload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; game.stage.backgroundcolor = '#eee'; game.load.image('ball', 'img/ball.png'); } function create() { game.physics.startsystem(phaser.physics.arcade); ball = game.add.sprite(50, 50, 'ball'); game.physics.enable(ball, phaser.physics.arcade); ball.

Bézier curve - MDN Web Docs Glossary: Definitions of Web-related terms
in vector images, they are used to model smooth curves that can be scaled indefinitely.

Public-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
however, they are typically much slower than symmetric algorithms and the size of message they can encrypt is proportional to the size of the key, so they do not scale well for long messages.

SVG - MDN Web Docs Glossary: Definitions of Web-related terms
as a vector image format, svg graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen size.

Visual Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.

Advanced styling effects - Learn web development
the second is grayscale(); by using a percentage we are setting how much color we want to be removed.

Backgrounds and borders - Learn web development
by default, the large image is not scaled down to fit the box, so we only see a small corner of it, whereas the small image is tiled to fill the box.

Images, media, and form elements - Learn web development
if we use contain as a value the image will be scaled down until it is small enough to fit inside the box.

Test your skills: Images and Form elements - Learn web development
we want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped.

CSS values and units - Learn web development
the benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page.

create fancy boxes - Learn web development
backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned.

How to build custom form controls - Learn web development
.select .optlist.hidden { /* this is a simple way to hide the list in an accessible way; we will talk more about accessibility in the end */ max-height: 0; visibility: hidden; } note: we could also have used transform: scale(1, 0) to give the optionlist no height and full width.

Adding vector graphics to the Web - Learn web development
the vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger.

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

Multimedia and Embedding - Learn web development
unlike regular formats like png/jpg, they don't distort/pixelate when zoomed in — they can remain smooth when scaled.

Index - Learn web development
consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things.

Introduction to web APIs - Learn web development
for example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the canvas api, or create a complex 3d scene with lighting and textures using webgl.

Introduction to the server side - Learn web development
most large-scale websites use server-side code to dynamically display different data when needed, generally pulled out of a database stored on a server and sent to the client to be displayed via some code (e.g.

Introduction to client-side frameworks - Learn web development
these opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software.

Getting started with Svelte - Learn web development
finally the file public/index.html includes the generated bundle.css and bundle.js files: <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link rel='icon' type='image/png' href='/favicon.png'> <link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a little more than 3kb, which includes the "svelte runtime" (just 300 lines of javascrip...

Working with Svelte stores - Learn web development
the svelte/transition module exports seven functions: fade, blur, fly, slide, scale, draw, and crossfade.

Vue conditional rendering: editing existing todos - Learn web development
newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } form { display: flex; flex-direction: row; flex-wrap: wrap; } form > * { flex: 0 0 100%; } </style> note: walk through the above code then read the below description to make sure ...

HTMLIFrameElement.getScreenshot()
the getscreenshot() method of the htmliframeelement lets you request a screenshot of a content <iframe>, scaled to fit within a specified maximum width and height.

Extras
</mtr> </mtable> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo>...

Fonts for Mozilla 2.0's MathML engine
in general, if the necessary glyphs are not available on the system then mozilla tries to stretch symbols using scale transforms, but that may result in a less pleasant rendering.

Mozilla projects on GitHub
projects this listing covers the larger-scale and more important mozilla projects on github.

Renaming With Pork
pork does not yet have a ui, but it is also build-system agnostic and scales to large codebases.

JSAPI User Guide
but the jsapi is designed to scale to applications that need many global objects.

Animated PNG graphics
if the png 'phys' chunk is present, the apng images and their x_offset and y_offset values must be scaled in the same way as the main image.

Index
their scale is the same and is equal to that of the screen coordinate system.

IAccessibleComponent
their scale is the same and is equal to that of the screen coordinate system.

nsIAccessibleRole
it is used by xul:scale, role="slider", xforms:range.

nsIDOMWindow
textzoom float get or set the document scale factor as a multiplier of the default size.

nsIDocShell
zoom float set/get the document scale factor.

Edit Shape Paths in CSS - Firefox Developer Tools
moving and scaling shapes there is extra functionality available on the shape highlight — if you ctrl/cmd + click on the shapes icon for your shape the highlight will change, instead providing the ability to scale and/or move it.

Animation inspector example: CSS transitions - Firefox Developer Tools
<div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacit...

AnalyserNode.getByteFrequencyData() - Web APIs
the frequency data is composed of integers on a scale from 0 to 255.

AudioParam.setValueCurveAtTime() - Web APIs
the curve is a linear interpolation between the sequence of values defined in an array of floating-point values, which are scaled to fit into the given interval starting at starttime and a specific duration.

AudioParam - Web APIs
audioparam.setvaluecurveattime() schedules the values of the audioparam to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time.

Background Tasks API - Web APIs
if the current maximum value of the progress bar is different from the current total number of enqueued tasks (totaltaskcount), then we update the contents of the displayed total number of tasks (totaltaskcountelem) and the maximum value of the progress bar, so that it scales properly.

BatteryManager.level - Web APIs
syntax var level = battery.level on return, level is a number representing the system's battery charge level scaled to a value between 0.0 and 1.0.

BatteryManager - Web APIs
batterymanager.level read only a number representing the system's battery charge level scaled to a value between 0.0 and 1.0.

CSSStyleValue.parse() - Web APIs
const css = cssstylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification.

Determining the dimensions of elements - Web APIs
as an example, if the element has width: 100px; and transform: scale(0.5); the getboundingclientrect() will return 50 as the width, while offsetwidth will return 100.

CSS Object Model (CSSOM) - Web APIs
css typed object model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixcomponent cssnumericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it...

CanvasRenderingContext2D.drawWindow() - Web APIs
it will be scaled, rotated and so on according to the current transformation.

CanvasRenderingContext2D.fillText() - Web APIs
however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width.

CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
example setting image smoothing quality this example uses the imagesmoothingquality property with a scaled image.

CanvasRenderingContext2D.setTransform() - Web APIs
this lets you scale, rotate, translate (move), and skew the context.

CanvasRenderingContext2D.strokeText() - Web APIs
however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width.

CanvasRenderingContext2D.transform() - Web APIs
this lets you scale, rotate, translate (move), and skew the context.

Basic usage of canvas - Web APIs
the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted.

Compositing and clipping - Web APIs
after this a set of 50 randomly positioned and scaled stars is drawn, using the custom drawstar() function.

Drawing shapes with canvas - Web APIs
later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default.

Finale - Web APIs
svg scalable vector graphics let you describe images as sets of vectors (lines) and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.

ConvolverNode() - Web APIs
disablenormalization: a boolean controlling whether the impulse response from the buffer will be scaled by an equal-power normalization, or not.

ConvolverNode.normalize - Web APIs
the normalize property of the convolvernode interface is a boolean that controls whether the impulse response from the buffer will be scaled by an equal-power normalization when the buffer attribute is set, or not.

ConvolverNode - Web APIs
convolvernode.normalize a boolean that controls whether the impulse response from the buffer will be scaled by an equal-power normalization when the buffer attribute is set, or not.

DOMMatrix() - Web APIs
var point = new dompoint(5, 4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status comment geometry inte...

EffectTiming.easing - Web APIs
the effecttiming dictionary's easing property in the web animations api specifies the timing function used to scale the time to produce easing effects, where easing is the rate of the animation's change over time.

Element: dblclick event - Web APIs
javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification.

Element: msContentZoom event - Web APIs
the mscontentzoom event fires when a user zooms the element (changes the scale of the content).

HTMLElement: animationcancel event - Web APIs
="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcont...

HTMLElement: animationiteration event - Web APIs
="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcont...

HTMLElement: animationstart event - Web APIs
="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcont...

Key Values - Web APIs
vk_wink "zoomtoggle" [2] toggles between full-screen and scaled content display, or otherwise change the magnification level.

MediaImage - Web APIs
sizes specifies the resource in multiple sizes so that user agent does not have to scale a single image.

MediaTrackControls.volume - Web APIs
syntax var constraintsobject = { volume: constraint }; constraintsobject.volume = constraint; value a constraindouble describing the acceptable or required value(s) for an audio track's volume, on a linear scale where 0.0 means silence and 1.0 is the highest supported volume.

MediaTrackSettings - Web APIs
"crop-and-scale" the track's resolution might be the result of the user agent using cropping or downscaling from a higher camera resolution.

RTCRtpContributingSource.audioLevel - Web APIs
this value, which is in the range 0.0 to 1.0, is on a linear scale and its value is defined in dbov, or decibels (overload).

RTCRtpSender.setParameters() - Web APIs
rangeerror the value specified for scaleresolutiondownby is less than 1.0, which would result in scaling up rather than down, which is not allowed; or one or more of the specified encodings' maxframerate values is less than 0.0.

ResizeObserverEntry.contentBoxSize - Web APIs
we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size.

ResizeObserverEntry.target - Web APIs
we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size.

Resize Observer API - Web APIs
we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners, whereas the above solution gives you nice square corners that scale with the box size.

SVGElement: zoom event - Web APIs
the zoom event occurs when the user initiates an action which causes the current view of the svg document fragment to be rescaled.

SVGFEDiffuseLightingElement - Web APIs
svgfediffuselightingelement.surfacescale read only an svganimatednumber corresponding to the surfacescale attribute of the given element.

SVGFEDisplacementMapElement - Web APIs
svgfedisplacementmapelement.scale read only an svganimatednumber corresponding to the scale attribute of the given element.

SVGFESpecularLightingElement - Web APIs
svgfespecularlightingelement.surfacescale read only an svganimatednumber corresponding to the surfacescale attribute of the given element.

getBBox() - Web APIs
example html <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g id="group_text_1"> <text x="5" y="16" transform="scale(2, 2)">hello world!</text> <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">hello world again!</text> </g> <!-- shows bbox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> <!-- shows boundingclientrect in red --> <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect> </svg> javascript var rectbbox = d...

Screen.mozBrightness - Web APIs
indicates how bright the screen's backlight is, on a scale from 0 (very dim) to 1 (full brightness); this value is a double-precision float.

Using readable streams - Web APIs
// fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) // create a gray-scaled png stream out of the original .then(rs => logreadablestream('fetch response stream', rs)) .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png chunk stream', rs)) summary that explains the basics of “default” readable streams.

Streams API - Web APIs
grayscale a png: this example shows how a readablestream of a png can be turned into grayscale.

Touch.radiusX - Web APIs
the value is in css pixels of the same scale as touch.screenx.

Touch.radiusY - Web APIs
the value is in css pixels of the same scale as touch.screenx.

TouchEvent - Web APIs
initial value: 0.0 touchevent.scale read only distance between two digits since the event's beginning.

WebGLRenderingContext - Web APIs
webglrenderingcontext.pixelstorei() specifies the pixel storage modes webglrenderingcontext.polygonoffset() specifies the scale factors and units to calculate depth values.

Color masking - Web APIs
by limiting the color channels that are written by each drawing command, you can use each channel, for example, to store a different grayscale image.

WebGL best practices - Web APIs
mipmaps are cheap on memory (only 30% overhead) while providing often-large performance advantages when textures are "zoomed out" or generally downscaled in the distance in 3d, or even for cube-maps!

Taking still photos with WebRTC - Web APIs
(function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those variables are: width whatever size the incoming video is, we're going to scale the resulting image to be 320 pixels wide.

Using bounded reference spaces - Web APIs
note that if the underlying platform defines a fixed room-scale origin and boundary, it may initialize any uninitialized values to match that predefined information; this is not unexpected behavior for users of these platforms.

Movement, orientation, and motion: A WebXR example - Web APIs
mouse_speed a multiplier used to scale the inputs from the mouse used for pitch and yaw control.

Starting up and shutting down a WebXR session - Web APIs
perform calculations for the initial position and scale of your objects as needed.

Using the Web Animations API - Web APIs
for instance, in the growing and shrinking alice game example, you might have noticed something odd about the cake’s duration: duration: alicechange.effect.getcomputedtiming().duration / 2 to understand what’s happening here, let’s take a look at alice’s animation: var alicechange = document.getelementbyid('alice').animate( [ { transform: 'translate(-50%, -50%) scale(.5)' }, { transform: 'translate(-50%, -50%) scale(2)' } ], { duration: 8000, easing: 'ease-in-out', fill: 'both' }); alice’s animation has her going from half her size to twice her size over 8 seconds.

Web audio spatialization basics - Web APIs
*math.sin(q); y = panner.orientationz.value*math.sin(q) + panner.orientationy.value*math.cos(q); x = panner.orientationx.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; } boombox.style.transform = 'translatex('+transform.xaxis+'px) translatey('+transform.yaxis+'px) scale('+transform.zaxis+') rotatey('+transform.rotatey+'deg) rotatex('+transform.rotatex+'deg)'; const move = prevmove || {}; move.frameid = requestanimationframe(() => moveboombox(direction, move)); return move; } wiring up our controls wiring up out control buttons is comparatively simple — now we can listen for a mouse event on our controls and run this function, as well as stop it whe...

XRWebGLLayer - Web APIs
static methods getnativeframebufferscalefactor() returns the scaling factor that can be used to scale the resolution of the recommended webgl framebuffer resolution to the rendering device's native resolution.

Color contrast - Accessibility
when designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text.

prefers-reduced-motion - CSS: Cascading Style Sheets
*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment media queries level 5the definition of 'prefers-reduced-motion' in that specificatio...

CSS Transforms - CSS: Cascading Style Sheets
reference properties backface-visibility perspective perspective-origin rotate scale transform transform-box transform-origin transform-style translate data types <transform-function> guides using css transforms step-by-step tutorial about how to transform elements styled with css.

Animatable CSS properties - CSS: Cascading Style Sheets
offset-position offset-rotate opacity order outline outline-color outline-offset outline-width padding padding-block-end padding-block-start padding-bottom padding-inline-end padding-inline-start padding-left padding-right padding-top perspective perspective-origin right rotate row-gap scale scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start ...

Recipe: Media objects - CSS: Cascading Style Sheets
if the image is larger, the track stops growing at 200 pixels and as the image has a max-width of 100% applied, it scales down so that it continues to fit inside the column.

Mozilla CSS extensions - CSS: Cascading Style Sheets
-moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels ...

background-repeat - CSS: Cascading Style Sheets
by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).

background - CSS: Cascading Style Sheets
ackground-attachment background-clip background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas.

calc() - CSS: Cascading Style Sheets
' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example: h1 { font-size: calc(1.5rem + 3vw); } this ensures that text size will scale if the page is zoomed.

font-size - CSS: Cascading Style Sheets
by setting a keyword font size on the <body> element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

image() - CSS: Cascading Style Sheets
list items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as documents set to arabic or hebrew, will have the bullet display on the right, horizontally flippled, as if transform: scalex(-1) had been set.

<length> - CSS: Cascading Style Sheets
absolute lengths can cause accessibility problems, since they are fixed and do not scale according to user settings.

line-height - CSS: Cascading Style Sheets
if the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

mask-border-repeat - CSS: Cascading Style Sheets
will it just repeat, or be scaled slightly so a whole number of slices fits, or be stretched so one slice fits?

mask-border-slice - CSS: Cascading Style Sheets
these are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.

mask-border-width - CSS: Cascading Style Sheets
when it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to mask-border-slice will cause the slices to be scaled to fit the border mask.

mask-repeat - CSS: Cascading Style Sheets
rtical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).

max() - CSS: Cascading Style Sheets
for example: small { font-size: max(min(0.5vw, 0.5em), 1rem); } this ensures a minimum size of 1rem, with a text size that scales if the page is zoomed.

min() - CSS: Cascading Style Sheets
formal syntax min( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when using min() to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function).

text-decoration-thickness - CSS: Cascading Style Sheets
a percentage inherits as a relative value, and so therefore scales with changes in the font.

matrix() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80); background-color: pink; } result specifications specification status comment css transforms level 1the de...

zoom - CSS: Cascading Style Sheets
transform: scale() should be used instead of this property, if possible.

Graphics on the Web - Developer guides
with vectors, you can create images that scale cleanly to any size.

Using HTML sections and outlines - Developer guides
semantic sectioning elements clarify the larger-scale structures within a document.

A hybrid approach - Developer guides
for example, an often-criticized point about responsive web design is that full-resolution images are sent to all devices, including phones that show the images scaled down anyway.

Mobile Web Development - Developer guides
it includes techniques such as: fluid css layouts, to make the page adapt smoothly as the browser window size changes the use of media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device.

Developer guides
having native audio and video in the browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance.

<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
sizing the canvas using css versus html the displayed size of the canvas can be changed using css, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted.

<input type="image"> - HTML: Hypertext Markup Language
this allows you to specify a frame for the image using the width and height attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space.

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms).

<link>: The External Resource Link element - HTML: Hypertext Markup Language
it may have the following values: any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.

Content negotiation - HTTP
agent-driven negotiation server-driven negotiation suffers from a few downsides: it doesn't scale well.

Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range.

Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range.

<math> - MathML
possible values are: linebreak (default), scroll, elide, truncate, scale.

Performance fundamentals - Web Performance
use css transforms instead of tweaking absolute positioning and fiddling with all that math yourself, use the transform css property to adjust the position, scale, and so forth of your content.

Progressive web app structure - Progressive web apps (PWAs)
"en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kga...

Progressive loading - Progressive web apps (PWAs)
the placeholder image is scaled the same way the original images are, so it will take up the same space and not cause the layout to repaint as the images load.

Structural overview of progressive web apps - Progressive web apps (PWAs)
"en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kga...

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> and some more filters: <svg height="0"> <filter id="f3"> <feconvolvematrix filterres="100 100" style="color-interpolation-filters:srgb" order="3" kernelmatrix="0 -1 0 -1 4 -1 0 -1 0" preservealpha="true"/> </filter> <filter id="f4"> <fespecularlighting surfacescale="5" specularconstant="1" specularexponent="10" lighting-color="white"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> </filter> <filter id="f5"> <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 1 0 0 0" style="color-interpolation-filters:srgb"/> ...

baseFrequency - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'basefrequency' in that specification.

gradientTransform - SVG: Scalable Vector Graphics
specifications specification status comment css transforms level 1the definition of 'surfacescale for <fespecularlighting>' in that specification.

method - SVG: Scalable Vector Graphics
the characters are rotated, scaled and stretched when they are rendered.

numOctaves - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves="3" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'numoctaves' in that specification.

patternTransform - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.

result - SVG: Scalable Vector Graphics
, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> usage notes value <filter-primitive-reference> default value none animatable yes <filter-primitive-reference> this value is a <custom-ident> and defines the name for the filter primitive.

seed - SVG: Scalable Vector Graphics
> </svg> usage notes value <number> default value 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'seed' in that specification.

type - SVG: Scalable Vector Graphics
usage context for the <animatetransform> elements categories none value translate | scale | rotate | skewx | skewy animatable no normative document svg 1.1 (2nd edition) for the <fecolormatrix> element categories none value matrix | saturate | huerotate | luminancetoalpha animatable yes normative document svg 1.1 (2nd edition) for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements ...

xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">so...

yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">so...

zoomAndPan - SVG: Scalable Vector Graphics
magnification in this context means the effect of a supplemental scale and translate transformation on the outermost svg document fragment.

SVG Attribute reference - SVG: Scalable Vector Graphics
line-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage ...

<feDiffuseLighting> - SVG: Scalable Vector Graphics
attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale diffuseconstant kernelunitlength dom interface this element implements the svgfediffuselightingelement interface.

<feSpecularLighting> - SVG: Scalable Vector Graphics
attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale specularconstant specularexponent kernelunitlength dom interface this element implements the svgfespecularlightingelement interface.

<feTurbulence> - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<feturbulence>' in that specification.

<image> - SVG: Scalable Vector Graphics
preserveaspectratio: controls how the image is scaled.

<text> - SVG: Scalable Vector Graphics
value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit.

<tspan> - SVG: Scalable Vector Graphics
value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit.

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
currentscale and currenttranslate dom attributes are implemented, but there is no pan and zoom user interface.

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920) css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.currenttranslate implementation status unknown rootelement attribute deprecated implementation status unknown svgelementinstance and svgelementinstancelist and corresponding attributes on svguseelement removed implementation status unknown <use> event flow following shadow dom spec.

Basic shapes - SVG: Scalable Vector Graphics
ellipse an <ellipse> is a more general form of the <circle> element, where you can scale the x and y radius (commonly refferred to as the semimajor and semiminor axes in maths) of the circle separately.

Gradients in SVG - SVG: Scalable Vector Graphics
it essentially scales the gradient to the size of your object, so you only have to specify coordinates in values from zero to one, and they're scaled to the size of your object automatically for you.

Paths - SVG: Scalable Vector Graphics
while <polyline>s and <path>s can create similar-looking shapes, <polyline>s require a lot of small straight lines to simulate curves, and don't scale well to larger sizes.

Web technology for developers
svg scalable vector graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.