Fundamental text and font styling - Learn web development
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.
...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.
...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.
... font-variant-position: control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.

HTMLImageElement.currentSrc - Web APIs
this is useful when you provide multiple image options using the sizes and/or htmlimageelement.srcset properties.
... example in this example, two different sizes are provided for an image of a clock.
...the sizes attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under 400px wide; otherwise, the image is drawn at 90% width of the document.
... html <img src="/files/16797/clock-demo-400px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; } document.body.appendchild(p); result specifications specification status comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification.

HTMLImageElement - Web APIs
htmlimageelement.sizes a domstring reflecting the sizes html attribute.
... this string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used.
... read the documentation on the sizes page for details on the format of this string.
... living standard the following properties have been added: srcset, currentsrc and sizes.

Index - Web APIs
1730 htmlimageelement.sizes api, html, html dom, htmlimageelement, property, reference, responsive design, responsive images, size, sizes, width the htmlimageelement property sizes allows you to specify the layout width of the image for each of a list of media conditions.
... 4987 window.resizeby() api, cssom view, method, needsmarkupwork, reference, window the window.resizeby() method resizes the current window by a specified amount.
... 4988 window.resizeto() api, cssom view, method, needsmarkupwork, reference, window the window.resizeto() method dynamically resizes the window.
... 5013 window.sizetocontent() api, html dom, method, reference, window the window.sizetocontent() method sizes the window according to its content.

font-size - CSS: Cascading Style Sheets
changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.
... note: defining font sizes in px is not accessible, because the user cannot change the font size in some browsers.
...avoid using them for font sizes if you wish to create an inclusive design.
...ement's font sizecomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <absolute-size> | <relative-size> | <length-percentage>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large<relative-size> = larger | smaller<length-percentage> = <length> | <percentage> examples setting font sizes css .small { font-size: xx-small; } .larger { font-size: larger; } .point { font-size: 24pt; } .percent { font-size: 200%; } html <h1 class="small">small h1</h1> <h1 class="larger">larger h1</h1> <h1 class="point">24 point h1</h1> <h1 class="percent">200% h1</h1> result specifications specification status comment css fonts module level 4the definition...

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.
... icons: a bunch of icon information — source urls, sizes, and types.
... a minimal web manifest must have at least a name and an icons field with at least one icon defined; that icon must have at least the src, sizes, and type sub-fields as well.

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
by referring to a special style sheet within chrome://global/skin/, we can make label and button sizes, window background color, etc, match the currently selected theme in firefox.
... <button label="button" width="200" height="100"/> listing 6: setting the size of a button also, as shown in listing 7, you can embed css inline into elements via the style attribute, which allows you to set sizes using units other than pixels.
...firefox uses this method to store its own window sizes and locations as well.

resizeafter - Archive of obsolete content
closest the element immediately to the right or below the splitter resizes.
... farthest the element that is the farthest away from the splitter to the right or below the splitter resizes.
... flex the closest flexible element resizes.

resizebefore - Archive of obsolete content
closest the element immediately to the left or above the splitter resizes.
... farthest the element that is the farthest away from the splitter to the left or above the splitter resizes.
... flex the closest flexible element resizes.

Box Model Details - Archive of obsolete content
example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> summary of the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible.
... the best interface is one that can be displayed at various sizes without problems.
...the textbox is flexible so it will resize as the window resizes.

Table Reflow Internals - Archive of obsolete content
review of reflow the reflowee sets various sizes in the reflow metrics after (possibly) reflowing some or all of its children which reflows it children, etc.
...the table figures out the column widths (balances) given the style width constraints on the table, col groups, cols, cells the preferred and max element sizes of the cells (from the pass 1 reflow), and considers colspans pass 2 - cell widths are constrained by the column widths (heights are only constrained in paginated mode).
...when a target is the cell or below and the cell changes size, the row tells the table so it can decide if it needs to rebalance when a target is inside the cell's block, the cell requests max element, preferred sizes of its block in case they change after the table reflows the row group(s) containing the targets, if it rebalances, it then does a pass 2 reflow.

Mobile First - MDN Web Docs Glossary: Definitions of Web-related terms
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 approach of designing for desktop screen sizes first, and then only later adding some support for small screen sizes.

How can we design for all types of users? - Learn web development
relative units are expressed in em, % and rem: percent-based sizes: % this unit tells your browser that an element's font size must be n% of the previous element whose font size was expressed.
... em-based sizes: em this unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100.
... rem-based sizes: rem this unit is proportional to the root element's font size and is expressed as portions of 1, like em.

Multimedia: Images - Learn web development
many javascript libraries can implement this for you, such as lazysizes, and browser vendors are working on a native lazyload attribute that is currently in the experimental phase.
... are you loading the correct sizes?
...that's where you would need to upgrade your <picture> and <source> elements with media and/or sizes attributes.

A Web PKI x509 certificate primer
intermediate signs the csr (using sha256) and appends the extensions described in the file "openssl x509 -req -sha256 -days 1096 -in example.csr -cakey intkey.pem -ca int.pem -set_serial $some_large_integer -out www.example.com.pem -extfile openssl.int.cnf" security notes there are several organizations that provide recommendations regarding the security parameters for key/hash sizes given current computational power.
...these are the recomendations of bit sizes (from http://www.keylength.com/): asymmetric ecc(key) hash linestra(2004) 1902 172 172 ecrypt 2012 2432 224 224 nist 2012 2048 224 224 anssi 2010 4096 200 256 rfc 3766 2358 200 --- bsi 1976 256 256 in other words, sha1 is now deprecated for new uses.
... we should use at least 3072 key sizes and at least a 256 ecc curve.

ContentIndex.add() - Web APIs
sizes: optional a string representation of the image size.
... // 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('fai...
... // 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' }; self.registration.index.add(item); specifications specification status comment unknownthe definition of 'add' in that specification.

HTMLImageElement.height - Web APIs
example in this example, two different sizes are provided for an image of a clock using the srcset attribute.
...further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width.
... <p>image height: <span class="size">?</span>px (resize to update)</p> <img src="/files/17373/clock-demo-200px.png" alt="clock" srcset="/files/17373/clock-demo-200px.png 200w, /files/17374/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn.

HTMLImageElement.width - Web APIs
example in this example, two different sizes are provided for an image of a clock using the srcset attribute.
...further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width.
... <p>image width: <span class="size">?</span>px (resize to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment.

Window - Web APIs
window.resizeby() resizes the current window by a certain amount.
... window.resizeto() dynamically resizes window.
... window.sizetocontent() sizes the window according to its content.

box-sizing - CSS: Cascading Style Sheets
this makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content.
... on the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.
... formal definition initial valuecontent-boxapplies toall elements that accept width or heightinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box examples box sizes with content-box and border-box this example shows how different box-sizing values alter the rendered size of two otherwise identical elements.

font-variant-caps - CSS: Cascading Style Sheets
when a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones.
...if these are not present, the browser synthesizes them from the uppercase glyphs.
...in each case, if the font doesn't support the opentype value, then it synthesizes the glyphs.

grid-template-columns - CSS: Cascading Style Sheets
note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.
...rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid’s definition.
...)where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-columns' in that specifi...

grid-template-rows - CSS: Cascading Style Sheets
note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.
...rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid’s definition.
...)where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specificati...

