Property cache
interpreter.) for speed, the cache is a fixed-size hash table with no chaining. collisions simply cause old entries to be overwritten. the hash table entries are key-value pairs. the keys describe the context in which a property lookup occurs. the values consist of two word-sized members. entry->vcap caches the results of part 1 above, telling which object contains the desired property. entry->vword is described in the section entry value words below. it caches the results of part 2, if the property is simple enough for optimized access, or a pointer to the js::shape if not. the opcodes that take advantage of the property cache, as of june 2009, are: getprop, get{x,this,arg,local}prop, and length; name; setprop, bindname, and setname; callprop and callname; and {inc,dec}name and name{inc...
...or jof_name instructions are quite different from ordinary property lookups: name lookups follow the scope chain and the prototype chain, whereas the others only follow the prototype chain. there are two different types of property cache entry. non-adding cache entries {.kpc=pc, .kshape=kshape, .vshape()=vshape, .scopeindex()=scopeindex, .protoindex()=protoindex, .vword=vword} this type of entry is created for all instructions that use the property cache. when the operand to the instruction at pc is an object obj with shape kshape, let pobj = the object found by walking scopeindex steps up the parent chain and then protoindex steps up the prototype chain. if pobj exists (that is, both the parent chain and the prototype chain are long enough) and it has the ...
...e the property cache. when the operand to the instruction at pc is an object obj with shape kshape, let pobj = the object found by walking scopeindex steps up the parent chain and then protoindex steps up the prototype chain. if pobj exists (that is, both the parent chain and the prototype chain are long enough) and it has the shape vshape, then it contains the desired property. furthermore, the .vword field describes the property in detail, as described in the next section. if a property with the same name is ever added to an object anywhere along the search path, then this cache entry becomes invalid: the property described by this property cache entry has been shadowed. the two shadowing guarantees ensure that if this happens, the shape of pobj changes, invalidating the entry. setting. ...
...And 10 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
in-top: 0; border-radius: 0; } x-card:nth-child(1) video, x-card:nth-child(2) img { border-radius: 0px; border: none; padding: 0; background-color: 0; } this first block resets a number of different things from the widescreen layouts that were't required for the mobile app. ...
...s from the widescreen layouts that were't required for the mobile app. ...
...he mobile app. x-card:nth-child(1) video, x-card:nth-child(2) img, x-card:nth-child(3) { margin-top: 17.5vw; } x-card:nth-child(1) button, x-card:nth-child(2) button { position: absolute; bottom: 0; } x-card:nth-child(2) button:nth-of-type(2) { bottom: 5.9rem; } x-card:nth-child(1) button { font-size: 7vw; } x-card:nth-child(2) button { font-size: 7vw; } the next rules do some sizing on the buttons inside the first two cards, and give all card contents a top margin so that their content won't be lost under the navigation buttons (see below). ...
...And 4 more matches

clamp() - CSS: Cascading Style Sheets
e example that makes use of min(), max(), and clamp() for some of the sizes. the <body> element's width is set as min(1000px, calc(70% + 100px)). this means that the width will be set at 1000px, unless the result of calc(70% + 100px) is less than 1000px, in which case it will be set to that value instead. min() allows you set a maximum value. the <p> element's font-size is set as max(1.2rem, 1.2vw). this means that the font-size will be set at 1.2rem, unless the computed value of 1.2vw is greater than that of 1.2rem, in which case it will be set to that value instead. max() allows you set a minimum value, which in cases like this is useful for accessibility purposes. the <h1> element's font-size is set as clamp(1.8rem, 2.5vw, 2.8rem). this means that the font-size will be set at 1.8rem, u...
...at this point, the font-size will be set at 2.8rem. clamp() allows you to set a minimum and maximum value. you find this example live on github, if you want to play around with it. ...
...at this point, the font-size will be set at 2.8rem. clamp() allows you to set a minimum and maximum value. ...
...And 2 more matches

