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. each condition is specified using the same conditional format used by media queries. 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. each source size descriptor is comprised of a media condition, then at least one whitespace character, then the source size value to use for the image when the media condition evaluates to true.
...ing on the width of the window. three versions of the image are also available, with their widths specified. the browser takes all of this information and selects an image and width that best meets the specified values. how exactly the images are used may depend upon the browser and what the pixel density of the user's display is. buttons at the bottom of the example let you actually modify the sizes property slightly, switching the largest of the three widths for the image between 40em and 50em. html <article> <h1>an amazing headline</h1> <div class="test"></div> <p>this is even more amazing content text. it's really spectacular. and fascinating. oh, it's also clever and witty. award-winning stuff, i'm sure.</p> <img src="/files/16870/new-york-skyline-wide.jpg" src...
...his is even more amazing content text. it's really spectacular. and fascinating. oh, it's also clever and witty. award-winning stuff, i'm sure.</p> <img src="/files/16870/new-york-skyline-wide.jpg" srcset="/files/16870/new-york-skyline-wide.jpg 3724w, /files/16869/new-york-skyline-4by3.jpg 1961w, /files/16871/new-york-skyline-tall.jpg 1060w" sizes="((min-width: 50em) and (max-width: 60em)) 50em, ((min-width: 30em) and (max-width: 50em)) 30em, (max-width: 30em) 20em"> <p>then there's even more amazing stuff to say down here. can you believe it? i sure can't.</p> <button id="break40">last width: 40em</button> <button id="break50">last width: 50em</button> </article> css article { margin: 1em; max...
...And 3 more matches

Responsive images - Learn web development
this helps to improve performance across different devices. 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. ...
...solutions. responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction). note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images? in this section, we'll look at the two problems illustrated above and show how to solve them using html's responsive image features. you should note that we will be focusing on the html <img>s for t...
...age features. you should note that we will be focusing on the html <img>s for this section, as seen in the content area of the example above — the image in the site header is only for decoration, and therefore implemented using css background images. css arguably has better tools for responsive design than html, and we'll talk about those in a future css module. resolution switching: different sizes so, what is the problem that we want to solve with resolution switching? we want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. the standard <img> element traditionally only lets you point the browser to a single source file: <img src="elva-fairy-800w.jpg" alt="elva dressed as a f...
...And 13 more matches

Web video codec guide - Web media technologies
achieved in the video. 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. depending on the codec, higher color depths may result in larger compressed file sizes. the determining factor is what internal storage format is used for the compressed data. frame rate primarily affects the perceived smoothness of the motion in the image. to a point, the higher the frame rate, the smoother and more realistic the motion will appear. eventually the point of diminishing returns is reached. see frame rate below for details. assuming the frame rate is n...
...ressed data. frame rate primarily affects the perceived smoothness of the motion in the image. to a point, the higher the frame rate, the smoother and more realistic the motion will appear. eventually the point of diminishing returns is reached. see frame rate below for details. assuming the frame rate is not reduced during encoding, higher frame rates cause larger compressed video sizes. motion compression of video typically works by comparing frames, finding where they differ, and constructing records containing enough information to update the previous frame to approximate the appearance of the following frame. the more successive frames differ from one another, the larger these differences are, and the less effective the compression is at avoiding the introduction...
...on generally adjusts for camera movements such as tracking, dolly movements, panning, tilting, rolling, and up and down movements. block motion compensation handles localized changes, looking for smaller sections of the image that can be encoded using motion compensation. these blocks are normally of a fixed size, in a grid, but there are forms of motion compensation that allow for variable block sizes, and even for blocks to overlap. there are, however, artifacts that can occur due to motion compensation. these occur along block borders, in the form of sharp edges that produce false ringing and other edge effects. these are due to the mathematics involved in the coding of the residual frames, and can be easily noticed before being repaired by the next key frame. reduced frame size in certai...
...And 13 more matches