text-rendering - CSS: Cascading Style Sheets
optimizespeed the browser emphasizes rendering speed over legibility and geometric precision when drawing text.
... optimizelegibility the browser emphasizes legibility over rendering speed and geometric precision.
... geometricprecision the browser emphasizes geometric precision over rendering speed and legibility.

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
sizes is a list of source sizes that describes the final rendered width of the image represented by the source.
...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.

Browser detection using the user agent - HTTP
while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side!
...rather, try to have fewer columns of information in a longer page on smaller screens while having more columns with a shorter page on larger screen sizes.
...(max-width: 24.99em) is simply a poor man's version of not all and (min-width: 25em): do not use (max-width: 24.99em) because the layout might break on very high font sizes on very high definition devices in the future.

panel - Archive of obsolete content
the add-on consists of six files: main.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different sizes "main.js" is saved in your add-on's lib directory, and the other files go in your add-on's data directory: my-addon/ data/ get-text.js icon-16.png icon-32.png icon-64.png text-entry.html lib/ main.js the "main.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" ...
... resize(width, height) resizes the panel.

ui/button/action - Archive of obsolete content
"my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
...here you can specify a range of sizes for your button's icon.

ui/button/toggle - Archive of obsolete content
"my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
...here you can specify a range of sizes for your button's icon.

Adding a Button to the Toolbar - Archive of obsolete content
specifying the icon the icon property may specify a single icon or a collection of icons in different sizes, as in the example above.
... if you specify a collection of icons in different sizes the browser will automatically choose the best fit for the screen resolution and the place in the browser ui that hosts the button.

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
if you shrink the firefox window, you'll notice that the content resizes until it reaches its minimum size and begin to be cropped (cut), making ui elements disappear.
... you should test that your toolbar resizes gracefully and doesn't force firefox to crop content before it's strictly necessary.

The Box Model - Archive of obsolete content
it is important to know how it works in order to make interfaces that are easy to localize, skin and use in different types of operating systems, screen sizes and resolutions.
...play with changing the dimensions and appearance of buttons, changing the background color of the toolbars and status bars, font styles, sizes, etc.

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
iles: 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 other disadvantage comes into play at small browser window sizes.

Index - Archive of obsolete content
when those elements have reached their maximum sizes, the elements with the next higher flexgroup are flexed.
... 2143 :-moz-system-metric(scrollbar-thumb-proportional) css, needscontent, needsexample, non-standard, pseudo-class, reference, selector the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.

MMgc - Archive of obsolete content
leak detection (for unmanaged memory) when the application is exiting, mmgc will detect memory leaks in its unmanaged memory allocators and print out the addresses and sizes of the leaked objects, and stack traces if stack traces are enabled.
...gcheap the gc library has a tiered memory allocation strategy, consisting of 3 parts: a page-granular memory allocator called the gcheap a set of fixed size allocators for sizes up to 2k a large allocator for items over 2k when you want to allocate something we figure out what size class it's in and then ask that allocator for the memory.

