Search completed in 1.92 seconds.
193 results for "zoom":
Your results are loading. Please wait...
-ms-content-zoom-limit - Archive of obsolete content
the -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.
... initial valueas each of the properties of the shorthand:-ms-content-zoom-limit-max: 400%-ms-content-zoom-limit-min: 100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesas each of the properties of the shorthand:-ms-content-zoom-limit-max: the largest allowed zoom factor.
... a zoom factor of 100% corresponds to no zooming.
...And 10 more matches
Element.msZoomTo() - Web APIs
WebAPIElementmsZoomTo
the mszoomto method scrolls and/or zooms an element to its specified coordinate with animation.
... zoomed elements can expose their zoom level through mscontentzoom (ie.
...the zoom level can be reset with mszoomto.
...And 9 more matches
zoom - CSS: Cascading Style Sheets
WebCSSzoom
the non-standard zoom css property can be used to control the magnification level of an element.
...however, unlike css transforms, zoom affects the layout size of the element.
... /* keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /* global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal size.
...And 9 more matches
-ms-content-zoom-snap-points - Archive of obsolete content
the -ms-content-zoom-snap-points css property is a microsoft extension that specifies where zoom snap-points are located.
... the second percentage specifies the distance between subsequent snap-points, both zoomed in and zoomed out from the initial snap-point.
... snaplist( <percentage># ) specifies the position of individual snap-points as a comma-separated list of percentages, each of which represents a zoom factor.
...And 7 more matches
Pinch zoom gestures - Web APIs
this example shows how to detect the pinch/zoom gesture, which uses pointer events to detect whether the user moves two pointers closer or farther apart from each other.
...the pinch in (zoom out) gesture, which moves the two pointers toward each other, changes the target element's background color to lightblue.
... the pinch out (zoom in) gesture, which moves the two pointers away from each other, changes the target element's background color to pink.
...And 7 more matches
max-zoom - CSS: Cascading Style Sheets
the max-zoom css descriptor sets the maximum zoom factor of a document defined by the @viewport at-rule.
... the browser will not zoom in any further than this, whether automatically or at the user's request.
... a zoom factor of 1.0 or 100% corresponds to no zooming.
...And 6 more matches
min-zoom - CSS: Cascading Style Sheets
the min-zoom css descriptor sets the minimum zoom factor of a document defined by the @viewport at-rule.
... the browser will not zoom out any further than this, whether automatically or at the user's request.
... a zoom factor of 1.0 or 100% corresponds to no zooming.
...And 6 more matches
-ms-content-zoom-limit-max - Archive of obsolete content
the -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor.
... initial value400%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesthe largest allowed zoom factor.
... a zoom factor of 100% corresponds to no zooming.
...And 5 more matches
-ms-content-zoom-limit-min - Archive of obsolete content
the -ms-content-zoom-limit-min css property is a microsoft extension that specifies the minimum zoom factor.
... initial value100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesthe smallest allowed zoom factor.
... a zoom factor of 100% corresponds to no zooming.
...And 5 more matches
-ms-content-zooming - Archive of obsolete content
the -ms-content-zooming css property is a microsoft extension that specifies whether zooming is enabled.
... initial valuezoom for the top level element, none for all other elementsapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none the initial value of all elements except the top-level element.
... the element is not zoomable.
...And 5 more matches
zoom - CSS: Cascading Style Sheets
WebCSS@viewportzoom
the zoom css descriptor sets the initial zoom factor of a document defined by the @viewport at-rule.
... a zoom factor of 1.0 or 100% corresponds to no zooming.
... larger values are zoomed in.
...And 5 more matches
-ms-content-zoom-snap - Archive of obsolete content
the -ms-content-zoom-snap css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-snap-type and -ms-content-zoom-snap-points properties.
... initial valueas each of the properties of the shorthand:-ms-content-zoom-snap-type: none-ms-content-zoom-snap-points: snapinterval(0%, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-content-zoom-snap-type: as specified-ms-content-zoom-snap-points: as specifiedanimation typediscrete syntax the -ms-content-zoom-snap shorthand property is specified as one or both of the following content zoom snap values, in order, separated by spaces.
... values -ms-content-zoom-snap-type value of the -ms-content-zoom-snap-type property.
...And 4 more matches
-ms-content-zoom-snap-type - Archive of obsolete content
the -ms-content-zoom-snap-type css property is a microsoft extension that specifies how zooming is affected by defined snap-points.
...indicates that zooming is unaffected by any defined snap-points.
...this implies that it is possible for the content zoom factor to end up between snap-points.
...And 3 more matches
HTMLIFrameElement.zoom()
MozillaGeckoChromeAPIBrowser APIzoom
the zoom() method of the htmliframeelement interface changes the zoom factor of the browser <iframe>'s content.
... this is particularly useful for zooming in/out on non-touch-enabled devices.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.zoom(zoomfactor); returns void.
...And 3 more matches
HTMLVideoElement.msZoom - Web APIs
mszoom is a read/write property which gets or sets whether the video frame is trimmed, on the top and bottom or left and right, to fit the video display.
... syntax htmlvideoelement.mszoom; value boolean value set to true trims the video frame to the display space.
... when the mszoom attribute is set to true, the rendered video is trimmed to fit the dimensions of the video object.
...And 3 more matches
-ms-content-zoom-chaining - Archive of obsolete content
the -ms-content-zoom-chaining css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.
...a bounce effect is shown when the user hits a zoom limit during page manipulation.
... chained the nearest zoomable parent element begins zooming when the user hits a zoom limit during page manipulation.
...And 2 more matches
SVGZoomAndPan - Web APIs
the svgzoomandpan interface is used to reflect the zoomandpan attribute, and is mixed in to other interfaces for elements that support this attribute.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgzoomandpan" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgzoomandpan</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_zoomandpan_unknown 0 t...
... svg_zoomandpan_disable 1 corresponds to the value disable.
...And 2 more matches
user-zoom - CSS: Cascading Style Sheets
the user-zoom css descriptor controls whether or not the user can change the zoom factor of a document defined by @viewport.
... /* keyword values */ user-zoom: zoom; user-zoom: fixed; syntax values zoom the user can zoom in or out.
... fixed the user cannot zoom in or out.
...And 2 more matches
ZoomText
instructions for testers we've made a lot of progress with mozilla/zoomtext compatibility.
... you will also need to install zoomtext 8.11.3.
... zoomtext text to speech doesn't always echo what it should -- need more details from testers.
... comboboxes report incorrect bounds, causing zoomtext tracking to move to the wrong area of the screen.
Element: msContentZoom event - Web APIs
the mscontentzoom event fires when a user zooms the element (changes the scale of the content).
... zoomed elements can expose their zoom level through mscontentzoom (ie.
...the zoom level can be reset with element.mszoomto().
... bubbles unknown cancelable unknown interface unknown event handler property unknown example contentzoom.addeventlistener("mscontentzoom", function(e) { zoomfactor.value = contentzoom.mscontentzoomfactor.tofixed(2); }); specifications not part of any specification.
zoomAndPan - SVG: Scalable Vector Graphics
the zoomandpan attribute specifies whether the svg document can be magnified and panned.
... two elements are using this attribute: <svg> and <view> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" zoomandpan="disable"> <filter id="diffuselighting" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting);" /> </svg> usage notes value disable | magnify default value ...
... magnify animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'zoomandpan' in that specification.
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.
... bubbles yes cancelable no interface svgevent event handler property onzoom examples svgelem.addeventlistener('zoom', () => { console.log('svg zoomed.'); }) ...
Profiling with Zoom
zoom is a profiler very similar to shark for linux.
ARIA Test Cases - Accessibility
tested ua/at combinations: dragon 10 with firefox 3 and ie 8 beta 2 jaws 9 & 10 with firefox 3 jaws 9 & 10 with ie beta 2 nvda 0.6p2 with firefox 3 orca with firefox 3 window-eyes 7 with ie 8 beta 2 and firefox 3 voiceover (leopard) with safari 4.0.2 zoom (leopard) with safari 4.0.2, firefox 3.x and opera 9.x zoomtext 9.1 with firefox 3 and ie 8 beta 2 test case structure test cases are organized as follows: test case links test details expected at behavior markup notes results table at firefox ie opera safari jaws 9 - - - - jaws 10 - ...
...fail - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - - - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - table legend - no info/test yet n/a not applicable (not supported technically) pass expected behaviour met fail expected behaviour notmet 1.
... markup used: role="alert" notes: results: at firefox ie opera safari jaws 9 passed fail n/a n/a jaws 10 passed fail - - voiceover (leopard) n/a n/a - fail window-eyes passed- not announced as "alert" fail - - nvda passed n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - ffd - an interesting thing to note is that, when focus moves to an alert, jaws loses its place on the page, so that, when the alert disappears, jaws virtual cursor is at the bottom of the page.
...And 47 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
composing multiple transforms if your camera needs to be performing multiple transforms simultaneously, such as zooming and panning at the same time, you can multiply the transform matrices together to compose them into a single matrix that applies both changes at once.
...it's also entirely possible to perform more than one of these movements at the same time; for example, you can pan the camera while also zooming in on the scene.
... zooming among the best known camera effects is the zoom.
...And 14 more matches
Viewport concepts - CSS: Cascading Style Sheets
the size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in.
... when zoomed in, both firefox and chrome report the new css pixel size for innerwidth and clientwidth.
...when zoomed in you may get: document.documentelement.clientwidth /* 800 */ window.innerwidth /* 800 */ window.outerwidth /* 800 in firefox, 1200 in chrome */ document.documentelement.clientheight /* 533 */ window.innerheight /* 533 */ window.outerheight /* 596 in firefox, 900 in chrome */ the viewport was originally 1200 x 800 pixels.
...And 11 more matches
touch-action - CSS: Cascading Style Sheets
the touch-action css property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
... /* keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (scrolling) and pinching gestures are handled exclusively by the browser.
... syntax the touch-action property may be specified as either: one of the keywords auto, none, manipulation, or one of the keywords pan-x, pan-left, pan-right, and/or one of the keywords pan-y, pan-up, pan-down, plus optionally the keyword pinch-zoom.
...And 11 more matches
Index - Web APIs
WebAPIIndex
998 document: pointercancel event api, document, event, pointerevent, onpointercancel, pointercancel the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
... 1133 element.mszoomto() api, api:microsoft extensions, method, microsoft, non-standard, reference, mszoomto the mszoomto method scrolls and/or zooms an element to its specified coordinate with animation.
...whenever you start or finish panning or zooming an element).
...And 8 more matches
Responsive design - Learn web development
h1 { font-size: 6vw; } the problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport.
...if you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable.
... essentially, the vw unit adds on top of that zoomed value: h1 { font-size: calc(1.5rem + 3vw); } this means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries.
...And 7 more matches
Using the viewport meta tag to control layout on mobile browsers
users can then pan and zoom to see different areas of the page.
...(there are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.) the initial-scale property controls the zoom level when the page is first loaded.
... the maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
...And 7 more matches
Index - Archive of obsolete content
2092 -ms-content-zoom-chaining css, css property, non-standard, reference, recipe:css-property the -ms-content-zoom-chaining css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.
... 2093 -ms-content-zoom-limit css, css property, non-standard, reference, recipe:css-shorthand-property the -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.
... 2094 -ms-content-zoom-limit-max css, css property, non-standard, reference, recipe:css-property the -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor.
...And 5 more matches
Key Values - Web APIs
vk_select (0x29) gdk_key_select (0xff60) keycode_button_select (109) "zoomin" [6] the zoomin key.
... gdk_key_zoomin (0x1008ff8b) qt::key_zoomin (0x010000f6) keycode_zoom_in (168) "zoomout" [6] the zoomout key.
... gdk_key_zoomout (0x1008ff8c) qt::key_zoomout (0x010000f7) keycode_zoom_out (169) [1] in google chrome 52, the cancel key incorrectly returns the key code "pause".
...And 5 more matches
@viewport - CSS: Cascading Style Sheets
WebCSS@viewport
a zoom factor of 1.0 or 100% corresponds to no zooming.
... larger values zoom in.
... smaller values zoom out.
...And 5 more matches
Multi-touch interaction - Web APIs
tall event handlers for the given element var el=document.getelementbyid(name); el.ontouchstart = start_handler; el.ontouchmove = move_handler; // use same handler for touchcancel and touchend el.ontouchcancel = end_handler; el.ontouchend = end_handler; } function init() { set_handlers("target1"); set_handlers("target2"); set_handlers("target3"); set_handlers("target4"); } move/pinch/zoom handler this function provides very basic support for 2-touch horizontal move/pinch/zoom handling.
...note that the threshold for pinch and zoom movement detection is application specific (and device dependent).
... // this is a very basic 2-touch move/pinch/zoom handler that does not include // error handling, only handles horizontal moves, etc.
...And 4 more matches
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
demo to demonstrate basic usage of this api, we have created a simple browser api demo that provides buttons allowing you to (re)load web pages, stop loading, move forward and back in history, and zoom in and out of the page.
... browser.addeventlistener('mozbrowserlocationchange', function (e) { urlbar.value = e.detail; }); zooming in and out the browser content can be programmatically zoomed in and out using the htmliframeelement.zoom() method.
... this takes a single method — a zoom factor — which dictates the percentage to zoom in or out by.
...And 3 more matches
Profiling with the Firefox Profiler
tip: long-running tasks in the parent process will block all input or drawing with the browser ui (aka "ui jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to apz.
... ranges ranges of time can be zoomed in on by clicking and dragging anywhere in the tracing marker or thread areas.
... once a range is selected, a magnifying glass appears which zooms into that range.
...And 3 more matches
DevTools API - Firefox Developer Tools
zoomvalue the current zoom level of the toolbox.
... zoomin() increases the zoom level of the toolbox document.
... zoomout() decreases the zoom level of the toolbox document.
...And 3 more matches
Flame Chart - Firefox Developer Tools
the flame chart displays a lot of data, so to get readable results, it's usually necessary to zoom in.
... zooming and panning to work effectively with the flame chart, you'll need to be able to navigate it.
... there are two main controls you can use to navigate the flame chart: zoom: increase/decrease the selected portion of the complete profile that's displayed in the flame chart 1) mouse wheel up/down in the flame chart.
...And 3 more matches
nsIDocShell
zoom float set/get the document scale factor.
... when setting this attribute, a ns_error_not_implemented error may be returned by implementations not supporting zoom.
... implementations not supporting zoom should return 1.0 all the time for the get operation.
...And 2 more matches
Pixel manipulation with canvas - Web APIs
+ 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.
...in the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200.
... zoomctx.drawimage(canvas, math.min(math.max(0, x - 5), img.width - 10), math.min(math.max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); because anti-aliasing is enabled by default, we might want to disable the smoothing to see clear pixels.
...And 2 more matches
SVGSVGElement - Web APIs
stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsvgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and also implements the ones from svgzoomandpan, svgfittoviewbox, and windoweventhandlers.
...the meaning depends on the situation: if the initial view was a "standard" view, then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will match the values for the corresponding dom attributes that are on svgsvgelement directly the values for transform and viewtarget within currentview will be null if the initial view was a link into a <view> element, then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will correspond to the corresponding attributes for the give...
...n <view> element the values for transform and viewtarget within currentview will be null if the initial view was a link into another element (i.e., other than a <view>), then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will match the values for the corresponding dom attributes that are on svgsvgelement directly for the closest ancestor <svg> element the values for transform within currentview will be null the viewtarget within currentview 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...
...And 2 more matches
Experimental features in Firefox
nightly 75 no developer edition 75 no beta 75 no release 75 no preference name devtools.webconsole.input.context mobile gesture support in responsive design mode mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu.
... nightly 76[1] yes developer edition 76[1] yes beta 76[1] yes release 76[1] no preference name n/a [1] support for zooming using the double-tap gesture was added in firefox 76.
... nightly 80 yes developer edition 80 yes beta 80 no release 80 no preference name devtools.netmonitor.features.serversentevents ui desktop zooming this feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do.
... nightly 42 no developer edition 42 no beta 42 no release 42 no preference name apz.allow_zooming and (on windows) apz.windows.use_direct_manipulation ...
nsIDOMWindow
textzoom float get or set the document scale factor as a multiplier of the default size.
... when setting this attribute, an ns_error_not_implemented error may be returned by implementations not supporting zoom.
... this attribute should always return 1.0 for implementations not supporting text zoom.
... 1.0 represents normal (unzoomed) size.
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!
... it's quicker to sample from smaller texture images due to better inherent texture fetch cache locality: zooming out on a non-mipmapped texture ruins texture fetch cache locality, because neighboring pixels no longer sample from neighboring texels!
... however, for 2d resources that are never "zoomed out", don't pay the 30% memory surcharge for mipmaps: const tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); gl.texparameterf(gl.texture_2d, gl.texture_min_filter, gl.linear); // defaults to nearest_mipmap_linear, for mipmapping!
...while the common approach is to set canvas.width = width * devicepixelratio, this will cause moire artifacts with non-integer values of devicepixelratio, as is common with ui scaling on windows, as well as zooming on all platforms.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
screen magnifiers will zoom to the focus, keeping it on the screen at all times, or even allow the user to enter a special low vision document reading mode, with a variety of features such as ticker mode where text is streamed on a single line.
... related myth: msaa is not supported by at vendors reality: it's a standard, and it is supported by jaws, window-eyes, zoomtext, dragon and supernova/hal.
...it may be a good enough solution; however, if what you need is jaws, dragon and zoomtext support.
... zoomtext and dragon can get by with your msaa support., and jaws can be scripted (even by external developers) to support alternative interfaces.
Standard metadata names - HTML: Hypertext Markup Language
WebHTMLElementmetaname
maximum-scale a positive number between 0.0 and 10.0 defines the maximum amount to zoom in.
... minimum-scale a positive number between 0.0 and 10.0 defines the minimum zoom level.
... user-scalable yes or no if set to no, the user is not able to zoom in the webpage.
... accessibility concerns with viewport scaling disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content.
The building blocks of responsive design - Progressive web apps (PWAs)
another challenge is dealing with high resolution screens — raster graphics designed for low resolutions are in danger of appearing tiny when displayed on a high resolution screen, so devices often apply a default zoom factor to rendered pages to avoid this.
... the trouble with this, then, is that raster images are zoomed in and as a result can start to look pixellated.
...because vector images are calculated based on mathematical algorithms rather than containing separate data on every pixel in the image, they tend to be smaller in file size, and are infinitely scalable when zoomed or viewed on high resolution devices (at least, in theory).
...these scale as the resolution changes or the browser zooms.
Anonymous Content - Archive of obsolete content
let's say that we wanted to create a widget that displayed an image with a zoom in and zoom out button on each side of it.
...xul: <box class="zoombox"> <image src="images/happy.jpg"/> <image src="images/angry.jpg"/> </box> xbl: <binding id="zoombox"> <content> <xul:box flex="1"> <xul:button label="zoom in"/> <xul:box flex="1" style="border: 1px solid black"> <children includes="image"/> </xul:box> <xul:button label="zoom out"/> </xul:box> </content> </binding> the explicit children in the xul file will be placed at the location of the children tag.
...this results in a display that is equivalent to the following: <binding id="zoombox"> <content> <xul:box flex="1"> <xul:button label="zoom in"/> <xul:box flex="1" style="border: 1px solid black"> <xul:image src="images/happy.jpg"/> <xul:image src="images/angry.jpg"/> </xul:box> <xul:button label="zoom out"/> </xul:box> </content> </binding> from the dom's perspective, the child elements are still in their original location.
CSS - Archive of obsolete content
ArchiveWebCSS
it only works on mac os x.-ms-acceleratorthe -ms-accelerator css property is a microsoft extension that sets or retrieves a string indicating whether the object represents a keyboard shortcut.-ms-block-progressionthe -ms-block-progression css property is a microsoft extension that specifies the block progression and layout orientation.-ms-content-zoom-chainingthe -ms-content-zoom-chaining css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.-ms-content-zoom-limitthe -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.-ms-content-zoom-limit-maxthe...
... -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor.-ms-content-zoom-limit-minthe -ms-content-zoom-limit-min css property is a microsoft extension that specifies the minimum zoom factor.-ms-content-zoom-snapthe -ms-content-zoom-snap css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-snap-type and -ms-content-zoom-snap-points properties.-ms-content-zoom-snap-pointsthe -ms-content-zoom-snap-points css property is a microsoft extension that specifies where zoom snap-points are located.-ms-content-zoom-snap-typethe -ms-content-zoom-snap-type css property is a microsoft extension that specifies how zooming is affected by defined snap-points.-ms-content-zoomingthe -ms-content-zooming c...
...ss property is a microsoft extension that specifies whether zooming is enabled.-ms-filterthe -ms-filter css property is a microsoft extension that sets or retrieves the filter or collection of filters applied to an object.-ms-flow-fromthe -ms-flow-from css property is a microsoft extension that gets or sets a value identifying a region container in the document that accepts the content flow from the data source.-ms-flow-intothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.-ms-high-contrast-adjustthe -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contra...
Mobile accessibility - Learn web development
not disabling zoom using viewport, it is possible to disable zoom.
... always ensure resizing is enabled, and set the width to the device's width in the <head>: <meta name="viewport" content="width=device-width; user-scalable=yes"> you should never set user-scalable=no if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea.
... there are certain situations where zooming might break the ui; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your ui.
How can we design for all types of users? - Learn web development
modern browsers get around this rule by pretending that you're asking for "16 pixels when the user sets a zoom factor of 100%".
...in this case, zooming did nothing, even as late as internet explorer 8, which we still have to cater to because it's still around.
... because you don't know when a browser is going to come around and refuse to zoom up text whose size is expressed in pixels.
Adding vector graphics to the Web - Learn web development
previous overview: multimedia and embedding next vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size.
... the difference becomes apparent when you zoom in the page — the png image becomes pixellated as you zoom in because it contains information on where each pixel should be (and what color).
... when it is zoomed, each pixel is simply increased in size to fill multiple pixels on screen, so the image starts to look blocky.
Responsive images - Learn web development
it would probably be better to show a smaller, portrait image on mobile, which zooms in on the person.
...create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this).
...as a recap, there are two distinct problems we've been discussing here: art direction: the problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in for a mobile layout.
Third-party APIs - Learn web development
for example: let map = l.mapquest.map('map', { center: [53.480759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display.
... in this case we specify the coordinates of the center of the map, a map layer of type map to show (created using the mapquest.tilelayer() method), and the default zoom level.
... adding different controls the map has a number of different controls available; by default it just shows a zoom control.
Embedding API for Accessibility
text zoom on a per-window basis the nsidomwindow::gettextzoom(float *zoomfactor) and nsidomwindow::settextzoom(float zoomfactor) methods can be used to set a wide range of text zoom factors on a content window.
... a zoom factor of 1.0 represents 100%, or normal zoom.
... for double-sized text, use nsidomwindow::settextzoom(2.0); using accessibility preferences there are a number of prefs related to accessibility.
Mozilla's Section 508 Compliance
built-in text zoom limited only to the size of the window.
... works zoomtext version 8.11.
...however, it is functional and very possible to use zoomtext with mozilla in this mode.
Mozilla’s UAAG evaluation report
(p1) c can be changed through preferences, zooming or user style sheet.
... zooming is really the best solution, because the document retains its look - all font sizes are increased the same percentage.
... zooming can be controlled via hotkeys ctrl+plus and ctrl+minus the prefs are at preferences, appearances, fonts there is also a hidden pref line that can be added to prefs.js, if you just want to change the minimum font size for a certain font: user_pref("font.minimum-size.x-western", newfontsizeinpoints); for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar, th, ja, zh-cn or zh-tw 4.2 configure font family.
Basics
rather, the math fragment will zoom, and if you right-click a second time, you will see the mathml wysiwyg markup of the fragment, and if you right-click again a third time, the fragment will revert to its initial state.
...with mathml, one can build sets such as (go on, right-click any of these equations to experiment the zoom) { 0 , 1 , 2 , 3 , 4 } or { ⌊ a b ⌋ | a 2 + b 2 ≤ 3 } , write calculus d y d x = 1 y 2 , form rather complicated expressions lim n → n ( 1 + 1 n ) n − e n , k = ∂ 2 z ∂ x 2 ∂ 2 z ∂ y 2 - ( ∂ 2 z ∂ x ∂ y ) 2 ( 1 + ( ∂ z ∂ x ) 2 + ( ∂ z ∂ y ) 2 ) 2 , write vector equations y = a ⁢ x + b , etc.
...so it responds to other browser operations such as the zoom (try view -> text zoom), and you can do links a 2 + b 2 = c 2 , apply stylistic effects a 2 + b 2 = c 2 , or use color a 2 + b 2 = c 2 in very strange ways p(x) q(x) = a0 + a1x + a2 x2 + ...
MathML In Action
as for the roots of the equation a x 2 + b x + c = 0 , click anywhere in the yellow area to zoom-in/zoom-out: zoomable math html content <p> <math display="block"> <mstyle id="zoomablemath" mathbackground="yellow"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mrow> <mo>-</mo> <mi>b</mi> </mrow> <mo>&#xb1;</mo> ...
... <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> </mrow> </msqrt> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mrow> </mstyle> </math> </p> javascript content function zoomtoggle() { if (this.hasattribute("mathsize")) { this.removeattribute("mathsize"); } else { this.setattribute("mathsize", "200%"); } } function load() { document.getelementbyid("zoomablemath").
... addeventlistener("click", zoomtoggle, false); } window.addeventlistener("load", load, false); consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if x < 0 u + if x > 0 or other complex markups like these ell ^ y ( z ; z , τ ) := ∫ y ( ∏ l ( y l 2 π i ) θ ( y l 2 π i - z ) θ ′ ( 0 ) θ ( - z ) θ ( y l 2 π i ) ) × ( ∏ k θ ( e k 2 π i - ( α k + 1 ) z ) θ ( - z ) θ ( e k 2 π i - z ) θ ( - ( α k + 1 ) z ) ) π ( n ) = ∑ m = 2 n ⌊ ( ∑ k = 1 m - 1 ⌊ ( m / k ) / ⌈ m / k ⌉ ⌋ ) - 1 ⌋ ‖ ϕ ‖ w s k ( Ω g ) ≝ ( ∑ | α | ≦ k ∂ α ...
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.
...see also full page zoom ...
3D view - Firefox Developer Tools
function keyboard mouse zoom in/out + / - scroll wheel up/down rotate left/right a / d mouse left/right rotate up/down w / s mouse up/down pan left/right ← / → mouse left/right pan up/down ↑ / ↓ mouse up/down reset zoom level 0 resets the zoom level to the default focus on selected node f makes sure the currently selected ...
...node is visible reset view r resets zoom, rotation, and panning to the default hide current node x makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you have broken html causing layout problems, looking at the 3d view can help find where you've gone wrong.
... if content isn't displaying, you may be able to figure out why; since the 3d view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.
VisualViewport - Web APIs
visualviewport.scale read only returns the pinch-zoom scaling factor applied to the visual viewport.
... examples hiding an overlaid box on zoom this example, taken from the visual viewport readme, shows how to write a simple bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in.
... this is a nice way to improve the user experience when zooming in on pages.
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.
...when the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged.
...for example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device?
cursor - CSS: Cascading Style Sheets
WebCSScursor
ns-resize nesw-resize nwse-resize zooming zoom-in something can be zoomed (magnified) in or out.
... zoom-out usage notes although the specification does not define any size limitations for cursor, individual user agents may choose to do so.
..., ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] examples setting cursor types .foo { cursor: crosshair; } .bar { cursor: zoom-in; } /* a fallback keyword value is required when using a url */ .baz { cursor: url("hyper.cur"), auto; } specifications specification status comment css basic user interface module level 3the definition of 'cursor' in that specification.
Event reference
svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call ...
... svgzoom svgzoomevent svg an svg document is being zoomed.
... ussdreceived firefox os specific a new ussd message is received mscontentzoom microsoft specific msmanipulationstatechanged microsoft specific mspointerhover microsoft specific mozilla-specific events note: these events are never exposed to web content and can only be used in a xul chrome content context.
CSS3 - Archive of obsolete content
the ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the cursor property.
...level 3 working draft css basic box model working draft css scrollbars level 1 working draft modules in the exploring phase css backgrounds and borders level 4 working draft css device adaptation working draft adds a new at-rule, @viewport, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
Using content preferences - Archive of obsolete content
var value = prefservice.getpref(uri, "devmo.somesetting"); built-in site-specific preferences preference name menu equivalent values notes browser.content.full-zoom view / zoom example: "1.10000002384186" (rounding variant of "1.1") related about:config preferences: browser.zoom.full boolean, set by the menu item view / zoom / zoom text only.
... browser.zoom.sitespecific toolkit.zoommanager.zoomvalues zoom.maxpercent and zoom.minpercent browser.download.lastdir path of a filesystem directory related about:config preferences: browser.download.lastdir the last directory for any site use downloadlastdir.jsm for access to these preferences.
jspage - Archive of obsolete content
:(browser.engine.gecko)?"dommousescroll":"mousewheel"}}); })();element.properties.styles={set:function(a){this.setstyles(a);}};element.properties.opacity={set:function(a,b){if(!b){if(a==0){if(this.style.visibility!="hidden"){this.style.visibility="hidden"; }}else{if(this.style.visibility!="visible"){this.style.visibility="visible";}}}if(!this.currentstyle||!this.currentstyle.haslayout){this.style.zoom=1;}if(browser.engine.trident){this.style.filter=(a==1)?"":"alpha(opacity="+a*100+")"; }this.style.opacity=a;this.store("opacity",a);},get:function(){return this.retrieve("opacity",1);}};element.implement({setopacity:function(a){return this.set("opacity",a,true); },getopacity:function(){return this.get("opacity");},setstyle:function(b,a){switch(b){case"opacity":return this.set("opacity",parsefloat...
...ndcolor:"rgb(@, @, @)",backgroundposition:"@px @px",color:"rgb(@, @, @)",fontsize:"@px",letterspacing:"@px",lineheight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderwidth:"@px @px @px @px",borderstyle:"@ @ @ @",bordercolor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:"@",zoom:"@",fontweight:"@",textindent:"@px",opacity:"@"}); element.shortstyles={margin:{},padding:{},border:{},borderwidth:{},borderstyle:{},bordercolor:{}};["top","right","bottom","left"].each(function(g){var f=element.shortstyles; var b=element.styles;["margin","padding"].each(function(h){var i=h+g;f[h][i]=b[i]="@px";});var e="border"+g;f.border[e]=b[e]="@px @ rgb(@, @, @)";var d=e+"width",a=e+"style",...
-ms-scroll-chaining - Archive of obsolete content
for more information, see html scrolling, panning and zooming sample or internet explorer 10 scrolling, panning, and zooming with touch.
... .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
-ms-scroll-snap-points-x - Archive of obsolete content
snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.
...(the -ms-scroll-snap-points-x property behaves identically to the -ms-scroll-snap-points-y property, but along the x-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-x-min: 100%; -ms-scroll-limit-x-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
-ms-scroll-snap-points-y - Archive of obsolete content
snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.
...(the -ms-scroll-snap-points-y property behaves identically to the -ms-scroll-snap-points-x property, but along the y-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-y-min: 100%; -ms-scroll-limit-y-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-y: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
this can be smaller than the layout viewport, such as when the user has pinched-zoomed.
... 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.
Layout viewport - MDN Web Docs Glossary: Definitions of Web-related terms
this becomes important, for example, on mobile devices, where a pinching gesture can usually be used to zoom in and out on a site's contents.
... the rendered document doesn't change in any way, so the layout viewport remains the same as the user adjusts the zoom level.
Visual Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
this can be smaller than the layout viewport, such as when the user has pinched-zoomed.
... 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.
CSS and JavaScript accessibility best practices - Learn web development
the code features two functions that show and hide the zoomed-in image; these are run by the following lines that set them as event handlers: imgthumb.onmouseover = showimg; imgthumb.onmouseout = hideimg; imgthumb.onfocus = showimg; imgthumb.onblur = hideimg; the first two lines run the functions when the mouse pointer hovers over and stops hovering over the thumbnail, respectively.
... this won't allow us to access the zoomed view by keyboard though — to allow that, we've included the last two lines, which run the functions when the image is focused and blurred (when focus stops).
What is accessibility? - Learn web development
many people with visual impairments use screen magnifiers that are either physical magnifiers or software zoom capabilities.
... most browsers and operating systems these days have zoom capabilities.
CSS property compatibility table for form controls - Learn web development
property n t note css box model width yes yes height partial[1] partial[1] on opera, the spinners are zoomed in, which can hide the content of the field.
... border yes yes margin yes yes padding partial[1] partial[1] on opera, the spinners are zoomed in, which can hide the content of the field.
Accessibility Features in Firefox
mozilla corporation is currently reaching out to work with ai squared, the makers of zoomtext, in order to enable complete support of advanced zoomtext features such as the doc reader and app reader.
... the built-in text zoom feature can be accessed with the ctrl+plus and ctrl+minus hotkeys.
CSUN Firefox Materials
mozilla corporation is currently reaching out to work with ai squared, the makers of zoomtext, in order to enable complete support of advanced zoomtext features such as the doc reader and app reader.
... the built-in text zoom feature can be accessed with the ctrl+plus and ctrl+minus hotkeys.
mozbrowserselectionstatechanged
zoomfactor a number representing the current zoom factor in the child frame.
...1.1 is a 10% zoom in, and 0.9% is a 10% zoom out.
Browser API
htmliframeelement.zoom() changes the zoom factor of the browser <iframe>'s content.
... this is particularly useful for zooming in/out on non-touch-enabled devices.
Gecko Keypress Event
problem 1 the zoom-in shortcut handler in firefox is defined as <key key="+" modifiers="accel"/>.
... for the us keyboard layout, a related handler is defined with <key key="=" modifiers="accel"/>, so that users do not need to use the shift key to access the zoom-in shortcut.
Gecko Profiler FAQ
for this purpose you should try to use a native profiler on your platform of choice (for example xperf/vtune on windows, instruments on osx, and perf/zoom on linux.) one workaround is to break the hot function into several explicitly-non-inline helpers, recompile, and re-profile.
... mac: instruments; linux: perf, zoom, callgrind; windows: concurrency visualizer, vtune, xperf when to use gecko profiler vs.
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.
Document: wheel event - Web APIs
<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; a...
...ddeventlistener equivalent the event handler can also be set up using the addeventlistener() method: document.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specification.
Element: wheel event - Web APIs
<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.adde...
...ventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specification.
GestureEvent - Web APIs
values below 1.0 indicate an inward pinch (zoom out).
... values above 1.0 indicate an outward unpinch (zoom in).
MediaStream Image Capture API - Web APIs
let zoom = document.queryselector('#zoom'); const capabilities = track.getcapabilities(); // check whether zoom is supported or not.
... if(!capabilities.zoom) { return; } track.applyconstraints({ advanced : [{ zoom: zoom.value }] }); finally, pass the mediastreamtrack object to the imagecapture() constructor.
Pointer events - Web APIs
</div> </body> </html> touch-action css property the touch-action css property is used to specify whether or not the browser should apply its default (native) touch behavior (such as zooming or panning) to a region.
...the value manipulation means the browser may consider touches that begin on the element are only for scrolling and zooming.
Screen.height - Web APIs
WebAPIScreenheight
internet explorer will take into account the zoom setting when reporting the screen height.
... it will only return the real height of the screen if the zoom is set to 100%.
Screen.width - Web APIs
WebAPIScreenwidth
internet explorer will take into account the zoom setting when reporting the screen width.
... it will only return the real width of the screen if the zoom is set to 100%.
msManipulationViewsEnabled - Web APIs
the msmanipulationviewsenabled read-only property returns true if manipulation features are support available, such as touch panning and zooming using css rules.
... value returns true if manipulation features are support available, such as touch panning and zooming using css rules.
TouchEvent - Web APIs
values below 1.0 indicate an inward pinch (zoom out).
... values above 1.0 indicate an outward unpinch (zoom in).
Touch events - Web APIs
hangedtouches[0]; break; } newevt.initmouseevent(type, true, true, evt.originaltarget.ownerdocument.defaultview, 0, touch.screenx, touch.screeny, touch.clientx, touch.clienty, evt.ctrlkey, evt.altkey, evt.shiftkey, evt.metakey, 0, null); evt.originaltarget.dispatchevent(newevt); } calling preventdefault() only on a second touch one technique for preventing things like pinchzoom on a page is to call preventdefault() on the second touch in a series.
... this behavior is not well defined in the touch events spec and results in different behavior for different browsers (i.e., ios will prevent zooming but still allow panning with both fingers; android will allow zooming but not panning; opera and firefox currently prevent all panning and zooming.) currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.
Window.devicePixelRatio - Web APIs
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.
... <div class="container"> <div class="inner-container"> <p>this example demonstrates the effect of zooming the page in and out (or moving it to a screen with a different scaling factor) on the value of the property <code>window.devicepixelratio</code>.
Microsoft CSS extensions - CSS: Cascading Style Sheets
-ms-accelerator -ms-block-progression -ms-content-zoom-chaining -ms-content-zooming -ms-content-zoom-limit -ms-content-zoom-limit-max -ms-content-zoom-limit-min -ms-content-zoom-snap -ms-content-zoom-snap-points -ms-content-zoom-snap-type -ms-filter -ms-flow-from -ms-flow-into -ms-high-contrast-adjust -ms-hyphenate-limit-chars -ms-hyphenate-limit-lines -ms-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-col...
...shadow-color -ms-scrollbar-track-color -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-max -ms-scroll-limit-x-min -ms-scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
n-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-rotate:only-child:only-of-typeopacityopacity():optionalorder...
...underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-indexzoom (@viewport)others--* selectors the following are the various selectors, which allow styles to be conditional based on various features of elements within the dom.
Mouse gesture events - Developer guides
this is typically used to zoom in and out on content (this is the default behavior in firefox, for example).
...for magnification, this value is implementation-specific, but the value is positive for zooming in and negative for zooming out.
<view> - SVG: Scalable Vector Graphics
WebSVGElementview
a view is a defined way to view the image, like a zoom level or a detail view.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" view...
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
269 zoomandpan deprecated, svg, svg attribute the zoomandpan attribute specifies whether the svg document can be magnified and panned.
... 377 <view> element, needsexample, reference, svg a view is a defined way to view the image, like a zoom level or a detail view.
Listening to events in Firefox extensions - Archive of obsolete content
it is used to update the ui for many different reasons: update the progress bar and status messages as pages load turn on and off the throbber as pages load set the site icon when available update the address bar as the user navigates hide notification bars when appropriate as the user navigates apply the site zoom preferences to newly loading pages update the bookmarking star button ui update the identity display as the site's security changes tabsprogresslistener this object is a tabs progress listener and receives events for all browsers in the window.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
this string includes extensive information regarding every open window and tab, the forward/back history for each tab, page scroll position, text zoom, contents of form elements, etc.
List of Former Mozilla-Based Applications - Archive of obsolete content
browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news item on site from july 2007 script editor editor inactive skipstone gtk+ browser last news item on site from february 2008 xabyl visual xbl editor inactive xulplayer media player last project update on 3/14/09 zoomcreator photo collage tool on april 29, 2010 the site announced zoomara was shutting down.
Visualizing an audio spectrum - Archive of obsolete content
// assuming interlaced stereo channels, // need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] + fb[2*i+1]) / 2; } fft.forward(signal); // clear the canvas before drawing spectrum ctx.clearrect(0,0, canvas.width, canvas.height); for (var i = 0; i < fft.spectrum.length; i++ ) { // multiply spectrum by a zoom value magnitude = fft.spectrum[i] * 4000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); ...
List of commands - Archive of obsolete content
pace cmd_handleshiftbackspace cmd_minimizewindow cmd_neweditor cmd_neweditordraft cmd_neweditortemplate cmd_newnavigator cmd_newnavigatortab cmd_newtabwithtarget cmd_openhelp cmd_paste - paste a selection from the clipboard cmd_printsetup cmd_quit cmd_redo cmd_savepage cmd_scrollpagedown cmd_scrollpageup cmd_selectall cmd_switchdocumentdirection cmd_switchtextdirection cmd_textzoomenlarge cmd_textzoomreduce cmd_textzoomreset cmd_undo cmd_viewcomponentbar cmd_viewlinktoolbar cmd_viewlinktoolbar_false cmd_viewlinktoolbar_maybe cmd_viewlinktoolbar_true cmd_viewnavbar cmd_viewpersonaltoolbar cmd_viewtaskbar cmd_zoomwindow thanks for help of joe.user0 in compiling: http://readlist.com/lists/mozilla.or...l/3/15261.html .
Numeric Controls - Archive of obsolete content
for instance, a volume slider or a zoom level.
-ms-scroll-limit-x-max - Archive of obsolete content
the specified behavior of the -ms-scroll-limit-x-max property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors.
-ms-scroll-limit-x-min - Archive of obsolete content
the specified behavior of the -ms-scroll-limit-x-min property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors.
-ms-scroll-limit-y-max - Archive of obsolete content
the specified behavior of the -ms-scroll-limit-y-max property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors.
-ms-scroll-limit-y-min - Archive of obsolete content
the specified behavior of the -ms-scroll-limit-y-min property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors.
-ms-scroll-limit - Archive of obsolete content
the specified behavior of the -ms-scroll-limit property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors.
Displaying a graphic with audio samples - Archive of obsolete content
// need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] + fb[2*i+1]) / 2; } // clear the canvas before drawing spectrum ctx.fillstyle = "rgb(0,0,0)"; ctx.fillrect (0,0, canvas.width, canvas.height); ctx.fillstyle = "rgb(255,255,255)"; for (var i = 0; i < signal.length; i++ ) { // multiply spectrum by a zoom value magnitude = signal[i] * 1000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(document.getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audi...
First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
scrolling and zooming are not included in this metric.
Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
this can be smaller than the layout viewport, such as when the user has pinched-zoomed.
Supporting older browsers - Learn web development
some of your users might be hearing your content read out to them by a screen reader, or have zoomed in on the page to be able to read it.
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.
Basic math in JavaScript — numbers and operators - Learn web development
for example, booleans can be used to: display the correct text label on a button depending on whether a feature is turned on or off display a game over message if a game is over or a victory message if the game has been won display the correct seasonal greeting depending what holiday season it is zoom a map in or out depending on what zoom level is selected we'll look at how to code such logic when we look at conditional statements in a future article.
Handling common accessibility problems - Learn web development
when we say accessibility in the context of web technology, most people immediately think of making sure websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnification/zoom to access text people with motor function impairments using the keyboard (or other non-mouse features) to activate website functionality.
Introduction to automated testing - Learn web development
pinch/zoom, two fingers to scroll) on the touchpads of supporting devices (e.g.
Implementing feature detection - Learn web development
finally, add another <script> element at the bottom of the html body (just before the </body> tag), and put the following script inside the tags: if (modernizr.geolocation) { navigator.geolocation.getcurrentposition(function(position) { let latlng = new google.maps.latlng(position.coords.latitude,position.coords.longitude); let myoptions = { zoom: 8, center: latlng, maptypeid: google.maps.maptypeid.terrain, disabledefaultui: true } let map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); }); } else { const para = document.createelement('p'); para.textcontent = 'argh, no geolocation!'; document.body.appendchild(para); } try your example out!
Software accessibility: Where are we today?
otherwise, screen magnification programs may be used, which allow zooming in to portions of the screen, while following the mouse or the current focus.
Accessibility and Mozilla
this article reviews the progress and technology as it has developed.zoomtextwe've made a lot of progress with mozilla/zoomtext compatibility.
Benchmarking
some example tools include instruments on osx (part of xcode), rotateright zoom on linux (uses perf underneath), and intel vtune on windows or linux.
mozbrowsercaretstatechanged
zoomfactor a number defining the current zoom factor in the browser <iframe>.
CustomizableUI.jsm
overflows: false }; for (var p in props) { toolbaritem.setattribute(p, props[p]); } toolbaritem.appendchild(image); return toolbaritem; } }); when you want to remove this widget run this code: customizableui.destroywidget('navigator-throbber-id-within-customizableui-object'); custom type - involved the browser uses type custom for its zoom controls and edit controls in the panel.
L10n Checks
ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see enti...
Performance
profiling with zoom zoom is a profiler for linux done by the people who made shark measuring performance using the perfmeasurement.jsm code module using perfmeasurement.jsm to measure performance data in your javascript code.
compare-locales
ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see ent...
nsIContentPrefService2
(see nsicontentpref below.) for example, if you want to remember the user's preference for a certain zoom level on www.mozilla.org pages, you might store a preference whose domain is "www.mozilla.org", whose name is "zoomlevel", and whose value is the numeric zoom level.
nsIDOMSimpleGestureEvent
for magnify gestures, the units are implementation-specific; however, positive values indicate zooming in, and negative values indicate zooming out.
Call Tree - Firefox Developer Tools
we've zoomed into the part of the recording that shows a long javascript marker: the call tree presents the results in a table.
Frame rate - Firefox Developer Tools
if we select one of these slices of the recording, the main waterfall view underneath it is zoomed into it, and we can see the function that's causing the problem: we have a javascript function from a click event that's blocking the main thread for 170 milliseconds.
How to - Firefox Developer Tools
select a tool to switch between the waterfall, call tree, and flame chart tools, use the buttons in the toolbar: configure markers displayed to control which markers are shown in the waterfall, use the button in the toolbar: zoom in to zoom into a slice of the recording, select that slice in the recording overview: ...
UI Tour - Firefox Developer Tools
for example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate: zooming in you can use the overview to select a slice of the recording to examine in more detail.
Waterfall - Firefox Developer Tools
in the screenshot below, we've zoomed in on a js function that's caused a drop in the frame rate: the intensive javascript article shows how the waterfall can highlight responsiveness problems caused by long javascript functions, and how you can use asynchronous methods to keep the main thread responsive.
Taking screenshots - Firefox Developer Tools
values above 1 yield "zoomed-in" images, whereas values below 1 create "zoomed-out" images.
Document: pointercancel event - Web APIs
the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
Document Object Model (DOM) - Web APIs
lated interfaces elementtimecontrol timeevent other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status comment dom living standard ...
Element: MSManipulationStateChanged event - Web APIs
whenever you start or finish panning or zooming an element).
Element.getClientRects() - Web APIs
note: the overlays will be out of place if the user resizes or zooms.
Event - Web APIs
WebAPIEvent
ent idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent touchevent trackevent transitionevent uievent userproximityevent webglcontextevent wheelevent constructor event() creates an event object, returning it to the caller.
GlobalEventHandlers.ontransitioncancel - Web APIs
let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } box.onclick = function() { box.style.display = 'none'; timeout = window.settimeout(appear, 2000); function appear() { box.style.display = 'block'; } } box.ontransitioncancel = function(event) { console.log('transitioncancel fired after ' + event.elapsedtime + ' seconds.'); } result the resulting conte...
GlobalEventHandlers.ontransitionend - Web APIs
let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } result the resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away.
GlobalEventHandlers.onwheel - Web APIs
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; res...
HTMLElement: pointercancel event - Web APIs
the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
HTMLVideoElement - Web APIs
htmlvideoelement.mszoom controls whether the video frame is trimmed to fit the video display.
MSGestureEvent - Web APIs
msgestureevent.scale read only the difference in scale (for zoom gestures) from the previous msgestureevent of the current gesture.
MediaTrackConstraints - Web APIs
zoom a constraindouble (a double-precision integer) specifying the desired focal length.
Microsoft API extensions - Web APIs
touch apis element.mszoomto() mscontentzoom msmanipulationevent msmanipulationstatechanged msmanipulationviewsenabled mspointerhover media apis htmlvideoelement.msframestep() htmlvideoelement.mshorizontalmirror htmlvideoelement.msinsertvideoeffect() htmlvideoelement.msislayoutoptimalforplayback htmlvideoelement.msisstereo3d htmlvideoelement.mszoom htmlaudioelement.msaudiocategory htmlaudioelement.msaudiodevicetype htmlmediaelement.mscleareffects() htmlmediaelement.msins...
msIsBoxed - Web APIs
WebAPIMsIsBoxed
boolean value set to false means the video player is zoomed to fill the screen.
Using Touch Events - Web APIs
together, these interfaces define a relatively low-level set of features, yet they support many kinds of touch-based interaction, including the familiar multi-touch gestures such as multi-finger swipe, rotation, pinch and zoom.
VisualViewport.scale - Web APIs
the scale read-only property of the visualviewport interface returns the pinch-zoom scaling factor applied to the visual viewport.
Matrix math for the web - Web APIs
the flatness is equivalent to when a camera zooms in really close onto an object in the distance — the sense of perspective disappears.
Window.mozInnerScreenX - Web APIs
that means it can be affected by the zoom level; to compute the actual number of physical screen pixels, you should use the nsidomwindowutils.screenpixelspercsspixel property.
Window.mozInnerScreenY - Web APIs
that means it can be affected by the zoom level; to compute the actual number of physical screen pixels, you should use the nsidomwindowutils.screenpixelspercsspixel property.
Window.navigator - Web APIs
WebAPIWindownavigator
if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft internet explorer"; // "mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; zoom 3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { sbrowser = "microsoft edge"; // "mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/58.0.3029.110 safari/537.36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml,...
Web APIs
WebAPI
ement svgsetelement svgsolidcolorelement svgstopelement svgstringlist svgstylable svgstyleelement svgswitchelement svgsymbolelement svgtrefelement svgtspanelement svgtests svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtransform svgtransformlist svgtransformable svgurireference svgunittypes svguseelement svgvkernelement svgviewelement svgzoomandpan screen screenorientation scriptprocessornode scrolltooptions securitypolicyviolationevent selection sensor sensorerrorevent serviceworker serviceworkercontainer serviceworkerglobalscope serviceworkermessageevent serviceworkerregistration serviceworkerstate shadowroot sharedworker sharedworkerglobalscope slottable sourcebuffer sourcebufferlist speechgrammar speechgrammarlist ...
Using the aria-orientation attribute - Accessibility
<a href="#" id="handle_zoomslider" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples: slider example notes used with aria roles scrollbar listbox combobox menu tree separator slider tablist toolbar related aria techniques compatibility tbd: add support information for c...
Web applications and ARIA FAQ - Accessibility
(tbd) voiceover osx 10.5, ios 4 os x 10.7 ios 5 jaws 8 10 window-eyes 7 no live region support currently zoomtext ?
Accessibility: What users can do to browse more safely - Accessibility
use reader mode on browsers enable content blockers; gets rid of ads, reduces and/or removes distractions enables text-to-speech in certain browsers, enable fonts by choice enable page zoom turn off animated gifs in the browser browsers offer much power to their users; it's just a matter of knowing where to go.
height - CSS: Cascading Style Sheets
WebCSS@viewportheight
<percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
max-height - CSS: Cascading Style Sheets
<percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths.
max-width - CSS: Cascading Style Sheets
<percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths.
min-height - CSS: Cascading Style Sheets
<percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths.
min-width - CSS: Cascading Style Sheets
<percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
width - CSS: Cascading Style Sheets
WebCSS@viewportwidth
<percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
Border-image generator - CSS: Cascading Style Sheets
%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-...
Border-radius generator - CSS: Cascading Style Sheets
} .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui...
Box-shadow generator - CSS: Cascading Style Sheets
%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetic...
CSS Device Adaptation - CSS: Cascading Style Sheets
css device adaptation is a module of css that lets you define the size, zoom factor, and orientation of the viewport.
Using CSS gradients - CSS: Cascading Style Sheets
in addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.
Animatable CSS properties - CSS: Cascading Style Sheets
hape-image-threshold shape-margin shape-outside tab-size text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset top transform transform-origin translate vertical-align visibility width word-spacing z-index zoom ...
WebKit CSS extensions - CSS: Cascading Style Sheets
* -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit-text-security -webkit-text-stroke-color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, unprefixed track ** new syntax has been standardized.
calc() - CSS: Cascading Style Sheets
WebCSScalc
ct> ]*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.
height - CSS: Cascading Style Sheets
WebCSSheight
accessibility concerns ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to increase text size.
image-rendering - CSS: Cascading Style Sheets
scaling may also occur due to user interaction (zooming).
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.
max-height - CSS: Cascading Style Sheets
accessibility concerns ensure that elements set with a max-height are not truncated and/or do not obscure other content when the page is zoomed to increase text size.
max-width - CSS: Cascading Style Sheets
WebCSSmax-width
accessibility concerns ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text size.
max() - CSS: Cascading Style Sheets
WebCSSmax
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
WebCSSmin
m># )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).
opacity - CSS: Cascading Style Sheets
WebCSSopacity
city: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ } result setting opacity on hover html <img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width="128" height="146" class="opacity"> css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; /* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; } result specifications specification status comment css color module level 4the definition of 'opacity' in that specification.
position - CSS: Cascading Style Sheets
WebCSSposition
accessibility concerns ensure that elements positioned with an absolute or fixed value do not obscure other content when the page is zoomed to increase text size.
scale() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001 [sx 0 0 sy 0 0] accessibility concerns scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine.
transform - CSS: Cascading Style Sheets
WebCSStransform
accessibility concerns scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine.
width - CSS: Cascading Style Sheets
WebCSSwidth
accessibility concerns ensure that elements set with a width aren't truncated and don't obscure other content when the page is zoomed to increase text size.
Graphic design for responsive sites - Progressive web apps (PWAs)
most hi res devices apply a default zoom factor to the whole web page so that the content is a bit more legible, but the downside of this is that the images in question start to look pixellated and ugly because they have been zoomed in.
requiredFeatures - SVG: Scalable Vector Graphics
sicfilter the browser supports the <filter>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <feoffset>, <fetile>, <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#documenteventsattribute the browser supports the onunload, onabort, onerror, onresize, onscroll and onzoom attributes http://www.w3.org/tr/svg11/feature#graphicaleventsattribute the browser supports the onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload attributes http://www.w3.org/tr/svg11/feature#animationeventsattribute the browser supports the onbegin, onend, onrepeat and onload attributes http://www.w3.org/tr/svg11/fe...
vector-effect - SVG: Scalable Vector Graphics
the resulting visual effect of this value is that the stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.
SVG Attribute reference - SVG: Scalable Vector Graphics
WebSVGAttribute
v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w width widths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes id, lang, tabindex, xml:base, xml:lang, xml:space style attributes class, style conditional processing attributes externalresourcesrequired, requiredextensions, requiredfeatures, systemlanguage.
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
known resize and scroll instead of svgresize and svgscroll implementation status unknown domactivate removed implementation status unknown focusin and focusout instead of domfocusin and domfocusout implementation status unknown keyboard events implementation status unknown mutation events removed implementation status unknown svgzoomevent removed implementation status unknown <cursor> element deprecated implementation status unknown linking change notes link svg resources with fragment identifiers implementation status unknown xlink:type, xlink:role, xlink:arcrole, xlink:show, and xlink:actuate attributes removed implementation status unknown xlink:href a...
Positions - SVG: Scalable Vector Graphics
this effectively zooms in on the 100x100 unit area and enlarges the image to double size.