Responsive design - Learn web development
previous overview: css layout next in the early days of web design, pages were built to target a particular screen size. if the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. as more diverse screen sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. it is an idea that changed the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it. prerequisites: html basics (study introduction to html), and an idea of how css works (study cs...
...proaches tended to result in a website that looked its best on the screen of the person designing the site! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. note: see this simple liquid layout: example, source code. when viewing the example, drag your browser window in and out to see how this looks at different sizes. the fixed-width site risked a horizontal scrollbar on screens smaller than the site width (as seen below), and lots of white space at the edges of the design on larger screens. note: see this simple fixed-width layout: example, source code. again, observe the result as you change the browser window size. note: the screenshots above are taken using the responsive design mode in firefox...
...r. 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. the third key component was the media query. media queries enable the type of layout switch that cameron adams had previously explored using javascript, using only css. rather than having one layout for all screen sizes, the layout could be changed. sidebars could be repositioned for the smaller screen, or alternate navigation could be displayed. it is important to understand that responsive web design isn't a separate technology — it is a term used to describe an approach to web design or a set of best practices, used to create a layout that can respond to the device being used to view the content. in marco...
...And 8 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
rel attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. <a> and <area> will still created links, but without a defined relationship. like all html keyword attribute values, these values are case-insenstive. ...
...instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. ...
...d, the default cursor will be help instead of pointer. icon valid with <link>, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document. ...
...And 4 more matches

<link>: The External Resource Link element - HTML: Hypertext Markup Language
see from our link types reference, there are many different kinds of relationship. there are a number of other common types you'll come across. 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. these provide useful hints to allow the browser to choose the most appropriate icon available. you can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media conditio...
...r's path. unsafe-url means that the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe because it can leak origins and paths from tls-protected resources to insecure origins. rel this attribute names a relationship of the linked document to the current document. the attribute must be a space-separated list of link type values. ...
...the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe because it can leak origins and paths from tls-protected resources to insecure origins. rel this attribute names a relationship of the linked document to the current document. the attribute must be a space-separated list of link type values. ...
...And 4 more matches

DMD
he "twice-reported stack trace records" and "unreported stack trace records" sections are the most important, because they indicate ways in which the memory reporters can be improved. here's an example stack trace record from the "unreported stack trace records" section. ...
...it also indicates what percentage of the total heap size and the unreported portion of the heap these blocks represent. within each section, records are listed from largest to smallest. once-reported and twice-reported stack trace records also have stack traces for the report point(s). for example: reported at { #01: mozilla::dmd::report(void const*) (/home/njn/moz/mi2/memory/replace/dmd/d...
...e it run faster. the decision on whether to record is done probabilistically, and larger blocks are more likely to have an allocation stack trace recorded. all unreported blocks that lack an allocation stack trace will end up in a single record. ...
...And 3 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
some reason: for example, network errors, content blocking, or linkrot. there are many other attributes to achieve various purposes: referrer/cors control for security and privacy: see crossorigin and referrerpolicy. use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts. responsive image hints with sizes and srcset (see also the <picture> element and our responsive images tutorial). supported image formats the html standard doesn't list what image formats to support, so each user agent supports different formats. a complete guide to image formats supported by web browsers is available. below is a list of the image formats that are most commonly used on the web, as well as some older formats th...
...ther origins will limit the included referral data to the scheme, host, and port, while navigating from the same origin will include the full path and query string. unsafe-url: the referer header will always include the origin, path and query string, but not the fragment, password, or username. this is unsafe because it can leak information from tls-protected resources to insecure origins. sizes one or more strings separated by commas, indicating a set of source sizes. each source size consists of: a media condition. this must be omitted for the last item in the list. a source size value. media conditions describe properties of the viewport, not of the image. for example, (max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 50...
... size of the image. user agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors. the selected source size affects the intrinsic size of the image (the image’s display size if no css styling is applied). if the srcset attribute is absent, or contains no values with a width descriptor, then the sizes attribute has no effect. src the image url. mandatory for the <img> element. on browsers supporting srcset, src is treated like a candidate image with a pixel density descriptor 1x, unless an image with this pixel density descriptor is already defined in srcset, or unless srcset contains w descriptors. srcset one or more strings separated by commas, indicating possible image sources for the...
...And 3 more matches

Firefox UI considerations for web developers
taken from the size attribute specified on the <link>, if it's provided. apple-touch-icon and apple-touch-icon-precomposed icons with no size attribute are assumed to be the standard classic iphone size of 57x57 pixels. the icon closest in size to 96 pixels is selected. firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes. ...
... is selected. firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes. providing a top sites ready icon the simple rule is to provide an icon which is at least 96x96 pixels in size, using a <link> element whose rel attribute is a reference to a file containing an icon of a supported type. <link rel="apple-touch-icon" sizes="128x128" href="touch-icon-128x128.png"> <link rel="apple-touch-icon" sizes="46x46" href="touch-icon-46x46.png"> <link rel="apple-touch-icon" sizes="256x256" href="touch-icon-256x256.png"> <link rel="icon" href="favicon.ico"> in this code, the 128x128 pixel icon will be used by firefox, as it's the smallest icon which is larger than the 96-pixel size it requires. note: only "rich" icons (appl...
... examples consider again the example top sites box shown at the top of the page, repeated below: let's look at some examples among the icons shown here (note that this discussion is based on the site designs as of early january, 2019). ...
...And 2 more matches

Element Positioning - Archive of obsolete content
as you expect, try also to modify the button min-width property. height this specifies the height of the element. by setting either of the two properties, the element will be created with that width and height. if you specify only one size property, the other is calculated as needed. the size of these style properties should be specified as a number followed by a unit. flexible elements the sizes are fairly easy to calculate for non-flexible elements. they simply obey their specified widths and heights, and if the size wasn't specified, the element's default size is just large enough to fit the contents. for flexible elements, the calculation is slightly trickier. flexible elements are those that have a flex attribute set to a value greater than 0. recall that flexible elements grow and ...
...der. the solution is to make the box flexible also. then, when you make the window wider, extra space will be available, so the box will grow to fill the extra space. because the box is larger, more extra space will be created inside it, and the flexible button inside it will grow to fit the available space. this process repeats for as many nested boxes as necessary. setting minimum and maximum sizes you may want to allow an element to be flexible but constrain the size so that it cannot be larger than a certain size. or, you may want to set a minimum size. you can set this by using four attributes: minwidth; this specifies the minimum width that the element can be. minheight this specifies the minimum height that the element can be. maxwidth this specifies the maximum width that the...
...ts such as spacers will absorb the remaining space, breaking the flex ratio. example 4 the fourth button is flexible and will never have a height that is smaller than 2 ex (an ex is usually the height of the letter x in the current font) or wider than 100 pixels. example 5 the text input is flexible but will never grow to be larger than 10 ems. you will often want to use ems when specifying sizes with text in them. this unit is useful for textboxes so that the font can change and the textboxes would always be a suitable size, even if the font is very large. example 6 the description element is constrained to have a maximum width of 50 pixels. the text inside will wrap to the next line, after fifty pixels. our find files dialog let's add some of these styles to the find files dialog...
...ill resize to fit the entire window. <textbox id="find-text" flex="1" style="min-width: 15em;"/> here, the text input has been made flexible. this way, it will grow if the user changes the size of the dialog. this is useful if the user wants to enter a long string of text. also, a minimum width of 15 ems has been set so that the text box will always show at least 15 characters. if the user resizes the dialog to be very small, the text input will not shrink past 15 ems. it will be drawn as if it extends past the edge of the window. notice in the image that the text input has grown to extend to the full size of the window. box packing let's say you have a box with two child elements, both of which are not flexible, but the box is flexible. for example: example 3: source view <box flex="...

Using Spacers - Archive of obsolete content
box. before we get into detail about boxes, we'll introduce another xul element that is useful for layout, the spacer. a spacer is very simple and only requires one attribute, which will be explained in a moment. the simplest spacer looks like the following: <spacer flex="1"/> a spacer is used to place blank space into a window. its most useful ability is that it can grow or shrink as the user resizes the window. this would be how one would place buttons on the right or bottom of a window and have them stick to the right or bottom edge no matter what size the window is. as we'll see, you can use a series of spacers to create a number of layout effects. in this syntax above, the spacer has one attribute, called flex. this is used to define the flexibility of the spacer. in the case above, the s...
... chosen a suitable default size. the flex attribute is used to specify if an element can change size to fit the box (in this case, the window) it is in. we've already seen the flex attribute applied to spacers, but it can be applied to any element. for example, you might want to have the find button resize instead. as you can see in the image, by placing a flex attribute on the find button, it resizes when the window does. a spacer is really nothing special. it could really be considered a hidden button. it works much the same way as a button except it does not draw on screen. you may have noticed something about the image above. not only did the find button grow in size but some space has appeared between the main label and the button. of course, this is the spacer that we put in earlier. it ...
...t one has a flex of 2, the second one will grow at twice the rate of the first one. in effect, a flex of 2 says that this element has a flex that is two times the elements that have a flex of one. the flex attribute isn't used to specify an actual size. instead, it specifies how empty space it divided among the children of a container box. we'll look at boxes in the next section. once the default sizes of the children of a box are determined, the flexibility values are used to divide up the remaining empty space in the box. for example, if a box is 200 pixels wide and contains two flexible buttons, the first 50 pixels and the other 90 pixels, there will be 60 pixels of space left over. if both buttons have a flex value of 1, the space will be divided evenly with 30 extra pixels of width going t...
...ect would be the same if the flex attributes were left out. example 6 because the flex values are the same on both buttons, they will flex equally. this would work just as well with flex values of one instead of 145. there's no difference in this case. it is recommended that you use lower numbers for readability. note that other factors, such as the button labels and button minimum sizes, will affect the actual sizes of the buttons. for instance, a button won't shrink less than the space needed to fit its label. specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely. it means that the element is not flexible at all. you may also sometimes see a flex value specified as a percentage. this has no special meaning and is treated as if the percent s...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
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). 259 mvc glossary, infrastructure, intro, mvc, model view controller mvc (model-view-controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. it emphasizes a separation between the software’s business logic and display. this "separation of concerns" provides for a better division of labor and improved maintenance. some other design patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-presenter), and mvw (model-view-whatever). 260 main axis css, glossary, main axis, flexbox the main axis in flexbox is...
...rface in which some or all of its methods and/or properties are unimplemented, requiring that another class or interface provide the missing implementations. 273 mobile first design, glossary, layout, layout mobile mobile first, a form of progressive enhancement, is a web-development and web-design approach that focuses on prioritizing design and development for mobile screen sizes over design and development for desktop screen sizes. the rationale behind the mobile-first approach is to provide users with good user experiences at all screen sizes—by starting with creating a user experience that works well on small screens, and then building on top of that to further enrich the user experience as the screen size increases. the mobile-first approach contrasts with the older...
... 274 modem infrastructure, navigation a modem ("modulator-demodulator") is a device that converts digital information to analog signals and vice-versa, for sending data through networks. ...
... 274 modem infrastructure, navigation a modem ("modulator-demodulator") is a device that converts digital information to analog signals and vice-versa, for sending data through networks. ...

Fundamental text and font styling - Learn web development
absolute unit — it results in the same final computed value for the font on the page in pretty much any situation. ems: 1 em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter m contained inside the parent element.) this can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. why bother? it is quite natural once you get used to it, and you can use em to size everything, not just text. you can have an entire website sized using em, which makes maintenance easy. rems: these work just like em, except that 1 rem is equal to the font size set on the root element of the document (i.e. <html>), not the parent element. this makes d...
... below. why bother? it is quite natural once you get used to it, and you can use em to size everything, not just text. you can have an entire website sized using em, which makes maintenance easy. rems: these work just like em, except that 1 rem is equal to the font size set on the root element of the document (i.e. <html>), not the parent element. this makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle — rem is not supported in internet explorer 8 and below. the font-size of an element is inherited from that element's parent element. this all starts with the root element of the entire document — <html> — the font-size of which is set to 16px as standard across browsers. any paragraph (or another element...
...-size of an element is inherited from that element's parent element. this all starts with the root element of the entire document — <html> — the font-size of which is set to 16px as standard across browsers. any paragraph (or another element that doesn't have a different size set by the browser) inside the root element will have a final size of 16 px. other elements may have different default sizes, for example an <h1> element has a size of 2 em set by default, so it will have a final size of 32 px. things become more tricky when you start altering the font size of nested elements. for example, if you had an <article> element in your page, and set its font-size to 1.5 em (which would compute to 24 px final size), and then wanted the paragraphs inside the <article> elements to have a comput...
...e capital glyphs. font-variant-east-asian: control the usage of alternate glyphs for east asian scripts, like japanese and chinese. font-variant-ligatures: control which ligatures and contextual forms are used in text. font-variant-numeric: control the usage of alternate glyphs for numbers, fractions, and ordinal markers. font-variant-position: control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript. font-size-adjust: adjust the visual size of the font independently of its actual font size. font-stretch: switch between possible alternative stretched versions of a given font. text-underline-position: specify the position of underlines set using the text-decoration-line property underline value. text-rendering: try to perform some text rendering optim...