Things I've tried to do with XUL - Archive of obsolete content
this means that creating any sort of visual display (not necessarily "ui"; my use case is for creating a calendar time display) that sizes sanely when the user resizes the window is unfortunately very difficult.
... (to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the window, with the green, red, and blue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox.

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.

Sizing items in CSS - Learn web development
min- and max- sizes in addition to giving things a fixed size, we can ask css to give an element a minimum or a maximum size.
... if you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport.

Advanced form styling - Learn web development
the sizes of check boxes and radio buttons are not meant to be changed with their default designs, and browsers react very differently when you try.
... file input types inputs of type file are generally ok — as you saw in our example, it is fairly easy to create something that fits in ok with the rest of the page — the output line that is part of the control will inherit the parent font if you tell the input to do so, and you can style the custom list of file names and sizes in any way you want; we created it after all.

Adding vector graphics to the Web - Learn web development
previous overview: multimedia and embedding next vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size.
...well, svg does have some disadvantages: svg can get complicated very quickly, meaning that file sizes can grow; complex svgs can also take significant processing time in the browser.

Mozilla splash page - Learn web development
to complete this section you'll need to insert an <img> element inside each one containing appropriate src, alt, srcset and sizes attributes.
... note: to properly test the srcset/sizes examples, you'll need to upload your site to a server (using github pages is an easy and free solution), then from there you can test whether they are working properly using browser developer tools such as the firefox network monitor.

Index - Learn web development
248 mozilla splash page assessment, beginner, codingscripting, embedding, html, images, jpeg, multimedia, png, video, iframe, img, picture, responsive, sizes, src, srcset 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!
... 249 responsive images article, beginner, codingscripting, design, graphics, guide, html, image, intermediate, jpeg, png, pictures, captions, hyperlinks, img, picture, sizes, src, srcset that's a wrap for responsive images — we hope you enjoyed playing with these new techniques.

Using the viewport meta tag to control layout on mobile browsers
but remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.
... <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86"> common viewport sizes for mobile and tablet devices if you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here.

Index
the rijndael algorithm permits 3 blocksizes (16, 24, 32 bytes), but the aes standard requires the blocksize to be 16 bytes.
... the keysize can vary and these keysizes are permitted: 16, 24, 32 bytes.

NSS 3.19.2 release notes
notable changes in nss 3.19.2 bug 1172128 - in nss 3.19.1, the minimum key sizes that the freebl cryptographic implementation (part of the softoken cryptographic module used by default by nss) was willing to generate or use was increased - for rsa keys, to 512 bits, and for dh keys, 1023 bits.
... note: future versions of nss may increase the minimum keysizes required by the freebl module.

nss tech note5
the rijndael algorithm permits 3 blocksizes (16, 24, 32 bytes), but the aes standard requires the blocksize to be 16 bytes.
... the keysize can vary and these keysizes are permitted: 16, 24, 32 bytes.

SpiderMonkey Internals
the jsprvtd.h file contains private typedefs and is included by various .h files that need type names, but not type sizes or declarations.
...these use multiplicative hash for strength reduction over division hash, yet with very good key distribution over power of two table sizes.

Secure Development Guidelines
83648 - +2147483647 unsigned int 0 - +4294967295 64 signed long long -9223372036854775808 - +9223372036854775807 unsigned long long 0 - +18446744073709551615 int vuln_funct(int size) { char buf[1024]; if (size > sizeof(buf) - 1) return -1; } signedness issues: don’t mix signed and unsigned integers use unsigned integers for sizes, offsets, and indexes casting and truncation example: void vuln_funct() { u_int32_t size1 = 0xffffffff; u_int16_t size2 = size1; void *ptr = malloc(size2); if (!ptr) exit(exit_failure); memcpy(ptr, user_data, size1); } casting issues: sign extension example: int main() { int32_t new_size = 0; int8_t size = 0xff; new_size = size; pri...
...ntf("0x%08x\r\n", new_size); } casting issues: sign extension prevention be careful with signed integers use unsigned integers for sizes, offsets, and indexes denial of service: divide by zero example: int main() { int a, b; if (argc != 3) return 1; a = atoi(argv[1]); b = atoi(argv[2]); return a/b; } denial of service: divide int_min by -1 example: int main(int argc, char **argv) { int a, b; if (argc != 3) return 1; a = atoi(argv[1]); b = atoi(argv[2]); return b ?

HTMLImageElement.src - Web APIs
additionally, if you use src along with both sizes (or the corresponding sizes content attribute) and srcset in order to choose an image based on the viewport size, the src attribute is only used as a fallback for browsers that don't support sizes and srcset; otherwise, it's not used at all.
... html result specifying a fallback for viewport-based selection when using viewport-bases selection of an image from a srcset by also specifying the sizes property, the src property serves as the fallback to be used on browsers that don't support viewport-based selection.

HTMLLinkElement - Web APIs
htmllinkelement.sizes read only is a domsettabletokenlist that reflects the sizes html attribute, as a list of tokens.
... the following properties have been added: rellist, and sizes.

Media Session API - Web APIs
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.

PerformanceResourceTiming.decodedBodySize - Web APIs
function log_sizes(perfentry){ // check for support of the *size properties and print their values // if supported.
...console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'decodedbodysize' in that specification.

PerformanceResourceTiming.encodedBodySize - Web APIs
function log_sizes(perfentry){ // check for support of the performanceentry.*size properties and print their values // if supported.
...console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'encodedbodysize' in that specification.

PerformanceResourceTiming.transferSize - Web APIs
function log_sizes(perfentry){ // check for support of the performanceentry.*size properties and print their values // if supported.
...console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'transfersize' in that specification.

RTCOutboundRtpStreamStats - Web APIs
totalencodedbytestarget a cumulative sum of the target frame sizes (the targeted maximum size of the frame in bytes when the codec is asked to compress it) for all of the frames encoded so far.
... this will likely differ from the total of the actual frame sizes.

WebGL best practices - Web APIs
the cap also must typically be updated as the browser window resizes, and older resources above the limit must be purged.
... webgl 2 use texstorage to create textures the teximage* api lets you define each mip level independently and at any size, even the mis-matching mips sizes are not an error until draw time which means there is no way the driver can actually prepare the texture in gpu memory until the first time the texture is drawn.

Window.resizeBy() - Web APIs
the window.resizeby() method resizes the current window by a specified amount.
... example // shrink the window window.resizeby(-200, -200); notes this method resizes the window relative to its current size.

Window.resizeTo() - Web APIs
the window.resizeto() method dynamically resizes the window.
... example this function resizes the window so that it takes up one quarter of the available screen.

Color picker tool - CSS: Cascading Style Sheets
======= get dom element by id ==========*/ function getelembyid(id) { return document.getelementbyid(id); } function allowdropevent(e) { e.preventdefault(); } /*========== make an element resizable relative to it's parent ==========*/ var uicomponent = (function uicomponent() { function makeresizable(elem, axis) { var valuex = 0; var valuey = 0; var action = 0; var resizestart = function resizestart(e) { e.stoppropagation(); e.preventdefault(); if (e.button !== 0) return; valuex = e.clientx - elem.clientwidth; valuey = e.clienty - elem.clientheight; document.body.setattribute('data-resize', axis); document.addeventlistener('mousemove', mousemove); document.addeventlistener('mouseup', resizeend); }; var mousemove = funct...
...move', mousemove); document.removeeventlistener('mouseup', resizeend); }; var handle = document.createelement('div'); handle.classname = 'resize-handle'; if (axis === 'width') action = 1; else if (axis === 'height') action = -1; else axis = 'both'; handle.classname = 'resize-handle'; handle.setattribute('data-resize', axis); handle.addeventlistener('mousedown', resizestart); elem.appendchild(handle); }; /*========== make an element draggable relative to it's parent ==========*/ var makedraggable = function makedraggable(elem, endfunction) { var offsettop; var offsetleft; elem.setattribute('data-draggable', 'true'); var dragstart = function dragstart(e) { e.preventdefault(); e.stoppropagation(); if (e.target.getattribute('d...

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others: if what you actually want is three equally-sized items, even if they start out at different sizes, you should use this: flex: 1 1 0; here we are saying that the size of the item for the purposes of our space distribution calculation is 0 — all the space is up for grabs and as all of the items have the same flex-grow factor, they each get an equal amount of space distributed.
... try changing the flex-grow factor from 1 to 0 in this live example to see the different behavior: giving items different flex-grow factors our understanding of how flex-grow works with flex-basis allows us to have further control over our individual item sizes by assigning items different flex-grow factors.

Basic Concepts of grid layout - CSS: Cascading Style Sheets
css grid layout has the following features: fixed and flexible track sizes you can create a grid with fixed track sizes – using pixels for example.
...you can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose.

Linear-gradient Generator - CSS: Cascading Style Sheets
callback : null; endfunc = endfunc || function(e) {}; var resizestart = function resizestart(e) { e.stoppropagation(); e.preventdefault(); if (e.button !== 0) return; valuex = e.clientx - elem.clientwidth; valuey = e.clienty - elem.clientheight; document.body.setattribute('data-resize', axis); document.addeventlistener('mousemove', mousemove); document.addeventlistener('mouseup', resizeend); }; var mousemove = funct...
...e); document.removeeventlistener('mouseup', resizeend); endfunc(); }; var handle = document.createelement('div'); handle.classname = 'resize-handle'; if (axis === 'width') action = 1; else if (axis === 'height') action = -1; else axis = 'both'; handle.classname = 'resize-handle'; handle.setattribute('data-resize', axis); handle.addeventlistener('mousedown', resizestart); elem.appendchild(handle); }; return { makeresizable : makeresizable }; })(); /** * gradient point */ var gradientpoint = function gradientpoint(axis) { var point = document.createelement('div'); point.classname = 'gradient-point'; this.position = 0; this.node = point; this.axis = axis; this.color = new hsvcolor(0, 0, 100); this.csscolor = this.color.get...

Viewport concepts - CSS: Cascading Style Sheets
viewport sizes are mutable the width of the viewport is not always the width of the window.
... mobile viewports mobile devices come in all shapes and sizes, with screens of differing device pixel ratios.

align-items - CSS: Cascading Style Sheets
for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
...regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

align-self - CSS: Cascading Style Sheets
for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
... unsafe regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

clamp() - CSS: Cascading Style Sheets
note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size.
...yntax clamp( <calc-sum>#{3} )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples min, max, and clamp comparison in this example we have a simple responsive example that makes use of min(), max(), and clamp() for some of the sizes.

column-width - CSS: Cascading Style Sheets
this property can help you create responsive designs that fit different screen sizes.
... candidate recommendation adds intrinsic sizes via the keywords min-content, max-content, fill-available, and fit-content.

font-optical-sizing - CSS: Cascading Style Sheets
the font-optical-sizing css property sets whether text rendering is optimized for viewing at different sizes.
... when optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes.

font-size-adjust - CSS: Cascading Style Sheets
/* use the specified font size */ font-size-adjust: none; /* use a font size that makes lowercase letters half the specified font size */ font-size-adjust: 0.5; /* global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: unset; the property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea number formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (10px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (10px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10px; } .verdana { f...

justify-items - CSS: Cascading Style Sheets
in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
... unsafe regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

justify-self - CSS: Cascading Style Sheets
in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
... unsafe regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

max-block-size - CSS: Cascading Style Sheets
this is useful because the max-width is always used for horizontal sizes and max-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.
...it provides standard styling including the minimum and maximum block sizes, font size, and so forth.

overflow-wrap - CSS: Cascading Style Sheets
soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.
... break-word the same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are not considered when calculating min-content intrinsic sizes.

Link types - HTML: Hypertext Markup Language
if there are multiple <link rel="icon">s, the browser uses their media, type, and sizes attributes to select the most appropriate icon.
... note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder.

Web app manifests
gnameorientationprefer_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/homescreen168.png", "sizes": "168x...
...168", "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).

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.
... you can include more sizes if you want; android will choose the most appropriate size for each different use case.

Responsive Navigation Patterns - Progressive web apps (PWAs)
therefore, it is necessary to consider the presentation of content and ease of navigation for all screen sizes.
... pros: one button in header maximizes space for content on a small screen important items stay visiblein most screen sizes and you decide the item priorities legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don't fit cons: navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu users may not notice the button contains a navigation menu in the smallest screen size one more step is needed to access the h...

The building blocks of responsive design - Progressive web apps (PWAs)
the video always resizes dynamically, but the screen captures taken from it do not, so upon resizing the screen it was possible to end up with a messy layout with different sized elements when using max-width: 100%, such as: media queries fluid grids are a great start, but you'll notice that at certain points (known as breakpoints) the layout starts to break down.
... adaptive images a server-side solution, which records the viewport size in a cookie, then resizes images via a combination of php and .htaccess to a more appropriate size, if appropriate.

Positions - SVG: Scalable Vector Graphics
« previousnext » in this article, we examine how scalable vector graphics (svg) represents the positions and sizes of objects within a drawing context, including coordinate system and what a "pixel" measurement means in a scalable context.
...much like absolute and relative font sizes in css, svg defines absolute units (ones with a dimensional identifier like "pt" or "cm") and so-called user units, that lack that identifier and are plain numbers.

package.json - Archive of obsolete content
jpm looks for the sizes 64, 48 and 32.

Display a Popup - Archive of obsolete content
the add-on consists of seven files: package.json: created when you run jpm init index.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different sizes the "index.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it.

How to convert an overlay extension to restartless - Archive of obsolete content
the solution to read arbitrary binary data, of various sizes, in an endian-safe way, is to use dataview.

Appendix: What you should know about open-source software licenses - Archive of obsolete content
one of the advantages of oss is that it emphasizes that software can be distributed for free, but it can also be distributed for money.

Adding menus and submenus - Archive of obsolete content
menus require a menupopup element as a container for its children, which are usually menuitem elements, but can also be menuseparator, or menu in order to have multiple nesting levels: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingsizes.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="...

Source code directories overview - Archive of obsolete content
it resizes and aligns pieces of content according to the css1 and css2 (cascading style sheets), alignment styles and the content itself.

Layout System Overview - Archive of obsolete content
the later case, called 'out of flow' puts the document author in control of the layout, and the author must specify the locations and sizes of all of the elements that are positioned.

The new nsString class implementation (1999) - Archive of obsolete content
ll usage due to fragility little intrinsic i18n support few efficiencies, notably a lack of support for narrow (1-byte) character strings no support for external memory management policy lack of xpcom interface notable features of the new nsstrimpl implementation are: intrinsic support for 1 and 2 byte character widths provides automatic conversion between strings with different character sizes inviolate base structure eliminates class fragility problem; safe across dll boundaries offers c-style function api to manipulate nsstrimpl offers simple memory allocator api for specialized memory policy shares binary format with bstring coming soon: a new xpcom (nsistring) interface non-templatized; this is a requirement for gecko very efficient buffer manipulation architecture the fund...

Learn XPI Installer Scripting by Example - Archive of obsolete content
inside the function, the two sizes are compared and if the available space is larger than the required space, the installation proceeds.

Flexgroup - Archive of obsolete content
when those elements have reached their maximum sizes, the elements with the next higher flexgroup are flexed.

flex - Archive of obsolete content
once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios.

Index - Archive of obsolete content
when those elements have reached their maximum sizes, the elements with the next higher flexgroup are flexed.

moveToAlertPosition - Archive of obsolete content
« xul reference home movetoalertposition() return type: no return value moves and resizes the dialog to a position and size suitable for an alert box.

MoveResize - Archive of obsolete content
void sizeto(in long width, in long height); here is an example which resizes a popup to be 200 pixels wide and 300 pixels high: popup.sizeto(200, 300); ...

Introduction - Archive of obsolete content
the local store is a datasource which is usually used to hold state information such as window sizes, which columns in a tree are showing, and which tree items are open.

Result Generation - Archive of obsolete content
there are two types of nodes in rdf, resources which usually represent 'things', and literals which are values like the names, dates or sizes of those things, and so on.

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
icon size toolbar buttons can have two different sizes -- big and small.

Box Objects - Archive of obsolete content
the values are always the position and sizes as currently displayed, so the values will be different if the element is moved or resized.

Splitters - Archive of obsolete content
if you do, the splitter will detect this and not allow the user to drag the splitter past the minimum and maximum sizes.

The Box Model - Archive of obsolete content
example so far: source view in the next section, we will look at specifying the sizes of individual elements and how to constrain their sizes.

Tree Box Objects - Archive of obsolete content
this is a convenient method since when the user resizes a flexible tree, the page size will grow and shrink, so you don't need to calculate the page size manually.

Window icons - Archive of obsolete content
you can specify up to 4 different sizes of png icons using the suffixes .png, 16.png, 32.png and 48.png.

XUL element attributes - Archive of obsolete content
once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios.

XUL accessibility guidelines - Archive of obsolete content
if you must change them, use css to size elements relative to the default sizes (for example, use % or em rather than specific point or pixel sizes).

dialog - Archive of obsolete content
movetoalertposition() return type: no return value moves and resizes the dialog to a position and size suitable for an alert box.

image - Archive of obsolete content
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.

Syndicating content with RSS - Archive of obsolete content
(other sizes and colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not required, support of this is recommended, especially for web sites and applications with high performance needs.

Theme changes in Firefox 4 - Archive of obsolete content
however, the theme should be designed in such a way that the above add-on button icon sizes fit correctly.

:-moz-system-metric(scrollbar-thumb-proportional) - Archive of obsolete content
the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.

:-moz-system-metric() - Archive of obsolete content
-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-thumb-proportional)the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme) css pseudo-class matches an element i...

Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
thus the font sizes of the marker and the content will be the same.

Index - Game development
56 scaling 2d, beginner, canvas, games, javascript, phaser, tutorial scaling refers to how the game canvas will scale on different screen sizes.

Building up a basic demo with Three.js - Game development
it's not too near, or too far, and the sizes of the objects allow them to stay on the scene, within the given field of view.

Audio for Web games - Game development
encoding your audio at lower bit rates means smaller file sizes but lower seeking accuracy.

Crisp pixel art look with image-rendering - Game development
two downsides to this method are larger file sizes and compression artifacts.

Scaling - Game development
scaling refers to how the game canvas will scale on different screen sizes.

Intrinsic Size - MDN Web Docs Glossary: Definitions of Web-related terms
how intrinsic sizes are calculated is defined in the css intrinsic and extrinsic sizing specification.

MVC - MDN Web Docs Glossary: Definitions of Web-related terms
it emphasizes a separation between the software’s business logic and display.

Raster image - MDN Web Docs Glossary: Definitions of Web-related terms
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.

CSS and JavaScript accessibility best practices - Learn web development
"standard" text content structure headings, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two items.</li> </ul> some typical css might look like this: h1 { font-size: 5rem; } p, li { line-height: 1.5; font-size: 1.6rem; } you should: select sensible font sizes, line heights, letter spacing, etc.

Images, media, and form elements - Learn web development
below we have used the value cover, which sizes the image down, maintaining the aspect ratio so that it neatly fills the box.

Overflowing content - Learn web development
increase the font sizes of text.

CSS values and units - Learn web development
the next example has font sizes set in percentages.

Test your skills: Flexbox - Learn web development
flex layout two these list items are all different sizes, but we want them to be displayed as three equal sized columns, no matter what content is in each item.

Grids - Learn web development
a fairly basic fact about the web is that you never really know how tall something is going to be; additional content or larger font sizes can cause problems with designs that attempt to be pixel perfect in every dimension.

Legacy layout methods - Learn web development
arturient montes, nascetur ridiculus mus.</p> </div> body { width: 90%; max-width: 900px; margin: 0 auto; } div:nth-of-type(1) { width: 48%; float: left; } div:nth-of-type(2) { width: 48%; float: right; } you'll notice here that we are using percentages for all the widths — this is quite a good strategy, as it creates a liquid layout, one that adjusts to different screen sizes and keeps the same proportions for the column widths at smaller screen sizes.

Test your skills: Media Queries and Responsive Design - Learn web development
note: due to the need to test your design in multiple screen sizes we do not have an interactive editor for this task.

CSS layout - Learn web development
responsive design as more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (rwd) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.

Styling lists - Learn web development
rules 2 and 3 set relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs.

Typesetting a community school homepage - Learn web development
give your headings and other element types appropriate font-sizes defined using a suitable relative unit.

Web fonts - Learn web development
because different fonts are created at different sizes, you may have to adjust the size, spacing, etc., to sort out the look and feel.

Sending form data - Learn web development
if you need to send a large amount of data, the post method is preferred because some browsers limit the sizes of urls.

CSS basics - Learn web development
now let's set font sizes for elements that will have text inside the html body (<h1>, <li>, and <p>).

Tips for authoring fast-loading HTML pages - Learn web development
specify sizes for images and tables if the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content.

What’s in the head? Metadata in HTML - Learn web development
for example, you'll find this in the source code of the mdn web docs homepage: <!-- third-generation ipad with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> <!-- iphone with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://deve...

Video and audio content - Learn web development
if the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.

Multimedia and Embedding - Learn web development
responsive images 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.

Introduction to events - Learn web development
the user resizes or closes the browser window.

Manipulating documents - Learn web development
how about we use an event so that the div resizes as we resize the window?

Basic math in JavaScript — numbers and operators - Learn web development
open in new window in the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case.

The "why" of web performance - Learn web development
reducing html/css/javascript and media file sizes reduces both the time to load and a site's power consumption (see performance budgets).

Getting started with Svelte - Learn web development
nevertheless, svelte is particularly appropriate to tackle the following situations: web applications intended for low power devices: applications built with svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power.

Introduction to automated testing - Learn web development
other basic features if you go back to the main browserstack page, you'll find a couple of other useful basic features under the more menu option: responsive: enter a url and press generate, and browserstack will load that url on multiple devices with different viewport sizes.

Implementing feature detection - Learn web development
if you look at the dom inspector of your browser's developer tools, you'll see that modernizr has updated your <html> class value like so: <html class="js no-htmlimports sizes flash transferables applicationcache blobconstructor blob-constructor cookies cors ...and loads more values!> it now contains a large number of classes that indicate the support status of different technology features.

Introducing a complete toolchain - Learn web development
for example, we could have included a tool to minimize our svg file sizes during build.

Accessibility Features in Firefox
moving back and forward by web page (alt+left and alt+right) occurs near-instantaneously the download manager provides keyboard access to all of your recent downloads operating system "look and feel" support: mozilla's default skin will match the colors and sizes currently being used in your desktop.

Accessibility information for UI designers and developers
see also: understanding sc 2.4.7: focus visible be ready for resizing and custom styles on the web, users can use tools in their browser to make font sizes larger, or even provide custom css to meet their specific needs.

Embedding API for Accessibility
there are many other pieces, such as preferences to allow the user to change foreground and background colors, and font sizes.

Software accessibility: Where are we today?
refreshable braille displays of various sizes a braille embosser audio- and braille- based user interfaces are concepts that software designers are historically untrained for.

Mozilla’s UAAG evaluation report
zooming is really the best solution, because the document retains its look - all font sizes are increased the same percentage.

HTTP logging
this is accomplished by splitting the log into up to 4 separate files (their filenames have a numbered extension, .0, .1, .2, .3) the logging back end cycles the files it writes to, while ensuring that the sum of these files’ sizes will never go over the specified limit.

mozbrowsericonchange
sizes a domstring listing the sizes the new icon is available in, e.g.

IME handling guide
for such a case, textcomposition::requesttocommit() synthesizes dom composition events and a dom text event for emulating to commit composition synchronously.

Introduction to Layout in Mozilla
pute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired size returned “up” via nshtmlreflowmetrics basic pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes desired (w, h), returns via reflow metrics parent frame sizes child frame and view based on child’s metrics n.b.

DownloadTarget
it currently indicates the size of the main file (such as the html document) rather than the sum of all of the files' sizes, but you must not rely upon this behavior, as it is subject to change.

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.

Mozilla Quirks Mode Behavior
html (1-7) and css (xx-small - xx-large) font sizes are calculated slightly differently (see bug 18136).

Localization Use Cases
like a robot: <crashbanneros2[brandshortname::_gender] { masculine: "{{ brandshortname }} uległ awarii", feminine: "{{ brandshortname }} uległa awarii", neutral: "{{ brandshortname }} uległo awarii" }> this will give us, depending on the current branding, the following messages: firefox os uległ awarii boot2gecko uległo awarii isolation let's look at how the settings app formats sizes.

PR_Realloc
resizes allocated memory on the heap.

NSS 3.14 release notes
maximum key sizes for rsa and diffie-hellman keys have been increased to 16k bits.

NSS 3.47 release notes
ram length before casting to mechanism-specific structs bug 1577953 - support longer (up to rfc maximum) hkdf outputs bug 1508776 - remove refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and selfserv bug 1581024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag sizes for ckm_aes_gcm bug 1576295 - check all bounds when encrypting with seed_cbc bug 1580286 - nss rejects tls 1.2 records with large padding with sha384 hmac bug 1577448 - create additional nested s/mime test messages for thunderbird bug 1399095 - allow nss-try to be used to test nspr changes bug 1267894 - libssl should allow selecting the order of cipher suites in clienthello bug 1581507 - fi...

NSS Sample Code sample6
* since we're using aes in this example, we're specifying * one of the valid keysizes (16, 24, 32) */ key = pk11_tokenkeygen(slot, ciphermech, 0, 32 /*keysize*/, &keyiditem, pr_true, 0); if (key == null) { fprintf(stderr, "pk11_tokenkeygen failed (err %d)\n", pr_geterror()); pk11_freeslot(slot); return; } fprintf(stderr, "key length of generated key is %d\n", pk11_getkeylength(key)); fprintf(stderr, "mechan...

NSS_3.12.3_release_notes.html
rusted ca trust flags not being honored in cert_verifycert bug 469583: coverity: uninitialized variable used in sec_pkcs5createalgorithmid bug 469944: when built with microsoft compilers bug 470351: crlutil build fails on windows because it calls undeclared isatty bug 471539: stop honoring digital signatures in certificates and crls based on weak hashes bug 471665: nss reports incorrect sizes for (aes) symmetric keys bug 471715: add cert to nssckbi to override rogue md5-collision ca cert bug 472291: crash in libpkix object leak tests due to null pointer dereferencing in pkix_build.c:3218.

JS::AutoVectorRooter
bool resize(size_t newlength) resizes the array to newlength.

JS_NewContext
in a debug build, large chunk sizes can degrade performance dramatically.

Realloc
remarks if aptr is non-null, then its contents will be unchanged to the minimum of the old and new sizes.

mozIStorageVacuumParticipant
valid page sizes are in the range 512 to 65,536.

nsIAccessibleEvent
0 event_destroy 0x8001 event_descriptionchange 0x800d event_parentchange 0x800f event_helpchange 0x8010 event_defactionchange 0x8011 event_acceleratorchange 0x8012 event_menustart 0x0004 event_menuend 0x0005 event_menupopupstart 0x0006 event_menupopupend 0x0007 event_capturestart 0x0008 event_captureend 0x0009 event_movesizestart 0x000a event_movesizeend 0x000b event_contexthelpstart 0x000c event_contexthelpend 0x000d event_dragdropstart 0x000e event_dragdropend 0x000f event_dialogstart 0x0010 event_dialogend 0x0011 event_scrollingstart 0x0012 event_scrollingend 0x0013 event_minimizestart 0x0016 event_minimizeend 0x0017 event_atk_property_change 0...

nsICompositionStringSynthesizer
dom/interfaces/base/nsicompositionstringsynthesizer.idlscriptable this interface is a composition string synthesizer interface that synthesizes composition string with arbitrary clauses and a caret 1.0 66 introduced gecko 26 obsolete gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface is obsoleted in gecko 38.

nsIDOMWindowUtils
dclauselength, in unsigned long asecondclauseattr, in long athirdclauselength, in unsigned long athirdclauseattr, in long acaretstart, in long acaretlength ); parameters acompositionstring afirstclauselength afirstclauseattr asecondclauselength asecondclauseattr athirdclauselength athirdclauseattr acaretstart acaretlength sendtouchevent() synthesizes a touch event and sends it to the window.

nsITelemetry
ranges - an array with corresponding bucket sizes.

WebIDL bindings
this allows the binding code to change the exact definition (e.g., to use auto arrays of different sizes and so forth) without having to update all the callees.

Responsive Design Mode - Firefox Developer Tools
however, if you are not interested in examining such features (maybe you are just checking the overall layout at different sizes), these reloads can waste time and possibly result in the loss of productive work, so it is useful to be able to control these reloads.

Style Editor - Firefox Developer Tools
the media sidebar works especially well with responsive design view for creating and debugging responsive layouts: from firefox 46 onwards, if an @media rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the responsive design view: creating and importing style sheets you can create a new style sheet by clicking the new button in the toolbar.

AudioContext.createJavaScriptNode() - Web APIs
smaller sizes allow for lower latency and higher for better overall quality.

AudioWorkletProcessor.process - Web APIs
however, plans are already in place to revise the specification to allow the size of the audio blocks to be changed depending on circumstances (for example, if the audio hardware or cpu utilization is more efficient with larger block sizes).

Optimizing canvas - Web APIs
don’t scale images in drawimage cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in drawimage().

Canvas tutorial - Web APIs
but custom sizes can be defined using the html height and width property.

ContentIndex.getAll() - Web APIs
sizes: optional a string representation of the image size.

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('fai...

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('fai...

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
in fact, much of our source code is full of these whitespace characters, and we only tend to get rid of it in a production build step to reduce code download sizes.

Element.getClientRects() - Web APIs
note: the overlays will be out of place if the user resizes or zooms.

Using files from web applications - Web APIs
in addition, it displays other file information including their names and sizes.

GlobalEventHandlers.ontransitioncancel - Web APIs
html this simply creates a <div> which we'll style with css below to make into a box that resizes and changes color and such.

GlobalEventHandlers.ontransitionend - Web APIs
html this simply creates a <div> which we'll style with css below to make into a box that resizes and changes color and such.

HTMLFontElement.size - Web APIs
must follow one of the following html microsyntaxes: microsyntax description examples valid size number string integer number in the range of 1-7 6 relative size string +x or -x, where x is the number relative to the value of the size attribute of the <basefont> element (the result should be in the same range of 1-7) +2 -1 syntax sizestring = fontobj.size; fontobj.size = sizestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.size = "6"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.size .

Image() - Web APIs
usage note the entire bitmap is loaded regardless of the sizes specified in the constructor.

HTMLImageElement.naturalHeight - Web APIs
(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.

HTMLImageElement.naturalWidth - Web APIs
(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.

HTMLImageElement.srcset - Web APIs
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.

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.

HTMLVideoElement.videoHeight - Web APIs
example this example creates a handler for the resize event that resizes the <video> element to match the intrinsic size of its contents.

HTMLVideoElement.videoWidth - Web APIs
example this example creates a handler for the resize event that resizes the <video> element to match the intrinsic size of its contents.

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

MediaStreamTrack.applyConstraints() - Web APIs
constraints can also specify ideal and/or acceptable sizes or ranges of sizes.

MediaStreamTrack.getConstraints() - Web APIs
constraints can also specify ideal and/or acceptable sizes or ranges of sizes.

MediaTrackConstraints.sampleSize - Web APIs
since this property can only represent linear sample sizes, this constraint can only be met by devices that can produce audio with linear samples.

MediaTrackConstraints - Web APIs
samplesize a constrainlong specifying the sample size or range of sample sizes which are acceptable and/or required.

MediaTrackSettings.sampleSize - Web APIs
other common sample sizes are 8 (for reduced bandwidth requirements) and 24 (for high-resolution professional audio).

Resize Observer API - Web APIs
for example, media queries / window.matchmedia are great for updating layouts at specific points when the viewport changes sizes, but what if you want to change layout in response to a specific element's size changing, which isn't the outer container?

Streams API concepts - Web APIs
a single stream can contain chunks of different sizes and types.

SubtleCrypto.decrypt() - Web APIs
algorithm parameters of invalid sizes, or there was an error decrypting the ciphertext).

SubtleCrypto.encrypt() - Web APIs
algorithm parameters of invalid sizes, or aes-gcm plaintext longer than 2³⁹−256 bytes).

WebGL2RenderingContext.getActiveUniforms() - Web APIs
gl.uniform_size: returns an array of gluint indicating the sizes of the uniforms.

WebGL types - Web APIs
glsizei long used for sizes (e.g.

Window.devicePixelRatio - Web APIs
this value could also be interpreted as the ratio of pixel sizes: the size of one css pixel to the size of one physical pixel.

Window.sizeToContent() - Web APIs
the window.sizetocontent() method sizes the window according to its content.

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
tant]: event_system_sound event_system_alert [can be important, to have auto-speaking for newly created role_alerts] event_system_foreground event_system_menustart [important] event_system_menuend [important] event_system_menupopupstart [important] event_system_menupopupend [important] event_system_capturestart event_system_captureend event_system_movesizestart event_system_movesizeend event_system_contexthelpstart event_system_contexthelpend event_system_dragdropstart event_system_dragdropend event_system_dialogstart event_system_dialogend event_system_scrollingstart event_system_scrollingend [possibly important, talk to at vendor] event_system_switchstart event_system_switchend event_system_minimizes...

Web Accessibility: Understanding Colors and Luminance - Accessibility
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.

Resizing background images with background-size - CSS: Cascading Style Sheets
html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background.

CSS Multi-column Layout - CSS: Cascading Style Sheets
support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.

CSS Flexible Box Layout - CSS: Cascading Style Sheets
in the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

Variable fonts guide - CSS: Cascading Style Sheets
while this was originally done to compensate for the ink and paper printing process (very thin lines at small sizes often didn’t print, giving the letterforms a broken appearance), it translates well to digital displays when compensating for screen quality and physical size rendering.

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
create a responsive, and responsible grid with a solid document you can begin to add your layout, it is likely you will be using media queries to create additional columns and make changes for different screen sizes and devices.

Layout using named grid lines - CSS: Cascading Style Sheets
line naming is incredibly useful, but some of the more baffling looking grid syntax comes from this combination of names and track sizes.

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-gap: 20px; grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer"; } after setting up a mobile layout we will get this single column at all screen sizes, we can now add a media query and redefine our layout for the circumstance of having enough screen real estate to show two columns.

Using CSS gradients - CSS: Cascading Style Sheets
this only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient image.

Grid wrapper - CSS: Cascading Style Sheets
recipe download this example choices made this recipe uses the css grid minmax() function to define the grid track sizes in the grid-template-columns property.

Media queries - CSS: Cascading Style Sheets
testing media queries programmatically describes how to use media queries in your javascript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).

align-content - CSS: Cascading Style Sheets
regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

contain - CSS: Cascading Style Sheets
size indicates that the element can be sized without the need to examine its descendants' sizes.

fit-content() - CSS: Cascading Style Sheets
the function can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where the maximum and minimum sizes refer to the content size.

flex-basis - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main sizecomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: aria...

flex-grow - CSS: Cascading Style Sheets
the remaining space is the size of the flex container minus the size of all flex items' sizes together.

font-family - CSS: Cascading Style Sheets
(however, this doesn't work in internet explorer 6 or earlier.) when a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

grid-auto-columns - CSS: Cascading Style Sheets
note: auto track sizes (and only auto track sizes) can be streched by the align-content and justify-content properties.

grid-auto-rows - CSS: Cascading Style Sheets
note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.

grid-template - CSS: Cascading Style Sheets
sets grid-template-areas to the strings listed, grid-template-rows to the track sizes following each string (filling in auto for any missing sizes), and splicing in the named lines defined before/after each size, and grid-template-columns to the track listing specified after the slash (or none, if not specified).

justify-content - CSS: Cascading Style Sheets
regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored.

mask-size - CSS: Cascading Style Sheets
the mask-size css property specifies the sizes of the mask images.

max() - CSS: Cascading Style Sheets
um># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples setting a minimum size for a font another use case for css functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.

place-items - CSS: Cascading Style Sheets
in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.

place-self - CSS: Cascading Style Sheets
for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.

text-transform - CSS: Cascading Style Sheets
full-size-kana generally used for <ruby> annotation text, the keyword converts all small kana characters to the equivalent full-size kana, to compensate for legibility issues at the small font sizes typically used in ruby.

text-underline-offset - CSS: Cascading Style Sheets
for a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vertical alignment.

scale() - CSS: Cascading Style Sheets
the scale() css function defines a transformation that resizes an element on the 2d plane.

scale3d() - CSS: Cascading Style Sheets
the scale3d() css function defines a transformation that resizes an element in 3d space.

scaleX() - CSS: Cascading Style Sheets
the scalex() css function defines a transformation that resizes an element along the x-axis (horizontally).

scaleY() - CSS: Cascading Style Sheets
the scaley() css function defines a transformation that resizes an element along the y-axis (vertically).

scaleZ() - CSS: Cascading Style Sheets
the scalez() css function defines a transformation that resizes an element along the z-axis.

white-space - CSS: Cascading Style Sheets
such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes (min-content size and max-content size).

Mobile-friendliness - Developer guides
goal #1 (presentation) “make websites that work well on a variety of screen sizes.” these days, users can access the web on devices in a wide range of form factors, including phones, tablets, and ereaders.

HTML attribute reference - HTML: Hypertext Markup Language
sizes <link>, <img>, <source> slot global attribute assigns a slot in a shadow dom shadow tree to an element.

<input type="datetime-local"> - HTML: Hypertext Markup Language
you'll have to resort to css for customizing the sizes of these elements.

<keygen> - HTML: Hypertext Markup Language
the user may be given a choice of dsa key sizes, allowing the user to choose one of the sizes defined in the dsa standard.

<tr>: The Table Row element - HTML: Hypertext Markup Language
possible values for this attribute are: baseline aligns each cell's content text as closely as possible to the bottom of the cell, handling alignment of different fonts and font sizes by aligning the characters along the baseline of the font(s) used in the row.

A re-introduction to JavaScript (JS tutorial) - JavaScript
this emphasizes the fact that functions are objects too.

Text formatting - JavaScript
phonebook sort emphasizes sound, and it’s as if “ä”, “ö”, and so on were expanded to “ae”, “oe”, and so on prior to sorting.

String.prototype.fontsize() - JavaScript
description when you specify size as an integer, you set the font size of str to one of the 7 defined sizes.

icons - Web app manifests
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 dimensio...

screenshots - Web app manifests
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.

<mstyle> - MathML
in addition, the scriptlevel attribute can never reduce the font size below scriptminsize in order to avoid unreadable small font sizes and depends on the multiplier specified in scriptsizemultiplier.

Image file type and format guide - Web media technologies
if the icon can be represented using vector graphics, consider svg, since it scales across various resolutions and sizes, so it's perfect for responsive design.

Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this article explains a change that has occured in the way sizes are worked out on web documents when width and height attributes are set on them.

Using images in HTML - Web media technologies
learn html: responsive images 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.

Web media technologies
multiple sources can be used to provide the media in different formats, sizes, or resolutions.

Critical rendering path - Web Performance
optimizing for crp improve page load speed by prioritizing which resources get loaded, controlling the order in which they are loaded, and reducing the file sizes of those resources.

Populating the page: how browsers work - Web Performance
different devices and different desktop preferences mean an unlimited number of differing viewport sizes.

Navigation and resource timings - Web Performance
client-side web applications may seem faster than this one with ​transfer sizes under 10000 and decoded body sizes under 30000, but that doesn't mean javascript, css, or media assets aren't adding bloat.

Progressive web app structure - Progressive web apps (PWAs)
there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like viewport meta tag, css media queries, flexbox, and css grid.

Graphic design for responsive sites - Progressive web apps (PWAs)
in addition, mobile devices have smaller screen sizes, so it makes sense to reduce visual clutter on a mobile layout.

Mobile first - Progressive web apps (PWAs)
for example: if you are serving different styling and layout information for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather than having desktop/wider screen styling first.

Structural overview of progressive web apps - Progressive web apps (PWAs)
there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like the viewport meta tag, css media queries, flexbox, and css grid.

font-size-adjust - SVG: Scalable Vector Graphics
n be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="80" viewbox="0 0 500 80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-size="10px"> this text uses the times font (10px), which is hard to read in small sizes.

stroke-dasharray - SVG: Scalable Vector Graphics
> <rect> <text> <textpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> <!-- dashes and gaps of various sizes with an odd number of values --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" s...

SVG documentation index - SVG: Scalable Vector Graphics
282 positions beginner, coordinate systems, coordinates, drawing, graphics, needsbeginnerupdate, svg, svg:tutorial in this article, we examine how scalable vector graphics (svg) represents the positions and sizes of objects within a drawing context, including coordinate system and what a "pixel" measurement means in a scalable context.

Getting started - SVG: Scalable Vector Graphics
how svg handles sizes and units will be explained on the next page.

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

SVG In HTML Introduction - SVG: Scalable Vector Graphics
akes an error message appear.) this approach has the following points in its favor: we have taken a regular html form that could have been part of an existing web site, and added an attractive, interactive background the approach 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.