SubtleCrypto.importKey() - Web APIs
the subjectpublickeyinfo. again, you are most likely to encounter this object in pem format. a pem-encoded subjectpublickeyinfo looks like this: -----begin public key----- miibijanbgkqhkig9w0baqefaaocaq8amiibcgkcaqea3j+hgshunc7f6xzvebd0 r3m5jny+/kabijvu8iu1eral3osi38vgimzjdbdorfxvznnzl+sxahwxiv5bhixl cq6qhwysdgh6oqgkiwialra/wnh4uhxj1or/iyakjhrr/kghutjyvcjzvaqadpjw 2g+syd1ui0b6kjov2cruwipwpff8hbfvwv8q9yc2yd5hcnykvl0iaiyn+sdak/rv 8dc5eilzci4efucbyg4c9o88qz7bs14dxsfapty8p/twoihvvjladf743lgm/jlq cdpubua3hlszuhkm3bbskd7q9ngkjv3+ybyo4/fl+fkyra8j9ypa2n0iw53lfb3b gqidaqab -----end public key----- just as with pkcs #8, to get this into a format you can give to importkey() you need to do two things: base64-decode the part between header and footer, using window.atob(). convert the resulting str...
...s well as aes and hmac secret keys. json web key format is defined in rfc 7517. it describes a way to represent public, private, and secret keys as json objects. a json web key looks something like this (this is an ec private key): { "crv": "p-384", "d": "wouctu7nw4e8_7n5c1-xbjb4xqsb_lizhymsy8mggxuny6q8ncoh9xsiviwlffk_", "ext": true, "key_ops": ["sign"], "kty": "ec", "x": "szrrxmyi8vwfjg1dpunbfcc9jzvjzefh7ulki1ukxaltd7rgwrcffxqygpcwu6aq", "y": "hhuag3ovdzer0uuqnd4pxhqtxp5idgdyhjhl-wlkjngjqaw0rngy5v29-av-ysew" }; examples note: you can try the working examples on github. raw import this example imports an aes key from an arraybuffer containing the bytes to use. see the complete code on github. const rawkey = window.crypto.getrandomvalues(new uint8array(16)); /* import...
...takes a string contai...
...hash: "sha-256" }, true, ["encrypt"] ); } json web key import this code imports an ecdsa private signing key, given a json web key object that represents it. see the complete code on github. const jwkeckey = { "crv": "p-384", "d": "wouctu7nw4e8_7n5c1-xbjb4xqsb_lizhymsy8mggxuny6q8ncoh9xsiviwlffk_", "ext": true, "key_ops": ["sign"], "kty": "ec", "x": "szrrxmyi8vwfjg1dpunbfcc9jzvjzefh7ulki1ukxaltd7rgwrcffxqygpcwu6aq", "y": "hhuag3ovdzer0uuqnd4pxhqtxp5idgdyhjhl-wlkjngjqaw0rngy5v29-av-ysew" }; /* import a pem encoded rsa private key, to use for rsa-pss signing. takes a string containing the pem encoded key, and returns a promise that will resolve to a cryptokey representing the private key. */ function importprivatekey(jwk) { return window.crypto.subtle...

Viewport concepts - CSS: Cascading Style Sheets
media queries as being relative to the width and height of the browser window. they are actually relative to the viewport, which is the window in the main document but is the intrinsic size of the element's parent in a nested browsing context like objects, iframes and svg. in css, we also have length units based on the viewport size. a vh unit is 1% of the layout viewport's height. ...
... a width-based media query within the iframe document is relative to the iframe's viewport. ...
...n iframe, the visual viewport is the size of the inner width and height of the iframe, rather than the parent document. you can set any height and width on an iframe, but the whole document may not be visible. if you use viewport length units in your css within the iframe document, 1vh will be 1% of the height of the iframe, and 1vw will be 1% of the width of the document. iframe { width: 50vw; } if the iframe is set to 50vw, it will be 50% of the width of the 1200px parent document in our example above, or 600px, with 1vw being 6px. when zoomed in, the iframe shrinks to 400px and 1vw becomes 4px. a width-based media query within the iframe document is relative to the iframe's viewport. @media screen and (min-width: 500px) { p { color: red; } } if the above css is...

<length> - CSS: Cascading Style Sheets
t-size or line-height properties of the root element, it refers to the properties' initial value. viewport-percentage lengths viewport-percentage lengths define the <length> value relative to the size of the viewport, i.e., the visible portion of the document. viewport lengths are invalid in @page declaration blocks. vh equal to 1% of the height of the viewport's initial containing block. vw equal to 1% of the width of the viewport's initial containing block. vi equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis. vb equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis. vmin equal to the smaller of vw and vh. vmax equal to the larger of vw and vh. absolute ...
...ion when animated, values of the <length> data type are interpolated as real, floating-point numbers. the interpolation happens on the calculated value. the speed of the interpolation is determined by the timing function associated with the animation. examples length unit comparison the following demo provides you with an input field in which you can enter a <length> value (e.g. 300px, 50%, 30vw) to set the width of a result bar that will appear below it once you've pressed return. this allows you to compare and contrast the effect of different length units. html <div class="outer"> <div class="input-container"> <label>enter width:</label> <input type="text" id="length"> </div> <div class="inner"> </div> </div> <div class="results"> </div> css html { font-family: ...
... inputelem.focus(); }) result specifications specification status comment css values and units module level 4the definition of '<length>' in that specification. editor's draft adds the vi, vb, ic, lh, and rlh units. css values and units module level 3the definition of '<length>' in that specification. candidate recommendation adds the ch, rem, vw, vh, vmin, vmax, and q units. css level 2 (revision 1)the definition of '<length>' in that specification. recommendation explicit definition of the em, pt, pc, and px units. css level 1the definition of '<length>' in that specification. recommendation initial definition. implicit definition of the em, pt, pc, and px units. ...

