Search completed in 1.00 seconds.
HTMLImageElement.sizes - Web APIs
the htmlimageelement property
sizes allows you to specify the layout width of the image for each of a list of media conditions.
... syntax let
sizes = htmlimageelement.
sizes; htmlimageelement.
sizes =
sizes; value a usvstring containing a comma-separated list of source size descriptors followed by an optional fallback size.
... buttons at the bottom of the example let you actually modify the
sizes property slightly, switching the largest of the three widths for the image between 40em and 50em.
...And 5 more matches
Responsive images - Learn web development
previous overview: multimedia and embedding next in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen
sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
... note: the new features discussed in this article — srcset/
sizes/<picture> — are all supported in release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images?
... resolution switching: different
sizes so, what is the problem that we want to solve with resolution switching?
...And 14 more matches
Web video codec guide - Web media technologies
depending on the codec, higher color depths may result in larger compressed file
sizes.
... assuming the frame rate is not reduced during encoding, higher frame rates cause larger compressed video
sizes.
...these blocks are normally of a fixed size, in a grid, but there are forms of motion compensation that allow for variable block
sizes, and even for blocks to overlap.
...And 14 more matches
Responsive design - Learn web development
as more diverse screen
sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
...when viewing the example, drag your browser window in and out to see how this looks at different
sizes.
...rather than having one layout for all screen
sizes, the layout could be changed.
...And 8 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed"
sizes="114x114" href="apple-icon-114.png" type="image/png"> the
sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked.
...
sizes this attribute defines the
sizes of the icons for visual media contained in the resource.
... a white-space separated list of
sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>x<height in pixels>.
...And 5 more matches
splitter - Archive of obsolete content
closest the element immediately to the right or below the splitter re
sizes.
... farthest the element that is the farthest away from the splitter to the right or below the splitter re
sizes.
... flex the closest flexible element re
sizes.
...And 3 more matches
Memory reporting
on platforms that allow it, they count the actual memory in use, including "slop" bytes caused by the heap allocator rounding up request
sizes (a.k.a.
...this is a good thing, because computing
sizes analytically doesn't count slop, and it is much more error-prone than using moz_malloc_usable_size.
... please use size_t for the
sizes in functions like this.
...And 3 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
responsive image hints with
sizes and srcset (see also the <picture> element and our responsive images tutorial).
...
sizes one or more strings separated by commas, indicating a set of source
sizes.
...if the srcset attribute is absent, or contains no values with a width descriptor, then the
sizes attribute has no effect.
...And 3 more matches
Beginner's guide to media queries - Learn web development
these features are used to create layouts that respond to different screen
sizes.
... how to choose breakpoints in the early days of responsive design, many designers would attempt to target very specific screen
sizes.
... lists of the
sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.
...And 2 more matches
Firefox UI considerations for web developers
firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller
sizes.
... <link rel="apple-touch-icon"
sizes="128x128" href="touch-icon-128x128.png"> <link rel="apple-touch-icon"
sizes="46x46" href="touch-icon-46x46.png"> <link rel="apple-touch-icon"
sizes="256x256" href="touch-icon-256x256.png"> <link rel="icon" href="favicon.ico"> in this code, the 128x128 pixel icon will be used by firefox, as it's the smallest icon which is larger than the 96-pixel size it requires.
... note: only "rich" icons (apple-touch-icon and fluid-icon) support the
sizes attribute.
...And 2 more matches
DMD
unreported { 150 blocks in heap block record 283 of 5,495 21,600 bytes (20,400 requested / 1,200 slop) individual block
sizes: 144 x 150 0.00% of the heap (16.85% cumulative) 0.02% of unreported (94.68% cumulative) allocated at { #01: replace_malloc (/home/njn/moz/mi5/go64dmd/memory/replace/dmd/../../../../memory/replace/dmd/dmd.cpp:1286) #02: malloc (/home/njn/moz/mi5/go64dmd/memory/build/../../../memory/build/replace_malloc.c:153) #03: moz_xmalloc (/home/njn/moz/mi5/memory/mozalloc/mozalloc.cpp:84) ...
...gned int, bool) (/home/njn/moz/mi5/dom/xml/nsxmlcontentsink.cpp:1007) } } it tells you that there were 150 heap blocks that were allocated from the program point indicated by the "allocated at" stack trace, that these blocks took up 21,600 bytes, that all 150 blocks had a size of 144 bytes, and that 1,200 of those bytes were "slop" (wasted space caused by the heap allocator rounding up request
sizes).
...for example: unreported { 420,010 blocks in heap block record 2 of 5,495 29,203,408 bytes (27,777,288 requested / 1,426,120 slop) individual block
sizes: 2,048 x 3; 1,024 x 103; 512 x 147; 496 x 7; 480 x 31; 464 x 6; 448 x 50; 432 x 41; 416 x 28; 400 x 53; 384 x 43; 368 x 216; 352 x 141; 336 x 58; 320 x 104; 304 x 5,130; 288 x 150; 272 x 591; 256 x 6,017; 240 x 1,372; 224 x 93; 208 x 488; 192 x 1,919; 176 x 18,903; 160 x 1,754; 144 x 5,041; 128 x 36,709; 112 x 5,571; 96 x 6,280; 80 x 40,738; 64 x 37,925; 48 x 78,392; 32 x 136,199; 16 x 31,001; 8 ...
...And 2 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
values if there are multiple <link rel="icon">s, the browser uses their media attribute, 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.
... the most common use for the icon value is the favicon: <link rel="icon" href="favicon.ico"> if there are multiple <link rel="icon">s, the browser uses their media attribute, type, and
sizes attributes to select the most appropriate icon.
...And 2 more matches
Element Positioning - Archive of obsolete content
flexible elements the
sizes are fairly easy to calculate for non-flexible elements.
... setting minimum and maximum
sizes you may want to allow an element to be flexible but constrain the size so that it cannot be larger than a certain size.
...you will often want to use ems when specifying
sizes with text in them.
...if the user re
sizes the dialog to be very small, the text input will not shrink past 15 ems.
Using Spacers - Archive of obsolete content
its most useful ability is that it can grow or shrink as the user re
sizes the window.
... as you can see in the image, by placing a flex attribute on the find button, it re
sizes when the window does.
...once the default
sizes of the children of a box are determined, the flexibility values are used to divide up the remaining empty space in the box.
... note that other factors, such as the button labels and button minimum
sizes, will affect the actual
sizes of the buttons.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
it empha
sizes a separation between the software’s business logic and display.
... 273 mobile first design, glossary, layout, layout mobile mobile first, a form of progressive enhancement, is a web-development and web-design approach that focuses on prioritizing design and development for mobile screen
sizes over design and development for desktop screen
sizes.
... the rationale behind the mobile-first approach is to provide users with good user experiences at all screen
sizes—by starting with creating a user experience that works well on small screens, and then building on top of that to further enrich the user experience as the screen size increases.
... the mobile-first approach contrasts with the older approach of designing for desktop screen
sizes first, and then only later adding some support for small screen
sizes.
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 re
sizes the current window by a specified amount.
... 4988 window.resizeto() api, cssom view, method, needsmarkupwork, reference, window the window.resizeto() method dynamically re
sizes 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 re
sizes.
... farthest the element that is the farthest away from the splitter to the right or below the splitter re
sizes.
... flex the closest flexible element re
sizes.
resizebefore - Archive of obsolete content
closest the element immediately to the left or above the splitter re
sizes.
... farthest the element that is the farthest away from the splitter to the left or above the splitter re
sizes.
... flex the closest flexible element re
sizes.
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 re
sizes.
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 lazy
sizes, 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() re
sizes the current window by a certain amount.
... window.resizeto() dynamically re
sizes 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 synthe
sizes them from the uppercase glyphs.
...in each case, if the font doesn't support the opentype value, then it synthe
sizes 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 empha
sizes rendering speed over legibility and geometric precision when drawing text.
... optimizelegibility the browser empha
sizes legibility over rendering speed and geometric precision.
... geometricprecision the browser empha
sizes 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) re
sizes 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 re
sizes until it reaches its minimum size and begin to be cropped (cut), making ui elements disappear.
... you should test that your toolbar re
sizes 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 re
sizes 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 re
sizes 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 re
sizes 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 block
sizes (16, 24, 32 bytes), but the aes standard requires the blocksize to be 16 bytes.
... the keysize can vary and these key
sizes 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 key
sizes required by the freebl module.
nss tech note5
the rijndael algorithm permits 3 block
sizes (16, 24, 32 bytes), but the aes standard requires the blocksize to be 16 bytes.
... the keysize can vary and these key
sizes 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 re
sizes, 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 re
sizes the current window by a specified amount.
... example // shrink the window window.resizeby(-200, -200); notes this method re
sizes the window relative to its current size.
Window.resizeTo() - Web APIs
the window.resizeto() method dynamically re
sizes the window.
... example this function re
sizes 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 re
sizestart = function re
sizestart(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', re
sizestart); 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 re
sizestart = function re
sizestart(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', re
sizestart); 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 re
sizes 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 re
sizes 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.
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.
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.greeting
sizes.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="...
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...
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.
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.
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.
:-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 re
sizes 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...
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
IME handling guide
for such a case, textcomposition::requesttocommit() synthe
sizes 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.
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.
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 key
sizes (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_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.
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_move
sizestart 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 synthe
sizes 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() synthe
sizes 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 re
sizes 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.
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().
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...
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.
MediaImage - Web APIs
sizes specifies the resource in multiple
sizes so that user agent does not have to scale a single image.
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?
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_move
sizestart 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...
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.
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.
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.
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 re
sizes the browser).
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...
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-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.
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.
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.
<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.
Text formatting - JavaScript
phonebook sort empha
sizes sound, and it’s as if “ä”, “ö”, and so on were expanded to “ae”, “oe”, and so on prior to sorting.
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.
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.
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.
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.
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.
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.