Memory reporting
crucial features. they let you measure the mystring object itself or not as necessary. this is important because sometimes an object might be embedded in another object that is measured separately. and the names make it clear exactly what is being measured. on platforms that allow it, they count the actual memory in use, including "slop" bytes caused by the heap allocator rounding up request sizes (a.k.a. internal fragmentation). if slop bytes aren't measured they'll end up in about:memory's heap-unclassified entry, which is bad. the size is not computed analytically. for example, sizeof doesn't appear anywhere. this is a good thing, because computing sizes analytically doesn't count slop, and it is much more error-prone than using moz_malloc_usable_size. they are flexible and integrate ...
...malloc_usable_size. they are flexible and integrate well with dmd. the amallocsizeof parameter allows mozilla::mallocsizeof functions with dmd-specific hooks to be passed in when they are used by memory reporters, but functions without such hooks (such as moz_malloc_size_of) can also be passed in when they are used in other circumstances. some other things to note. please use size_t for the sizes in functions like this. although nsimemoryreporter uses int64_t, this is because (a) you can't use size_t in idl, and (b) not every "amount" is a bytes measurement. so it's best to mostly use size_t and convert to int64_t as late as possible. you don't always need both sizeofexcludingthis and sizeofincludingthis. implement one or both as needed. if you have both, sizeofexcludingthis is the inter...
...mbers rather than assigning to them, especially if you're measuring multiple entities and summing their measurements. for example: void foobar::addsizeofexcludingthis(nsmallocsizeoffun amallocsizeof, size_t *afoosizeout, size_t* abarsizeout) const { *afoosizeout += ...; *abarsizeout += ...; } alternatively, you could create a struct: struct foobarsizes { size_t mfoo; size_t mbar; foobarsizes() { mozilla::podzero(this); } } void foobar::addsizeofexcludingthis(nsmallocsizeoffun amallocsizeof, foobarsizes* asizes) const { asizes->mfoo += ...; asizes->mbar += ...; } note the add prefix that makes this incrementing behaviour clear. obviously, if you increment you have to zero the values at some point. ...
...locsizeoffun amallocsizeof, foobarsizes* asizes) const { asizes->mfoo += ...; asizes->mbar += ...; } note the add prefix that makes this incrementing behaviour clear. obviously, if you increment you have to zero the values at some point. when using a struct, its constructor is the obvious place for this. you could even put the nsmallocsizeoffun in foobarsizes to reduce the number of arguments. sometimes it's difficult and/or not worth measuring every member of an object of in a foo::sizeofexcludingthis method. this is ok, but it's worth adding a comment explaining this to the method. occasionally you do want to compute sizes analytically instead of using moz_malloc_size_of. in that case, use computedsizeof as the prefix for the function name. ...

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
ent. a <picture> element, and it must be placed before the <img> element. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlsourceelement attributes this element includes the global attributes. media media query of the resource's intended media; this should be used only in a <picture> element. ...
... and it must be placed before the <img> element. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlsourceelement attributes this element includes the global attributes. media media query of the resource's intended media; this should be used only in a <picture> element. ...
... src required for <audio> and <video>, address of the media resource. ...
...nted by the source. each source size consists of a comma-separated list of media condition-length pairs. this information is used by the browser to determine, before laying the page out, which image defined in srcset to use. please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example). the sizes attribute has an effect only when the <source> element is the direct child of a <picture> element. src required for <audio> and <video>, address of the media resource. the value of this attribute is ignored when the <source> element is placed inside a <picture> element. srcset a list of one or more strings separated by commas indicating a set of possible images represented by the source f...