linear-gradient() - CSS: Cascading Style Sheets
0% 30%, yellow 50% 70%, green 90%); linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); by default, if there is no color with a 0% stop, the first color declared will be at that point. similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop. ...
..., the first color declared will be at that point. similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop. ...
...nd: linear-gradient(45deg, red, blue); } gradient that starts at 60% of the gradient line body { width: 100vw; height: 100vh; } body { background: linear-gradient(135deg, orange 60%, cyan); } gradient with multi-position color stops this example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect. body { width: 100vw; height: 100vh; } body { background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); } more linear-gradient examples please see using css gradients for more examples. specifications specification status comment css images module level 4the definition of 'gradient color-stops' in that specification. workin...

max() - CSS: Cascading Style Sheets
ber>, or <integer> is allowed. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. in the first above example, the width will be at least 400px, but will be wider if the the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px). think of the max() value as providing the minimum value a property can have. syntax the max() function takes one or more comma-separated expressions as its parameter, with the largest (most positive) expression value used as the value of the property to which it is assigned. the expressions can be math expressions (using arithmetic operators), literal va...
...c-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. let's look at some css: h1 { font-size: 2rem; } h1.responsive { font-size: max(4vw, 2em, 2rem); } the font-size will at minimum be 2rems, or twice the default size of font for the page. this ensure it is legible and ensures accessibility <h1>this text is always legible, but doesn't change size</h1> <h1 class="responsive">this text is always legible, and is responsive, to a point</h1> think of the max() function as finding the minimum value allowed for a property. access...
...ink of the max() function as finding the minimum value allowed for a property. accessibility concerns when max() is used for controlling text size, make sure the text is always large enough to read. a suggestion is to use the min() function nested within a max() that has as its second value a relative length unit that is always large enough to read. for example: small { font-size: max(min(0.5vw, 0.5em), 1rem); } this ensures a minimum size of 1rem, with a text size that scales if the page is zoomed. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 specifications specification status comment css values and units module level 4the definition of 'max()' in that specification. editor'...

Extension Versioning, Update and Compatibility - Archive of obsolete content
</em:updatehash> </rdf:description> </em:targetapplication> </rdf:description> </rdf:li> </rdf:seq> </em:updates> <!-- a signature is only necessary if your add-on includes an updatekey in its install.rdf. ...
... a matching about attribute. ...

-ms-filter - Archive of obsolete content
quivalent to linear-gradient(to right, …)) startcolor the end color, supports only opaque colors in the #rrggbb notation. startcolorstr the end color, supports both opaque colors (#rrggbb) and colors with alpha opacity using the #aarrggbb notation. ...
... right, …)) startcolor the end color, supports only opaque colors in the #rrggbb notation. startcolorstr the end color, supports both opaque colors (#rrggbb) and colors with alpha opacity using the #aarrggbb notation. ...

Sizing items in CSS - Learn web development
oading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection. note: find out more about responsive image techniques. viewport units the viewport — which is the visible area of your page in the browser you are using to view a site — also has a size. in css we have units which relate to the size of the viewport — the vw unit for viewport width, and vh for viewport height. using these units you can size something relative to the viewport of the user. 1vh is equal to 1% of the viewport height, and 1vw is equal to 1% of the viewport width. you can use these units to size boxes, but also text. in the example below we have a box which is sized as 20vh and 20vw. the box contains a letter a, which has been given a fon...
...t height. using these units you can size something relative to the viewport of the user. 1vh is equal to 1% of the viewport height, and 1vw is equal to 1% of the viewport width. you can use these units to size boxes, but also text. in the example below we have a box which is sized as 20vh and 20vw. the box contains a letter a, which has been given a font-size of 10vh. 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. to see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). open the example, res...

CSS values and units - Learn web development
em font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. ex x-height of the element's font. ch the advance measure (width) of the glyph "0" of the element's font. rem font size of the root element. lh line height of the element. vw 1% of the viewport's width. vh 1% of the viewport's height. vmin 1% of the viewport's smaller dimension. vmax 1% of the viewport's larger dimension. exploring an example in the example below you can see how some relative and absolute length units behave. the first box has a width set in pixels. as an absolute unit this width will remain the same no m...
...wport's height. vmin 1% of the viewport's smaller dimension. vmax 1% of the viewport's larger dimension. exploring an example in the example below you can see how some relative and absolute length units behave. the first box has a width set in pixels. as an absolute unit this width will remain the same no matter what else changes. the second box has a width set in vw (viewport width) units. this value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. if you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work. to see this in action you'll have to try the example after opening it in its own browser tab. the third...

Responsive design - Learn web development
ading size: note: see this example in action: example, source code. as this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. they can be used to tweak any element to make it more usable or attractive at alternate screen sizes. using viewport units for responsive typography an interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport. h1 { font-size: 6vw; } the problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. therefore you should...
...ur font size using vw, it will always relate to the size of the viewport. h1 { font-size: 6vw; } the problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. therefore you should never set text using viewport units alone. there is a solution, and it involves using calc(). if you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. essentially, the vw unit adds on top of that zoomed value: h1 { font-size: calc(1.5rem + 3vw); } this means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. the font then gradually increases as you increase the ...

overflow-clip-box-block
ty is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...
...ntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...

overflow-clip-box-inline
ty is activated by default only in the ua stylesheet and chrome contexts. value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...
...ntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...