Search completed in 1.15 seconds.
75 results for "vw":
Your results are loading. Please wait...
Property cache
Mozilla › Projects › SpiderMonkey › Internals › Property cache
entry->vword is described in the section entry value words below.
... 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.
...furthermore, the .vword field describes the property in detail, as described in the next section.
...And 10 more matches
clamp() - CSS: Cascading Style Sheets
Web › CSS › clamp
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.
... the <h1> element's font-size is set as clamp(1.8rem, 2.5vw, 2.8rem).
...And 3 more matches
Responsive design - Learn web development
Learn › CSS › CSS layout › Responsive Design
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.
...And 2 more matches
<length> - CSS: Cascading Style Sheets
Web › CSS › length
vw equal to 1% of the width of the viewport's initial containing block.
... vmin equal to the smaller of vw and vh.
... vmax equal to the larger of vw and vh.
...And 2 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
Web › Progressive web apps › Responsive › responsive design building blocks
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...
...we have used vw (viewport width) units for these — 1vw is equivalent to 1% of the viewport width.
... nav { width: 100%; position: absolute; z-index: 1000; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } nav button { font-size: 6.8vw; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; border-left: 1px solid rgba(100,100,100,0.4); } nav button:first-child { border-left: 0; } } in this last set of rules, we change the display value of the <nav> to flex to make it show (it was set to none in the default css at the top of the stylesheet, as it wasn't needed for the other views.) we the...
...And 2 more matches
Sizing items in CSS - Learn web development
Learn › CSS › Building blocks › Sizing items in CSS
in css we have units which relate to the size of the viewport — the vw unit for viewport width, and vh for viewport height.
... 1vh is equal to 1% of the viewport height, and 1vw is equal to 1% of the viewport width.
...in the example below we have a box which is sized as 20vh and 20vw.
... 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.
SubtleCrypto.importKey() - Web APIs
Web › API › SubtleCrypto › importKey
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().
... 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.
...iio4kua7jvd4jjrqfy4zhj/jbqvlvm0f/ufp7sxvchgx4r11c+6icbhx4u+zuu0hgjt4d+hnxmggyxr8fiuvxolotdkvja5sobzk73/9/mbekusdmjprhalzqfmujrwioevdmhfg3tw/rbj5ryatp2dtvumqkbgds8yr52drmt+bwxofwwawb0nhyhsfz/c8v4d4ip5dj5m5kuqquxjwksysgqa40sbqnd05fbqovplu48hfgr/zghn9hujbcsozovozr4srw0uztbva+7jzoz1hkaoywiulr6vca0yurnlj6g5r56+srnkioetupi2dlczcqb0poxaogazynhvtlvizn4igsrjz5qkm4liwbithfadxbv1fq6pt0o/bgf2o+cedq0diylgk64cevwbwsbnsg4vzlbqriauejljwedajya4ee8y5a9l04dzv7njb5crak6crgxxay/mbjrftahxvlazgxypgsye6ufs0+3eommevvdzqbf4qecgyea0zf6vavz28+8wlo6sp3w8nmphk7k9tgevufq30sgdx4g7qpigfprbb4op/e0qcfsiimi3scppjvumqdvvzypoimub+rv3zoxkrzxeuorpopr48fzbl7rn90yrqsasrp9e4iv8qwb3vxle7x0tdqqnryqrc/osgzus2zchokmcu8= -----end private key-----`; /* import a pem encoded rsa private key, to use for rsa-pss signing.
... 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.
Viewport concepts - CSS: Cascading Style Sheets
Web › CSS › Viewport concepts
similarly, the vw unit is 1% of the layout viewport's width.
... 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.
CSS values and units - Learn web development
Learn › CSS › Building blocks › Values and units
vw 1% of the viewport's width.
... 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.
MathML Accessibility in Mozilla
Mozilla › MathML Project › a11y
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz not exposed to orca.
... abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz not exposed to orca.
... abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz not exposed to orca.
max() - CSS: Cascading Style Sheets
Web › CSS › max
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).
... 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.
...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.
Extension Versioning, Update and Compatibility - Archive of obsolete content
Archive › Add-ons › Extension Versioning, Update and Compatibility
--> <em:signature>migtma0gcsqgsib3dqebbquaa4gbamo1o2gwsccth1gwymgscfanakpn40pjfowt ub2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> </rdf:rdf> some people prefer this alternate format (note that much of the information has been trimmed from this example for brevity in order to show the basic structure): <?xml version="1.0" encoding="utf-8...
...the actual uri can be whatever you like --> <rdf:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"/> <rdf:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.5"/> </rdf:seq> </em:updates> <em:signature>migtma0gcsqgsib3dqebbquaa4gbamo1o2gwsccth1gwymgscfanakpn40pjfowt ub2hvdg8+oxmcif8d/9evwm8eh/ixuxyzlmrzts3o5tv9eway5ubctqdf1wgtsgk jrgzow1fitkzi7w0//c8ekdmlatguegfns2iltd5p/0kh/hf1rpc1wuqeqkcd4+l bcvq13ad</em:signature> </rdf:description> <!-- this represents the same description within the li from the previous example --> <rdf:description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"> <em:version>2.2</em:version> <...
Index
Mozilla › Projects › NSS › Index
30: 4d 52 91 fd 93 e0 51 48 91 90 08 96 c1 b6 76 77 | mr.ý..qh.....¶vw 40: 2a f4 00 08 a1 06 61 a2 64 1f 2e 9b 00 03 00 0b | *ô..¡.a¢d......
...oxdteymdqxodixnty1ofowotexmbuga1uechmorxhhbxbszsbe b21haw4xhjacbgnvbamtfunlcnrpzmljyxrlief1dghvcml0etccasiwdqyjkozi hvcnaqebbqadggepadccaqocggebao/bquli2kwqxfkmmmg93kn1sanzntxa/vlf tmrih3hqgjvr1ktiy9ag6cb7dskwmthp/+p4pucmql4zrsgt901qxkepyz2dymm2 rnelk+seuipiutozadhndiyse/yude8vqwj0vhcvl0w72qfucsq/wzt7fcrnuiui udewnopsun70glhcj/lvxl7k9bhyd4sq5czktwytfwliiwv+zy/fl6jgbgaqyqb2 bp4irmflogqsxgub1evwvdf1hagpfdspgmnepslg3/3dxn+hdjbz29eu8/xkzqeb 3v0ahkbu80zglllet2zx/wdirgjen9ymfgkfpcml+bvirsmh0vscaweaaaobqzcb qdafbgnvhsmegdawgbqatgxhqyrufkiztdp55bzlfr+tfzapbgnvhrmbaf8ebtad aqh/ma4ga1uddweb/wqeawibxjadbgnvhq4efgquae4mr0mkvhyigbxaeew2zra/ rrcwrqyikwybbquhaqeeota3mdugccsgaqufbzabhilodhrwoi8vbg9jywxob3n0 lmxvy2fszg9tywluojkxodavy2evb2nzcdanbgkqhkig9w0baqufaaocaqeai8gk l3xo43u7/tdoeeswpmq+jzsd...
Scripting plugins - Plugins
Plugins › Guide › Scripting plugins
the extensions are two additions to the npnvariables enumeration; the new enumerations are npnvwindownpobject and npnvpluginelementnpobject.
... the new npnvariable enumerations are defined in npapi.h as: npnvwindownpobject = 15, npnvpluginelementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed = document.embeds[0]; embed.nativemethod(); alert(embed.nativeproperty); embed.nativeproperty.anothernativemethod(); </script> the api extensions the api extensions are based on four new structs: ...
CSS values and units - CSS: Cascading Style Sheets
Web › CSS › CSS Values and Units
vw 1% of viewport's width.
... adds the min(), max() and clamp() functional notation adds toggle() css values and units module level 3 candidate recommendation adds calc(), ch, rem, vw, vw, vmin, vmax, q css color module level 4 working draft adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions.
animation-timing-function - CSS: Cascading Style Sheets
Web › CSS › animation-timing-function
ear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; } } .ease { animation-timing-function: ease; } .easein { animation-timing-function: ease-in; } .easeout { animation-timing-function: ease-out; } .easeinout { animation-timing-function: ease-in-out; } .linear { animation-timing-function: linear; } .cb { animation-ti...
...art">step-start</div> <div class="step-end">step-end</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; } } .jump-start { animation-timing-function: steps(5, jump-start); } .jump-end { animation-timing-function: steps(5, jump-end); } .jump-none { animation-timing-function: steps(5, jump-none); } .jump-both { animation-timing-function: steps(5, jump-both); } .start { ani...
attr() - CSS: Cascading Style Sheets
Web › CSS › attr
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc <length> the attribute value is parsed as a css <number>, that is without the unit (e.g.
...)where <type-or-unit> = string | color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <color> value html <div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()<...
linear-gradient() - CSS: Cascading Style Sheets
Web › CSS › linear-gradient
examples gradient at a 45-degree angle body { width: 100vw; height: 100vh; } body { background: 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...
... 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.
overflow-inline - CSS: Cascading Style Sheets
Web › CSS › overflow-inline
lueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting inline overflow behavior html <ul> <li><code>overflow-inline:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:visible</code> — displays the text outside the box if needed <div id="div3"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </l...
...i> <li><code>overflow-inline:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-inline: hidden;} #div2 { overflow-inline: scroll;} #div3 { overflow-inline: visible;} #div4 { overflow-inline: auto;} result specifications specification status comment css overflow module level 3the definition of 'overflow-inline' in that specification.
overflow-x - CSS: Cascading Style Sheets
Web › CSS › overflow-x
d grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-x:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:visible</code> — displays the text outside the box if needed <div id="div3"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li>...
...<code>overflow-x:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-x: hidden;} #div2 { overflow-x: scroll;} #div3 { overflow-x: visible;} #div4 { overflow-x: auto;} result specifications specification status comment css overflow module level 3the definition of 'overflow-x' in that specification.
transition-timing-function - CSS: Cascading Style Sheets
Web › CSS › transition-timing-function
<div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransit...
.../div> <div class="jump-none">jump-none</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransiti...
Rich-Text Editing in Mozilla - Developer guides
Web › Guide › HTML › Editable content › Rich-Text Editing in Mozilla
cfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" onclick="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz...
...aaaawabyaaankelrc/jdksesyphi7siegsvxzeatdicqbvjjpqwzt9naednbqk1wcqsxlynxmaimhydofaeljasrrvazvrqqqxuy7cgx4tc6bswkaow==" /> <img class="intlink" title="remove formatting" onclick="formatdoc('removeformat')" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaaoxaaadsqblssogwaaaad0su1fb9oecqmckpi8ciiaaaaidevydenvbw1lbnqa9sywvwaaauhjrefuomtjybgfxab501zwbvval2nhnlmk6mxcjbf69zu+hz/9fb5o1lx+bg45qhl8/fyr5it3xrp/ywtuvvvk3veqgxz70tvbjy8+wv39+2/hz19/mgwjzzutyjaluobv9jimaxheyd3h7ku8fpj2icml8z92dlbtmzdeig3fco7j08foh1kurkm3e9iw54yvkwutuom+lpt/bgbwf3//sf37/1/c02ccg1lb8f//f95dzx74mtmzshhosm6szrq/a6ir/z2rkfejbxulyfpdidi6af///2ckahbp7+7wmavp5n76+p2clrliyl8h9w36aujcbcxm4szmtjac7kza////r3h1w2cfwagafpbqs5g7d95++/p1b4+eck8tawmdw/1h7159+/...
Making content editable - Developer guides
Web › Guide › HTML › Editable content
cfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" onclick="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz...
...aaaawabyaaankelrc/jdksesyphi7siegsvxzeatdicqbvjjpqwzt9naednbqk1wcqsxlynxmaimhydofaeljasrrvazvrqqqxuy7cgx4tc6bswkaow==" /> <img class="intlink" title="remove formatting" onclick="formatdoc('removeformat')" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaaoxaaadsqblssogwaaaad0su1fb9oecqmckpi8ciiaaaaidevydenvbw1lbnqa9sywvwaaauhjrefuomtjybgfxab501zwbvval2nhnlmk6mxcjbf69zu+hz/9fb5o1lx+bg45qhl8/fyr5it3xrp/ywtuvvvk3veqgxz70tvbjy8+wv39+2/hz19/mgwjzzutyjaluobv9jimaxheyd3h7ku8fpj2icml8z92dlbtmzdeig3fco7j08foh1kurkm3e9iw54yvkwutuom+lpt/bgbwf3//sf37/1/c02ccg1lb8f//f95dzx74mtmzshhosm6szrq/a6ir/z2rkfejbxulyfpdidi6af///2ckahbp7+7wmavp5n76+p2clrliyl8h9w36aujcbcxm4szmtjac7kza////r3h1w2cfwagafpbqs5g7d95++/p1b4+eck8tawmdw/1h7159+/...
StringView - Archive of obsolete content
Archive › Add-ons › Code snippets › StringView library
aaaaaaaaaaaaaaaaaaaaaamaggaaaaaaaaaaaaaaaaaaaaaaaqaaaaqa8f8aaaaaaaaaaaaaaaaaaaaaaaaaaaqa8f8aaaaaaaaaaaaaaaaaaaaacaaaaaqa8f8aaaaaaaaaaaaaaaaaaaaaewaaaaeafadwbmaaaaaaaaaaaaaaaaaaiaaaaaiadqbabeaaaaaaaaaaaaaaaaaanqaaaaiadqbwbeaaaaaaaaaaaaaaaaaasaaaaaiadqcwbeaaaaaaaaaaaaaaaaaaxgaaaaeagqaqcwaaaaaaaaeaaaaaaaaabqaaaaeaewdobmaaaaaaaaaaaaaaaaaalaaaaaiadqdqbeaaaaaaaaaaaaaaaaaaoaaaaaeaegdgbmaaaaaaaaaaaaaaaaaavwaaaaqa8f8aaaaaaaaaaaaaaaaaaaaacaaaaaqa8f8aaaaaaaaaaaaaaaaaaaaaxwaaaaeaeqdybkaaaaaaaaaaaaaaaaaa1qaaaaeafadwbmaaaaaaaaaaaaaaaaaaaaaaaaqa8f8aaaaaaaaaaaaaaaaaaaaa4qaaaaaaegdobmaaaaaaaaaaaaaaaaaa8gaaaaeafqd4bmaaaaaaaaaaaaaaaaaa+waaaaaaegdgbmaaaaaaaaaaaaaaaaaadgeaaaeafwdqcgaaaaaaaaaaaaaaaaaajaeaabiadqcqbuaaaaaaaaiaaaaaaaaanaeaacaaaaaaaaaaaaaaaaaaaaaaaaaauaeaacaagaaacwaaaaaaaaaaaaaaaaaawweaabiaaaaaaaaaaa...
Install Manifests - Archive of obsolete content
Archive › Add-ons › Install Manifests
<em:updatekey>migfma0gcsqgsib3dqebaquaa4gnadcbiqkbgqdk426erd/h3xtsjvab5+pjqbhj zc9edi5ocjs8r3fiobj9zhjk1txeae7jwqt9wumbwtefvws+fi9vwu8058n9chhd nyep6i4luuyjturnn7yw/igzyij2oksya32ruxayteqawqpt/j63wbixiecxmysf awb/zh4kapiy3vnrzqidaqab</em:updatekey> updateurl a link to a custom update manifest file that specifies available updates to the add-on.
CSS3 - Archive of obsolete content
Archive › CSS3
definition for viewport-relative length units: vw, vh, vmax, and vmin .
Getting the page URL in NPAPI plugin - Archive of obsolete content
Archive › Getting the page URL in NPAPI plugin
npn_getvalue( m_pnpinstance, npnvwindownpobject, &swindowobj ); // create a "location" identifier.
NPN_GetValue - Archive of obsolete content
Archive › Plugins › Reference › NPN GetValue
w npnvjavascriptenabledbool: tells whether javascript is enabled; true=javascript enabled, false=not enabled npnvasdenabledbool: tells whether smartupdate (former name: asd) is enabled; true=smartupdate enabled, false=not enabled npnvisofflinebool: tells whether offline mode is enabled; true=offline mode enabled, false=not enabled npnvtoolkit: npnvsupportsxembedbool: npnvwindownpobject: returns the npobject * pointer for the dom window object; see getting the page url in npapi plugin for a rough example npnvpluginelementnpobject: npnvsupportswindowless: tells whether the browser supports windowless plugins.
Introduction to Public-Key Cryptography - Archive of obsolete content
Archive › Security › Introduction to Public-Key Cryptography
:6d:67:e9:46:a8: d:c4 here is the same certificate displayed in the 64-byte-encoded form interpreted by software: -----begin certificate----- miickzccazsgawibagibazanbgkqhkig9w0baqqfada3mqswcqydvqqgewjvuzer ma8ga1uechmitmv0c2nhcguxftatbgnvbastdfn1chjpewencybdqtaefw05nzew mtgwmtm2mjvafw05otewmtgwmtm2mjvamegxczajbgnvbaytalvtmrewdwydvqqk ewhozxrzy2fwztenmasga1uecxmeuhviczexmbuga1ueaxmou3vwcml5ysbtagv0 dhkwgz8wdqyjkozihvcnaqefbqadgy0amigjaogbamr6ezipgfjx3urjgejmkiqg 7sdatyazbcabu1avyd7chrkiq31fbxfogd3wnktbf6hro6eamm5/r1askzz8aw7l iqzbcrxpc0k4du+2q6xju2mpm/8wkumontuvzpo+sgxelmhvcheqoocwfdizywyz nmmrjgaoma2ms6pukfqvagmbaagjnja0mbegcwcgsagg+eibaqqeawiagdafbgnv hsmegdawgbty8gzzkbhhufwjm1oxeuzc+zymytanbgkqhkig9w0baqqfaaobgqbt i6/z07z635dfzx4xbafpjlrl/aywqztsyx8gfcnaqcqcwasdkvsuj/vw...
-ms-filter - Archive of obsolete content
Archive › Web › CSS › -ms-filter
html <div class="gradient horizontal"></div> <div class="gradient vertical"></div> css html, body { overflow-x: hidden; max-width: 100vw; } .gradient { width: 100vw; height: 60px; height: 50vh; } .gradient.horizontal { -ms-filter: 'progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=1)'; background-image: linear-gradient(to right, #ffffff 0%, #000000 100%); } .gradient.vertical { -ms-filter: 'progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endc...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
Glossary › Index
some other design patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-presenter), and mvw (model-view-whatever).
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
Glossary › MVC
some other design patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-presenter), and mvw (model-view-whatever).
How to build custom form controls - Learn web development
Learn › Forms › How to build custom form controls
</label></li> </ul> </fieldset> we'll do a little styling of the radio button list (not the legend/fieldset) to make it look somewhat like the earlier example, just to show that it can be done: .styledselect { display: inline-block; padding: 0; } .styledselect li { list-style-type: none; padding: 0; display: flex; } .styledselect [type=radio] { position: absolute; left: -100vw; top: -100vh; } .styledselect label { margin: 0; line-height: 2; padding: 0 0 0 4px; } .styledselect:not(:focus-within) input:not(:checked) + label { height: 0; outline: none; overflow: hidden; } .styledselect:not(:focus-within) input:checked + label { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:not(:focus-within) inpu...
Responsive images - Learn web development
Learn › HTML › Multimedia and embedding › Responsive images
a space the width of the slot the image will fill when the media condition is true (480px) note: for the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages.
Creating MozSearch plugins
Mozilla › Creating MozSearch plugins
>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsob...
overflow-clip-box-block
Mozilla › Gecko › Chrome › CSS › overflow-clip-box-block
examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectora...
overflow-clip-box-inline
Mozilla › Gecko › Chrome › CSS › overflow-clip-box-inline
examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselector...
overflow-clip-box
Mozilla › Gecko › Chrome › CSS › overflow-clip-box
formal syntax padding-box | content-box examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll');...
NSS tools : certutil
Mozilla › Projects › NSS › Reference › NSS tools : certutil
oxdteymdqxodixnty1ofowotexmbuga1uechmorxhhbxbszsbe b21haw4xhjacbgnvbamtfunlcnrpzmljyxrlief1dghvcml0etccasiwdqyjkozi hvcnaqebbqadggepadccaqocggebao/bquli2kwqxfkmmmg93kn1sanzntxa/vlf tmrih3hqgjvr1ktiy9ag6cb7dskwmthp/+p4pucmql4zrsgt901qxkepyz2dymm2 rnelk+seuipiutozadhndiyse/yude8vqwj0vhcvl0w72qfucsq/wzt7fcrnuiui udewnopsun70glhcj/lvxl7k9bhyd4sq5czktwytfwliiwv+zy/fl6jgbgaqyqb2 bp4irmflogqsxgub1evwvdf1hagpfdspgmnepslg3/3dxn+hdjbz29eu8/xkzqeb 3v0ahkbu80zglllet2zx/wdirgjen9ymfgkfpcml+bvirsmh0vscaweaaaobqzcb qdafbgnvhsmegdawgbqatgxhqyrufkiztdp55bzlfr+tfzapbgnvhrmbaf8ebtad aqh/ma4ga1uddweb/wqeawibxjadbgnvhq4efgquae4mr0mkvhyigbxaeew2zra/ rrcwrqyikwybbquhaqeeota3mdugccsgaqufbzabhilodhrwoi8vbg9jywxob3n0 lmxvy2fszg9tywluojkxodavy2evb2nzcdanbgkqhkig9w0baqufaaocaqeai8gk l3xo43u7/tdoeeswpmq+jzsd...
NSS tools : ssltab
Mozilla › Projects › NSS › Reference › NSS tools : ssltab
30: 4d 52 91 fd 93 e0 51 48 91 90 08 96 c1 b6 76 77 | mr.ý..qh.....¶vw 40: 2a f4 00 08 a1 06 61 a2 64 1f 2e 9b 00 03 00 0b | *ô..¡.a¢d......
NSS tools : ssltap
Mozilla › Projects › NSS › Reference › NSS tools : ssltap
30: 4d 52 91 fd 93 e0 51 48 91 90 08 96 c1 b6 76 77 | mr.ý..qh.....¶vw 40: 2a f4 00 08 a1 06 61 a2 64 1f 2e 9b 00 03 00 0b | *ô..¡.a¢d......
NSS Tools ssltap
Mozilla › Projects › NSS › tools › NSS Tools ssltap
30: 4d 52 91 fd 93 e0 51 48 91 90 08 96 c1 b6 76 77 | mr.ý..qh.....¶vw 40: 2a f4 00 08 a1 06 61 a2 64 1f 2e 9b 00 03 00 0b | *ô..¡.a¢d......
certutil
Mozilla › Projects › NSS › tools › certutil
oxdteymdqxodixnty1ofowotexmbuga1uechmorxhhbxbszsbe b21haw4xhjacbgnvbamtfunlcnrpzmljyxrlief1dghvcml0etccasiwdqyjkozi hvcnaqebbqadggepadccaqocggebao/bquli2kwqxfkmmmg93kn1sanzntxa/vlf tmrih3hqgjvr1ktiy9ag6cb7dskwmthp/+p4pucmql4zrsgt901qxkepyz2dymm2 rnelk+seuipiutozadhndiyse/yude8vqwj0vhcvl0w72qfucsq/wzt7fcrnuiui udewnopsun70glhcj/lvxl7k9bhyd4sq5czktwytfwliiwv+zy/fl6jgbgaqyqb2 bp4irmflogqsxgub1evwvdf1hagpfdspgmnepslg3/3dxn+hdjbz29eu8/xkzqeb 3v0ahkbu80zglllet2zx/wdirgjen9ymfgkfpcml+bvirsmh0vscaweaaaobqzcb qdafbgnvhsmegdawgbqatgxhqyrufkiztdp55bzlfr+tfzapbgnvhrmbaf8ebtad aqh/ma4ga1uddweb/wqeawibxjadbgnvhq4efgquae4mr0mkvhyigbxaeew2zra/ rrcwrqyikwybbquhaqeeota3mdugccsgaqufbzabhilodhrwoi8vbg9jywxob3n0 lmxvy2fszg9tywluojkxodavy2evb2nzcdanbgkqhkig9w0baqufaaocaqeai8gk l3xo43u7/tdoeeswpmq+jzsd...
NSS tools : ssltap
Mozilla › Projects › NSS › tools › ssltap
30: 4d 52 91 fd 93 e0 51 48 91 90 08 96 c1 b6 76 77 | mr.ý..qh.....¶vw 40: 2a f4 00 08 a1 06 61 a2 64 1f 2e 9b 00 03 00 0b | *ô..¡.a¢d......
Virtualenv
Mozilla › Virtualenv
here are a few such tools: carton: make a self-extracting virtualenv from directories or urls of packages; http://pypi.python.org/pypi/carton velcro: a script that sets up a python project for local installation; https://bitbucket.org/kumar303/velcro/ virtualenvwrapper: a set of extensions to ian bicking’s virtualenv tool for creating isolated python development environments; http://www.doughellmann.com/projects...tualenvwrapper the mozilla-central virtualenv in order to make use of various python modules located throughout mozilla-central, a virtualenv is created as part of the build process: http://mxr.mozilla.org/mozilla-central/source/js/src/bu...
Monster example - Firefox Developer Tools
Tools › Memory › Monster example
here's the code: var monster_count = 5000; var min_name_length = 2; var max_name_length = 48; function monster() { function randomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function randomname() { var chars = "abcdefghijklmnopqrstuvwxyz"; var namelength = randomint(min_name_length, max_name_length); var name = ""; for (var j = 0; j &lt; namelength; j++) { name += chars[randomint(0, chars.length-1)]; } return name; } this.name = randomname(); this.eyecount = randomint(0, 25); this.tentaclecount = randomint(0, 250); } function makemonsters() { var monsters = { "friendly": [], "fierc...
Edit fonts - Firefox Developer Tools
Tools › Page Inspector › How to › Edit fonts
this can be set using em, rem, %, px, vh, or vw units.
CSS numeric factory functions - Web APIs
Web › API › CSS › factory functions
syntax css.number(number); css.percent(number); // <length> css.em(number); css.ex(number); css.ch(number); css.ic(number); css.rem(number); css.lh(number); css.rlh(number); css.vw(number); css.vh(number); css.vi(number); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.d...
CSS.registerProperty() - Web APIs
Web › API › CSS › registerProperty
right, #fff, var(--my-color)); transition: --my-color 1s ease-in-out; } .registered:hover, .registered:focus { --my-color: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">background not registered</button> specifications specification status comment css properties and values api level 1the definition of 'the registerproperty() function' in that specification.
CSSMathValue.operator - Web APIs
Web › API › CSSMathValue › operator
<div>my width has a <code>calc()</code> function</div> we assign a width with a calculation div { width: calc(50% - 0.5vw); } we add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssmathnegate, length: 2} console.log( stylemap.get('width').operator ); // 'sum' con...
Using the CSS properties and values API - Web APIs
Web › API › CSS Properties and Values API › guide
red 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while not functionally accurate, a good way to think about the difference between the unregistered property in the above example and the registered property is the difference between a <custom-ident> and a number when trying to animate height.
Basic animations - Web APIs
Web › API › Canvas API › Tutorial › Basic animations
eight: 48%; width: 48%; display: flex; align-content: center; justify-content: center; align-self: center; align-items: center; font-size: -webkit-xxx-large; font-weight: 900; color: #fff; transition: .5s; opacity: .1; border-radius: 7px } .keypress { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>div:hover { opacity: 1 } .touch { background: #8bc34a } .off { background: #f44336 } .hide { opacity: 0 } </style> </html> j...
Element: auxclick event - Web APIs
Web › API › Element › auxclick event
html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left mouse buttons are clicked (usually including any "special" buttons on gaming mice).
HTMLImageElement.sizes - Web APIs
Web › API › HTMLImageElement › sizes
it may be specified using font-relative units (such as em or ex), absolute units (such as px or cm), or the vw unit, which lets you specify the width as a percentage of the viewport width (1vw being 1% of the viewport width).
Ajax navigation example - Web APIs
Web › API › History API › Example
odlheaaqapiaap///waaamlcwkjcqgaaagjiyokcgpkskih/c05fvfndqvbfmi4waweaaaah/hpdcmvhdgvkihdpdgggywphegxvywquaw5mbwah+qqjcgaaacwaaaaaeaaqaaadmwi63p4wyklre2mioggznadomgyjrbexwroumcg2lmdewnhqlvsyod2mbzkydadka+diaaah+qqjcgaaacwaaaaaeaaqaaadnai63p5ojcegg4qmu7dmikrxqlfuydezigbmrvsaqhwctxxf7weyb4ag1xjihkmzsiukkhiaifkecqoaaaasaaaaabaaeaaaazyiujijk8pbyjdmlfyvbovjha70gu7xsujhmktwhpakzlo9hmaokwjz7rf8aypddzkpzbqfvwqaifkecqoaaaasaaaaabaaeaaaazmiumilk8oyhphsnfzfhyumcyuhdaqxridhhbgqrokw0r8dyljd8z0fmdgsgo/iphi5taaaifkecqoaaaasaaaaabaaeaaaaziiunink0rnzbtwgpnmgqwmdsngxgjuliweur5owuipz8paeame6twfwyysgo/ipfksaaah+qqjcgaaacwaaaaaeaaqaaadmwi6imkqorfjdoe82p4wgccc4ceuqradylesojembgsuc2g7sdx3lqgbmlajibufbslkaaah+qqjcgaaacwaaaaaeaaqaaadmgi63p7wcrhznfvdmghu2nfwlwci3wgc3tswhufgxtaukgcbtgenbmjaejsxgmlwzpeaach5bakkaaaalaaaaa...
StylePropertyMapReadOnly - Web APIs
Web › API › StylePropertyMapReadOnly
</p> <dl id="output"></dl> we add a touch of css with a custom property to better demonstrate the output: p { --somevariable: 1.6em; --someothervariable: translatex(33vw); --anothervariable: 42; line-height: var(--somevariable); } we add javascript to grab our paragraph and return back a definition list of all the default css property values using computedstylemap().
:-moz-only-whitespace - CSS: Cascading Style Sheets
Web › CSS › :-moz-only-whitespace
examples html <div> </div> css :root { overflow: hidden; max-width: 100vw; max-height: 100vh; } div { background-color: #ccc; box-sizing: border-box; height: 100vh; min-height: 16px; min-height: 1rem; } div { border: 4px solid red; } :-moz-only-whitespace { border-color: lime; } result specifications briefly defined as :blank in selectors level 4, but then the functionality was merged into :empty and :blank redefined to mean empty <input>.
device-aspect-ratio - CSS: Cascading Style Sheets
Web › CSS › @media › device-aspect-ratio
examples article { padding: 1rem; } @media screen and (min-device-aspect-ratio: 16/9) { article { padding: 1rem 5vw; } } specifications specification status comment media queries level 4the definition of 'device-aspect-ratio' in that specification.
@page - CSS: Cascading Style Sheets
Web › CSS › @page
note: the w3c is discussing how to handle viewport-related <length> units, vh, vw, vmin, and vmax.
@viewport - CSS: Cascading Style Sheets
Web › CSS › @viewport
@viewport { width: 100vw; /*sets the width of the actual viewport to the device width*/ } note: the use of <meta name="viewport"> tag overrides @viewport syntax the at-rule contains a set of nested descriptors in a css block that is delimited by curly braces.
Layout and the containing block - CSS: Cascading Style Sheets
Web › CSS › Containing block
<body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { width: 400px; height: 480px; margin: 30px; padding: 15px; background: lightgray; } p { position: fixed; width: 50%; /* == (50vw - (width of vertical scrollbar)) */ height: 50%; /* == (50vh - (height of horizontal scrollbar)) */ margin: 5%; /* == (5vw - (width of vertical scrollbar)) */ padding: 5%; /* == (5vw - (width of vertical scrollbar)) */ background: cyan; } example 5 in this example, the paragraph's position is absolute, so its containing block is <section>, which is the nearest ancestor with a tra...
Grid wrapper - CSS: Cascading Style Sheets
Web › CSS › Layout cookbook › Grid wrapper
rgin: 0 auto; // horizontally centers the container } /* remove the max-width and margins if the browser supports grid */ @supports (display: grid) { .grid { display: grid; /* other grid code goes here */ max-width: none; margin: 0; } } to “break out” a full-width item to the edge of the viewport you can then use this trick (courtesy of una kravets): .item { width: 100vw; margin-left: 50%; transform: translate3d(-50%, 0, 0); } this gives a good approximation of the layout, only without the benefit of being able to align items easily on an exact grid.
CSS reference - CSS: Cascading Style Sheets
Web › CSS › Reference
ontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-indexzoom (@viewport)others--* selectors the following are the various selectors, which allow styles to be conditional based on various features of elements within the dom.
calc() - CSS: Cascading Style Sheets
Web › CSS › calc
)where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example: h1 { font-size: calc(1.5rem + 3vw); } this ensures that text size will scale if the page is zoomed.
column-width - CSS: Cascading Style Sheets
Web › CSS › column-width
syntax /* keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* global values */ column-width: inherit; column-width: initial; column-width: unset; the column-width property is specified as one of the values listed below.
<dimension> - CSS: Cascading Style Sheets
Web › CSS › dimension
candidate recommendation adds ch, rem, vw, vw, vmin, vmax, q css level 2 (revision 1)the definition of '<dimension>' in that specification.
fit-content() - CSS: Cascading Style Sheets
Web › CSS › fit-content
/* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) values <length> an absolute length.
font-style - CSS: Cascading Style Sheets
Web › CSS › font-style
.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update...
font-weight - CSS: Cascading Style Sheets
Web › CSS › font-weight
cense */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function up...
min() - CSS: Cascading Style Sheets
Web › CSS › min
in the first above example, the width will be at most 200px, but will be smaller if the viewport is less than 400px wide (in which case 1vw would be 4px, so 50vw would be 200px).
repeating-linear-gradient() - CSS: Cascading Style Sheets
Web › CSS › repeating-linear-gradient
and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples zebra stripes body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, black 20px, black 40px); /* with multiple color stop lengths */ background-image: repeating-linear-gradient(-45deg, transparent 0 20px, black 20px 40px); } ten repeating horizontal bars body { width: 100vw; height: 100vh; } body { ...
text-transform - CSS: Cascading Style Sheets
Web › CSS › text-transform
full-width (general) <p>initial string <strong>0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</strong> </p> <p>text-transform: full-width <strong><span>0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</span></strong> </p> span { text-transform: full-width; } strong { width: 100%; float: right; } some characters exists in two formats, normal width and a full-width, with different unicode code...
<img>: The Image Embed element - HTML: Hypertext Markup Language
Web › HTML › Element › img
<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: 600px) 200px, 50vw"> to see the resizing in action, view the example on a separate page, so you can actually resize the content area.
String.prototype.match() - JavaScript
Web › JavaScript › Reference › Global Objects › String › match
const str = 'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz'; const regexp = /[a-e]/gi; const matches_array = str.match(regexp); console.log(matches_array); // ['a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e'] note: see also string.prototype.matchall() and advanced searching with flags.
translate - XPath
Web › XPath › Functions › translate
example <xsl:value-of select="translate('the quick brown fox.', 'abcdefghijklmnopqrstuvwxyz', 'abcdefghijklmnopqrstuvwxyz')" /> output the quick brown fox.