Background Tasks API - Web APIs
the cooperative scheduling of background tasks api (also referred to as the background tasks api or simply the requestidlecallback() api) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so.
... concepts and usage the main thread of a web browser is centered around its event loop.
... falling back to settimeout because the background tasks api is fairly new, your code may need to be able to work on browsers that don't yet support it.
...And 6 more matches

Math.fround() - JavaScript
the math.fround() function returns the nearest 32-bit single precision float representation of a number.
... syntax var singlefloat = math.fround(doublefloat); parameters doublefloat a number.
... to solve this, math.fround() can be used to cast the 64-bit float to a 32-bit float.
...And 6 more matches

Math.round() - JavaScript
the math.round() function returns the value of a number rounded to the nearest integer.
... syntax math.round(x) parameters x a number.
... return value the value of the given number rounded to the nearest integer.
...And 6 more matches

Using multiple backgrounds - CSS: Cascading Style Sheets
you can apply multiple backgrounds to elements.
... these are layered atop one another with the first background you provide on top and the last background listed in the back.
... only the last background can include a background color.
...And 5 more matches

background-origin - CSS: Cascading Style Sheets
the background-origin css property sets the background's origin: from the border start, inside the border, or inside the padding.
... note that background-origin is ignored when background-attachment is fixed.
... syntax /* keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* global values */ background-origin: inherit; background-origin: initial; background-origin: unset; the background-origin property is specified as one of the keyword values listed below.
...And 5 more matches

CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the css backgrounds and borders module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways.
... these styles can also decorate borders with lines or images, and make them square or rounded.
... (additionally, element boxes can be decorated with a shadow.) reference css properties background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-to...
...And 4 more matches

background-size - Archive of obsolete content
if so, feel free to change the en/css_reference/property_template and all css property pages ; ) start with -webkit-background-size and investigate support of contain and cover keywords and "omitted second value" behavior.
...user:jürgen jeka 2009-08-04 <hr> is there anyway to have the -moz-border-image only apply if -moz-background-size is not supported?
...user:jürgen jeka 2009-08-09 ok, here's a page with both rules - the css is derived from the code on the page here, this is what it looks like in 3.6a2pre on linux, the background image appears on the whole page, and then again behind the main content.
...And 3 more matches

background-blend-mode - CSS: Cascading Style Sheets
the background-blend-mode css property sets how an element's background images should blend with each other and with the element's background color.
... blending modes should be defined in the same order as the background-image property.
... if the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
...And 3 more matches

Test your skills: backgrounds and borders - Learn web development
this aim of this skill test is to get you working with css backgrounds and borders using the skills you have learned in the previous lesson.
... backgrounds and borders 1 in this task we want you to add a background, border, and some simple styling to a page header: give the box a 5px black solid border, with rounded corners of 10px.
... add a background image (use the url balloons.jpg) and size it so that it covers the box.
...And 2 more matches

Range.surroundContents() - Web APIs
the range.surroundcontents() method moves content of the range into a new node, placing the new node at the start of the specified range.
...after surrounding, the boundary points of the range include newnode.
... syntax range.surroundcontents(newparent); parameters newparent a node with which to surround the contents.
...And 2 more matches

background_color - Web app manifests
type string mandatory no the background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded.
... this value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.
... therefore background_color should match the background-color css property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.
...And 2 more matches

Create Your Own Firefox Background Theme - Archive of obsolete content
how to create your own background theme themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... creating a theme footer image in older versions of firefox, or newer versions with certain add-ons installed, the footer image is displayed as the background of the bottom of the browser window, behind the add-on and find bars.
... select text and tab colors — you can choose the tab ("background") color and foreground text color that work best with your header image.

round - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the round function returns a number that is the nearest integer to the given number.
... syntax round(decimal ) arguments decimal the decimal number to be rounded.
... notes -0.5 rounds to negative zero.
... 0.4 rounds to postive zero.

browser.search.context.loadInBackground
browser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.
... type:boolean default value:false exists by default: yes application support: firefox 13.0 status: active; last updated 2012-02-17 introduction: pushed to nightly on 2012-02-15 bugs: bug 727131 values true new tab with search results will be opened in the background, focus stays on the current tab.
... false (default) new tab with search results will be opened in the foreground.

RTCIceCandidatePairStats.currentRoundTripTime - Web APIs
the rtcicecandidatepairstats property currentroundtriptime is a floating-point value indicating the number of seconds it takes for data to be sent by this peer to the remote peer and back over the connection described by this pair of ice candidates.
... syntax rtt = rtcicecandidatepairstats.currentroundtriptime; value a floating-point value indicating the round-trip time, in seconds for the connection described by the pair of candidates for which this rtcicecandidatepairstats object offers statistics.
... specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.currentroundtriptime' in that specification.

RTCIceCandidatePairStats.totalRoundTripTime - Web APIs
the rtcicecandidatepairstats dictionary's totalroundtriptime property is the total time that has elapsed between sending stun requests and receiving the responses, for all such requests that have been made so far on the pair of candidates described by this rtcicecandidatepairstats object.
... syntax totalrtt = rtcicecandidatepairstats.totalroundtriptime; value this floating-point value indicates the total number of seconds which have elapsed between sending out stun connectivity and consent check requests and receiving their responses, for all such requests made so far on the connection described by this candidate pair.
... you can calculate the average round-trip time (rtt) by dividing this value by the value of the responsesreceived property: rtt = rtcicecandidatepairstats.totalroundtriptime / rtcicecandidatepairstats.responsesreceived; specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.totalroundtriptime' in that specification.

<bgsound>: The Background Sound element (obsolete) - HTML: Hypertext Markup Language
the internet explorer only html background sound element (<bgsound>) sets up a sound file to play in the background while the page is used; use <audio> instead.
... volume this attribute defines a number between -10,000 and 0 that determines the loudness of a page's background sound.
... example <bgsound src="sound1.mid"> <bgsound src="sound2.au" loop="infinite"> usage notes historically, the <embed> element could be used with audio player plug-ins to play audio in the background in most browsers.

Round Trip Time (RTT) - MDN Web Docs Glossary: Definitions of Web-related terms
round trip time (rtt) is the length time it takes for a data packet to be sent to a destination plus the time it takes for an acknowledgment of that packet to be received back at the origin.
...rom 216.58.194.174: icmp_seq=0 ttl=55 time=25.050 ms 64 bytes from 216.58.194.174: icmp_seq=1 ttl=55 time=23.781 ms 64 bytes from 216.58.194.174: icmp_seq=2 ttl=55 time=24.287 ms 64 bytes from 216.58.194.174: icmp_seq=3 ttl=55 time=34.904 ms 64 bytes from 216.58.194.174: icmp_seq=4 ttl=55 time=26.119 ms --- google.com ping statistics --- 5 packets transmitted, 5 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms in the above example, the average round trip time is shown on the final line as 26.8ms.

alternatingbackground - Archive of obsolete content
« xul reference home alternatingbackground obsolete since gecko 2.0 type: boolean if true, the background of the tree's rows will alternate between two colors.

wraparound - Archive of obsolete content
« xul reference home wraparound type: boolean if true, the value of the number box will wrap around when the maximum or minimum value is exceeded.

wrapAround - Archive of obsolete content
« xul reference wraparound type: boolean gets and sets the value of the wraparound attribute.

ui.textSelectBackground
ui.textselectbackground saves the color in which the background of a text selection in the user interface or in content will be styled.

ui.textSelectForeground
ui.textselectforeground saves the color in which the text of a text selection in the user interface or the content will be styled.

View background images - Firefox Developer Tools
in the rules view, you can see a preview of images specified using background-image.

Background audio processing using AudioWorklet - Web APIs
surround sound might have six or more channels.

XMLHttpRequest.mozBackgroundRequest - Web APIs
xmlhttprequest.mozbackgroundrequest is a boolean, indicating if the object represents a background service request.

<color> - CSS: Cascading Style Sheets
a <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.
...this makes the background behind the colored item completely visible.
...it was a special keyword that could be used instead of a regular <color> value on two css properties: background and border.
...And 58 more matches

Index - Web APIs
48 ambientlightsensor api, ambient light sensor api, ambientlightsensor, generic sensor api, interface, reference, sensor, sensor apis, sensors the ambientlightsensor interface of the the sensor apis returns the current light level or illuminance of the ambient light around the hosting device.
... 49 ambientlightsensor.ambientlightsensor() api, ambient light sensor api, ambientlightsensor, constructor, reference the ambinentlightsensor() constructor creates a new ambientlightsensor object, which returns the current light level or illuminance of the ambient light around the hosting device.
... 50 ambientlightsensor.illuminance api, ambient light level api, generic sensor api, property, reference, sensor, sensor apis, sensors, illuminance the illuminance property of the ambientlightsensor interface returns the current light level in lux of the ambient light level around the hosting device.
...And 56 more matches

Using CSS gradients - CSS: Cascading Style Sheets
gradients can be used anywhere you would use an <image>, such as in backgrounds.
... <div class="simple-linear"></div> div { width: 120px; height: 120px; } .simple-linear { background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom.
... <div class="horizontal-gradient"></div> div { width: 120px; height: 120px; } .horizontal-gradient { background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner.
...And 30 more matches

Color picker tool - CSS: Cascading Style Sheets
ample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) *...
.../ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data...
...-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%...
...And 25 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
at a fundamental level, the color property defines the foreground color of an html element's content and the background-color property defines the element's background color.
... text whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.
... background-color the text's background color.
...And 25 more matches

Using CSS transitions - CSS: Cascading Style Sheets
transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform col...
...or; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) ...
...{ el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration: 1s; tr...
...And 24 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
<div class="ui-slider" data-topic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-max="180"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-pro...
...perty"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #00...
...0 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -m...
...And 24 more matches

<blend-mode> - CSS: Cascading Style Sheets
it is used in the background-blend-mode and mix-blend-mode properties.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value.
...And 24 more matches

Index - Archive of obsolete content
between resolving conflicts, finding a good time to land, watching the tree, and marking bugs as fixed, it takes around half a day.
...when you select a node in the tree, a red border flashes for several seconds around the visual representation of that node in the browser window.
... 425 drag and drop mozilla, xul this section describes how to implement objects that can be dragged around and dropped onto other objects.
...And 23 more matches

Using the CSS Painting API - Web APIs
the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
... to programmatically create an image used by a css stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint() css function to elaborate over these steps, we're going to start by creating a half-highlight background, like on this header: css paint worklet in an external script file, we employ the registerpaint() function to name our css paint worklet.
... we can use the css background-size and background-position properties to re-size or relocate this background image, but this is the default size and placement of the yellow box we created in our paint worklet.
...And 19 more matches

Box-shadow generator - CSS: Cascading Style Sheets
</div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> <div class="output"...
... data-topic="after" data-name="element:after" data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> </div> </div> </div> </div> </div> css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ...
...and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-ra...
...And 19 more matches

Floats - Learn web development
the background of floats the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it.
...we'll start with a really simple example involving floating a block of text around an element.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow.
...And 18 more matches

Index - Learn web development
5 css and javascript accessibility best practices accessibility, article, css, codingscripting, guide, javascript, learn, color, contrast, hiding, unobtrusive we hope this article has given you a good amount of detail and understanding about the accessibility issues surrounding css and javascript use on web pages.
... for example, take the following line of content: 40 how the web works beginner, client, dns, http, ip, infrastructure, learn, server, tcp, l10n:priority this theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background.
... 44 the web and web standards beginner, front-end, learn, web, web standards this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
...And 18 more matches

CSS property compatibility table for form controls - Learn web development
rendering for each property there are two possible renderings: n (normal) indicates that the property is applied as it is t (tweaked) indicates that the property is applied with the extra rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables global behaviors some behaviors are common to many browsers at a global level: border, background, border-radius, height using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers.
... on windows 7, internet explorer 9 does not apply the border unless background:none is applied.
... on windows 7, internet explorer 9 does not apply the border unless background:none is applied.
...And 17 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
there's no magic object provided by either the webgl or the webxr api that represents the viewer that you can simply rotate and move around to automatically change what's seen on the screen.
...since we don't have a real camera, we imagine one, reproducing the effect of having a camera, without actually having the ability to move the user around the scene.
...the cameras may be fixed in place, but they may also be set up to move around as well, tracking the movement of the performers, dollying in and out to achieve emotional impact, and so forth.
...And 17 more matches

Border-image generator - CSS: Cascading Style Sheets
ass="title"> aditional-properties </div> <div class="property"> <div class="name"> repeat-x </div> <div class="ui-dropdown border-repeat" data-topic="image-repeat-x" data-selected="2"> <div data-value="0">repeat</div> <div data-value="0">stretch</div> <div data-value="0">round</div> </div> </div> <div class="property"> <div class="name"> repeat-y </div> <div class="ui-dropdown border-repeat" data-topic="image-repeat-y" data-selected="2"> <div data-value="1">repeat</div> <div data-value="1">stretch</div> <div...
... data-value="1">round</div> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="font-size" data-info="em size" data-unit="px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-height" data-info="height" data-unit=" px" data-min="10" data-max="10000" data-sensi...
... input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-rad...
...And 17 more matches

JavaScript Daemons Management - Archive of obsolete content
in computer science a daemon is a task that runs as a background process, rather than being under the direct control of an interactive user.
... **/ daemon.construct = function (aargs) { var odmn = new this.blank(); this.apply(odmn, aargs); return odmn; }; daemon.buildaround = function (octx, nrate, nlen) { if (!octx.perform) { throw new typeerror("you cannot create a daemon around an object devoid of a \"perform\" function"); } return new this(octx, octx.perform, nrate || null, nlen || null, octx.create || null, octx.prepare || null); }; /* warning!
... **/ /* warning: this method requires the global daemon.construct() method */ daemon.safe.construct = daemon.construct; /* warning: this method requires the global daemon.buildaround() method */ daemon.safe.buildaround = daemon.buildaround; /* warning: this method requires the global daemon.incorporate() method */ daemon.safe.incorporate = daemon.incorporate; /* system required daemon.safe instances methods */ daemon.safe.prototype.synchronize = function () { if (this.paused) { return; } cleartimeout(this.session); this.session = settimeout(daemon.sa...
...And 16 more matches

Advanced styling effects - Learn web development
first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if ...
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multipl...
... first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), ...
...And 15 more matches

create fancy boxes - Learn web development
on the technical side, creating fancy boxes are all about mastering css border and background properties and how to apply them to a given box.
... its background properties: background, background-color, background-image, background-position, background-size, etc.
... so we have a very large playground.
...And 14 more matches

How CSS is structured - Learn web development
you reference an external css stylesheet from an html <link> element: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> the css stylesheet file might look like this: h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } the href attribute of the <link> element needs to reference a file on your file system.
... the html for an internal stylesheet might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> in some circumstances, internal stylesheets can be useful.
...the implementation of an inline style in an html document might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">hello world!</h1> <p style="color:red;">this is my first css example</p> </body> </html> avoid using css in this way when possible.
...And 13 more matches

Applying styles and colors - Web APIs
a globalalpha example in this example, we'll draw a background of four different colored squares.
...by increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw semi transparent circles for (var i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample an example using rgba() in this second example, we do something similar to the one above, but instead of drawing circles on top of ea...
...And 13 more matches

Fundamentals of WebXR - Web APIs
a human eye is typically able to take in a fov of around 135°.
...that overlap is what gives us depth perception; within the overlap area — which is around 115° across — we have depth perception.
... field of view and mixed reality devices to achieve a wide enough field of view that the user's eyes are tricked into believing that the virtual world completely surrounds them, the fov needs to at least approach the width of the binocular vision area.
...And 13 more matches

Border-radius generator - CSS: Cascading Style Sheets
150" data-max="700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group section"> <div id="radius-lock"> <div class="info"> rounded corner </div> <div class="ui-checkbox" data-topic='top-left'></div> <div class="ui-checkbox" data-topic='top-right'></div> <div class="ui-checkbox" data-topic='bottom-right'></div> <div class="ui-checkbox" data-topic='bottom-left'></div> </div> <div id="unit-selection"> <div class="info"> se...
... input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-rad...
...ius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-ra...
...And 13 more matches

image() - CSS: Cascading Style Sheets
coloroptional a color, specifying a solid background color to use as a fallback if no image-src is found, supported, or declared.
...the syntax looks like so: background-image: image('myimage.webp#xywh=0,20,40,60'); the background image of the element will be the portion of the image myimage.webp that starts at the coordinate 0px, 20px (the top left hand corner) and is 40px wide and 60px tall.
...as a use case, consider a dark image being used as a background for some white text.
...And 13 more matches

Examples - Archive of obsolete content
a .xhtml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 2 - comments in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> <!-- body {background-color: blue; color: yellow; } --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> </head> <body> <h1>problem 2 - comments in xhtml</h1> <p> this document is valid xhtml 1.0 strict served as <code>application/xhtml+xml</code>.
... </p> <p> this document contains inline css rules contained in a <code>style</code> element and surrounded by a comment and javascript contained in a <code>script</code> element and surrounded by a comment.
.../w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 1 - xhtml 1.0 strict as text/html</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- body { padding-top: 8em; } html { color: #fff; background: #000 no-repeat fixed;} p {width: 30em; font-weight: bold;} --> </style> </head> <body> <h1>example 1 - xhtml 1.0 strict as text/html</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/html</code>.
...And 12 more matches

Introduction to CSS layout - Learn web development
css page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.
... floats — applying a float value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.
...if you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line.
...And 12 more matches

Geometry and reference spaces in WebXR - Web APIs
the article spatial tracking in webxr builds upon the information provided here to cover how the physical position and orientation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited.
... rotation is the application of a matrix that rotates a point around the origin of the object's coordinate system.
... in augmented reality (ar), this is because of the need to insert virtual objects into the real world, not only placing them correctly but also ensuring that they don't seem to wander around on their own as the user's perspective shifts.
...And 12 more matches

filter - CSS: Cascading Style Sheets
filters are commonly used to adjust the rendering of images, backgrounds, and borders.
...:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0; margin: 0 0 1.286em; height: 100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgblur" x="-5%" y="-5%" width...
...0%; height:auto; -moz-filter:brightness(2); -webkit-filter:brightness(2); -ms-filter:brightness(2); filter:brightness(2); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; height:100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } contrast() the contrast() function adjusts the contrast of the input image.
...And 12 more matches

Web audio codec guide - Web media technologies
noise / hiss unwanted background noise or hiss tends to reduce audio quality both directly (by masking details of the foreground audio) and indirectly (by making the audio waveform more complicated and therefore difficult to reduce in size while maintaining precision).
... hiss, static, or background noise increases the audio complexity, which generally reduces the amount of compression which is possible.
...5.1 surround sound has five audio channels, plus one low frequency enhancement (lfe) channel.
...And 12 more matches

element() - CSS: Cascading Style Sheets
a particularly useful scenario for using this would be to render an image in an html <canvas> element, then use that as a background.
... on gecko browsers, you can use the non-standard document.mozsetimageelement() method to change the element being used as the background for a given css background element.
... syntax element(id) where: id the id of an element to use as the background, specified using the html attribute #id on the element.
...And 11 more matches

WebGL model view projection - Web APIs
these composed matrices ultimately move the original model data around into a special coordinate space called clip space.
... the first matrix discussed below is the model matrix, which defines how you take your original model data and move it around in 3d world space.
...these matrices are core to moving data around on the screen, and are concepts that transcend individual frameworks and engines.
...And 10 more matches

<tr>: The Table Row element - HTML: Hypertext Markup Language
bgcolorobsolete since html5 a domstring specifying a color to apply to the backgrounds of each of the row's cells.
...omitting the attribute or setting it to null in javascript causes the row's cells to inherit the row's parent element's background color.
...to give a similar effect as the bgcolor attribute, use the css property background-color.
...And 10 more matches

CSS values and units - Learn web development
in css specifications and on the property pages here on mdn you will be able to spot values as they will be surrounded by angle brackets, such as <color> or <length>.
... in the following example we have set the color of our heading using a keyword, and the background using the rgb() function: h1 { color: black; background-color: rgb(197,93,161); } a value in css is a way to define a collection of allowable sub-values.
... note: when you use a number in css as a value it should not be surrounded in quotes.
...And 9 more matches

Positioning - Learn web development
</p> now add the following rule to the bottom of your css: .positioned { position: static; background: yellow; } if you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph.
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: relative; background: yellow; top: 30px; left: 30px; } cool, huh?
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } first of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third elements have closed together like it no longer ...
...And 9 more matches

Advanced form styling - Learn web development
interestingly, setting border/background on the search field also fixes this problem, as it disables or "breaks" the aqua appearance too.
... for example, consider this simple test case: <span><input type="checkbox"></span> span { display: inline-block; background: red; } input[type="checkbox"] { width: 100px; height: 100px; } different browsers handle this in many different, often ugly ways: browser rendering firefox 71 (macos) firefox 57 (windows 10) chrome 77 (macos), safari 13, opera chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (wind...
...rast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; background: #ddd; color: gray; } you'll find more out about such pseudo-classes and more in the next article; the above ones do the following: :checked — the checkbox (or radio button) is in a checked state — the user has clicked/activated it.
...And 9 more matches

Images in HTML - Learn web development
in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css background images.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html.) objective: to learn how to embed simple images in html, annotate them with captions, and how html images relate to css background images.
...you should use css background images for decorative images, but if you must use html, add a blank alt="".
...And 9 more matches

Introduction to events - Learn web development
in this article, we discuss some important concepts surrounding events, and look at how they work in browsers.
...in the following example, we have a single <button>, which when pressed, makes the background change to a random color: <button>change color</button> button { margin: 10px }; the javascript looks like so: const btn = document.queryselector('button'); function random(number) { return math.floor(math.random() * (number+1)); } btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndco...
...we are listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random rgb color and sets the <body> background-color equal to it.
...And 9 more matches

Aprender y obtener ayuda - Learn web development
diffuse learning is more to do with high-level thinking around a wider area.
...this is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.
...some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "learn the css box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the css background property"?) mdn web docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.
...And 9 more matches

Timing element visibility with the Intersection Observer API - Web APIs
the basics we provide styles for the <body> and <main> elements to define the site's background as well as the grid the various parts of the site will be placed in.
... body { font-family: "open sans", "arial", "helvetica", sans-serif; background-color: aliceblue; } .wrapper { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr); max-width: 700px; margin: 0 auto; background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" as the background color.
...its style looks like this: header { grid-column: 1 / -1; grid-row: 1; background-color: aliceblue; } grid-row is set to 1, since we want the header to be placed in the top row of the site's grid.
...And 9 more matches

Basic concepts behind Web Audio API - Web APIs
it won't turn you into a master sound engineer, but it will give you enough background to understand why the web audio api works like it does.
...the channels are usually represented by standard abbreviations detailed in the table below: mono 0: m: mono stereo 0: l: left 1: r: right quad 0: l: left 1: r: right 2: sl: surround left 3: sr: surround right 5.1 0: l: left 1: r: right 2: c: center 3: lfe: subwoofer 4: sl: surround left 5: sr: surround right up-mixing and down-mixing when the number of channels doesn't match between an input and an output, up- or down-mixing happens according the following rules.
... the m input channel is used for non-surround output channels (l and r).
...And 9 more matches

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
i can use the align-items property on the grid container, to align the items using one of the following values: auto normal start end center stretch baseline first baseline last baseline * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-it...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 {...
...the first item in the example demonstrates this default alignment: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 {...
...And 9 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 150px; } in the image, yo...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } a simple question to ask yourself when deciding ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> .wrapper { display: flex; align-items: flex-end; min-height: 200px; } .box1 { align-self: stretch; } .box2 { al...
...And 9 more matches

Overview of CSS Shapes - CSS: Cascading Style Sheets
you could for example float an item left, which would cause the text to wrap round the right and bottom of the item in a rectangular fashion.
... if you then apply a circle shape, the text would then wrap round the line of the circle.
... shape-margin — sets a margin around the defined shape defining basic shapes the shape-outside property allows us to a define a shape.
...And 9 more matches

conic-gradient() - CSS: Cascading Style Sheets
the conic-gradient() css function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
... syntax /* a conic gradient rotated 45 degrees, starting blue and finishing red */ conic-gradient(from 45deg, blue, red); /* a a bluish purple box: the gradient goes from blue to red, but as only the bottom right quadrant is visible, as the center of the conic gradient is in at the top left corner */ conic-gradient(from 90deg at 0 0, blue, red); /* colorwheel */ background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
... <position> using the same length, order and keyterm values as the background-position property, the position defines center of the gradient.
...And 9 more matches

CSS3 - Archive of obsolete content
it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
...some modules, like selectors 4 or css borders and backgrounds level 4 already have an editor's draft, though they haven't yet reached the first published working draft status.
... css backgrounds and borders module level 3 candidate recommendation adds: support, on backgrounds, for any type of <image>, and not only for uri() defined ones.
...And 8 more matches

Index - Archive of obsolete content
16 alternatingbackground xul attributes, xul reference no summary!
... 420 wraparound xul attributes, xul reference no summary!
...it will have a titlebar which the user may use to move the panel around on the screen.
...And 8 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
4 alpn alpn, draft, glossary, needscontent, tls application-layer protocol negotiation (alpn) is a tls extension which indicates what application layer protocol is negotiating the encryped connection without requiring additional round trips.
...to represent a color through which the background can be seen to some extent, a fourth channel is added to the color: the alpha channel.
... 178 graceful degradation design, glossary, graceful degradation graceful degradation is a design philosophy that centers around trying to build a modern web site/application that will work in the newest browsers, but falls back to an experience that while not as good still delivers essential content and functionality in older browsers.
...And 8 more matches

The box model - Learn web development
previous overview: building blocks next everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items.
... we also have a <ul> element which is set to display: inline-flex, creating an inline box around some flex items.
... padding box: the padding sits around the content as white space; its size can be controlled using padding and related properties.
...And 8 more matches

Grids - Learn web development
they help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.
... simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using lengths and percentage...
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the fr unit distributes available space, not all space.
...And 8 more matches

Styling links - Learn web development
focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were back in...
... outline for the text outline (an outline is similar to a border, the only difference being that border takes up space in the box and an outline doesn't; it just sits over the top of the background).
... now let's add some more information to get this styled properly: body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #265301; } a:visited { color: #437a16; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px solid; background: #cdfeaa; } a:active { background: #265301; color: #cdfeaa; } we'll also provide some sample html to apply the css to: <p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p> putting the two together gives us this result: so wh...
...And 8 more matches

CSS basics - Learn web development
how do i decorate my webpage with background images and colors?
...each box taking up space on your page has properties like: padding, the space around the content.
... in the example below, it is the space around the paragraph text.
...And 8 more matches

HTML text fundamentals - Learn web development
my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code...
... semantics are relied on everywhere around us—we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be.
...in this context the <h1> element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using css).
...And 8 more matches

nsIHTMLEditor
on aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); void getalignment(out boolean amixed, out short aalign); astring getbackgroundcolorstate(out boolean amixed); nsidomelement getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring getfontcolorstate(out boolean amixed); astring getfontfacestate(out boolean amixed); astring getheadcontentsashtml(); astring gethighlightcolorstate(out boolean amixed); void getindentstate(out boolean acanindent, out boo...
...olean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alisttype, in boolean entirelist, in astring abullettype); boolean nodeisblock(in nsidomnode node); void pastenoformatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void rem...
...property, in astring aattribute, in astring avalue); void removeinlineproperty(in nsiatom aproperty, in astring aattribute); void removeinsertionlistener(in nsicontentfilter infilter); void removelist(in astring alisttype); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void setbackgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafterelement(in nsidomelement aelement); void setcssinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setdocumenttitle(in astring atitle); void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astring ava...
...And 8 more matches

Page Visibility API - Web APIs
with tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user.
...for example, if your web app is playing a video, it can pause the video when the user puts the tab into the background, and resume playback when the user returns to the tab.
... the user doesn't lose their place in the video, the video's soundtrack doesn't interfere with audio in the new foreground tab, and the user doesn't miss any of the video in the meantime.
...And 8 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for au...
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows:...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 8 more matches

repeating-conic-gradient() - CSS: Cascading Style Sheets
the repeating-conic-gradient() css function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).
... syntax /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */ background: repeating-conic-gradient( from 3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%, 60%) 10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
... <position> using the same length, order and keyterm values as the background-position property, the position defines center of the gradient.
...And 8 more matches

Video player styling basics - Developer guides
basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:100%; max-height:30.875rem; height:100%; margin:1.25rem auto; padding:1.051%; background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.0971659919028340080971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of the enclosing <figure> element (this was worked out with experimentation based on t...
... each button has some basic styling: .controls button { border:none; cursor:pointer; background:transparent; background-size:contain; background-repeat:no-repeat; } by default, all <button> elements have a border, so this is removed.
... since background images will be used to display appropriate icons, the background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image.
...And 8 more matches

Creating a Skin - Archive of obsolete content
window > box { background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels { background-color: lightblue; border-top: 1px solid white; border-bottom: 1px solid #666666; border-left: 1px solid white; border-right: 1px solid #666666; } caption { background-color: lightblue; } the inner box of the window (which actually surrounds all of the window content) has been changed to have a medium blue color...
... the border around these four elements has been changed to give a heavier 3d appearance.
... the background color of the caption has also been changed to match the background.
...And 7 more matches

Styling lists - Learn web development
handling list spacing when styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the css used for the text styling and spacing is as follows: /* general styles */ html { font-family: helvetica, arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul,ol...
...you are better off using the background family of properties, which you've learned in the backgrounds and borders article.
... in our finished example, we have styled the unordered list like so (on top of what you've already seen above): ul { padding-left: 2rem; list-style-type: none; } ul li { padding-left: 2rem; background-image: url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; } here we've done the following: set the padding-left of the <ul> down from the default 40px to 20px, then set the same amount on the list items.
...And 7 more matches

HTML table basics - Learn web development
go into your html, and change all the <td> elements surrounding the table headers into <th> elements.
... note: styling columns like this is limited to a few properties: border, background, width, and visibility.
... take the following simple example: <table> <tr> <th>data 1</th> <th style="background-color: yellow">data 2</th> </tr> <tr> <td>calcutta</td> <td style="background-color: yellow">orange</td> </tr> <tr> <td>robots</td> <td style="background-color: yellow">jazz</td> </tr> </table> which gives us the following result: data 1 data 2 calcutta orange robots jazz this isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet).
...And 7 more matches

Drawing graphics - Learn web development
graphics on the web as we talked about in our html multimedia and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via css properties such as background-image, and svg.
... the situation started to improve when browsers began to support the <canvas> element and associated canvas api — apple invented it in around 2004, and other browsers followed by implementing it in the years that followed.
... the below example shows a simple 2d canvas-based bouncing balls animation that we originally met in our introducing javascript objects module: around 2006–2007, mozilla started work on an experimental 3d canvas implementation.
...And 7 more matches

Handling common HTML and CSS problems - Learn web development
to ensure this doesn't happen, you need to research the tools you are using first and design your code around them.
...in general, most core html and css functionality (such as basic html elements, css basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as flexbox, or html5 video/audio, or even more nascent, css grids or -webkit-background-clip: text.
... background-color: #ff0000; background-color: rgba(255,0,0,1); box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4), inset -1px -1px 3px rgba(0,0,0,0.4); } button:hover { background-color: rgba(255,0,0,0.5); } button:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4), inset -1px -1px 3px rgba(255,255,255,0.4); } here we are providing an rgba background-color that cha...
...And 7 more matches

AudioNode.channelInterpretation - Web APIs
the m input channel is used for non-surround output channels (l and r).
... surround output channels (sl and sr) are silent.
... the l and r input channels are used for their non-surround respective output channels (l and r).
...And 7 more matches

Document.execCommand() - Web APIs
commands backcolor changes the document background color.
... in stylewithcss mode, it affects the background color of the containing block instead.
...note that internet explorer uses this to set the text background color.
...And 7 more matches

WindowOrWorkerGlobalScope.setTimeout() - Web APIs
or go for a very clean approach based on the ie html conditional feature: <!--[if lte ie 9]><script> (function(f){ window.settimeout=f(window.settimeout); window.setinterval=f(window.setinterval); })(function(f){return function(c,t){ var a=[].slice.call(arguments,2);return f(function(){c instanceof function?c.apply(this,a):eval(c)},t)} }); </script><![endif]--> workarounds another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive.
... timeouts in inactive tabs throttled to ≥ 1000ms to reduce the load (and associated battery usage) from background tabs, timeouts are throttled to firing no more often than once per second (1,000 ms) in inactive tabs.
... firefox implements this behavior since version 5 (see bug 633421, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference).
...And 7 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } the fr unit tracks can be defined using any length unit.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } in this next example, we create a definition with a 2fr track then two 1fr tracks.
...And 7 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> ...
...one of the very nice things about grid layout is this ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } .box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box3 { grid-column-start: 2; grid-column-end: 3; grid-r...
...And 7 more matches

Styling a Tree - Archive of obsolete content
let's say we want a particular row to have a blue background color.
...the following is the syntax that needs to be used: treechildren::-moz-tree-row(makeitblue) { background-color: blue; } this style which has a complex selector is used to style the background color of rows that have the 'makeitblue' property.
...this style rule means, inside a treechildren element, set the background color to blue for all tree rows that have the 'makeitblue' property.
...And 6 more matches

Theme changes in Firefox 2 - Archive of obsolete content
browser/search-bar-background-mid.png new file; the background for the middle part of the search bar.
... browser/search-bar-background.png removed file.
... browser/search-provider-bkgnd-rtl.png new file; the background drawn behind the search provider icon when it's located at the left end of the search bar.
...And 6 more matches

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
it's a well-known maxim that if you stick around long enough, you get a chance to see the tides of history turn.
... if you're lucky, you get to ride the surf that second time around without being knocked over by the waves.
...to put that in perspective, i remember when the fish cam page first appeared and word of it circulated around the internet.
...And 6 more matches

Styling tables - Learn web development
by default, when you set borders on table elements, they will all have spacing between them, as the below image illustrates: this doesn't look very nice (although it might be the look you want, who knows?) with border-collapse: collapse; set, the borders collapse down into one, which looks much better: we've put a border around the whole table, which is needed because we'll be putting some borders round the table header and footer later on — it looks really odd and disjointed when you don't have a border round the whole outside of the table and end up with gaps.
... start by adding the following css to your style.css file, again at the bottom: /* graphics and colors */ thead, tfoot { background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td { background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); border: 3px solid purple; } again, there's nothing specific to tables here, but it is worthwhile to note a few things.
... we've added a background-image to the <thead> and <tfoot>, and changed the color of all the text inside the header and footer to white (and given it a text-shadow) so it is readable.
...And 6 more matches

Theme concepts
add the theme image file to the folder: <mytheme> <your_header_image>.<type> create a file called manifest.json in the folder and edit its content as follows: { "manifest_version": 2, "version": "1.0", "name": "<your_theme_name>", "theme": { "images": { "theme_frame": "<your_header_image>.<type>" }, "colors": { "frame": "#ffffff", "tab_background_text": "#000" } } } where: "frame": is the heading area background color for your theme.
... "tab_background_text": the color of the text in the heading area.
...however, rather than creating a very wide image, a better approach is to use a narrower image with a transparent left edge so that it fades to the background color.
...And 6 more matches

Multithreading in Necko
in the future, necko may be made thread safe to support changes to gecko that would put some other processing work on background threads (eg.
...however, most necko protocols utilize background threads.
... background threads are used to manage all i/o operations (with the exception of few cases).
...And 6 more matches

Intersection Observer API - Web APIs
one thing the intersection observer api can't tell you: the exact number of pixels that overlap or specifically which ones they are; however, it covers the much more common use case of "if they intersect by somewhere around n%, i need to do something." intersection observer concepts and usage the intersection observer api allows you to configure a callback that is called: (1) whenever one element, called the target, intersects either the device viewport or a specified element; for the purpose of this api, this is called the root element or root (2) and whenever the observer is asked to watch a target for the ver...
... rootmargin margin around the root.
... to get a feeling for how thresholds work, try scrolling the box below around.
...And 6 more matches

Multi-touch interaction - Web APIs
<style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } </style> global state to support multi-touch interaction, preserving a pointer's event state during various event phases is required.
... in this application, when a pointer is placed down on an element, the background color of the element changes, depending on the number of active touch points the element has.
... see the update_background function for more details about the color changes.
...And 6 more matches

Pinch zoom gestures - Web APIs
the pinch in (zoom out) gesture, which moves the two pointers toward each other, changes the target element's background color to lightblue.
... the pinch out (zoom in) gesture, which moves the two pointers away from each other, changes the target element's background color to pink.
... <style> div { margin: 0em; padding: 2em; } #target { background: white; border: 1px solid black; } </style> global state supporting a two-pointer gesture requires preserving a pointer's event state during various event phases.
...And 6 more matches

Multi-touch interaction - Web APIs
<style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } #target4 { background: white; border: 1px solid black; } </style> global state tpcache is used to cache touch points for processing outside of the event where they were fired.
...rdinates var diff1 = math.abs(tpcache[point1].clientx - ev.targettouches[0].clientx); var diff2 = math.abs(tpcache[point2].clientx - ev.targettouches[1].clientx); // this threshold is device dependent as well as application specific var pinch_threshhold = ev.target.clientwidth / 10; if (diff1 >= pinch_threshhold && diff2 >= pinch_threshhold) ev.target.style.background = "green"; } else { // empty tpcache tpcache = new array(); } } } touch start handler the touchstart event handler caches touch points to support 2-touch gestures.
... ev.preventdefault(); // cache the touch points for later processing of 2-touch pinch/zoom if (ev.targettouches.length == 2) { for (var i=0; i < ev.targettouches.length; i++) { tpcache.push(ev.targettouches[i]); } } if (logevents) log("touchstart", ev, true); update_background(ev); } touch move handler the touchmove handler calls preventdefault() for the same reason mentioned above, and invokes the pinch/zoom handler.
...And 6 more matches

WebGL best practices - Web APIs
geterror(): causes a flush + round-trip to fetch errors from the gpu process).
... getshader/programparameter(), getshader/programinfolog(), other gets on shaders/programs: flush + shader compile + round-trip, if not done after shader compilation is complete.
... (see also parallel shader compilation below.) get*parameter() in general: possible flush + round-trip.
...And 6 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
in this article, we'll make use of information introduced in the previous articles in our webxr tutorial series to construct an example which animates a rotating cube around which the user can move freely using a vr headset, keyboard, and/or mouse.
...greespersecond = 25; const yrotationdegreespersecond = 15; const zrotationdegreespersecond = 35; const enablerotation = true; const allowmouserotation = true; const allowkeyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply around the x axis per second.
... yrotationdegreespersecond the number of degrees to rotate around the y axis each second.
...And 6 more matches

Web Accessibility: Understanding Colors and Luminance - Accessibility
font size, font style (some fonts are so thin or fancy that they present accessibility problems on their own), background color, the size of the background space around the text, even pixel densities and more all affect how color is delivered from the screen.
... (see understanding success criterion 1.4.3: contrast) a viewer's distance from the screen, the ambient background, the health of his eyes, and more all affect how that color is received by the viewer.
... another important point to consider is the ambience of light surrounding the color.
...And 6 more matches

Perceivable - Accessibility
decorative images should be implemented using css background images (see backgrounds).
... if you are including background video or audio that autoplays, make it as unobtrusive as possible.
...so, for example: "click the round button to continue" the button should be clearly labelled so that it is obvious that it is the button you need to press.
...And 6 more matches

-moz-image-rect - CSS: Cascading Style Sheets
the -moz-image-rect value for css background-image lets you use a portion of a larger image as a background.
... description this property allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.
...however, this can be used for any css background.
...And 6 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
if we position an item using absolute positioning, we use these physical keywords as offset values to push the item around.
...the other properties will change the way that text flows in our document, matching the different writing modes found around the world.
... .wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d9480f; max-width: 300px; } <div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </div> writing modes in grid layouts if we now take a look at a gr...
...And 6 more matches

Grid template areas - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "s...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "s...
...And 6 more matches

Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets.
... while you can choose any name, if you append -start and -end to the lines around an area, as i have in the example above, grid will create you a named area of the main name used.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } i’m using the same grid definitions as above, however this time i am going to place a single item into the named area content.
...And 6 more matches

<feComposite> - SVG: Scalable Vector Graphics
30" height="195" viewbox="0 0 1100 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> <defs> <desc>define two sets of six filters for each of the six compositing operators.
... the first set wipes out the background image by flooding with opaque white.
... the second set does not wipe out the background, with the result that the background sometimes shines through and is other cases is blended into itself (i.e., "double-counting").</desc> <filter id="overflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="over" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="inflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundima...
...And 6 more matches

Images, Tables, and Mysterious Gaps - Archive of obsolete content
the components let's take a close look at the breeding ground for trouble, and why this is a problem.
...instead of "shrinkwrapping" the image itself, the browser is now wrapping around the line in which the image sits.
...in the simplest case, we might add a style like this: td img {display: block;} consider this rule when applied to the following markup: <table cellspacing="0" cellpadding="0" border="0" width="500"> <tr><td><img src="nav1.gif"><img src="nav2.gif"><img src="nav3.gif"><img src="nav4.gif"><img src="nav5.gif"></td></tr> <tr><td style="background: red;"> <img src="smallred.gif" height="1" width="1"></td></tr> <tr><td> <p style="margin: 0.5em;">this is text in another cell of the table.
...And 5 more matches

CSS and JavaScript accessibility best practices - Learn web development
your text color should contrast well with your background color.
... links hyperlinks — the way you get to new places on the web: <p>visit the <a href="https://www.mozilla.org">mozilla homepage</a>.</p> some very simple link styling is shown below: a { color: #ff0000; } a:hover, a:visited, a:focus { color: #a60000; text-decoration: none; } a:active { color: #000000; background-color: #a60000; } the standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red).
... color and color contrast when choosing a color scheme for your website, make sure that the text (foreground) color contrasts well with the background color.
...And 5 more matches

Practical positioning examples - Learn web development
add the following css: .info-box li { float: left; list-style-type: none; width: 150px; } .info-box li a { display: inline-block; text-decoration: none; width: 100%; line-height: 3; background-color: red; color: black; text-align: center; } finally for this section we'll set some styles on the link states.
...place the following css below your other styles: .info-box li a:focus, .info-box li a:hover { background-color: #a60000; color: white; } .info-box li a.active { background-color: #a60000; color: white; } styling the panels the next job is to style our panels.
...the rule also gives the panels the same set height as the container, and gives the content some padding, a text color, and a background-color.
...And 5 more matches

How can we design for all types of users? - Learn web development
dig deeper color contrast to keep your text readable, use a text color that contrasts well with the background color.
... the w3c defines a good color mix with an algorithm that calculates luminosity ratio between foreground and background.
... for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page.
...And 5 more matches

Advanced text formatting - Learn web development
this is usually a feeling, thought or piece of additional background information description lists use a different wrapper than the other list types — <dl>; in addition each term is wrapped in a <dt> (description term) element, and each description is wrapped in a <dd> (description definition) element.
...this is usually a feeling, thought, or piece of additional background information.</dd> </dl> the browser default styles will display description lists with the descriptions indented somewhat from the terms.
...this is usually a feeling, thought, or piece of additional background information.</dd> <dd>in writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> </dl> active learning: marking up a set of definitions it's time to try your hand at description lists; add elements to the raw text in the input field so that it appears as a description list in the output field.
...And 5 more matches

Manipulating documents - Learn web development
you might think that such limitations are a bad thing, but browsers are locked down for good reasons, mostly centering around security.
...ragraph using document.createelement() and give it some text content in the same way as before: const para = document.createelement('p'); para.textcontent = 'we hope you enjoyed the ride.'; you can now append the new paragraph at the end of the section using node.appendchild(): sect.appendchild(para); finally for this part, let's add a text node to the paragraph the link sits inside, to round off the sentence nicely.
... as an example, try adding these lines to our ongoing example: para.style.color = 'white'; para.style.backgroundcolor = 'black'; para.style.padding = '10px'; para.style.width = '250px'; para.style.textalign = 'center'; reload the page and you'll see that the styles have been applied to the paragraph.
...And 5 more matches

Handling common JavaScript problems - Learn web development
this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more.
...jquery (or whatever library you are using) will then handle the differences in the background, so you don't have to.
...the library will manipulate appropriate apis in the background so the functionality will work whatever the browser (in theory).
...And 5 more matches

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.
... setboolpref("browser.use_system_fonts", usesystemfonts); no colors for page setcharpref("browser.display.foreground_color", "#abcdef" /* hex color value */); setcharpref("browser.display.background_color", "#abcdef" /* hex color value */); setboolpref("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops ...
...background images from loading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex color value */); setcharpref("browser.visited_color", "#abcdef" /* hex color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz 0.8 focus appearance setboolpref("browser.display.use_focus_colors", usefocuscolors); setcharpref("browser.display.focus_background_color", colorstring); setcharpref("browser.display.focus_text_color", colorstring); setcharpref("browser.display.focus_ring_width", numpixels); /* 0-4 ...
...And 5 more matches

nsIDOMWindowUtils
at ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext athebescontext); native code only!
... this is used on mobile, for example, to prevent attempts to render content until enough of the page has been loaded to avoid content bouncing around excessively as more content is loaded.
... native code only!renderdocument void renderdocument( in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext athebescontext ); parameters arect aflags abackgroundcolor athebescontext resumetimeouts() resumes timeouts on this window and its descendant windows.
...And 5 more matches

Document.mozSetImageElement() - Web APIs
the document.mozsetimageelement() method changes the element being used as the css background for a background with a given background element id.
... syntax document.mozsetimageelement(imageelementid, imageelement); parameters imageelementid is a string indicating the name of an element that has been specified as a background image using the -moz-element css function.
... imageelement is the new element to use as the background corresponding to that image element string.
...And 5 more matches

msAudioCategory - Web APIs
msaudiocategory specifies the purpose of the audio or video media, such as background audio or alerts.
... syntax <audio controls="controls" msaudiocategory="backgroundcapablemedia"> </audio> the msaudiocategory property offers a variety of values that can enhance the behavior of your audio-aware app.
... value description background capable?
...And 5 more matches

Using the Web Speech API - Web APIs
when the screen is tapped/clicked, you can say an html color keyword, and the app's background color will change to that color.
... browser support support for web speech api speech recognition is curently limited to chrome for desktop and android — chrome has supported it since around version 33 but with prefixed interfaces, so you need to include prefixed versions of them, e.g.
... <h1>speech color changer</h1> <p>tap/click then say a color to change the background color of the app.</p> <div> <p class="output"><em>...diagnostic messages</em></p> </div> the css provides a very simple responsive styling so that it looks ok across devices.
...And 5 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
myth: msaa is too slow reality: assistive technology vendors have found ways around most of the performance problems related to out-of-process com method calls.
...there's a very good chance they won't ask for more than the events marked [important]: event_system_sound event_system_alert [can be important, to have auto-speaking for newly created role_alerts] event_system_foreground event_system_menustart [important] event_system_menuend [important] event_system_menupopupstart [important] event_system_menupopupend [important] event_system_capturestart event_system_captureend event_system_movesizestart event_system_movesizeend event_system_contexthelpstart event_system_contexthelpend event_system_dragdropstart event_system_dragd...
...here are some of it's quirks and some solutions/workarounds: msaa can be crash prone problem: many of msaa's crash occur because more than one process is refcounting the same objects, and because pointers are being shared between processes.
...And 5 more matches

color-adjust - CSS: Cascading Style Sheets
for example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper.
...for example, a page might include a list of information with rows whose background colors alternate between white and a light grey.
... removing the background color would decrease the legibility of the content.
...And 5 more matches

mix-blend-mode - CSS: Cascading Style Sheets
the mix-blend-mode css property sets how an element's content should blend with the content of the element's parent and the element's background.
... contextyes formal syntax <blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-...
...wbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> <div class="note">blending globally (blend with the background)</div> <div class="row"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse...
...And 5 more matches

transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2...
...s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.c...
...lassname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; ...
...And 5 more matches

transition-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform colo...
...r; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { e...
...l.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration:1s; transition-timing-fu...
...And 5 more matches

HTML documentation index - HTML: Hypertext Markup Language
element bdi, bidi, directionality, element, html, html text-level semantics, html:flow content, html:palpable content, html:phrasing content, internationalization, left-to-right, reference, right-to-left, text, web, direction, i18n, ltr, rtl the html bidirectional isolate element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
... 69 <bgsound>: the background sound element (obsolete) audio, background sound, element, html, internet explorer, non-standard, obsolete, reference, web the internet explorer only html background sound element (<bgsound>) sets up a sound file to play in the background while the page is used; use <audio> instead.
... 70 <big>: the bigger text element element, html, obsolete, reference, web the obsolete html big element (<big>) renders the enclosed text at a font size one level larger than the surrounding text (medium becomes large, for example).
...And 5 more matches

Digital audio concepts - Web media technologies
as an object vibrates, it causes the molecules surrounding it to vibrate as well.
...the sound for the left and right main channels, as well as all of your surround sound speakers (center, left and right rear, left and right sides, ceiling channels, and so forth) are all standard audio channels.
... monophonic audio has one channel, stereo sound has two channels, 5.1 surround sound has 6 channels (five standard and one lfe), and so forth.
...And 5 more matches

Fills and Strokes - SVG: Scalable Vector Graphics
most svg you'll find around the web use inline css, but there are advantages and disadvantages associated with each type.
...using fill sets the color inside the object and stroke sets the color of the line drawn around the object.
...rsion="1.0" standalone="no"?> <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg> the stroke-width property defines the width of this stroke.
...And 5 more matches

jspage - Archive of obsolete content
a){window[b]=window.prototype[b]=a;}});window.prototype={$family:{name:"window"}}; new window(window);var document=new native({name:"document",legacy:(browser.engine.trident)?null:window.document,initialize:function(a){$uid(a);a.head=a.getelementsbytagname("head")[0]; a.html=a.getelementsbytagname("html")[0];if(browser.engine.trident&&browser.engine.version<=4){$try(function(){a.execcommand("backgroundimagecache",false,true); });}if(browser.engine.trident){a.window.attachevent("onunload",function(){a.window.detachevent("onunload",arguments.callee);a.head=a.html=a.window=null; });}return $extend(a,document.prototype);},afterimplement:function(b,a){document[b]=document.prototype[b]=a;}});document.prototype={$family:{name:"document"}}; new document(document);array.implement({every:function(c,d){fo...
...ndwithevent:function(b,a){return this.create({bind:b,arguments:a,event:true});},attempt:function(a,b){return this.create({bind:b,arguments:a,attempt:true})(); },delay:function(b,c,a){return this.create({bind:c,arguments:a,delay:b})();},periodical:function(c,b,a){return this.create({bind:b,arguments:a,periodical:c})(); }});number.implement({limit:function(b,a){return math.min(a,math.max(b,this));},round:function(a){a=math.pow(10,a||0);return math.round(this*a)/a;},times:function(b,c){for(var a=0; a<this;a++){b.call(c,a,this);}},tofloat:function(){return parsefloat(this);},toint:function(a){return parseint(this,a||10);}});number.alias("times","each"); (function(b){var a={};b.each(function(c){if(!number[c]){a[c]=function(){return math[c].apply(null,[this].concat($a(arguments)));};}});number.implem...
...,a,true); },getopacity:function(){return this.get("opacity");},setstyle:function(b,a){switch(b){case"opacity":return this.set("opacity",parsefloat(a));case"float":b=(browser.engine.trident)?"stylefloat":"cssfloat"; }b=b.camelcase();if($type(a)!="string"){var c=(element.styles.get(b)||"@").split(" ");a=$splat(a).map(function(e,d){if(!c[d]){return"";}return($type(e)=="number")?c[d].replace("@",math.round(e)):e; }).join(" ");}else{if(a==string(number(a))){a=math.round(a);}}this.style[b]=a;return this;},getstyle:function(g){switch(g){case"opacity":return this.get("opacity"); case"float":g=(browser.engine.trident)?"stylefloat":"cssfloat";}g=g.camelcase();var a=this.style[g];if(!$chk(a)){a=[];for(var f in element.shortstyles){if(g!=f){continue; }for(var e in element.shortstyles[f]){a.push(this.getsty...
...And 4 more matches

tabbrowser - Archive of obsolete content
loadonetab( url, referreruri, charset, postdata, loadinbackground, allowthirdpartyfixup ) loadonetab( url, { referreruri: ..., charset: ..., postdata: ..., inbackground: ..., allowthirdpartyfixup: ..., relatedtocurrent: ...
...this method works the same as addtab except for the loadinbackground parameter which allows you to choose whether to open the new tab in foreground or background.
... parameters inbackground if true the tab will be loaded in the background, if false the tab will be the newly selected tab.
...And 4 more matches

textbox - Archive of obsolete content
attributes cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange st...
... possible values: pasteintact paste newlines unchanged pastetofirst paste text up to the first newline, dropping the rest of the text replacewithcommas pastes the text with the newlines replaced with commas replacewithspaces pastes the text with newlines replaced with spaces strip pastes the text with the newlines removed stripsurroundingwhitespace pastes the text with newlines and adjacent whitespace removed onblur type: script code this event is sent when a textbox loses keyboard focus.
...there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value.
...And 4 more matches

LiveConnect Overview - Archive of obsolete content
ases where liveconnect will fail to load a class, and you will need to manually load it like this: var widgetry = java.lang.thread.currentthread().getcontextclassloader().loadclass("org.mywidgets.widgetry"); in javascript 1.3 and earlier, javaclass objects are not automatically converted to instances of java.lang.class when you pass them as parameters to java methods—you must create a wrapper around an instance of java.lang.class.
...jsexception is a java wrapper around any exception type thrown by javascript, similar to the way that instances of jsobject are wrappers for javascript objects.
...number values when you pass javascript number types as parameters to java methods, java converts the values according to the rules described in the following table: java parameter type conversion rules double the exact value is transferred to java without rounding and without a loss of magnitude or sign.
...And 4 more matches

Audio for Web games - Game development
for more passive audio auto play, for example background music that starts as soon as a game loads, one trick is to detect any user initiated event and start playback then.
... concurrent audio playback a requirement of many games is the need to play more than one piece of audio at the same time; for example, there might be background music playing along with sound effects for various things happening in the game.
... mobile workarounds although mobile browsers can present problems, there are ways to work around the issues detailed above.
...And 4 more matches

How to build custom form controls - Learn web development
*/ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width.
...it could also be implemented using a simple background image on the select class.
...: "▼"; /* we use the unicode character u+25bc; make sure to set a charset meta tag */ position: absolute; z-index : 1; /* this will be important to keep the arrow from overlapping the list of options */ top : 0; right : 0; box-sizing : border-box; height : 100%; width : 2em; padding-top : .1em; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; text-align : center; } next, let's style the list of options: .select .optlist { z-index : 2; /* we explicitly said the list of options will always be on top of the down arrow */ /* this will reset the default style of the ul element */ list-style: none; margin : 0; padding: 0; box-sizing : border-box; /* if the values are smaller than the contro...
...And 4 more matches

UI pseudo-classes - Learn web development
for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is ...
...we create it using this css: input + span { position: relative; } input:required + span::after { font-size: 0.7rem; position: absolute; content: "required"; color: white; background-color: black; padding: 5px 10px; top: -26px; left: -70px; } we set the <span> to position: relative simply so that we can set the generated content to position: absolute and position it relative to the <span> rather than the <body> (the generated content acts as though it is a child node of the element it is generated on, for the purposes of positioning).
...input looks like this: <div> <label for="age">age (must be 12+): </label> <input id="age" name="age" type="number" min="12" max="120" required> <span></span> </div> and the css looks like this: input + span { position: relative; } input + span::after { font-size: 0.7rem; position: absolute; padding: 5px 10px; top: -26px; } input:required + span::after { color: white; background-color: black; content: "required"; left: -70px; } input:out-of-range + span::after { color: white; background-color: red; width: 155px; content: "outside allowable value range"; left: -182px; } this is a similar story to what we had before in the :required example, except that here we've split out the declarations that apply to any ::after content into a separate rule, and given t...
...And 4 more matches

Making decisions in your code — conditionals - Learn web development
<label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my website</h1> const select = document.queryselector('select'); const html = document.queryselector('html'); document.body.style.padding = '10px'; function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; } select.onchange = function() { ( select.value === 'black' ) ?
...the website's background color is set to the first provided color, and its text color is set to the second provided color.
...if this returns true, we run the update() function with parameters of black and white, meaning that we end up with background color of black and text color of white.
...And 4 more matches

What is JavaScript? - Learn web development
css is a language of style rules that we use to apply styling to our html content, for example setting background colors and fonts, and laying out our content in multiple columns.
...we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a...
... browser apis are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things.
...And 4 more matches

Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="...
...text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
... before: after: noticeable changes include the removal of the list bullets, background color changes, and changes to the base button and input styles.
...And 4 more matches

Using the CSS Typed Object Model - Web APIs
we'll take a look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 16%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.95); } let's add the class to a button (a button which does nothing).
... {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log( transform[0].x ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "number"} console.log( transform.is2d ); // true // cssimagevalue let bgimage = allcomputedstyles.get('background-image'); console.log( bgimage ); // cssimagevalue console.log( bgimage.tostring() ); // url("https://mdn.mozillademos.org/files/16793/magicwand.png") // cssunparsedvalue let unit = allcomputedstyles.get('--unit'); console.log( unit ) // let parsedunit = cssnumericvalue.parse( unit ); console.log( parsedunit ); console.log( parsedunit.unit ); console.log( parsedunit.value ); for...
... we've created a blue button with a magic wand background image.
...And 4 more matches

Using images - Web APIs
var img = new image(); // create new img element img.src = 'data:image/gif;base64,r0lgodlhcwalaiaaaaaa3pn/zih5baeaaaealaaaaaalaasaaaiuha+hkcuo4lmnvindo7qyrixigbyaow=='; one advantage of data urls is that the resulting image is available immediately without another round trip to the server.
...using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background.
...because 24-bit png images include a full 8-bit alpha channel, unlike gif and 8-bit png images, it can be placed onto any background without worrying about a matte color.
...And 4 more matches

Matrix math for the web - Web APIs
it can move up in the air off the table and around the air in space.
... first, here's code that rotates a point around the origin without using matrices.
...below is the representation of a rotation about the x axis: let sin = math.sin; let cos = math.cos; // note: there is no perspective in these transformations, so a rotation // at this point will only appear to only shrink the div let a = math.pi * 0.3; //rotation amount in radians // rotate around z axis let rotatezmatrix = [ cos(a), -sin(a), 0, 0, sin(a), cos(a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; view on jsfiddle here are a set of functions that return rotation matrices for rotating around each of the three axes.
...And 4 more matches

Using bounded reference spaces - Web APIs
introduction a bounded reference space is one which represents an xr environment in which the user is able to move around physically in the real world while being tracked by the xr hardware, with their movements being then transposed into the simulation.
... a physical space with enough room to move around safely.
...these points go around the room in a clockwise direction.
...And 4 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
to round off this set of guides to css grid layout, i am going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout.
... * {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a...
...i find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements.
...And 4 more matches

Basic Shapes - CSS: Cascading Style Sheets
inset() the inset() type defines a rectangle, which may not seem very useful as simply floating an item will give you a rectangular shape around it.
... .shape { float: left; shape-outside: inset(20px 10px 20px 10px round 10px); } using the same rules as we use for the margin shorthand, you can set more than one offset at once.
...so, the above rules could also be described as: .shape { float: left; shape-outside: inset(20px 10px round 10px); } in the example below we have an inset() shape used to pull content over the floated element.
...And 4 more matches

Shorthand properties - CSS: Cascading Style Sheets
for instance, the css background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position.
... similarly, the most common font-related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand.
...therefore: background-color: red; background: url(images/bg.gif) no-repeat left top; will not set the color of the background to red but to background-color's default, transparent, as the second rule has precedence.
...And 4 more matches

align-content - CSS: Cascading Style Sheets
the css align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
... syntax /* basic positional alignment */ /* align-content does not take left and right values */ align-content: center; /* pack items around the center */ align-content: start; /* pack items from the start */ align-content: end; /* pack items from the end */ align-content: flex-start; /* pack flex items from the start */ align-content: flex-end; /* pack flex items from the end */ /* normal alignment */ align-content: normal; /* baseline alignment */ align-content: baseline; align-content: first baseline; align-content:...
... last baseline; /* distributed alignment */ align-content: space-between; /* distribute items evenly the first item is flush with the start, the last is flush with the end */ align-content: space-around; /* distribute items evenly items have a half-size space on either end */ align-content: space-evenly; /* distribute items evenly items have equal space around them */ align-content: stretch; /* distribute items evenly stretch 'auto'-sized items to fit the container */ /* overflow alignment */ align-content: safe center; align-content: unsafe center; /* glob...
...And 4 more matches

shape-outside - CSS: Cascading Style Sheets
the shape-outside css property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.
... by default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
...the float area determines the shape around which inline content (float elements) wrap.
...And 4 more matches

<transform-function> - CSS: Cascading Style Sheets
rotation rotate() rotates an element around a fixed point on the 2d plane.
... rotate3d() rotates an element around a fixed axis in 3d space.
... rotatex() rotates an element around the horizontal axis.
...And 4 more matches

Web video codec guide - Web media technologies
this happens when an algorithm that uses blocks that span across a sharp boundary between an object and its background.
... note the blue and pink fringes around the edges of the star above (as well as the stepping and other significant compression artifacts).
... note the blockiness of the colors in the plumage of the bald eagle in the photo above (and the snowy owl in the background).
...And 4 more matches

Mobile first - Progressive web apps (PWAs)
anyone who has ever tried to enter data into a form on a mobile device, or even just navigated around a complex site, knows this well.
...of course, your users will be concentrating on what they're doing, but they are likely to be in a car with bad lighting, or in a noisy bar with the sport on tv in the background!
...{ display: none; } article, nav { display: block; } nav ul { text-align: center; } nav li { display: inline; } nav li a { border-right: 1px solid #ad66d5; border-bottom: none; display: inline-block; padding: 0 5px; font-size: 1.6em; } nav li:last-child a { border-right: none; } } @media (min-width: 600px) { html { background: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto; background: url(../img/firefox-os.png) bottom left no-repeat, linear-gradient(to bottom, #fff, #eee); } .main > p { background: rgba(255,255,255,0.3); } nav li a { padding: 0 10px; font-size: 2em; } } the first one cancels out the css display: table behaviour, hides th...
...And 4 more matches

SVG documentation index - SVG: Scalable Vector Graphics
67 enable-background deprecated, svg, svg attribute the enable-background attribute specifies how the accumulation of the background image is managed.
... 146 opacity svg, svg attribute the opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.
... 231 unicode-bidi svg, svg attribute the unicode-bidi attribute specifies how the accumulation of the background image is managed.
...And 4 more matches

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
passing around functions/code as strings often you'll want to pass functions or code to other functions, most notoriously settimeout and addeventlistener.
... often this is done passing around strings.
...settimeout("alert('" + xhr.responsetext + "');", 100); // attacker manipulated responsetext to contain "attack!'); format_computer(); alert('done" settimeout("alert('attack!'); format_computer(); alert('done');", 100); as a general rule of thumb, just don't pass code around as strings and execute it by calling eval, settimeout and friends.
...And 3 more matches

The Box Model - Archive of obsolete content
we recommend you play around with it for a while to get an idea of how the basic parts of the box model work.
...the margin determines the space between an element and the elements surrounding it, while the padding determines the space between the borders of a container element and its child nodes, kind of like an inner margin.
...you should avoid using long blocks text, and also avoid designing your ui so that everything fits just right around text.
...And 3 more matches

In-Depth - Archive of obsolete content
-moz-border-radius rounds the corners of a box.
...this will flip it around so items inside of this box will be displayed bottom to top and right to left.
...also in the communicator.css add this code: .toolbar-primary-icon { width: 100px; background-repeat: no-repeat; background-position: top; } open up \classic\skin\classic\navigator\navigator.css and scroll down to the bottom.
...And 3 more matches

XUL Questions and Answers - Archive of obsolete content
a workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument.
...(server can just send the xul code to use for popup - alternatively it can send generic xml describing the attributes of the items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/item background color with javascript?
... to set the background color you need to set the property for the cell/row and not for the item.
...And 3 more matches

Building a Theme - Archive of obsolete content
introduction this tutorial will take you through the steps required to build a very basic theme - one which updates the background color of the toolbars in firefox.
...to workaround this, disable hardware acceleration in firefox' options.
... for this tutorial, we're going to update the background color of the toolbars.
...And 3 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
@media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread.
...in order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/: keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows.
... style inspector's bread crumb buttons are hard to read the text labels of breadcrumbs on the style inspector (tools > web developer > inspect) are too similar to the background colors making them very hard to read.
...And 3 more matches

Mobile accessibility - Learn web development
you can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.
... you can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it).
...to use it: twist two fingers around on the screen like you are turning a dial.
...And 3 more matches

Creating fancy letterheaded paper - Learn web development
objective: to test comprehension of css box model, and other box-related features such as implementing backgrounds.
... add a background declaration to the letter that: fixes the top image to the top of the letter fixes the bottom image to the bottom of the letter adds a semi-transparent gradient over the top of both of the previous backgrounds that gives the letter a bit of texture.
... add another background declaration that just adds the top image to the top of the letter, as a fallback for browsers that don't support the previous declaration.
...And 3 more matches

CSS building blocks - Learn web development
this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.
...the sub-articles are as follows: type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items.
... backgrounds and borders in this lesson we will take a look at some of the creative things you can do with css backgrounds and borders.
...And 3 more matches

Legacy layout methods - Learn web development
layout and grid systems before css grid layout it may seem surprising to anyone coming from a design background that css didn’t have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs.
...they work by giving items a size, and pushing them around to line them up in a way that looks like a grid.
... * { box-sizing: border-box; } body { width: 980px; margin: 0 auto; } .wrapper { padding-right: 20px; } now use the row container that is wrapped around each row of the grid to clear one row from another.
...And 3 more matches

Multiple-column layout - Learn web development
there is no way to make one column bigger than other columns, or to change the background or text color of a single column.
... using your example above, change the size of the gap by adding a column-gap property: .container { column-width: 200px; column-gap: 20px; } you can play around with different values — the property accepts any length unit.
... spanning the columns body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); } h2 { column-span: all; background-color: rgb(79, 185, 227); color: white; padding: .5em; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 3 more matches

Example 1 - Learn web development
- */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; ...
...padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul cla...
...* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; ...
...And 3 more matches

The web and web standards - Learn web development
this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
... fast forward to 1989, and timbl wrote information management: a proposal and hypertext at cern; these two publications together provided the background for how the web would work.
... for example, the html living standard describes exactly how html (all the html elements, and their associated apis, and other surrounding technologies) should be implemented.
...And 3 more matches

A first splash into JavaScript - Learn web development
you got it right!'; lastresult.style.backgroundcolor = 'green'; loworhi.textcontent = ''; setgameover(); } else if (guesscount === 10) { lastresult.textcontent = '!!!game over!!!'; loworhi.textcontent = ''; setgameover(); } else { lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = ...
... guesscount = 1; const resetparas = document.queryselectorall('.resultparas p'); for(let i = 0 ; i < resetparas.length ; i++) { resetparas[i].textcontent = ''; } resetbutton.parentnode.removechild(resetbutton); guessfield.disabled = false; guesssubmit.disabled = false; guessfield.value = ''; guessfield.focus(); lastresult.style.backgroundcolor = 'white'; randomnumber = math.floor(math.random() * 100) + 1; } </script> </body> </html> have a go at playing it — familiarize yourself with the game before you move on.
...you got it right!'; lastresult.style.backgroundcolor = 'green'; loworhi.textcontent = ''; setgameover(); } else if (guesscount === 10) { lastresult.textcontent = '!!!game over!!!'; setgameover(); } else { lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess was too low!'; } else if(userguess > randomnumber) { ...
...And 3 more matches

What went wrong? Troubleshooting JavaScript - Learn web development
syntax errors round two save your page and refresh, and you should see the error has gone.
... syntax errors round three now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of guesses.
...the instance that stores the random number that we want to guess at the start of the game should be around line number 44: let randomnumber = math.floor(math.random()) + 1; and the one that generates the random number before each subsequent game is around line 113: randomnumber = math.floor(math.random()) + 1; to check whether these lines are indeed the problem, let's turn to our friend console.log() again — insert the following line directly below each of the above two lines: console.
...And 3 more matches

Handling common accessibility problems - Learn web development
that said, this article will cover cross browser and testing issues surrounding people with disabilities, and how they use the web.
... common accessibility issues in this section we'll detail some of the main issues that arise around web accessibility, connected with specific technologies, along with best practices to follow, and some quick tests you can do to see if your sites are going in the right direction.
... color and color contrast when choosing a color scheme for your website, you should make sure that the text (foreground) color contrasts well with the background color.
...And 3 more matches

The Firefox codebase: CSS Guidelines
using variables use the variable according to its naming do this: xul|tab:hover { background-color: var(--in-content-box-background-hover); } not this: #certificateerrordebuginformation { background-color: var(--in-content-box-background-hover); } localization text direction for margins, padding and borders, use inline-start/inline-end rather than left/right.
... another adjustment to be aware of is that gecko removes all the background-image when high contrast mode is enabled.
...in general, the following colors are used: -moz-field: textbox or field background colors, also used as the background color of listboxes or trees.
...And 3 more matches

Creating localizable web applications
remember to use single quotes around the strings containing the formatting symbols.
...good: // %1$s is the persona's name, %2$s is the athor's username printf(_('%1$s by %2$s'), $persona['name'], $persona['display_username']); note the single quotes around '%1$s by %2$s'.
...in general though, we should consider implementing such decorations as css images (background-image or ::after's/::before's content) and then select them with "html[dir="rtl"] > ...".
...And 3 more matches

Mozilla Quirks Mode Behavior
make table borders gray rather than using the foreground color.
... in quirks mode, the css parser allows {} around the contents of style attributes (bug 99554).
...(bug 915053) an empty string for the background attribute sets the background url to empty only in quirks mode.
...And 3 more matches

Using dynamic styling information - Web APIs
modify a stylesheet rule with cssom <html> <head> <title>modifying a stylesheet rule with cssom</title> <style type="text/css"> body { background-color: red; } </style> <script type="text/javascript"> var stylesheet = document.stylesheets[0]; stylesheet.cssrules[0].style.backgroundcolor="blue"; </script> </head> <body> the stylesheet declaration for the body's background color is modified via javascript.
...however, this property only returns style attributes that have been set in-line (e.g, <td style="background-color: lightblue"> returns the string "background-color:lightblue", or directly for that element using element.style.propertyname, even though there may be other styles on the element from a stylesheet).
... <html> <head> <title>simple style example</title> <script type="text/javascript"> function alterstyle(elem) { elem.style.background = 'green'; } function resetstyle(elemid) { elem = document.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'.
...And 3 more matches

CanvasRenderingContext2D.drawWindow() - Web APIs
notes: if "rgba(0,0,0,0)" is used for the background color, the drawing will be transparent wherever the window is transparent.
... top-level browsed documents are usually not transparent because the user's background-color preference is applied, but iframes are transparent if the page doesn't set a background.
... if an opaque color is used for the background color, rendering will be faster because we won't have to compute the window's transparency.
...And 3 more matches

CanvasRenderingContext2D.lineCap - Web APIs
syntax ctx.linecap = "butt" || "round" || "square"; options "butt" the ends of lines are squared off at the endpoints.
... "round" the ends of lines are rounded.
... examples changing the shape of line caps this example rounds the end caps of a straight line.
...And 3 more matches

CanvasRenderingContext2D.lineJoin - Web APIs
syntax ctx.linejoin = "bevel" || "round" || "miter"; options there are three possible values for this property: "round", "bevel", and "miter".
... "round" rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments.
... the radius for these rounded corners is equal to the line width.
...And 3 more matches

Basic animations - Web APIs
the number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs.
... function clock() { var now = new date(); var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 150, 150); ctx.translate(75, 75); ctx.scale(0.4, 0.4); ctx.rotate(-math.pi / 2); ctx.strokestyle = 'black'; ctx.fillstyle = 'white'; ctx.linewidth = 8; ctx.linecap = 'round'; // hour marks ctx.save(); for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(100, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); ctx.linewidth = 5; for (i = 0; i < 60; i++) { if (i % 5!= 0) { ctx.beginpath(); ctx.moveto(117, 0); ctx.lineto(120, 0); ctx.stroke(...
... for (var i = 0; i < 10; i++) { var r = 30; var x = math.random() * (innerwidth - 2 * r) + r; var y = math.random() * (innerheight - 2 * r) + r; var t = new ob(innerwidth / 2,innerheight / 2,5,"red",math.random() * 200 + 20,2); a.push(t); } //cn.style.backgroundcolor = "#700bc8"; c.linewidth = "2"; c.globalalpha = 0.5; resize(); anim() } window.onresize = function() { resize(); } function resize() { cn.height = innerheight; cn.width = innerwidth; for (var i = 0; i < 101; i++) { ...
...And 3 more matches

Detecting device orientation - Web APIs
.beta deviceorientationevent.gamma the event handler function can look something like this: function handleorientation(event) { var absolute = event.absolute; var alpha = event.alpha; var beta = event.beta; var gamma = event.gamma; // do stuff with the new orientation data } orientation values explained the value reported for each axis indicates the amount of rotation around a given axis in reference to a standard coordinate frame.
... the deviceorientationevent.alpha value represents the motion of the device around the z axis, represented in degrees with values ranging from 0 to 360.
... the deviceorientationevent.beta value represents the motion of the device around the x axis, represented in degrees with values ranging from -180 to 180.
...And 3 more matches

Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
example: setting the background color of a paragraph getelementsbytagname(tagnamevalue) is a method available in any dom element or the root document element.
... html <body> <input type="button" value="set paragraph background color" onclick="set_background()"> <p>hi</p> <p>hello</p> </body> javascript function set_background() { // get a list of all the body elements (there will only be one), // and then select the zeroth (or first) such element mybody = document.getelementsbytagname("body")[0]; // now, get all the p elements that are descendants of the body mybodyelements = mybody.getelementsbytagname("p"); // get the second item of the list of p elements myp = mybodyelements[1]; myp.style.background = "rgb(255,0,0)"; } in this example, we set the myp variab...
...for example, if you want to set the style background color property, you just add: myp.style.background = "rgb(255,0,0)"; // setting inline style attribute creating textnodes with document.createtextnode("..") use the document object to invoke the createtextnode method and create your text node.
...And 3 more matches

TextEncoder.prototype.encodeInto() - Web APIs
if the output is expected to be long-lived, it makes sense to compute minimum allocation rounduptobucketsize(s.length), the maximum allocation size s.length * 3, and to have a chosen (as a tradeoff between memory usage and speed) threshold t such that if rounduptobucketsize(s.length) + t >= s.length * 3, you simply allocate for s.length * 3.
... otherwise, first allocate for rounduptobucketsize(s.length) and convert.
... above rounduptobucketsize() is a function that rounds up to the allocator bucket size.
...And 3 more matches

Inputs and input sources - Web APIs
a full webxr experience isn't just about showing the user a wholly virtual scene or augmenting reality by adding to or altering the world around them.
...the screen mode indicates that the target ray is determined based on the user interacting with the webxr context by engaging with the screen in some way—most likely by the viewer tapping the screen or dragging the target ray around with their fingers.
... the grip space's native origin, located around the center of the player's fist, is (0, 0, 0) within the input source's local coordinate system, while the xrspace specified by gripspace can be used at any time to convert coordinates or vectors from the input source's space into world coordinates (or vice-versa).
...And 3 more matches

Web audio spatialization basics - Web APIs
as if its extensive variety of sound processing (and other) options wasn't enough, the web audio api also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3d game.
... note: the experience is much better if you use headphones, or have some kind of surround sound system to plug your computer into.
...positionx, positiony: positiony, positionz: positionz, orientationx: orientationx, orientationy: orientationy, orientationz: orientationz, refdistance: refdistance, maxdistance: maxdistance, rollofffactor: rolloff, coneinnerangle: innercone, coneouterangle: outercone, coneoutergain: outergain }) moving the boombox now we're going to move our boombox around our 'room'.
...And 3 more matches

XRBoundedReferenceSpace.boundsGeometry - Web APIs
each point is treated as a two-dimensional point, and must be located at ground level (that is, its y coordinate must be 0).
... usage notes bounded reference spaces always have their origin located at ground level, where y is 0.
... in order to reduce the risk of the room boundaries being used for fingerprinting purposes, each point in the boundsgeometry array may be rounded or adjusted by some amount.
...And 3 more matches

Color contrast - Accessibility
the color contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.
... examples let's have a look at some simple html and css code: <div class="good">good contrast</div> <div class="bad">bad contrast</div> div { /* general div styles here */ } .good { background-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color.
... the "good" <div> has a light purple background, which makes the text easy to read: example1 <div class="good"> good contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .good { background-color: #fae6fa; } the "bad" <div> on the other hand has a very dark purple background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution when c...
...And 3 more matches

Understandable - Accessibility
3.1.2 language of parts (aa) in cases where the content of a page includes words or phrases that are in a different language to the primary language, use the lang attribute on an element wrapped around the term in question (e.g.
...your site should provide a glossary that contains definitions of such words/terms that you can then link to when they appear, or at the very least provide definitions somewhere in the surrounding text, or in a description list at the bottom of the page.
...a better way to handle this is to again provide links to glossary pages containing the acronym expansion and explanation, or at the very least include them in the surrounding text in context.
...And 3 more matches

shape - CSS: Cascading Style Sheets
the shape css media feature can be used to test the shape of the device to distinguish recrangular and round displays.
... syntax the shape descrete feature is specified as one of two acceptable strings, either rect reprsenting a rectangular screen or round representing a circular, oval or elliptical screen.
... rect the shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate.
...And 3 more matches

Cubic Bezier Generator - CSS: Cascading Style Sheets
canvas.onmousedown = mousedown; canvas.onmouseup = mouseup; } else { alert('you need safari or firefox 1.5+ to see this demo.'); } } function cx(x) { return x * scaling + rulers; } function reversex(x) { return (x - rulers) / scaling; } function lx(x) { //used when drawing vertical lines to prevent subpixel blur var result = cx(x); return math.round(result) == result ?
... result + 0.5 : result; } function cy(y) { return (1 - y) * scaling + margin; } function reversey(y) { return (margin - y) / scaling + 1; } function ly(y) { // used when drawing horizontal lines to prevent subpixel blur var result = cy(y); return math.round(result) == result ?
...okestyle = "black"; // draw the y axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i * 10) / 10, -3 * basic_scale_size + cx(0), cy(i) + 4); // limitation the constant 4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.f...
...And 3 more matches

Using CSS custom properties (variables) - CSS: Cascading Style Sheets
as mentioned earlier, you use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value: element { background-color: var(--main-bg-color); } first steps with custom properties let's start with this simple css that applies the same color to elements of different classes: .one { color: white; background-color: brown; margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display:...
... inline-block; } .three { color: white; background-color: brown; margin: 10px; width: 75px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; } we'll apply it to this html: <div> <div class="one">1:</div> <div class="two">2: text <span class="five">5 - more text</span></div> <input class="three"> <textarea class="four">4: lorem ipsum</textarea> </div> ...
...the background color is set to brown in several places.
...And 3 more matches

Visual formatting model - CSS: Cascading Style Sheets
in addition, some of the terminologies around the display have been updated and clarified in the years since css2.
...in order to fix the box tree, an anonymous box is created around that run of text.
...multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted.
...And 3 more matches

animation - CSS: Cascading Style Sheets
<button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%...
...%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2...
...c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20...
...And 3 more matches

border-image - CSS: Cascading Style Sheets
the border-image css property draws an image around a given element.
...-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
...the source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based border image!</div> css to match the size of a single diamond, we will use a value of 81 divided by 3, or 27, for slicing the image into corner and edge regions.
...And 3 more matches

justify-content - CSS: Cascading Style Sheets
the css justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
... syntax /* positional alignment */ justify-content: center; /* pack items around the center */ justify-content: start; /* pack items from the start */ justify-content: end; /* pack items from the end */ justify-content: flex-start; /* pack flex items from the start */ justify-content: flex-end; /* pack flex items from the end */ justify-content: left; /* pack items from the left */ justify-content: right; /* pack items from the right */ /* baseline a...
...lignment */ /* justify-content does not take baseline values */ /* normal alignment */ justify-content: normal; /* distributed alignment */ justify-content: space-between; /* distribute items evenly the first item is flush with the start, the last is flush with the end */ justify-content: space-around; /* distribute items evenly items have a half-size space on either end */ justify-content: space-evenly; /* distribute items evenly items have equal space around them */ justify-content: stretch; /* distribute items evenly stretch 'auto'-sized items to fit ...
...And 3 more matches

opacity - CSS: Cascading Style Sheets
thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.
... if you do not want to apply opacity to child elements, use the background property instead.
... for example: background: rgba(0, 0, 0, 0.4); accessibility concerns if text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
...And 3 more matches

transform-origin - CSS: Cascading Style Sheets
the transformation origin is the point around which a transformation is applied.
... left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1">&nbsp;</div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } transform: rotate(30deg); <div class="box2">&nbsp;</div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transf...
...orm-origin: 0 0; <div class="box3">&nbsp;</div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 100% 100%; <div class="box4">&nbsp;</div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5">&nbsp;</div> .box...
...And 3 more matches

Challenge solutions - Developer guides
solution one way to do this is to put comment delimiters around the rule for .carrot: /* .carrot { color: orange; } */ text styles big initial letters challenge without changing anything else, make all six initial letters twice the size in the browser's default serif font.
... solution the following values are reasonable approximations of the named colors: strong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ } content add an image challenge add a one rule to your stylesheet so that it displays the image at the start of each line.
...lution add a rule to the body element (parent of the headings) to reset a new counter, and one to display and increment the counter on the headings: /* numbered headings */ body {counter-reset: headnum;} h3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea.
...And 3 more matches

Orientation and motion data explained - Developer guides
the x axis follows along the ground plane, perpendicular to the y axis and positive toward the east (and therefore negative toward the west).
... the y axis follows along the ground plane, and is positive toward true north (that is, the north pole, not magnetic north) and negative toward true south.
... the z axis is perpendicular to the ground plane; think of it as a line drawn between the device and the center of the earth.
...And 3 more matches

<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
the html bidirectional isolate element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
...some other characters (such as spaces and some punctuation) are treated as neutral and are assigned directionality based on that of their surrounding characters.
... the <bdi> element is used to wrap a span of text and instructs the bidirectional algorithm to treat this text in isolation from its surroundings.
...And 3 more matches

<body>: The Document Body element - HTML: Hypertext Markup Language
background uri of a image to use as a background.
... this method is non-conforming, use css background property on the element instead.
... bgcolor background color for the document.
...And 3 more matches

<tbody>: The Table Body element - HTML: Hypertext Markup Language
bgcolor the background color of the table.
... as this attribute is deprecated, use the css background-color property instead.
...the cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using text-align thead > tr > th { background-color: #cce; font-size: 18px; border-bottom: 2px solid #999; } finally, header cells contained within the <thead> block are given additional styling.
...And 3 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
you can also read our discussion on the basics of responsive design, if you need some more background information and basics.
... css, which is quite weighty, so we'll go through it in parts: @media all and (max-width: 480px) { x-card:nth-child(1), x-card:nth-child(2), x-card:nth-child(3) { width: 100%; float: none; padding: 0; } button { margin-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.
... css background images for css background images this is a fairly easy problem to solve.
...And 3 more matches

in - SVG: Scalable Vector Graphics
fourteen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <fegaussianblur>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile> usage notes value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes sourcegraphic this keyword represents the graphics elements that were the original input into the <filter> element.
... backgroundimage this keyword represents an image snapshot of the svg document under the filter region at the time that the <filter> element was invoked.
... backgroundalpha same as backgroundimage except only the alpha channel is used.
...And 3 more matches

New Skin Notes - Archive of obsolete content
--nickolay 04:43, 25 aug 2005 (pdt) the skin won't be that different -- it will just have the editor tools moved around.
...--nickolay 09:19, 25 aug 2005 (pdt) (moving this to a new item) on the contrary, the list of categories current page belongs to, should be near the footer (see mdc:policies_and_guidelines page) (dria: fix catlinks style) the arrows that appear if you select "enhanced recent changes" in your preferences have an ugly border around them.
...there are some other changes i need to make, however, so i'll try to fix it up a bit while i'm digging around in there.
...And 2 more matches

Example Sticky Notes - Archive of obsolete content
view this example <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme,&nbsp;inc.
...--> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element.
...oke="#ffffff" stroke-width="1px"> <svg:circle cx="25px" cy="12px" r="12" fill="#ff0000" transform="translate(0,0)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#00ff00" transform="translate(7,12)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#0000ff" transform="translate(-7,12)"/> </svg:g> </svg:svg> <children/> </content> <implementation> <!-- here and futher cdata wrappers around javascript code are not mandatory but recommended.
...And 2 more matches

Things I've tried to do with XUL - Archive of obsolete content
this is a grab-bag type of faq, with a list of things that should work (hopefully with bug numbers), things that don't work (hopefully with explanations), and workarounds for both of the above.
... <vbox flex="1"> <box height="30%" flex="1" style="background: green;"/> <box height="20%" flex="1" style="background: red;"/> <box height="50%" flex="1" style="background: blue;"/> </vbox> workaround: no real good ones; the closest i've gotten is to use a div instead of a box container: <html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height: 30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style...
...="background: green;"/> <box style="height: 50%" flex="1" style="background: green;"/> </html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated.
...And 2 more matches

XUL accessibility guidelines - Archive of obsolete content
it is hoped that these guidelines will be sufficiently clear and detailed that everyone—even someone with no previous background in accessibility—can understand them.
...accessibility channel for general discussion around internet accessibility with logger.
... tab order jumps around unexpectedly.
...And 2 more matches

Browser Detection and Cross Browser Support - Archive of obsolete content
gecko was designed from the ground up to be compliant with the w3c html, w3c css, w3c xml, w3c dom, and ecmascript (javascript) standards.
...an implicit assumption by many web authors around this time was the there were only two types of browser available...
... you can also use detailed information regarding a browser's version to work around bugs in specific releases of a browser.
...And 2 more matches

Browser Feature Detection - Archive of obsolete content
e() true true true document.write() true true true document.writeln() true true true document.getelementbyid() true true true document.getelementsbyname() true true true dom css 1 support for properties/methods in document.body.style name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 background true true true backgroundattachment true true true backgroundcolor true true true backgroundimage true true true backgroundrepeat true true true border true true true borderspacing true false true borderstyle true true true bordertop true true tr...
... true true true verticalalign true true true whitespace true true true width true true true wordspacing true true true dom css 2 support for properties/methods in document.body.style</caption> name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 azimuth true false false backgroundposition true true true bordercollapse true true true borderspacing true false true bordertopcolor true true true borderrightcolor true true true borderbottomcolor true true true borderleftcolor true true true bordertopstyle true true true borderrightstyle...
... false}, {name: 'createentityreference', 'supported': false}, {name: 'getelementsbytagname', 'supported': false}, {name: 'importnode', 'supported': false}, {name: 'createelementns', 'supported': false}, {name: 'createattributens', 'supported': false}, {name: 'getelementsbytagnamens', 'supported': false}, {name: 'getelementbyid', 'supported': false} ], 'domcss1': [ {name: 'background', 'supported': false}, {name: 'backgroundattachment', 'supported': false}, {name: 'backgroundcolor', 'supported': false}, {name: 'backgroundimage', 'supported': false}, {name: 'backgroundrepeat', 'supported': false}, {name: 'border', 'supported': false}, {name: 'borderspacing', 'supported': false}, {name: 'borderstyle', 'supported': false}, {name: 'bordertop', 'supported': false},...
...And 2 more matches

Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
<style type="text/css"> <!-- body {background-color: blue; color: yellow;} --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> this example illustrates that a conformant browser can ignore content inside of comments.
...- xmlguru) inline style and script containing double dashes another problem with using comments to surround javascript in xhtml is related to the problems which can occur if comments contain double dashes (——).
... } //]]> </script> examples using css rules in inline style within comments example 1 - xhtml 1.0 strict as text/html this example illustrates the behavior of xhtml served as text/html when css rules are contained inline and surrounded by comments.
...And 2 more matches

A cool-looking box - Learn web development
objective: to test comprehension of the css box model and other box-related features such as borders and backgrounds.
... styling the box we'd like you to style the provided <p>, giving it the following: a reasonable width for a large button, say around 200 pixels.
... a slight increase in font size, to around 17-18 pixel computed style.
...And 2 more matches

Cascade and inheritance - Learn web development
the first two selectors are competing over the styling of the link's background color — the second one wins and makes the background color blue because it has an extra id selector in the chain: its specificity is 201 vs.
... let's walk through this to see what's happening — try removing some of the properties to see what happens if you are finding it hard to understand: you'll see that the third rule's color and padding values have been applied, but the background-color hasn't.
...since ids have an even higher specificity than classes (you can only have one element with each unique id on a page, but many elements with the same class — id selectors are very specific in what they target), the red background color and the 1 pixel black border should both be applied to the 2nd element, with the first element getting the gray background color, and no border, as specified by the class.
...And 2 more matches

Organizing your CSS - Learn web development
some developers put all of the rules onto a single line, like so: .box { background-color: #567895; } h2 { background-color: black; color: white; } other developers prefer to break everything onto a new line: .box { background-color: #567895; } h2 { background-color: black; color: white; } css doesn't mind which one you use.
... you may have used a css property in a specific way to get around older browser incompatibilities, for example: .box { background-color: red; /* fallback for older browsers that don't support gradients */ background-image: linear-gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a little non-obvious.
... other tools that can help css itself doesn't have much in the way of in-built organisation, therefore you need to do the work to create consistency and rules around how you write css.
...And 2 more matches

Test your skills: Selectors - Learn web development
give h2 headings a blue background and white text.
... selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow background.
... if the element with a class of alert also has a class of stop, make the background red.
...And 2 more matches

Flexbox - Learn web development
now, add the following to the bottom of the example's css: div { display: flex; align-items: center; justify-content: space-around; } refresh the page and you'll see that the buttons are now nicely centered, horizontally and vertically.
... the value we've used above, space-around, is useful — it distributes all the items evenly along the main axis, with a bit of space left at either end.
... there is another value, space-between, which is very similar to space-around except that it doesn't leave any space at either end.
...And 2 more matches

Client-side form validation - Learn web development
if it gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to fix their data.
...(required)</label> <input id="choose" name="i_like" required> <button>submit</button> </form> note the css that is included in the example file: input:invalid { border: 2px dashed red; } input:invalid:required { background-image: linear-gradient(to right, pink, lightgreen); } input:valid { border: 2px solid black; } this css causes the input to have a red dashed border when it is invalid and a more subtle solid black border when valid.
... we also added a background gradient when the input is required and invalid.
...And 2 more matches

Styling web forms - Learn web development
before we start coding, we need three additional assets: the postcard background — download this image and save it in the same directory as your working html file.
...l-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'typewriter'; src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), url('fonts/veteran_typewriter-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font : 1.3rem sans-serif; padding : 0.5em; margin : 0; background : #222; } form { position : relative; width : 740px; height : 498px; margin : 0 auto; padding: 1em; box-sizing: border-box; background : #fff url(background.jpg); /* we create our grid */ display : grid; grid-gap : 20px; grid-template-columns : repeat(2, 1fr); grid-template-rows : 10em 1em 1em 1em; } notice that we've used some css grid and flexbox to lay out the f...
...simply put, we remove their borders and backgrounds, and redefine their padding and margin: input, textarea { font : 1.4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0 10px; margin : 0; width : 80%; background : none; } when one of these fields gains focus, we highlight them with a light grey, transparent, background (it is always important to have focus style, for usability and keyboard accessibility)...
...And 2 more matches

Getting started with HTML - Learn web development
</textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = cod...
... inline elements are contained within block-level elements, and surround only small parts of the document’s content.
... 95%"> &lt;p&gt;a link to my favorite website.&lt;/p&gt; </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code...
...And 2 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
in any case, these functions are used for running constant animations and other background processing on a web site or application.
...we arrived at our final value of 17 via the formula 1000 milliseconds / 60hz, and then rounded it up.
... rounding up is a good idea; if you rounded down, the browser might try to run the animation faster than 60 fps, and it wouldn't make any difference to the animation's smoothness, anyway.
...And 2 more matches

Build your own function - Learn web development
this one is going to involve slightly more work — we are going to set it so that depending on what the msgtype parameter is set to, the function will display a different icon and a different background color.
...} rule: padding-left: 82px; background-position: 25px center; background-repeat: no-repeat; now we need to add code to our displaymessage() function to handle displaying the icons.
... add the following block just above the closing curly brace (}) of your function: if (msgtype === 'warning') { msg.style.backgroundimage = 'url(icons/warning.png)'; panel.style.backgroundcolor = 'red'; } else if (msgtype === 'chat') { msg.style.backgroundimage = 'url(icons/chat.png)'; panel.style.backgroundcolor = 'aqua'; } else { msg.style.paddingleft = '20px'; } here, if the msgtype parameter is set as 'warning', the warning icon is displayed and the panel's background color is set to red.
...And 2 more matches

Looping code - Learn web development
let's say we wanted to draw 100 random circles on a <canvas> element (press the update button to run the example again and again to see different random sets): hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>random canvas circles</title> <style> html { width: 100%; height: inherit; background: #ddd; } canvas { display: block; } body { margin: 0; } button { position: absolute; top: 5px; left: 5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); cons...
... inside the loop, we find the square root of each number using math.sqrt(i), then check whether the square root is an integer by testing whether it is the same as itself when it has been rounded down to the nearest integer (this is what math.floor() does to the number it is passed).
... if the square root and the rounded down square root do not equal one another (!==), it means that the square root is not an integer, so we are not interested in it.
...And 2 more matches

Object building practice - Learn web development
our little balls will bounce around on the screen, and change color when they touch each other.
... some very simple styles, which mainly serve to style and position the <h1>, and get rid of any scrollbars or margin around the edge of the page (so that it looks nice and neat).
... modeling a ball in our program our program will feature lots of balls bouncing around the screen.
...And 2 more matches

Accessibility in React - Learn web development
you'll see a thick, dashed outline around that input.
...press the tab key, and you will see the outline appear around the "add" button beneath the input.
...keep going until the focus indicator is around the first "edit" button.
...And 2 more matches

Beginning our React todo list - Learn web development
o src/index.css so that it replaces what's currently there: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { ...
... border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .
...btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top:...
...And 2 more matches

Starting our Svelte Todo list app - Learn web development
contents of the file public/global.css with the following: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { ...
... border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } ...
....btn__primary { color: #fff; background-color: #000; } .btn__primary:disabled { color: darkgrey; background-color:#565656; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-lar...
...And 2 more matches

Command line crash course - Learn web development
the terminal originates from around the 1950s-60s and its original form really doesn’t resemble what we use today (for that we should be thankful).
...out of the box, here are just a few of the things the command line can do, along with names of relevant tools in each case: navigate your computer’s file system along with base level tasks such as create, copy, rename and delete: move around your directory structure: cd create directories: mkdir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific urls: curl search for fragments of text inside larger bodies of text: grep view a file's contents page by page: less, cat manipulate and transform streams of text (for example c...
...this usually becomes easier as you get more familiar with the structure of your file system, but if you are not sure of the path you can usually figure it out with a combination of the ls command (see below), and by clicking around in your explorer/finder window to see where a directory is, relative to where you currently are.
...And 2 more matches

Debugging on Mac OS X
macos 10.15 went further, requiring applications to be notarized with hardened runtime enabled in order to launch (ignoring workarounds.) when run on earlier macos versions, notarization and hardened runtime settings have no effect.
...to workaround this problem, remove the quarantine extended attribute from the downloaded nightly: $ xattr -r -d com.apple.quarantine /path/to/nightly.app local builds local builds of mozilla-central do not enable hardened runtime and hence do not have debugging restrictions.
...to work around that, the steps below have you initialize the project outside the mozilla source tree, close the project, copy the .xcodeproj project "file" into the source tree, and then reopen the project to finish setting it up.
...And 2 more matches

mozbrowserloadend
detail the detail property returns an anonymous javascript object with the following properties: backgroundcolor a domstring representing the main background color of the browser <iframe> content, expressed as an rgb value.
... can be used to make the theme of the surrounding ui complement the theme of the currently loaded content, for example.
...in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience.
...And 2 more matches

HTTP Cache
specified, this storage will operate over all existing app caches the service also provides methods to clear the whole disk and memory cache content or purge any intermediate memory structures: clear – after it returns, all entries are no longer accessible through the cache apis; the method is fast to execute and non-blocking in any way; the actual erase happens in background purgefrommemory – removes (schedules to remove) any intermediate cache data held in memory for faster access (more about the intermediate cache below) nsiloadcontextinfo distinguishes the scope of the storage demanded to open.
... the cache is using a single background thread where any io operations like opening, reading, writing and erasing happen.
... opening priority cache files also file dooming happens here to prevent races read_priority: top level documents and head blocking script cache files are open and read as the first open read: any normal priority content, such as images are open and read here write: writes are processed as last, we cache data in memory in the mean time management: level for the memory pool and cacheentry background operations close: file closing level index: index is being rebuild here evict: files overreaching the disk space consumption limit are being evicted here note: special case for eviction - when an eviction is scheduled on the io thread, all operations pending on the open level are first merged to the open_priority level.
...And 2 more matches

Midas
this command will set the background color of the document.
...if there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.
... decreasefontsize this command will add a <small> tag around selection or at insertion point.
...And 2 more matches

Index
nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues.
...nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues.
...nss has some flexibility that allows applications to use their own, independent database engine while keeping a shared database and working around the access issues.
...And 2 more matches

Index
this is no accident, as mozilla:: primitives are merely bare-minimum wrappers around nspr's.
...it avoids the background color if it can be discerned and ignores sufficiently transparent colors.
... 318 nsiaccessibletext accessibility, interfaces, interfaces:scriptable, needscontent, xpcom interface reference get the accessible and start/end offsets around the given offset.
...And 2 more matches

nsILocalFileMac
obsolete since gecko 1.9.2 boolean ispackage(); void launchwithdoc(in nsilocalfile adoctoload, in boolean alaunchinbackground); void opendocwithapp(in nsilocalfile aapptoopenwith, in boolean alaunchinbackground); void setfiletypeandcreatorfromextension(in string aextension); obsolete since gecko 1.9.2 void setfiletypeandcreatorfrommimetype(in string amimetype); obsolete since gecko 1.9.2 attributes attribute type description bundledisplayname astring returns the display name of the application bundle (usua...
...void launchwithdoc( in nsilocalfile adoctoload, in boolean alaunchinbackground ); parameters adoctoload must not be null.
...alaunchinbackground true if the application should not come to the front.
...And 2 more matches

nsISyncJPAKE
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void final(in acstring ab, in acstring agvb, in acstring arb, in acstring ahkdfinfo, out acstring aaes256key, out acstring ahmac256key); void round1(in acstring asignerid, out acstring agx1, out acstring agv1, out acstring ar1, out acstring agx2, out acstring agv2, out acstring ar2); void round2(in acstring apeerid, in acstring apin, in acstring agx3, in acstring agv3, in acstring ar3, in acstring agx4, in acstring agv4, in acstring ar4, out acstring aa, out acstring agva, out acstring ara); methods final() perform the final step of the...
... round1() perform first round of the jpake exchange.
... void round1( in acstring asignerid, out acstring agx1, out acstring agv1, out acstring ar1, out acstring agx2, out acstring agv2, out acstring ar2 ); parameters asignerid string identifying the signer.
...And 2 more matches

WebIDL bindings
also, unless stated otherwise, nullable types are represented by wrapping nullable<> around the base type.
... in all cases, optional arguments which do not have a default value are represented by wrapping const optional<>& around the representation of the argument type.
... if the argument type is a c++ reference, it will also become a nonnull<> around the actual type of the object in the process.
...And 2 more matches

CSS Painting API - Web APIs
the css painting api — part of the css houdini umbrella of apis — allows developers to write javascript functions that can draw directly into an element's background, border, or content.
...you can then apply these values to properties like background-image to set complex custom backgrounds on an element.
... for example: aside { background-image: paint(mypaintedimage); } the api defines paintworklet, a worklet that can be used to programmatically generate an image that responds to computed style changes.
...And 2 more matches

CanvasRenderingContext2D - Web APIs
possible values: butt (default), round, square.
...possible values: round, bevel, miter (default).
... fill and stroke styles fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.
...And 2 more matches

Drawing shapes with canvas - Web APIs
<html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); roundedrect(ctx, 12, 12, 150, 150, 15); roundedrect(ctx, 19, 19, 150, 150, 9); roundedrect(ctx, 53, 53, 49, 33, 10); roundedrect(ctx, 53, 119, 49, 16, 6); roundedrect(ctx, 135, 53, 49, 33, 10); roundedrect(ctx, 135, 119, 25, 49, 10); ctx.beginpath(); ctx.arc(37, 37, 13, math.pi / 7, -math.pi / 7, false); ctx.lineto(31, 37); ctx.fill(); for (var i = 0; i < 8; i+...
... 103, 100, 106, 103, 106); ctx.beziercurveto(106, 106, 107, 103, 107, 101); ctx.beziercurveto(107, 99, 106, 96, 103, 96); ctx.fill(); ctx.fillstyle = 'black'; ctx.beginpath(); ctx.arc(101, 102, 2, 0, math.pi * 2, true); ctx.fill(); ctx.beginpath(); ctx.arc(89, 102, 2, 0, math.pi * 2, true); ctx.fill(); } } // a utility function to draw a rectangle with rounded corners.
... function roundedrect(ctx, x, y, width, height, radius) { ctx.beginpath(); ctx.moveto(x, y + radius); ctx.lineto(x, y + height - radius); ctx.arcto(x, y + height, x + radius, y + height, radius); ctx.lineto(x + width - radius, y + height); ctx.arcto(x + width, y + height, x + width, y + height-radius, radius); ctx.lineto(x + width, y + radius); ctx.arcto(x + width, y, x + width - radius, y, radius); ctx.lineto(x + radius, y); ctx.arcto(x, y, x, y + radius, radius); ctx.stroke(); } the resulting image looks like this: screenshotlive sample we won't go over this in detail, since it's actually surprisingly simple.
...And 2 more matches

Optimizing canvas - Web APIs
to avoid this, make sure to round all co-ordinates used in calls to drawimage() using math.floor(), for example.
... for example, let's say you have a game with a ui on top, the gameplay action in the middle, and a static background on the bottom.
...the ui would change only upon user input, the gameplay layer would change with every new frame, and the background would remain generally unchanged.
...And 2 more matches

Examples of web and XML development using the DOM - Web APIs
var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way.
... <!doctype html> <html lang="en"> <head> <title>event propagation</title> <style> #t-daddy { border: 1px solid red } #c1 { background-color: pink; } </style> <script> function stopevent(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-daddy from getting the click.
...oad="load();"> <table id="t-daddy" onclick="alert('hi');"> <tr id="tbl1"> <td id="c1">one</td> </tr> <tr> <td id="c2">two</td> </tr> </table> </body> </html> example 6: getcomputedstyle this example demonstrates how the window.getcomputedstyle method can be used to get the styles of an element that are not set using the style attribute or with javascript (e.g., elt.style.backgroundcolor="rgb(173, 216, 230)").
...And 2 more matches

Service Worker API - Web APIs
they will also allow access to push notifications and background sync apis.
... if there is an existing service worker available, the new version is installed in the background, but not yet activated — at this point it is called the worker in waiting.
... other use case ideas service workers are also intended to be used for such things as: background data synchronization.
...And 2 more matches

Rendering and the WebXR frame animation callback - Web APIs
so if the center of the viewer's head is located at [0.0, 2.0, 0.0] (about two meters above ground level at the center of the space horizontally), we first need to render the scene from, say, [-0.032, 2.0, 0.0] (32mm to the left of center) and then render it again at [0.032, 2.0, 0.0].
...by combining that inferred depth information with other cues such as perspective, shadows, memories of what these relationships mean, and so forth, we can figure out a great deal about the world around us.
...the background color is set to fully opaque black using gl.clearcolor(); the clear depth is set to 1.0 by calling gl.cleardepth(), in order to clear all pixels regardless of how far away the object they're part of is; and finally, the frame's pixel and depth buffers are both erased by calling gl.clear(), passing in a bit mask in which both color_buffer_bit and depth_buffer_bit are set.
...And 2 more matches

Accessibility and Spacial Patterns - Accessibility
symbols which have the same luminance as their background are perceptually less securely located in space and time than are symbols with higher luminance contrast.
...the phenomenon seems to be especially problematic for symbol/background combinations that differ only in the blue channel." distance between stripes photosensitive seizures may be caused by static images as well as animation.
... for example, blue text on a gray background is easier to perceive if it is surrounded "locally" by black than by white.
...And 2 more matches

Introduction to the CSS basic box model - CSS: Cascading Style Sheets
css determines the size, position, and properties (color, background, border size, etc.) of these boxes.
...it often has a background color or background image.
...when there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e.
...And 2 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
try this in the live example — i have given the flex container a height in order that you can see how the items can be moved around inside the container.
...to cause an equal amount of space on the right and left of each item use the value space-around.
... with space-around, items have a half-size space on either end.
...And 2 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this article provides a set of mixins for those who want to mess around with flexbox using the native support of current browsers.
...rome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.
... values: flex-start (default) | flex-end | center | space-between | space-around spec: https://drafts.csswg.org/css-flexbox/#justify-content-property @mixin justify-content($value: flex-start) { @if $value == flex-start { -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; } @else if $value == flex-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; } @else if $value == space-between { -webkit-box-pack: j...
...And 2 more matches

Ordering Flex Items - CSS: Cascading Style Sheets
, i have 5 flex items, and assign order values as follows: source item 1: order: 2 source item 2: order: 3 source item 3: order: 1 source item 4: order: 3 source item 5: order: 1 these items would be displayed on the page in the following order: source item 3: order: 1 source item 5: order: 1 source item 1: order: 2 source item 2: order: 3 source item 4: order: 3 you can play around with the values in this live example below and see how that changes the order.
...therefore if a user is tabbing between the items, they could find themselves jumping around your layout in a very confusing way.
... by tabbing around any of the live examples on this page, you can see how order is potentially creating a strange experience for anyone not using a pointing device of some kind.
...And 2 more matches

Typical use cases of Flexbox - CSS: Cascading Style Sheets
we either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space.
... space distributed outside the items to distribute the space between or around the items we use the alignment properties in flexbox, and the justify-content property.
...you can change how the space is distributed using the space-around value, or where supported, space-evenly.
...And 2 more matches

In Flow and Out of Flow - CSS: Cascading Style Sheets
i’ve added a background colour to the paragraphs, and then floated the div left.
... you can see the background colour of the following paragraph running underneath, it is only the line boxes of that paragraph that have been shortened to cause the effect of wrapping content around the float.
...this is why, to make space around a floated item, you must add a margin to the item, in order to push the line boxes away from it.
...And 2 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
the float no longer applies, and i can use the css box alignment property align-self to align my content to the end of the container: * {box-sizing: border-box;} img { max-width: 100%; display: block; } .media { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-self: end; } <div class="media"> <div cla...
...to create gaps between the cards, i use a margin on the items, and then a negative margin on the container: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } ...
...the layout now works, even if there is more content in one of the cards, than the others: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } ...
...And 2 more matches

Shapes From Images - CSS: Cascading Style Sheets
the content now wraps around the star shape.
... i can use shape-margin to move the text away from the shape, giving a margin around the created shape and the text.
... in the example below i am using a similar image to the initial example, however in this image the background of the star is not fully transparent, it has a 20% opacity as created in my graphics programme.
...And 2 more matches

CSS values and units - CSS: Cascading Style Sheets
for example, if you wanted to include a background image, you might use either of the following.
... .box { background-image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be either quoted or unquoted.
...it's background color), and is defined in the css color module.
...And 2 more matches

Layout and the containing block - CSS: Cascading Style Sheets
<body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { display: block; width: 400px; height: 160px; background: lightgray; } p { width: 50%; /* == 400px * .5 = 200px */ height: 25%; /* == 160px * .25 = 40px */ margin: 5%; /* == 400px * .05 = 20px */ padding: 5%; /* == 400px * .05 = 20px */ background: cyan; } example 2 in this example, the paragraph's containing block is the <body> element, because <...
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { display: inline; background: lightgray; } p { width: 50%; /* == half the body's width */ height: 200px; /* note: a percentage would be 0 */ background: cyan; } example 3 in this example, the paragraph's containing block is <section> because the latter's position is absolute.
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { position: absolute; left: 30px; top: 30px; width: 400px; height: 160px; padding: 30px 20px; background: lightgray; } p { position: absolute; width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */ height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */ margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ background: cyan; } example 4 in this example, the paragraph's position is fixed, so its containing ...
...And 2 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
a -webkit-animation-trigger -webkit-app-region -webkit-appearance* -webkit-aspect-ratio b -webkit-backdrop-filter -webkit-background-composite -webkit-border-after** -webkit-border-after-color** -webkit-border-after-style** -webkit-border-after-width** -webkit-border-before** -webkit-border-before-color** -webkit-border-before-style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit -webkit-border-horizontal-spac...
... a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -w...
... a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function -webkit-appearance* b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-box-align**, *** -webkit-box-direction**, *** -webkit-box-flex**, *** -webkit-box-orient**, *** -webkit-box-pack**, *** -webkit-box-shadow -webkit-box-sizing -webkit-border-top-left-radius -webkit-border-top-r...
...And 2 more matches

all - CSS: Cascading Style Sheets
css body { font-size: small; background-color: #f0f0f0; color: blue; } blockquote { background-color: skyblue; color: red; } result no all property <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
... body { font-size: small; background-color: #f0f0f0; color:blue; } blockquote { background-color: skyblue; color: red; } the <blockquote> uses the browser's default styling together with a specific background and text color.
... body { font-size: small; background-color: #f0f0f0; color:blue; } blockquote { background-color: skyblue; color: red; } blockquote { all: unset; } the <blockquote> doesn't use the browser default styling: it is an inline element now (initial value), its background-color is transparent (initial value), but its font-size is still small (inherited value) and its color is blue (inherited value).
...And 2 more matches

border-style - CSS: Cascading Style Sheets
unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else.
...unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else.
... dotted displays a series of rounded dots.
...And 2 more matches

box-shadow - CSS: Cascading Style Sheets
the box-shadow css property adds shadow effects around an element's frame.
...if a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners.
...inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
...And 2 more matches

<gradient> - CSS: Cascading Style Sheets
conic gradient conic gradients transition colors progressively around a circle.
... <div class="linear-gradient">linear gradient</div> div { width: 240px; height: 80px; } .linear-gradient { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } radial gradient example a simple radial gradient.
... <div class="radial-gradient">radial gradient</div> div { width: 240px; height: 80px; } .radial-gradient { background: radial-gradient(red, yellow, rgb(30, 144, 255)); } repeating gradient examples simple repeating linear and radial gradient examples.
...And 2 more matches

mask-border-repeat - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-repeat: stretch; mask-border-repeat: repeat; mask-border-repeat: round; mask-border-repeat: space; /* vertical | horizontal */ mask-border-repeat: round stretch; /* global values */ mask-border-repeat: inherit; mask-border-repeat: initial; mask-border-repeat: unset; the mask-border-repeat property may be specified using one or two values chosen from the list of values below.
... round the source image's edge regions are tiled (repeated) to fill the gap between each border.
... formal definition initial valuestretchapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples basic usage this property doesn't appear to be supported anywhere yet.
...And 2 more matches

mask-repeat - CSS: Cascading Style Sheets
/* one-value syntax */ mask-repeat: repeat-x; mask-repeat: repeat-y; mask-repeat: repeat; mask-repeat: space; mask-repeat: round; mask-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly ...
... values <repeat-style> the one-value syntax is a shorthand for the full two-value syntax: single value two-value equivalent repeat-x repeat no-repeat repeat-y no-repeat repeat repeat repeat repeat space space space round round round no-repeat no-repeat no-repeat in the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior.
... round as the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added.
...And 2 more matches

place-content - CSS: Cascading Style Sheets
e-content: start center; place-content: end left; place-content: flex-start center; place-content: flex-end center; /* baseline alignment */ /* justify-content does not take baseline values */ place-content: baseline center; place-content: first baseline space-evenly; place-content: last baseline right; /* distributed alignment */ place-content: space-between space-evenly; place-content: space-around space-evenly; place-content: space-evenly stretch; place-content: stretch space-evenly; /* global values */ place-content: inherit; place-content: initial; place-content: unset; the first value is the align-content property value, the second the justify-content one.
... space-around the items are evenly distributed within the alignment container.
...ption value="rtl">rtl</option> </select><code>;</code><br/> <code>place-content:</code><select id="aligncontentalignment"> <option value="normal">normal</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="baseline">baseline</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly" selected>space-evenly</option> <option value="stretch">stretch</option> <option value="center">center</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="safe">safe</option> <option value="unsafe">...
...And 2 more matches

<position> - CSS: Cascading Style Sheets
it is used in the background-position and offset-anchor properties.
...| [ [ left | right ] [ <length> | <percentage> ] ] && [ [ top | bottom ] [ <length> | <percentage> ] ] ] note: the background-position property also accepts a three-value syntax.
... candidate recommendation relists links to both definitions: if css backgrounds and borders module level 3 is supported, its definition of <position> must also be used.
...And 2 more matches

Adding captions and subtitles to HTML5 video - Developer guides
no image is used for the captions button, so it is simply styled as: .controls button[data-state="subtitles"] { height:85%; text-indent:0; font-size:16px; font-size:1rem; font-weight:bold; color:#666; background:#000; border-radius:2px; } there are also other css changes that are specific to some extra javascript implementation, but these will be mentioned at the appropriate place below.
... subtitle implementation a lot of what we do to access the video subtitles revolves around javascript.
...'none' : 'block'); } }); subtitle menu css we also added some rudimentary styling for the newly created subtitles menu: .subtitles-menu { display:none; position:absolute; bottom:14.8%; right:20px; background:#666; list-style-type:none; margin:0; padding:0; width:100px; padding:10px; } .subtitles-menu li { padding:0; text-align:center; } .subtitles-menu li button { border:none; background:#000; color:#fff; cursor:pointer; width:90%; padding:2px 5px; border-radius:2px; } styling the displayed subtitles one of the less well known about and supp...
...And 2 more matches

<table>: The Table element - HTML: Hypertext Markup Language
bgcolor the background color of the table.
... to achieve a similar effect, use the css background-color property.
... border this integer attribute defines, in pixels, the size of the frame surrounding the table.
...And 2 more matches

Performance fundamentals - Web Performance
when applications are sent to the background, a visibilitychange event is fired on their documents.
...applications that drop as many loaded resources as possible when sent to the background use less memory and are less likely discarded, in the case of firefox os (see the note below).
...another benefit to this api is that animations won't run while your app isn't visible on the screen (such as if it's in the background and some other task is operating).
...And 2 more matches

Paths - SVG: Scalable Vector Graphics
in the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down.
...as mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths.
...it simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle.
...And 2 more matches

tabs - Archive of obsolete content
tabs.open({ url: "http://www.mysite.com", innewwindow: true }); // open a new tab on active window in the background.
... tabs.open({ url: "http://www.mysite.com", inbackground: true }); // open a new tab as an app tab and do something once it's open.
... inbackground boolean if present and true, the new tab will be opened to the right of the active tab and will not be active.
... activate() makes this tab active, which will bring this tab to the foreground.

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
although it was corrected in mozilla mainstream: mozilla/extensions/pref/autoconfig/src/nsldapsyncquery.cpp 1.7.2.1 by late 2004, it is still present in thunderbird 1.0.2 at least :-(, so i applied the workaround i proposed in that bug report (start_pos += 1;).
... the displayerror() function does not work properly in thunderbird 3.1: see https://bugzilla.mozilla.org/show_bu...?id=502597#c34 a usable workaround is placing the following code at the top of your autoconfig script: // enable logging.
...here's the report and workaround: bug 229271.
...the workaround is chmod 755 greprefs!

Building accessible custom components in XUL - Archive of obsolete content
<code> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); grid.spreadsheet { border: thin solid; } grid.spreadsheet label { border-bottom: 1px solid black; border-left: 1px solid black; margin: 0; padding: 3px; } grid.spreadsheet description { color: black; background-color: white; margin: 0px; padding: 2px; border-left: thin solid; border-bottom: thin solid; font-family: monospace; font-size: 12pt; text-align: center; font-weight: bold; } </code> you can see the results by installing stage-1.xpi, restarting firefox, and selecting accjax from the tools menu.
...<code> grid.spreadsheet { border: thin solid; -moz-user-focus: normal; } </code> in html documents, firefox draws a focus rectangle around the currently focused element.
...the only remaining issue is that when the spreadsheet regains focus (by pressing shift-tab, or cycling all the way around the tab order and coming back into the spreadsheet), we need to programmatically reset the focus to the previously focused cell.
...you can press tab to get onto the control itself, then you can press the arrow keys to move around within the control.

loadOneTab - Archive of obsolete content
« xul reference home loadonetab( url, referreruri, charset, postdata, loadinbackground, allowthirdpartyfixup ) loadonetab( url, { referreruri: ..., charset: ..., postdata: ..., inbackground: ..., allowthirdpartyfixup: ..., relatedtocurrent: ...
...this method works the same as addtab except for the loadinbackground parameter which allows you to choose whether to open the new tab in foreground or background.
... parameters inbackground if true the tab will be loaded in the background, if false the tab will be the newly selected tab.
... and if null or not specified, this parameter will default to the browser.tabs.loadinbackground preference.

Popup Menus - Archive of obsolete content
the menupopup element surrounds the three menuitem elements.
... the popupset element surrounds the entire popup menu declaration.
... example 2 : source view <button label="save" tooltiptext="click here to save your stuff"/> <popupset> <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <description value="click here to see more information"/> <description value="really!" style="color: red;"/> </tooltip> </popupset> <button label="more" tooltip="moretip"/> these two buttons each have a tooltip.
...the second uses a custom tooltip that has a different background color and styled text.

Stack Positioning - Archive of obsolete content
so if you set a left attribute to 400, the stack will have a width around 400 pixels plus the width of the element.
... you can use a script to adjust the value of the left and top attributes and thus make the elements move around.
...if you tried to move elements in a regular box, other elements might shuffle their positions around.
...you can use the dom functions to move the order of the elements around.

Trees - Archive of obsolete content
example tree with two columns example 1 : source view <tree flex="1"> <treecols> <treecol id="namecolumn" label="name" flex="1"/> <treecol id="addresscolumn" label="address" flex="2"/> </treecols> <treechildren/> </tree> first, the entire table is surrounded with a tree element.
...the treeitem tag would go around the entire row so that it is selectable as a whole.
... the treechildren element surrounds all of the rows.
...the treerow element surrounds all of the cells in a single row, while a treeitem element would surround a row and all of its children.

tree - Archive of obsolete content
enablecolumndrag type: boolean when set to true, the user may drag the column headers around to change the order in which they are displayed.
... enablecolumndrag type: boolean when set to true, the user may drag the column headers around to change the order in which they are displayed.
... interfaces nsiaccessibleprovider, nsidomxultreeelement, nsidomxulmultiselectcontrolelement script examples to have alternating colors for each row, use the style rules like the following: treechildren::-moz-tree-row(selected) { background-color: #ffffaa; } treechildren::-moz-tree-row(odd) { background-color: #eeeeee; } treechildren::-moz-tree-row(odd, selected) { background-color: #ffffaa; } treechildren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } if using a content tree view, use the following to get the value of the id attribute for each of the selecte...
...*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif") } treechildren::-moz-tree-row(selected) { background-color: #ffffaa; } treechildren::-moz-tree-row(odd) { background-color: #eeeeee; } treechildren::-moz-tree-row(odd, selected) { background-color: #ffffaa; } treechildren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } treechildren::-moz-tree-row(hover) {background-color: #ffffaa !important;} treechi...

Gecko Compatibility Handbook - Archive of obsolete content
browser-specific workarounds problem: code includes workarounds for bugs and browser-specific quirks.
... in older browsers, this results in the td cell tightly wrapping around the input element.
... <table border="1"> <tr> <form name="form2"> <td> <input type="text"> </td> </form> </tr> <table> this approach is commonly used to get around the fact that <form> is a block level element in html and will naturally begin on a new line in the page.
... many older versions of cross-browser apis in common use around the web such as dynapi do not support gecko for one or more of the reasons listed above.

2006-12-01 - Archive of obsolete content
xml in firefox is a major problem a major debate surrounding the use of xml for customizing rss feeds.
... basic feature that i think is a must in any web broswer a discussion revolving around the idea of having firefox automatically convert mistaken non-english characters to english so that web addresses will be completed.
... mozstorage documentation up a revisted discussion surround the mozstorage documentation.
... developping microsummary generator questions and discussion surrounding microsummaries in ff 2.0.

2006-10-27 - Archive of obsolete content
the question tony posted was that he wanted to know what was wrong with fx 1.5.0.x (linux) tinderbox because it has been failing since october 22 at around 5:45 pm pdt.
... october 26: masaki responded to alex's posting by providing a link to a similar bug that provides a work around to the problem he was having.
... moz_cairo_libs = -l$(libxul_dist)/lib -lmozcairo -lmozlibpixman \ -l/usr/sfw/lib -lxrender -lfreetype -lfontconfig october 27: alex replied to masaki posting, stating that he was going to use the work around that he provided and would provide feedback if it was successful or not.
... later that day alex able to successful complete his firefox 2 build by using masaki'swork around that he had posted.

-ms-filter - Archive of obsolete content
<div id="filterfrom" style="position: absolute; width: 200px; height: 250px; background-color: white; filter: revealtrans()"> <img id="imagefrom" style="position: absolute; top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 2...
...0px; background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve 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", endcolorstr="#000000", gradienttype=0)'; background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%); } result specifications not part of any specification.
... initial value"" (the empty string)applies toall elementsinheritednocomputed valueas specifiedanimation typediscrete remarks the following table lists the most popular dx filters and their standards-based alternatives: dx filter standards-based alternative alpha opacity alphaimageloader <img> or background-image and related properties gradient background-image: linear-gradient() dropshadow text-shadow or box-shadow matrix transform, transform-origin in windows internet explorer 8, the -ms-filter attribute is an extension to css, and can be used as a synonym for filter in ie8 standards mode.

Game monetization - Game development
it varies, but around one person in every thousand is about average.
...the usual cost of a non-exclusive license is around 500 usd.
...instead of getting a one-time payment you can get a small amount of money per game, per month — it can be something around 20-50 usd per month, per game.
... remember that many new, low quality publishers will want to get your game for ad revenue instead of licensing because it will be cheaper for them and you might end up with earnings around 2 usd per game for the whole deal.

Building up a basic demo with A-Frame - Game development
adding a background: sky box a sky box is a background for the 3d world, represented by an <a-sky> element.
...looking around would give an impression of being inside an open sky, a wooden barn — wherever you like!
... add the following html before the <a-cube> element: <a-sky color="#dddddd"></a-sky> at this point, if you save the code and refresh your browser you can already see the cube on the screen with our custom background: here's the code we have created so far: you can also check it out on github.
... the controls are already working: you can use the mouse for looking around and the keyboard for movement (try the w, a, s, and d keys.) there's even an "enter vr mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necesary vr hardware set up and ready.

Mobile touch controls - Game development
nt.getelementsbytagname("canvas")[0]; el.addeventlistener("touchstart", handlestart); el.addeventlistener("touchmove", handlemove); el.addeventlistener("touchend", handleend); el.addeventlistener("touchcancel", handlecancel); this way, touching the game's <canvas> on the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the space ship around).
...the preventdefault() function is needed to prevent the browser from moving — without it you'd have the default behaviour, and the canvas would be dragged around the page, which would show the browser scroll bars and look messy.
... an additional advantage of using phaser is that the buttons you create will take any type of input, whether it's a touch on mobile or a click on desktop — the framework sorts this out in the background for you.
... moving the player could be managed by creating the four directional buttons, but we can take the advantage of touch screens and drag the player's ship around: var player = this.game.add.sprite(30, 30, 'ship'); player.inputenabled = true; player.input.enabledrag(); player.events.ondragstart.add(ondragstart, this); player.events.ondragstop.add(ondragstop, this); function ondragstart(sprite, pointer) { // do something when dragging } we can pull the ship around and do something in the meantime, and react when the drag is stopped.

Tiles and tilemaps overview - Game development
think about any game that uses regularly repeating squares of background, and you'll probably find it uses tilemaps.
...this allows us to have a richer game world with less tiles, since the same image can be used with different backgrounds.
... for instance, a rock that could appear on top of several terrain types (like grass, sand or brick) could be included on it's own separate tile which is then rendered on a new layer, instead of several rock tiles, each with a different background terrain.
...a better way would be to create a canvas that is 2x2 tiles bigger than the visible area, so there is one tile of "bleeding" around the edges.

HTML: A good basis for accessibility - Learn web development
if they are decorational, it is better to write an empty text as a value for alt attribute (see empty alt attributes) or to just include them in the page as css background images.
... if you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a title attribute, as shown above.
...link text color, like all text, has to be significantly different from the background color (a 4.5:1 contrast).
...with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color.

HTML: A good basis for accessibility - Learn web development
if they are decorational, it is better to write an empty text as a value for alt attribute (see empty alt attributes) or to just include them in the page as css background images.
... if you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a title attribute, as shown above.
...link text color, like all text, has to be significantly different from the background color (a 4.5:1 contrast).
...with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color.

Debugging CSS - Learn web development
try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it.
... a reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed.
...this may well give you enough information to be able to search for likely sounding problems and workarounds.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Fundamental CSS comprehension - Learn web development
you need to: give the main card container a fixed width/height, solid background color, border, and border-radius (rounded corners!), amongst other things.
... give the header a background gradient that goes from darker to lighter, plus rounded corners that fit in with the rounded corners set on the main card container.
... give the footer a background gradient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container.
...also give it a background color of semi-transparent black, resulting in a slightly darker shade that lets the background red color shine through a bit too.

Images, media, and form elements - Learn web development
all of the <div> elements have a background color and stretch to fill the row and column.
...try changing how this form looks by adjusting the borders, adding background colors to the fields, and changing fonts and padding.
...you could create a form input with no borders and background that is almost indistinguishable from the content around it, but this would make it very hard to recognise and fill in.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Supporting older browsers - Learn web development
there is a middle ground between a plain html page and all the bells and whistles, and css has actually made creating these fallbacks pretty straightforward.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has n...
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> to deal with this ...
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } @supports (display: grid) { .item { width: auto; } } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <...

Adding vector graphics to the Web - Learn web development
this being the case, only supporting browsers will load the svg — older browsers will load the png instead: <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> you can also use svgs as css background images, as shown below.
... in the below code, older browsers will stick with the png that they understand, while newer browsers will load the svg: background: url("fallback.png") no-repeat center; background-image: url("image.svg"); background-size: contain; like the <img> method described above, inserting svgs using css background images means that the svg can't be manipulated with javascript, and is also subject to the same css limitations.
... </text> </svg> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution" disabled> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.valu...
...it was never intended to be a full guide to learning svg, just a pointer so you know what svg is if you meet it in your travels around the web.

Image gallery - Learn web development
> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty <div> that is sized to be the same size as the <img> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <button> that is used to control the darkening effect.
... if the class name is "dark", changes the <button> class to "light" (using setattribute()), its text content to "lighten", and the background-color of the overlay <div> to "rgba(0,0,0,0.5)".
... if the class name not "dark", changes the <button> class to "dark", its text content back to "darken", and the background-color of the overlay <div> to "rgba(0,0,0,0)".
... btn.setattribute('class', xxx); btn.textcontent = xxx; overlay.style.backgroundcolor = xxx; hints and tips you don't need to edit the html or css in any way.

Fetching data from the server - Learn web development
the main content will change, but most of the surrounding information, like the header, footer, navigation menu, etc., will stay the same.
... to get around this, we need to test the example by running it through a local web server.
...xhr has been around for a long time now and has very good cross-browser support.
... a more complex example to round off the article, we'll look at a slightly more complex example that shows some more interesting uses of fetch.

Arrays - Learn web development
play around a bit, and see what works and what doesn't.
... // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background-color: #f5f9fa; } active learning: top 5 searches a good use for array methods like push() and pop() is when you are maintaining a record of currently active items in a web app.
... in an animated scene for example, you might have an array of objects representing the background graphics currently displayed, and you might only want 50 displayed at once, for performance or clutter reasons.
... searchinput.value = ''; searchinput.focus(); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssol...

Handling text — strings in JavaScript - Learn web development
the only difference here is that when writing a string, you need to surround the value with quotes.
...try entering the following lines: let badstring = this is a test; let badstring = 'this is a test; let badstring = this is a test'; these lines don't work because any text without quotes around it is assumed to be a variable name, property name, a reserved word, or similar.
... you can include complex expressions inside template literals, for example: let examscore = 45; let examhighestscore = 70; examreport = `you scored ${ examscore }/${ examhighestscore } (${ math.round((examscore/examhighestscore*100)) }%).
... the third one calculates a percentage result and rounds it to the nearest integer.

Understanding client-side JavaScript frameworks - Learn web development
we'll discover a little bit of detail about its background and use cases, set up a basic react toolchain on our local computer, and create and play with a simple starter app, learning a bit about how react works in the process.
...in this article, we'll look at a little bit of vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
...vue resources now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
... there is a variety of reasons for this: they are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.

Lightweight themes
lightweight themes are sometimes referred to as "background themes" or, (on addons.mozilla.org) as just "themes".
... how to create your own lightweight theme lightweight themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... select text and tab colors — you can choose the tab ("background") color and foreground text color that work best with your header image.

IME handling guide
for fixing this issue, we have contentcache classes around process boundary.
... background color, foreground color (text color) and underline color can be specified with following prefs.
... ui.imerawinputbackground ui.imerawinputforeground ui.imerawinputunderline ui.imeselectedrawtextbackground ui.imeselectedrawtextforeground ui.imeselectedrawtextunderline ui.imeconvertedtextbackground ui.imeconvertedtextforeground ui.imeconvertedtextunderline ui.imeselectedconvertedtextbackground ui.imeselectedconvertedtextforeground ui.imeselectedconvertedtextunderline underline style can be specified with the following prefs.
...so, e.g., reconvertion around caret may not work as unexpectd in such case, but we don't have a good solution for this issue.

Internationalized Domain Names (IDN) Support in Mozilla Browsers
as the internet has spread to non-english speaking people around the world, it has become increasingly clear that forcing them to use domain names written only in a subset of the latin alphabet is not ideal.
...it was shown to be language independent, superior in compression, compact in code size, round-trip safe, and superior for encoding chinese/japanese/korean characters.
...if you find idn test sites under the .com and .net top domains, and if you cannot successfully access these sites, you can use the following workaround until the conversion to punycode is completed for these top domains: using netscape 7.1 or mozilla 1.4: type about:config into the location/url bar.
...many web sites around the world are expected to register native language host names with the appropriate domain name registrars for their top domains.

MathML Demo: <mo> - operator, fence, separator, or accent
in general, the lspace and rspace around the relation should be greater than that around the operation.
...in general, the lspace and rspace around arrows should be similar to the spacing around relations.
...in general, the lspace and rspace around negated relations should be similar to the spacing around relations.
...here's an example to illustrate spacing around fences m ⁢ [ m ⁢ m ⁢ m ] ⁢ m ⁢ ( m ⁢ m ) ⁢ m ⁢ { m ⁢ m } ⁢ m ⁢ ⟨ m ⁢ m ⟩ ⁢ m ⁢ | m ⁢ m | ⁢ m ⁢ m m ⁢ [ m ⁢ m ⁢ m ] + ( m ⁢ m ) + { m ⁢ m } + ⟨ m ⁢ m ⟩ + | m ⁢ m | ⁢ m ⁢ m m ⁢ [ m ⁢ m ⁢ m ] ⁢ ( m ⁢ m ) ⁢ { m ⁢ m } ⁢ ⟨ m ⁢ m ⟩ ⁢ | m ⁢ m | ⁢ m �...

Power profiling overview
this article covers important background information about power profiling, with an emphasis on intel processors used in desktop and laptop machines.
...even just switching a tab from the foreground to the background can make a difference.
... try putting the relevant tab in the foreground vs.
... in the background.

Scroll-linked effects
<body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
...one way to implement this without the scroll event listener is to use the css property designed for this purpose: <body style="height: 5000px"> <div id="toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls.
...t(snap, 20, destination); } } var timeoutid = null; addeventlistener("scroll", function() { if (timeoutid) cleartimeout(timeoutid); timeoutid = settimeout(snap, 200, parseint(document.getelementbyid('snaptarget').style.top)); }, true); </script> <div id="snaptarget" class="snaptarget" style="position: relative; top: 200px; width: 100%; height: 200px; background-color: green"></div> </body> in this example, there is a scroll event listener which detects if the scroll position is within 200 pixels of the top of the "snaptarget" div.
... <body style="height: 5000px"> <style> body, /* blink currently has bug that requires declaration on `body` */ html { scroll-snap-type: y proximity; } .snaptarget { scroll-snap-align: start; position: relative; top: 200px; height: 200px; background-color: green; } </style> <div class="snaptarget"></div> </body> this version can work smoothly in the browser even if there is slow-running javascript on the browser's main thread.

JSClass.flags
mxr id search for jsclass_global_flags jsclass_foreground_finalize objects of this class must be finalized on the main thread.
... one of jsclass_foreground_finalize and jsclass_background_finalize must be specified.
... jsclass_background_finalize it is safe to finalize objects of this class on a background thread.
... one of jsclass_foreground_finalize and jsclass_background_finalize must be specified.

JS_ValueToInt32
otherwise, the floating-point number is rounded to the nearest integer value.
... js_valuetoint32 is pre-ecma-262 edition 1, and rounds differently than js_valuetoecmaint32 and js::toint32.
... this routine was added for layers-based graphics programming in netscape 4, but unless you know you need its rounding behavior, it is best to avoid it in favour of js::toint32.
... js::toint32 rounds as specified in ecma 262-3 §9.5, while this routine rounds by adding 0.5 to the converted float-point number and truncating the result at the decimal point.

Handling Mozilla Security Bugs
background security vulnerabilities are different from other bugs, because their consequences are potentially so severe: users' private information (including financial information) could be exposed, users' data could be destroyed, and users' systems could be used as platforms for attacks on other systems.
... the mozilla security bug group the mozilla security module owner and peers will form the core of the mozilla security bug group, and will select a number of other people to round out the group's membership.
... expanding the mozilla security bug group as previously described, the mozilla security module owner can select one or more peers to share the core work of coordinating investigation and resolution of mozilla security vulnerabilities, and will work with them to create some agreed-upon ground rules for how this work can be most effectively shared among themselves.
... a typical warning will mention the application or module affected, the affected versions, and a workaround (e.g., disabling javascript).

IAccessibleComponent
method overview [propget] hresult background([out] ia2color background ); [propget] hresult foreground([out] ia2color foreground ); [propget] hresult locationinparent([out] long x, [out] long y ); methods background() returns the background color of this object.
... [propget] hresult background( [out] ia2color background ); parameters background the returned color is the background color of this object or, if that is not supported, the default background color.
...foreground() returns the foreground color of this object.
... [propget] hresult foreground( [out] ia2color foreground ); parameters foreground the returned color is the foreground color of this object or, if that is not supported, the default foreground color.

nsIApplicationUpdateService
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes a global application service that handles performing background update checks.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void adddownloadlistener(in nsirequestobserver listener); astring downloadupdate(in nsiupdate update, in boolean background); void pausedownload(); void removedownloadlistener(in nsirequestobserver listener); nsiupdate selectupdate([array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); attributes attribute type description backgroundchecker nsiupdatechecker the update checker being used for background update checking.
... astring downloadupdate( in nsiupdate update, in boolean background ); parameters update an nsiupdate object indicating the update to download.
... background true to download the update in the background or false to download it in the foreground.

nsIUpdatePrompt
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(); void showupdateavailable(in nsiupdate update); void showupdatedownloaded(in nsiupdate update, [optional] in boolean background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates.
...if background is true (for example the download was not user initiated) and the app.update.silent preference is true the call will be a no-op.
... void showupdatedownloaded( in nsiupdate update, in boolean background optional ); parameters update an nsiupdate describing the update that was downloaded.
... background optional an optional parameter that, if provided and true, presents a less-obtrusive, non-modal notification alert.

nsMsgNavigationType
will wrap around if the wrap flag is set to true.
...will wrap around if the wrap flag is set to true.
...will wrap around if the wrap flag is set to true.
...will wrap around if the wrap flag is set to true.

Drawing and Event Handling - Plugins
this way, the plug-in can draw an irregularly shaped area, such as a figure, or text over the existing background.
...because the browser does not need to draw the background behind the plug-in, opaque windowless plug-ins are considerably more efficient than transparent plug-ins.
...here are two examples of plug-ins that have transparent areas: a plug-in that is smaller than the area specified by the enclosing object or embed element a plug-in with nonrectangular boundaries the browser is responsible for rendering the background of a transparent windowless plug-in.
... before generating a paint message for the plug-in, the browser makes sure that the background is already drawn into the area to be updated.

CSSStyleDeclaration.setProperty() - Web APIs
if priority can be omitted, javascript has a special simpler syntax for setting a css property on a style declaration object: style.csspropertyname = 'value'; examples in this example we have three buttons, which can be pressed to dynamically alter our box paragraph's border, background color, and text color to random values (see the live example at the end of this section).
...in each case, this is done with the setproperty() method, for example boxpararule.style.setproperty('border', newborder); html <div class="controls"> <button class="border">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; margin: 20...
...px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; } javascript const borderbtn = document.queryselector('.border'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = document.queryselector('.color'); const box = document.queryselector('.box'); function random(min,max) { const num = math.floor(math.random()*(max-min)) + min; return num; } function randomcolor() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } const styles...
...i < stylesheet.cssrules.length; i++) { if(stylesheet.cssrules[i].selectortext === '.box p') { boxpararule = stylesheet.cssrules[i]; } } function setrandomborder() { const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor); result specifications specification status comment css object m...

DOMMatrixReadOnly - Web APIs
dommatrixreadonly.flipx() returns a new dommatrix created by flipping the source matrix around its x-axis.
... dommatrixreadonly.flipy() returns a new dommatrix created by flipping the source matrix around its y-axis.
... dommatrixreadonly.rotateaxisangle() returns a new dommatrix created by rotating the source matrix by the given angle around the specified vector.
... dommatrixreadonly.rotate() returns a new dommatrix created by rotating the source matrix around each of its axes by the specified number of degrees.

DeviceMotionEventRotationRate - Web APIs
a devicemotioneventrotationrate object provides information about the rate at which the device is rotating around all three axes.
... properties devicemotioneventrotationrate.alpha read only the amount of rotation around the z axis, in degrees per second.
... devicemotioneventrotationrate.beta read only the amount of rotation around the x axis, in degrees per second.
... devicemotioneventrotationrate.gamma read only the amount of rotation around the y axis, in degrees per second.

DeviceOrientationEvent - Web APIs
deviceorientationevent.alpha read only a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360.
... deviceorientationevent.beta read only a number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180.
... deviceorientationevent.gamma read only a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90.
... deviceorientationevent.webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360.

Document.visibilityState - Web APIs
it is useful to know if the document is in the background or an invisible tab, or only loaded for pre-rendering.
...in practice this means that the page is the foreground tab of a non-minimized window.
...in practice this means that the document is either a background tab or part of a minimized window, or the os screen lock is active.
... typical use of this can be to prevent the download of some assets when the document is solely prerendered, or stop some activities when the document is in the background or minimized.

Document - Web APIs
document.bgcolor gets/sets the background color of the current document.
... document.fgcolor gets/sets the foreground color, or text color, of the current document.
... document.mozsetimageelement() allows you to change the element being used as the background image for a specified element id.
... internet explorer does not support all methods from the node interface in the document interface: document.contains as a work-around, document.body.contains() can be used.

HTMLBodyElement - Web APIs
htmlbodyelement.background is a domstring that represents the description of the location of the background image resource.
... htmlbodyelement.bgcolor is a domstring that represents the background color for the document.
... htmlbodyelement.text is a domstring that represents the foreground color of text.
... recommendation the following properties are now obsolete: alink, bgcolor, background, link, text, and vlink.

HTMLObjectElement - Web APIs
htmlobjectelement.align is a domstring representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context.
... htmlobjectelement.border is a domstring that reflects the border html attribute, specifying the width of a border around the object.
... htmlobjectelement.hspace is a long representing the horizontal space in pixels around the control.
... htmlobjectelement.vspace is a long representing the horizontal space in pixels around the control.

Using IndexedDB - Web APIs
so for example, don't use 2.4 as a version number: var request = indexeddb.open("mytestdatabase", 2.4); // don't do this, as the version will be rounded to 2 generating handlers the first thing you'll want to do with almost all of the requests you generate is to add success and error handlers: request.onerror = function(event) { // do something with request.errorcode!
...as a workaround for this normal shutdown notification, you might track your transactions and add a beforeunload event to warn the user if any transactions have not yet completed at the time of unloading.
...id="search-form"> <div class="button-pane"> <input type="button" id="search-list-button" value="list database content" /> </div> </form> <div> <div id="pub-msg"> </div> <div id="pub-viewer"> </div> <ul id="pub-list"> </ul> </div> css content body { font-size: 0.8em; font-family: sans-serif; } form { background-color: #cccccc; border-radius: 0.3em; display: inline-block; margin-bottom: 0.5em; padding: 1em; } table { border-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } #pub-viewer { float: right; width: 48%; height: 20em; border: solid #d092ff 0...
....1em; } #pub-viewer iframe { width: 100%; height: 100%; } #pub-list { width: 46%; background-color: #eeeeee; border-radius: 0.3em; } #pub-list li { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; } #msg { margin-bottom: 1em; } .action-success { padding: 0.5em; color: #00d21e; background-color: #eeeeee; border-radius: 0.2em; } .action-failure { padding: 0.5em; color: #ff1408; background-color: #eeeeee; border-radius: 0.2em; } .note { font-size: smaller; } .destructive { background-color: orange; } .destructive:hover { background-color: #ff8000; } .destructive:active { background-color: red; } javascript content (function () { var compat_envs = [ ['firefox', ">= 16.0"], ['google chrome', ">= 24.0 (you may need to g...

Using the MediaStream Recording API - Web APIs
instead, the problem was solved by making the third container's height equal to 100% of the parent height, minus the heights and padding of the other two: .sound-clips { box-shadow: inset 0 3px 4px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.1); height: calc(100% - 240px - 0.7rem); overflow: scroll; } note: calc() has good support across modern browsers too, even going back to internet explorer 9.
...want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup ...
...first of all, mediarecorder.start() is used to start recording the stream once the record button is pressed: record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } when the mediarecorder is recording, the mediarecorder.state property will return a value of "recording".
... stop.onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } note that the recording may also stop naturally if the media stream ends (e.g.

Using Service Workers - Web APIs
we could try to work around this using .complete, but it’s still not foolproof, and what about multiple images?
... updating your service worker if your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated.
...the new version is installing in the background.
... when testing you can get around the https restriction by checking the "enable service workers over http (when toolbox is open)" option in the firefox developer tools settings.

Example and tutorial: Simple synth keyboard - Web APIs
we draw this in a pair of nested <div> elements so that we can make the keyboard horizontally scrollable if all the keys don't fit on the screen, without having them wrap around.
...ter; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vert...
... the values in the example table above have been rounded to two decimal places.
... once the keyboard has been constructed, we scroll the note "b" in octave 5 into view; this has the effect of ensuring that middle-c is visible along with its surrounding keys.

Using Web Workers - Web APIs
web workers are a simple means for web content to run scripts in background threads.
... performing computations in the background workers are mainly useful for allowing your code to perform processor-intensive calculations without blocking the user interface thread.
... performing web i/o in the background you can find an example of this in the article using workers in extensions .
...they will also allow access to push notifications and background sync apis.

XRReferenceSpace - Web APIs
for xr systems that allow the user to physically move around, such as those that track movement with a real-world camera, this boundary establishes the edges of the area the user is able to move around in, whether due to physical obstacles or due to limitations of the xr hardware.
...if the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter).
...the viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need.
...this is used for environments in which the user can physically move around, and is supported by all instances of xrsession, both immersive and inline, though it's most useful for inline sessions.

-webkit-print-color-adjust - CSS: Cascading Style Sheets
the -webkit-print-color-adjust property is a non-standard css extension that can be used to force printing of background colors and images in browsers based on the webkit engine.
... background colors and images are only printed if the user explicitly allows it in their browser's print settings dialog.
... exact background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden.
... examples forcing white-on-black printing article { -webkit-print-color-adjust: exact; background: #222; color: #eee; } specifications not part of any standard, though there is a proposal in the csswg wiki to standardize it.

::selection - CSS: Cascading Style Sheets
::selection { background-color: cyan; } allowable properties only certain css properties can be used with ::selection: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular, background-image is ignored.
...<p>also try selecting text in this paragraph.</p> css ::-moz-selection { color: gold; background-color: red; } p::-moz-selection { color: white; background-color: blue; } /* make selected text gold on a red background */ ::selection { color: gold; background-color: red; } /* make selected text in a paragraph white on a blue background */ p::selection { color: white; background-color: blue; } result accessibility concerns don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs.
... if overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.
... color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors.

:empty - CSS: Cascading Style Sheets
/* selects any <div> that contains no content */ div:empty { background: lime; } syntax :empty examples html <div class="box"><!-- i will be lime.
... --></div> <div class="box">i will be pink.</div> <div class="box"> <!-- i will be pink in older browsers because of the whitespace around this comment.
... --> </div> <div class="box"> <p><!-- i will be pink in all browsers because of the non-collapsible whitespace and elements around this comment.
... --></p> </div> css body { display: flex; justify-content: space-around; } .box { background: pink; height: 80px; width: 80px; } .box:empty { background: lime; } result accessibility concerns assistive technology such as screen readers cannot parse interactive content that is empty.

-ms-high-contrast - CSS: Cascading Style Sheets
high contrast mode is a specialized display mode that prioritizes making content as legible as possible by dynamically replacing foreground and background colors with a user-specified theme.
... @media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors.
... highlight: controls the background color of selected text.
... window: controls the color of the background.

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
by adding display: contents to the wrapper around the nested elements, you can see that that item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container.
...you can see that as i have used a direct child selector to add the background and borders to the flex items, this has not been applied to our nested children.
... also, having removed the box you cannot then use it to — for example — add a background colour behind the nested sub children.
... if you remove display: contents in this live example you will see that the direct child we are removing has an orange background colour.

Variable fonts guide - CSS: Cascading Style Sheets
this results in more http requests, and more data being downloaded (usually around 20k or more per file).
...you can work around this limitation by using css custom properties (css variables) for the individual values, and simply modifying the value of an individual custom property.
...the term 'grade' refers to the relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the text occupies does not change, so changing the text grade doesn't change the overall layout of the text or elements around it.
... resources w3c css fonts module 4 specification (editor’s draft) w3c github issue queue microsoft open type variations introduction microsoft opentype design-variation axis tag registry wakamai fondue (a site that will tell you what your font can do via a simple drag-and-drop inspection interface) axis praxis (the original variable fonts playground site) v-fonts.com (a catalog of variable fonts and where to get them) font playground (another playground for variable fonts with some very unique approaches to user interface) ...

Implementing image sprites in CSS - CSS: Cascading Style Sheets
rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of http requests is reduced.
... implementation suppose an image is given to every item with class toolbtn: .toolbtn { background: url(myfile.png); display: inline-block; height: 20px; width: 20px; } a background position can be added either as two x, y values after the url()() in the background, or as background-position.
... for example: #btn1 { background-position: -20px 0px; } #btn2 { background-position: -40px 0px; } this would move the element with the id 'btn1' 20 pixels to the left and the element with the id 'btn2' 40 pixels to the left (assuming they have the class toolbtn assigned and are affected by the image rule above).
... similarly, you can also make hover states with: #btn:hover { background-position: <pixels shifted right>px <pixels shifted down>px; } ...

Stacking with floated blocks - CSS: Cascading Style Sheets
floating blocks are placed between non-positioned blocks and positioned blocks: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant positioned elements, in order of appearance in the html actually, as you can see in the example below, the background and border of the non-positioned block (div #4) is completely unaffected by floating blocks, but the content is affected.
...this behavior can be shown with an added rule to the above list: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant non-positioned inline elements descendant positioned elements, in order of appearance in the html note: if an opacity value is applied to the non-positioned block (div #4), then something strange happens: the background and border of that block pops up above the floating blocks and the positioned blocks.
...v id="flo2"> <b>div #3</b><br />float: right;</div> <br /> <div id="sta1"> <b>div #4</b><br />no positioning</div> <div id="abs2"> <b>div #5</b><br />position: absolute;</div> css div { padding: 10px; text-align: center; } b { font-family: sans-serif; } #abs1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 140px; border: 1px dashed #900; background-color: #fdd; } #sta1 { height: 100px; border: 1px dashed #996; background-color: #ffc; margin: 0px 10px 0px 10px; text-align: left; } #flo1 { margin: 0px 10px 0px 20px; float: left; width: 150px; height: 200px; border: 1px dashed #090; background-color: #cfc; } #flo2 { margin: 0px 20px 0px 10px; float: right; width: 150px; height: 200px; border: 1px dashed #090;...
... background-color: #cfc; } #abs2 { position: absolute; width: 150px; height: 100px; top: 130px; left: 100px; border: 1px dashed #990; background-color: #fdd; } ...

Shapes from box values - CSS: Cascading Style Sheets
by using box values for shapes we can wrap our content around the edges defined by these values.
... in the example below, we have a circular purple item which is a <div> with a height, width, and background colour.
...as the element has a margin, you can see that the content is flowing around the circular shape and the margin applied to it.
...you can create a circular shape using border-radius and then curve text around it.

Using CSS transforms - CSS: Cascading Style Sheets
be { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); t...
...ransform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result the second element to configure is the position of the viewer, with the perspective-origin property.
...one; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); trans...
...form: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result once you have done this, you can work on the element in the 3d space.

Mozilla CSS extensions - CSS: Cascading Style Sheets
ll-mode [prefixed version still accepted] -moz-animation-iteration-count [prefixed version still accepted] -moz-animation-name [prefixed version still accepted] -moz-animation-play-state [prefixed version still accepted] -moz-animation-timing-function [prefixed version still accepted] -moz-appearance b -moz-backface-visibility [prefixed version still accepted] -moz-background-clipobsolete since gecko 2 -moz-background-originobsolete since gecko 2 -moz-background-inline-policyobsolete since gecko 32 [superseded by the standard version box-decoration-break] -moz-background-sizeobsolete since gecko 2 -moz-border-end [superseded by the standard version border-inline-end] -moz-border-end-color [superseded by the standard version border-inline-end-color] -moz-bord...
...llbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.
... border-style and outline-style -moz-bg-insetobsolete since gecko 1.9 -moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsolete since gecko 1.9 <color> keywords -moz-activehyperlinktext -moz-hyperlinktext -moz-visitedhyperlinktext -moz-buttondefault -moz-buttonhoverface -moz-buttonhovertext -moz-default-background-color -moz-default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-dragtargetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow ...
...nline-gridobsolete since gecko 62 -moz-inline-stackobsolete since gecko 62 -moz-inline-table -moz-gridobsolete since gecko 62 -moz-grid-groupobsolete since gecko 62 -moz-grid-lineobsolete since gecko 62 -moz-groupbox -moz-deckobsolete since gecko 62 -moz-popupobsolete since gecko 62 -moz-stackobsolete since gecko 62 -moz-markerobsolete since gecko 62 empty-cells -moz-show-background (default value in quirks mode) font -moz-button -moz-info -moz-desktop -moz-dialog (also a color) -moz-document -moz-workspace -moz-window -moz-list -moz-pull-down-menu -moz-field (also a color) font-family -moz-fixed image-rendering -moz-crisp-edges <length> -moz-calc list-style-type -moz-arabic-indic -moz-bengali -moz-cjk-earthly-branch -moz-cjk-he...

Privacy and the :visited selector - CSS: Cascading Style Sheets
only the following styles can be applied to visited links: color background-color border-color (and its sub-properties) column-rule-color outline-color the color parts of the fill and stroke attributes in addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword.
... here is an example of how to use styles with the aforementioned restrictions: :link { outline: 1px dotted blue; background-color: white; /* the default value of background-color is `transparent`.
...*/ } :visited { outline-color: orange; /* visited links have an orange outline */ background-color: green; /* visited links have a green background */ color: yellow; /* visited links have yellow colored text */ } impact on web developers overall, these restrictions shouldn't affect web developers too significantly.
... they may, however, require the following changes to existing sites: using background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.

border-bottom-left-radius - CSS: Cascading Style Sheets
the border-bottom-left-radius css property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.
... a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
... the background color is clipped at the border div { border-bottom-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-left-radius' in that specification.

border-bottom-right-radius - CSS: Cascading Style Sheets
the border-bottom-right-radius css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.
... a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
... the background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-right-radius' in that specification.

border-image-repeat - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space; /* vertical | horizontal */ border-image-repeat: round stretch; /* global values */ border-image-repeat: inherit; border-image-repeat: initial; border-image-repeat: unset; the border-image-repeat property may be specified using one or two values chosen from the list of values below.
... round the source image's edge regions are tiled (repeated) to fill the gap between each border.
...it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div id="bordered">you can try out various border repetition rules on me!</div> <select id...
...="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.

border-image-slice - CSS: Cascading Style Sheets
it is discarded by default, but is used like a background image if the keyword fill is set.
... fill preserves the middle image region and displays it like a background image, but stacked above the actual background.
...lice</code></label> <input type="range" min="10" max="45" id="slice"> <output id="slice-output">30</output> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { c...
...onst newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-slice' in that specification.

border-left-style - CSS: Cascading Style Sheets
d> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {border-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} .b10 {border-left-sty...
...le: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-style' in that specification.
...roidfirefox for androidopera for androidsafari on iossamsung internetborder-left-stylechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
... full support 1webview android full support 2.3chrome android full support 18firefox android full support 14notes full support 14notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.

border-radius - CSS: Cascading Style Sheets
the border-radius css property rounds the corners of an element's outer border edge.
... the radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.
...-right-radius: a length, percentage or calc();border-bottom-left-radius: a length, percentage or calc(); formal syntax <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?where <length-percentage> = <length> | <percentage> examples border: solid 10px; /* the border will curve into a 'd' */ border-radius: 10px 40px 40px 10px; border: groove 1em red; border-radius: 2em; background: gold; border: ridge gold; border-radius: 13em/3em; border: none; border-radius: 40px 10px; border: none; border-radius: 50%; border: dotted; border-width: 10px 4px; border-radius: 10px 40px; border: dashed; border-width: 2px 4px; border-radius: 40px; live samples sample 1 : http://jsfiddle.net/tripad/qngkj/2/ sample 2 : http://jsfiddle.net/tripad/qngkj/3/ s...
...ample 3 : http://jsfiddle.net/tripad/qngkj/4/ sample 4 : http://jsfiddle.net/tripad/qngkj/5/ sample 5 : http://jsfiddle.net/tripad/qngkj/6/ specifications specification status comment css backgrounds and borders module level 3the definition of 'border-radius' in that specification.

border-right-style - CSS: Cascading Style Sheets
d> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-right-style example classes */ .b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} .b10 {borde...
...r-right-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-style' in that specification.
...oidfirefox for androidopera for androidsafari on iossamsung internetborder-right-stylechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
... full support 1webview android full support ≤37chrome android full support 18firefox android full support 14notes full support 14notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.

border-top-left-radius - CSS: Cascading Style Sheets
the border-top-left-radius css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... the rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square.
... a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
... an arc of ellipse is used as the border div { border-top-left-radius: 40px 20px; } the box is a square: an arc of circle is used as the border div { border-top-left-radius: 40%; } the box is not a square: an arc of ellipse is used as the border div { border-top-left-radius: 40%; } the background color is clipped at the border div { border-top-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-left-radius' in that specification.

border-top-right-radius - CSS: Cascading Style Sheets
the border-top-right-radius css property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.
... a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.
... the box is not a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; } the background color is clipped at the border div { border-top-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-right-radius' in that specification.

box-decoration-break - CSS: Cascading Style Sheets
the specified value will impact the appearance of the following properties: background border border-image box-shadow clip-path margin padding syntax /* keyword values */ box-decoration-break: slice; box-decoration-break: clone; /* global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset; the box-decoration-break property is specified as one of the keyword values listed below.
...the background is also drawn independently for each fragment, which means that a background image with background-repeat: no-repeat may nevertheless repeat multiple times.
... formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: solid; margin-left: 10px; font: 24px sans-serif; line-height: 2; } ...
... now, the same example but styled with box-decoration-break: clone results in: note here that each fragment has an identical replicated border, box-shadow, and background.

clip-path - CSS: Cascading Style Sheets
ecified, but with <url> values made absoluteanimation typeyes, as specified for <basic-shape>, otherwise no formal syntax <clip-source> | [ <basic-shape> | <geometry-box> ] | nonewhere <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]?
...ewbox"> <svg viewbox="0 0 192 192"> <g class="shape9"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; background: #eee; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { flex: 1 auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; flex: 1; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; f...
...; position: absolute; top: 2px; left: 2px; font: italic .6em sans-serif; } .viewbox { box-shadow: 1rem 1rem 0 #efefef inset, -1rem -1rem 0 #efefef inset; } .container.viewbox:after { content: 'viewbox'; position: absolute; left: 1.1rem; top: 1.1rem; font: italic .6em sans-serif; } .cell span { display: block; margin-bottom: .5em; } p { font-family: sans-serif; background: #000; color: pink; margin: 2em; padding: 3em 1em; border: 1em solid pink; width: 6em; } .none { clip-path: none; } .svg { clip-path: url(#mypath); } .svg2 { clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z');} .shape1 { clip-path: circle(25%); } .shape2 { clip-path: circle(25% at 25% 25%); } .shape3 { clip-path: fill-box circle(25% at 25...
...ht="90"/> <rect x="0" y="110" width="90" height="90"/> <rect x="137" y="0" width="90" height="90"/> <rect x="0" y="0" width="90" height="90"/> </clippath> </defs> </svg> <select id="clippath"> <option value="none">none</option> <option value="circle(100px at 110px 100px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.getelementbyid("clipped").style.clippath = evt.target.value; }...

display - CSS: Cascading Style Sheets
run-in elements act like inlines or blocks, depending on the surrounding elements.
... valid <display-legacy> values: inline-block the element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
... we've included padding and background-color on the containers and their children, so that it is easier to see the effect the display values are having.
...option>inline</option> <option>inline-block</option> <option>none</option> <option>flex</option> <option>inline-flex</option> <option>grid</option> <option>inline-grid</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; padding-top: 10px; } article { background-color: red; } article span { background-color: black; color: white; margin: 1px; } article, span { padding: 10px; border-radius: 7px; } article, div { margin: 20px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((article) => { article.style.display = select.

font-family - CSS: Cascading Style Sheets
mily name and a generic family name */ font-family: gill sans extrabold, sans-serif; font-family: "goudy bookletter 1911", sans-serif; /* a generic family name only */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; font-family: ui-serif; font-family: ui-sans-serif; font-family: ui-monospace; font-family: ui-rounded; font-family: emoji; font-family: math; font-family: fangsong; /* global values */ font-family: inherit; font-family: initial; font-family: unset; the font-family property lists one or more font families, separated by commas.
... ui-rounded the default user interface font that has rounded features.
... this is example ui-rounded text.
... working draft adds new generic font families, specifically: system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, emoji, math, and fangsong.

mask-border - CSS: Cascading Style Sheets
the source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based mask border!
...a repeat value of round will make the mask slices fit evenly, i.e., without clipping or gaps.
... div { width: 200px; background-color: lavender; border: 18px solid salmon; padding: 10px; /* prefixed longhand properties currently supported in chromium -webkit-mask-box-image-source: url(https://udn.realityripple.com/samples/2d/fd08a3134c.png); -webkit-mask-box-image-slice: 30 fill; -webkit-mask-box-image-width: 20px; -webkit-mask-box-image-repeat: round; -webkit-mask-box-image-outset: 1px; */ /* prefixed shorthand property currently supported in chromium */ -webkit-mask-box-image: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ /* updated standard shorthand property, not supported anywhere...
... yet */ mask-border: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ } result specifications specification status comment css masking module level 1the definition of 'mask-border' in that specification.

offset-anchor - CSS: Cascading Style Sheets
for more specifics, see the <position> and background-position reference pages.
... note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position).
...the three are then given different background-color and offset-anchor values.
... html <section> <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section> css div { offset-path: path('m 0,20 l 200,20'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section { background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); border: 1px solid #ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto; background: cyan; } .offset-anchor2 { offset-anchor: right top; background: purple; } .offset-anchor3 { offset-anchor: left bottom; background: magenta; } @keyframes move { 0% { offset-...

outline-color - CSS: Cascading Style Sheets
invert to ensure the outline is visible, performs a color inversion of the background.
... description an outline is a line that is drawn around an element, outside the border.
...if the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.
... color contrast ratio is determined by comparing the luminosity of the text and background color values.

position - CSS: Cascading Style Sheets
html <div class="box" id="one">one</div> <div class="box" id="two">two</div> <div class="box" id="three">three</div> <div class="box" id="four">four</div> css .box { display: inline-block; width: 100px; height: 100px; background: red; color: white; } #two { position: relative; top: 20px; left: 20px; background: blue; } absolute positioning elements that are relatively positioned remain in the normal flow of the document.
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> css body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by t...
... </p> <div class="box" id="one">one</div> </div> css .box { width: 100px; height: 100px; background: red; color: white; } #one { position: fixed; top: 80px; left: 10px; background: blue; } .outer { width: 500px; height: 300px; overflow: scroll; padding-left: 150px; } result sticky positioning sticky positioning can be thought of as a hybrid of relative and fixed positioning.
... <dd>common</dd> <dd>converge</dd> <dd>crystal castles</dd> <dd>cursive</dd> </div> <div> <dt>e</dt> <dd>explosions in the sky</dd> </div> <div> <dt>t</dt> <dd>ted leo &amp; the pharmacists</dd> <dd>t-pain</dd> <dd>thrice</dd> <dd>tv on the radio</dd> <dd>two gallants</dd> </div> </dl> css * { box-sizing: border-box; } dl > div { background: #fff; padding: 24px 0 0 0; } dt { background: #b8c1c8; border-bottom: 1px solid #989ea4; border-top: 1px solid #717d85; color: #fff; font: bold 18px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/45px helvetica, arial, sans-serif; margin: 0; padding: 0 0 0 12px; whi...

ruby-align - CSS: Cascading Style Sheets
/* keyword values */ ruby-align: start; ruby-align: center; ruby-align: space-between; ruby-align: space-around; /* global values */ ruby-align: inherit; ruby-align: initial; ruby-align: unset; syntax values start is a keyword indicating that the ruby will be aligned with the start of the base text.
... space-around is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.
... formal definition initial valuespace-aroundapplies toruby bases, ruby annotations, ruby base containers, ruby annotation containersinheritedyescomputed valueas specifiedanimation typediscrete formal syntax start | center | space-between | space-around examples ruby aligned at the start of the base text html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: start; } result ruby aligned at the center of the base text html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: center; } result extra space distributed between ruby elements html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp...
...>）</rp> </ruby> css ruby { ruby-align: space-between; } result extra space distributed between and around ruby elements html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: space-around; } result specifications specification status comment css ruby layout module level 1the definition of 'ruby-align' in that specification.

rotate() - CSS: Cascading Style Sheets
the rotate() css function defines a transformation that rotates an element around a fixed point on the 2d plane, without deforming it.
... the fixed point that the element rotates around — mentioned above — is also known as the transform origin.
...dinates on ℝ3 homogeneous coordinates on ℝℙ3 cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
... html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div> css div { position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translatex(180px); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(45deg); } result specifications specification status comment css transforms level 1the de...

url() - CSS: Cascading Style Sheets
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-ha...
...nd properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
... the url() function can be included as a value for background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image, src as part of a @font-face block, and @counter-style/symbol in css level 1, the url() functional notation described only true urls.
... formal syntax url( <string> <url-modifier>* ) examples content property html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); } result data-uri html <div class="background"></div> css .background { height: 100vh; } .background { background: yellow; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3e%3cpath d='m10 10h60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m10 20h60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m10 30h60' stroke='red' stroke-width='5'/%3e%3c/svg%3e"); } specifications ...

Block formatting context - Developer guides
as explained in the guide to in-flow and out of flow elements, the float has been taken out of flow so the background and border of the <div> only contain the content and not the float.
...="float">i am a floated box!</div> <p>i am content inside the <code>overflow:auto</code> container.</p> </div> </section> <section> <div class="box" style="display:flow-root"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .5); border:1px solid black; padding: 10px; } exclude external floats in the following example, we are using display:flow-root and...
... html <section> <div class="float">try to resize this outer float</div> <div class="box"><p>normal</p></div> </section> <section> <div class="float">try to resize this outer float</div> <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:25px; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .75); border: 1px solid black; ...
... margin collapsing creating a new bfc to avoid the margin collapsing between two neighbor div: html <div class="blue"></div> <div class="red-outer"> <div class="red-inner">red inner</div> </div> css .blue, .red-inner { height: 50px; margin: 10px 0; } .blue { background: blue; } .red-outer { overflow: hidden; background: red; } specifications specification status comment css display module level 3the definition of 'block formatting context' in that specification.

HTML attribute reference - HTML: Hypertext Markup Language
background <body>, <table>, <td>, <th> specifies the url of an image file.
...use css background-image instead.
... bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> background color of the element.
...please use the css background-color property instead.

<input type="time"> - HTML: Hypertext Markup Language
valid input readonly a boolean attribute which, if present, indicates that the contents of the time input should not be user-editable step the stepping interval to use both for user interfaces purposes and during constraint validation unlike many data types, time values have a periodic domain, meaning that the values reach the highest possible value, then wrap back around to the beginning again.
... note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.
... making min and max cross midnight by setting a min attribute greater than the max attribute, the valid time range will wrap around midnight to produce a valid time range which crosses midnight.
... one way around this is to put a pattern attribute on your time input.

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
there is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 pm to 4 am.
... there is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 pm to 4 am.
...no forward slashes should be specified around the pattern text.
... for the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap back around to the beginning rather than ending), it's possible for the values of the max and min properties to be reversed, which indicates that the range of permitted values starts at min, wraps around to the lowest possible value, then continues on until max is reached.

HTML elements reference - HTML: Hypertext Markup Language
<bdi> the html bidirectional isolate element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
...most modern browsers implement this by surrounding the text in quotation marks.
... <bgsound> the internet explorer only html background sound element (<bgsound>) sets up a sound file to play in the background while the page is used; use <audio> instead.
... <big> the obsolete html big element (<big>) renders the enclosed text at a font size one level larger than the surrounding text (medium becomes large, for example).

Browser detection using the user agent - HTTP
are you trying to work around a specific bug in some version of a browser?
...also, experts, or simply people with another point of view, can give you ideas for working around the bug.
...browser makers do pay attention to bug reports, and the analysis may hint about other workarounds for the bug.
...the simplest way to do this is to separate all the code that moves content around based on screen size to a single function that is called when the page is loaded and at each resize event thereafter.

Number.prototype.toFixed() - JavaScript
the number is rounded if necessary, and the fractional part is padded with zeros if necessary so that it has the specified length.
... examples using tofixed let numobj = 12345.6789 numobj.tofixed() // returns '12346': note rounding, no fractional part numobj.tofixed(1) // returns '12345.7': note rounding numobj.tofixed(6) // returns '12345.678900': note added zeros (1.23e+20).tofixed(2) // returns '123000000000000000000.00' (1.23e-10).tofixed(2) // returns '0.00' 2.34.tofixed(1) // returns '2.3' 2.35.tofixed(1) // returns '2.4'.
... note it rounds up 2.55.tofixed(1) // returns '2.5'.
... note it rounds down - see warning above -2.34.tofixed(1) // returns -2.3 (due to operator precedence, negative number literals don't return a string...) (-2.34).tofixed(1) // returns '-2.3' specifications specification ecmascript (ecma-262)the definition of 'number.prototype.tofixed' in that specification.

Autoplay guide for media and Web Audio APIs - Web media technologies
that could happen if the video is paused and resumed by the user or automatically by the browser when the document is in a background tab.
... media.autoplay.allow-extension-background-pages this boolean preference, if true, allows browser extensions' background scripts to autoplay audio media.
... media.block-autoplay-until-in-foreground a boolean preference which indicates whether or not media playback is blocked when started on a background tab.
... the default value, true, means that even when otherwise available, autoplay won't take place until after a tab is brought to the foreground.

Populating the page: how browsers work - Web Performance
this requires three more round trips to the server before the request for content is actually sent.
... after the 8 round trips, the browser is finally able to make the request.
... in tcp slow start, after receipt of the initial packet, the server doubles the size of the next packet to around 28kb.
...it will retrieve resources in the background so that by the time the main html parser reaches requested assets, they may possibly already be in flight, or have been downloaded.

Optimizing startup performance - Web Performance
instead, you should write your code so that your app creates a web worker that does as much as possible in a background thread (for example, fetching and processing data.) then, anything that must be done on the main thread (such as user events and rendering ui) should be broken up into small pieces so that the app's event loop continues to cycle while it starts up.
...all pure startup calculations should be performed in background threads, while you keep the run-time of main thread events as short as possible.
... it's worth keeping in mind that most browsers typically start complaining that your script is blocking the main thread for too long at around 10 seconds or so.
...for games, consider having background music playing or a nice splash screen displayed.

How to make PWAs installable - Progressive web apps (PWAs)
it contains useful information, such as the app’s title, paths to different-sized icons that can be used to represent the app on an os (such as an icon on the home screen, an entry in the start menu, or an icon on the desktop), and a background color to use in loading or splash screens.
... { "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.
... background_color: a color used as the app's default background, used during install and on the splash screen.
... the icon and the theme and background colors are used to create this screen.

SVG Presentation Attributes - SVG: Scalable Vector Graphics
alignment-baseline baseline-shift clip clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering cursor direction display dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-line...
... value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top; animatable: yes enable-background deprecated since svg 2 it tells the browser how to manage the accumulation of the background image.
... value: butt|round|square; animatable: yes stroke-linejoin defines the shape to be used at the corners of paths when they are stroked.
... value: arcs|bevel|miter|miter-clip|round; animatable: yes stroke-miterlimit defines a limit on the ratio of the miter length to the stroke-width used to draw a miter join.

stroke-linecap - SVG: Scalable Vector Graphics
any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4 m1,3 h4 m1,5 h4" stroke="pink" stroke-width="0.025" /> </svg>...
... usage notes value butt | round | square default value butt animatable yes butt the butt value indicates that the stroke for each subpath does not extend beyond its two endpoints.
...a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> round the round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width.
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "round" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="round" /> <!-- effect of the "round" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="round" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> square the square value indicates that at the end of ea...

stroke-linejoin - SVG: Scalable Vector Graphics
glyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="round" /> <!-- upper right path: effect of the "bevel" value --> <path d="m13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- bottom left path: effect of the "miter-clip" value with fallback to "miter" if no...
...1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5.5" r="0.05" fill="pink" /> </g> <use xlink:href="#highlight" x="6" /> <use xlink:href="#highlight" x="12" /> <use xlink:href="#highlight" x="2" y="6" /> <use xlink:href="#highlight" x="8" y="6" /> </svg> usage context value arcs | bevel |miter | miter-clip | round default value miter animatable yes arcs note: the arcs value as been introduced in svg2 and it isn't widely supported yet, see browser compatibility bellow for details.
...x="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> <path d="m7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="7" cy="5" r="0.05" fill="pink" /> <circle cx="7.75" cy="2" r="0.05" fill="pink" /> <circle cx="8.5" cy="5" r="0.05" fill="pink" /> </g> </svg> round the round value indicates that a round corner is to be used to join path segments.
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "round" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="round" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> </g> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'stroke-linejoin' in that specification.

2015 MDN Fellowship Program - Archive of obsolete content
they enable the creation of effective offline experiences and wiill also allow access to push notifications and background sync apis.
...webgl is getting some cool new features in 2015 with the standardization efforts around the webgl 2.0 spec being published.
...you may propose your own subject area (examples: virtual reality on the web, network security, css, etc.) or we will work with you to match you to the best subject based on your background and mozilla priorities.

panel - Archive of obsolete content
a panel's content is loaded as soon as it is created, before the panel is shown, and the content remains loaded when a panel is hidden, so it is possible to keep a panel around in the background, updating its content as appropriate in preparation for the next time it is shown.
...self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png to learn much more about content scripts, see the working with content scripts guide.
...addon.port.on("show", function onshow() { textarea.focus(); }); finally, the html file now references "get-text.js" inside a <script> tag: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> <script src="get-text.js"></script> </body> </html> styling panel content the panel's default style is different for each operating system: this helps to ensure that the panel's style is consistent with the dialogs displayed by firefox and other applications, but means you ne...

Creating annotations - Archive of obsolete content
it is initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event.
... $('*').mouseenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('background-color'); $(matchedelement).css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.preventdefault(); self.port.emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the add-on resets the matched element on ...
... annotation editor html the html is very simple: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style type="text/css" media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 180px; height: 180px; margin: 10px; padding: 0px; } </style> </head> <body> <textarea rows='10' cols='20' id='annotation-box'> </textarea> </body> </html> save this inside data/editor as annotation-editor.html.

Customizing the download progress bar - Archive of obsolete content
the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this ...
...we are specifying the height of the progress meter on windows and a background image on mac.
... the background image (the first one in the file) should be a segment of whatever you want the unfilled portion of the progress bar to look like.

Custom XUL Elements with XBL - Archive of obsolete content
we didn't need to create a whole xul structure that would require around 7 nodes every time a "person" is created.
...in order to work around this problem, the anonid attribute is used instead: <xul:label anonid="xulshoolhello-name-label" xbl:inherits="value=name" /> and then, in order to get a reference to the node from the js code in your binding, we use the getanonymouselementbyattribute dom method: let namelabel = document.getanonymouselementbyattribute( this, "anonid", "xulshoolhello-name-label"); implementation...
...you can move it around, delete it or clone it.

User Notifications and Alerts - Archive of obsolete content
the level argument determines the "strength" of the message, indicated by its background color when it is displayed.
...you'll have to code around this using tab events in order to know when to re-display your alert.
...you'll end up with a box with a white background you can't get rid of .

Tabbed browser - Archive of obsolete content
openuilinkin( url, where, allowthirdpartyfixup, postdata, referrerurl ) where: "current" current tab (if there aren't any browser windows, then in a new window instead) "tab" new tab (if there aren't any browser windows, then in a new window instead) "tabshifted" same as "tab" but in background if default is to select new tabs, and vice versa "window" new window "save" save to disk (with no filename hint!) openuilink( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held.
...(ci.nsidomwindow); var gbrowser = adomwindow.gbrowser; //this is the gbrowser object of the firefox window this tab is in var atab = gbrowser._gettabforcontentwindow(contentwindow.top); //this is the clickable tab xul element, the one found in the tab strip of the firefox window, atab.linkedbrowser is same as browser var above //can stylize tab like atab.style.backgroundcolor = 'blue'; //can stylize the tab like atab.style.fontcolor = 'red'; var browser = atab.linkedbrowser; //this is the browser within the tab //this is what the example in the previous section gives //end getting other useful stuff } else { components.utils.reporterror('exception: load context not found!!'); //this is li...
... .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindow); var gbrowser = adomwindow.gbrowser; var atab = gbrowser._gettabforcontentwindow(contentwindow.top); //this is the clickable tab xul element, the one found in the tab strip of the firefox window, atab.linkedbrowser is same as browser var above //can stylize tab like atab.style.backgroundcolor = 'blue'; //can stylize the tab like atab.style.fontcolor = 'red'; var browser = atab.linkedbrowser; //this is the browser within the tab //this is where the example in the previous section ends return { adomwindow: adomwindow, gbrowser: gbrowser, atab: atab, browser: browser, contentwindo...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
the breakdown: 1 master screen media file which imports 4 files: 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?
...around that time, i started discovering great sites like glish.com and bluerobot.com.
...it also eliminates most of the background colors and images to save on printer ink.

Finding the code to modify - Archive of obsolete content
when you select a node in the tree, a red border flashes for several seconds around the visual representation of that node in the browser window.
...notice the flashing red border around the horizontal status bar at the bottom of the browser window.
...notice the flashing red border around each different section of the status bar.

Drag and Drop - Archive of obsolete content
this section describes how to implement objects that can be dragged around and dropped onto other objects.
... the drag and drop interface many user interfaces allow one to drag particular objects around within the interface.
...mozilla and xul provide a number of events that can handle when the user attempts to drag objects around.

Style System Overview - Archive of obsolete content
“reset”: 'border', 'background', etc.
... we create one style context per frame, since frames point to style contexts rather than the other way around.
... style context tree: doc: b ↙ ↓ ↘ title: c para: f class="emph" para: d ↓ ↓ quote: a quote: a ↓ span: e class="emph" the rule tree and style data all of the style structs that can be obtained through a style context add up to around 900 bytes.

Venkman Introduction - Archive of obsolete content
this quick stop mode reflects a common scenario in javascript debugging, which is to inspect and debug scripts while they are running, as on a page where elements are moved around dynamically with dhtml.
...if the breakpoint is successfully set, the margin will show the letter "b" on a red background, and both the loaded scripts view and interactive session view will provide feedback.
... the best way to get to know venkman, of course, is to play around with it — to set it up in the way that makes the most sense to you, to try loading scripts and setting breakpoints, evaluating expressions in the interactive session view, watching the values of variables as they change when scripts are executed, getting profile data.

loadTabs - Archive of obsolete content
« xul reference home loadtabs( uris, loadinbackground, replace ) loadtabs( uris, params ) return type: no return value loads a set of uris, specified by the array uris, into tabs.
... if loadinbackground is true, the tabs are loaded in the background, and if replace is true, the currently displayed tabs are replaced with the specified uris instead of adding new tabs.
... the properties of params are following: boolean inbackground boolean replace boolean allowthirdpartyfixup tab targettab number newindex object postdatas number usercontextid ...

Filtering - Archive of obsolete content
it will also need to include a <menupopup> around all of the items.
...several workarounds can be used in this simple example.
...another workaround is to just rebuild the template once the data has been loaded.

Result Generation - Archive of obsolete content
first, however, some background.
...to navigate around, you could start at node a and navigate around the graph following the arrows to b, c or d.
...templates provide a means of navigating around using only arrows with specific labels.

Groupboxes - Archive of obsolete content
a simple groupbox example the example below shows a simple groupbox: example 1 : source view <groupbox> <caption label="answer"/> <description value="banana"/> <description value="tangerine"/> <description value="phone booth"/> <description value="kiwi"/> </groupbox> this will cause four pieces of text to be displayed surrounded by a box with the label answer.
...ements within the structure, such as in the following example: example 3 : source view <radiogroup> <radio id="no" value="no" label="no number"/> <radio id="random" value="random" label="random number"/> <hbox> <radio id="specify" value="specify" label="specify number:"/> <textbox id="specificnumber"/> </hbox> </radiogroup> note that the radiogroup element does not draw a border around it.
... you should place a groupbox element around it if a border and caption are desired.

Modifying the Default Skin - Archive of obsolete content
for example, by adding the following to the end of the file, you can change all menubar elements to have a red background.
... menubar { background-color: red; } if you open any firefox window after making this change, the menu bars will be red.
...for example, to add a red border around the menu commands in the bookmarks manager window, add the following to bookmarksmanager.css in the classic.jar or your favorite skin archive.

Skinning XUL Files by Hand - Archive of obsolete content
in a cascading stylesheet, the style definitions have the following basic form: element { style-attribute1: value; style-attribute2: value; style-attribute3: value; } for example, the following definition -- were it not in serious conflict with the many menu style definitions in the global skin -- makes all xul menus appear with a one pixel border, a light blue background, and 10 point fonts: menu { border: 1px; background-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids.
... here is a very short (but complete!) cascading stylesheet that might be referenced and used by a xul file: toolbar.nav-bar { background-image: url("chrome://navigator/skin/navbar-bg.gif"); padding: 0px; padding-bottom: 2px; } box#navbar { background-color: lightblue; } a:link { color: #fa8072; } this stylesheet exhibits three of the different types of style definitions described above.
... add the following lines to the file: @import url(chrome://global/skin/); box#bbox { background-color: lightgrey; } button#rd { background-color: red; color: white; } save it in the same directory as your xul file.

Tree Box Objects - Archive of obsolete content
note that redrawing does not occur until the calling script ends since mozilla does not redraw in the background.
...if you move the mouse around in the previous example, you might notice the label change between 'text' and 'cell'.
... the value 'text' indicates the area where the text would be drawn and the value 'cell' indicates the area around the text, for example, the margin on the left side where the open and close twisties are normally drawn.

resizer - Archive of obsolete content
attributes dir, element, type examples resizing a window <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" hidechrome="true" windowtype="main" orient="vertical" sizemode="normal" width="400" height="300" persist="screenx screeny width height"> <hbox flex="1"> <vbox width="2" style="background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <resizer dir="bottomleft" height="2" style="cursor: sw-resize;"/> </vbox> <vbox flex="1"> <resizer dir="top" height="2" style="background-color: grey; cursor: n-resize;"/> <browser flex="1" id="browser" type="content-primary"/> <resizer dir="...
...bottom" height="2" style="background-color: grey; cursor: s-resize;"/> </vbox> <vbox width="2" style="background-color: grey; overflow: hidden;"> <resizer dir="topright" height="2" style="cursor: ne-resize;"/> <resizer dir="right" flex="1" style="cursor: e-resize;"/> <resizer dir="bottomright" height="2" style="cursor: se-resize;"/> </vbox> </hbox> </window> resizing an element <stack style="border: 1px solid black;"> <button id="button" label="resizable" left="18" top="18" right="18" bottom="18"/> <resizer dir="topleft" style="background: black; -moz-appearance: none;" element="button" left="0" top="0" width="16" height="16"/> <resizer dir="topright" style="background: black; -moz-appearance: none;" element="button" right="0" top="0" width="16" he...
...ight="16"/> <resizer dir="bottomleft" style="background: black; -moz-appearance: none;" element="button" left="0" bottom="0" width="16" height="16"/> <resizer dir="bottomright" style="background: black; -moz-appearance: none;" element="button" right="0" bottom="0" width="16" height="16"/> </stack> attributes dir type: one of the values below the direction that the window is resized.

window - Archive of obsolete content
by default, the window will have a platform-specific frame around it.
... activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background).

Archived Mozilla and build documentation - Archive of obsolete content
drag and drop this section describes how to implement objects that can be dragged around and dropped onto other objects.
... space manager high level design the space manager and associated classes and structures are used by block and line layout to manage rectangular regions that are occupied and available, for correct handling of floated elements and the elements that flow around them.
...this information is used by block layout to correctly compute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits.

Extentsions FAQ - Archive of obsolete content
there are workarounds to this restriction by messing around with overflow or negative margins but i forgot offhand how to do that.
... var tab = gbrowser.addtab( url ); // and if you want it to load in the foreground: gbrowser.selectedtab = tab; is it possible to read the html-code of the current url/site?
... is there some workaround for the timing issue with windows and linux?

-ms-wrap-through - Archive of obsolete content
the -ms-wrap-through css property is a microsoft extension that specifies how content should wrap around an exclusion element.
...its descendant inline content wraps around exclusions defined outside the element.
... remarks you can use the -ms-wrap-through property to control the effect of exclusions; for instance, to cause one content block to wrap around an exclusion element and another to intersect the same exclusion element.

:-moz-system-metric(windows-default-theme) - Archive of obsolete content
example html content <p id="defaultthemes"> this paragraph should have a green background with luna/royale/zune/aero windows themes and red with other themes.
... </p> <p id="nondefaultthemes"> this paragraph should have a green background with windows classic or third-party themes and red with other themes.
... </p> <p id="notsupported">theme detection is not supported.</p> css content #defaultthemes, #nondefaultthemes { background-color: #ffa0a0; } #defaultthemes:-moz-system-metric(windows-default-theme) { background-color: #a0ffa0; } #nondefaultthemes:not(-moz-system-metric(windows-default-theme)) { background-color: #a0ffa0; } #notsupported:-moz-system-metric(windows-default-theme), #notsupported:not(:-moz-system-metric(windows-default-theme)) { display: none; } specifications not part of any specification.

Windows Media in Netscape - Archive of obsolete content
instead of doing that, this is the recommendation and workaround for netscape 7.1: <script for="player" event="scriptcommand(type, param)"> if (type == "text") { var cap = document.getelementbyid("captext"); cap.innerhtml = param; } </script> more detailed examples are available in the final section on examples and sample code.
...in the case of close captioning media content, the player api player.closedcaption.captioningid = "captext"; is not supported, and the workaround is to capture events fired by the media player in script using script for event.
... closecap-outtakes.html shows the closed captioning workaround and scripting.

Archive of obsolete content
beginner tutorials this page includes archived beginners tutorials, from various places around mdn.
...it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
...due to a limitation of the present implementation of nspr io on nt, programs must follow the following guideline: using ssh to connect to cvs using web standards in your web pages using workers in extensions this article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface.

Index - Game development
51 load the assets and print them on screen 2d, beginner, canvas, games, javascript, phaser, sprites, tutorial our game will feature a ball rolling around the screen, bouncing off a paddle, and destroying bricks to earn points — familiar, huh?
...we need a way to introduce gameplay, so in this article we'll create a paddle to move around and hit the ball with.
... 65 game over beginner, canvas, games, graphics, javascript, tutorial, game over it's fun to watch the ball bouncing off the walls and be able to move the paddle around, but other than that the game does nothing and doesn't have any progression or end goal.

Building up a basic demo with the PlayCanvas engine - Game development
then it adds a camera component to it with the light gray clearcolor — the color will be visible as the background.
...it is also rotated around the x axis to show it's actually a 3d shape.
... moving beside rotation and scaling we can also move objects around the scene.

Scaling - Game development
adding a custom canvas background colour we can also add a custom background color to our canvas, so it won't stay black.
... the stage object has a backgroundcolor property for this purpose, which we can set using css color definition syntax.
... add the following line below the other three you added earlier: game.stage.backgroundcolor = '#eee'; compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps now we've set up the scaling for our game, let's continue to the third lesson and work out how to load the assets and print them on screen.

2D maze game with device orientation - Game development
you can create this yourself if you want to follow along: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>cyber orb demo</title> <style> body { margin: 0; background: #333; } </style> <script src="src/phaser-arcade-physics.2.2.2.min.js"></script> <script src="src/boot.js"></script> <script src="src/preloader.js"></script> <script src="src/mainmenu.js"></script> <script src="src/howto.js"></script> <script src="src/game.js"></script> </head> <body> <script> (function() { var game = new phaser.game(320, 480, phaser.canvas, 'game'); ...
... controlling the ball it’s cool to have the ball ready to be thrown around in the play area, but it’s also important to be able to actually move it!
... adding the hole the main objective in the game is to move the ball from the starting position to the ending position: a hole in the ground.

CSS - MDN Web Docs Glossary: Definitions of Web-related terms
here is an example that makes every html paragraph yellow against a black background: /* the selector "p" indicates that all paragraphs in the document will be affected by that rule */ p { /* the "color" property defines the text color, in this case yellow.
... */ color: yellow; /* the "background-color" property defines the background color, in this case black.
... */ background-color: black } "cascading" refers to the rules that govern how selectors are prioritized to change a page's appearance.

Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1f...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: [col1-start...

Pseudo-classes and pseudo-elements - Learn web development
it acts as if a <span> was magically wrapped around that first formatted line, and updated each time the line length changed.
...you can play around with the css and change how it looks and behaves.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Sizing items in CSS - Learn web development
understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via css and define a few terms around sizing that will help you in the future.
...this means you can have equal-sized margins and padding all around the box.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Test your skills: values and units - Learn web development
task one in this task, the first list item has been given a background color using hex color codes.
... your task is to complete the css using the same color in different formats, plus a final list item where you should make the background semi-opaque.
... task three in this task you need move the background image so that it is centered horizontally, and 20% from the top of the box.

Beginner's guide to media queries - Learn web development
you can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger.
... walkthrough: a simple mobile-first layout our starting point is an html document with some css applied to add background colors to the various parts of the layout.
... * { box-sizing: border-box; } body { width: 90%; margin: 2em auto; font: 1em/1.3 arial, helvetica, sans-serif; } a:link, a:visited { color: #333; } nav ul, aside ul { list-style: none; padding: 0; } nav a:link, nav a:visited { background-color: rgba(207, 232, 220, 0.2); border: 2px solid rgb(79, 185, 227); text-decoration: none; display: block; padding: 10px; color: #333; font-weight: bold; } nav a:hover { background-color: rgba(207, 232, 220, 0.7); } .related { background-color: rgba(79, 185, 227, 0.3); border: 1px solid rgb(79, 185, 227); padding: 10px; } .sidebar { background-color: rgba(207, 232, 220, 0.5); padding: 10px; } article { margin-bottom: 1em; } we've made no layout changes, however the...

What is CSS? - Learn web development
you'll see reference to these modules as you explore mdn and many of the documentation pages are organized around a particular module.
... for example, you could take a look at the mdn reference to the backgrounds and borders module to find out what its purpose is, and what different properties and other features it contains.
... for a specific example, let's go back to the backgrounds and borders module — you might think that it makes logical sense for the background-color and border-color properties to be defined in this module.

Use CSS to solve common problems - Learn web development
es how to use pseudo-elements how to apply multiple selectors to the same rule how to specify colors in css how to debug css in the browser css and text how to style text how to customize a list of elements how to style links how to add shadows to text boxes and layouts how to size css boxes how to control overflowing content how to control the part of a css box that the background is drawn under how do i define inline, block, and inline-block?
... how to use background-clip to control how much of the box your background image covers.
... how to change the box model completely using box-sizing how to control backgrounds how to control borders how to style an html table how to add shadows to boxes uncommon and advanced techniques css allows some advanced design techniques.

Fundamental text and font styling - Learn web development
but it was a rare occasion such as this that he did.</p> you can find the finished example on github (see also the source code.) color the color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property).
... note: font names that have more than one word — like trebuchet ms — need to be surrounded by quotes, for example "trebuchet ms".
...body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) so to set our lines of text to 1.6 times the height of the font, you'd use this: line-height: 1.6; applying this to the <p> elements in our example would give us this result: hidden example2 <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled it...

Learn to style HTML using CSS - Learn web development
this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.
...we round off the module by looking at applying custom fonts to your page, and styling lists and links.
... from the beginning, you'll primarily apply colors to html elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements.

What are hyperlinks? - Learn web development
back in 1989, tim berners-lee, the web's inventor, spoke of the three pillars on which the web stands: url, an address system that keeps track of web documents http, a transfer protocol to find documents when given their urls html, a document format allowing for embedded hyperlinks as you can see in the three pillars, everything on the web revolves around documents and how to access them.
... links stand out from the surrounding text by being underlined and in blue text.
... to get some more theoretical background, learn about urls and their structure, since every link points to a url.

The HTML5 input types - Learn web development
it is a helpful aid to guide users to fill out a form accurately, and it can save time — it is useful to know that your data is not correct immediately, rather than having to wait for a round trip to the server.
...often, search fields are rendered with rounded corners; they also sometimes display an "Ⓧ", which clears the field of any value when clicked).
... the following firefox for android keyboard screenshot provides an example: due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this means it may include letters, etc.).

Tips for authoring fast-loading HTML pages - Learn web development
if you use background images a lot in your css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite.
... then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately.
... this technique works best with elements that will have limited dimensions, and will not work for every use of a background image.

Document and website structure - Learn web development
with the right css, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.
... note: colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind.
... blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

What’s in the head? Metadata in HTML - Learn web development
other types of metadata as you travel around the web, you'll find other types of metadata, too.
... the humble favicon has been around for many years.
... the css has caused the background to go green, and the text to become bigger.

Basic math in JavaScript — numbers and operators - Learn web development
for example, to round your number to a fixed number of decimal places, use the tofixed() method.
... if you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first.
...you can see that it's been incremented if you return the variable value again: num1; the same is true of -- : try the following let num2 = 6; num2--; num2; note: you can make the browser do it the other way round — increment/decrement the variable then return the value — by putting the operator at the start of the variable instead of the end.

Silly story generator - Learn web development
concatenate ' stone' onto the end of the result of the overall math.round() call.
...concatenate ' centigrade' onto the end of the result of the overall math.round() call.
...the following for example turns the background of the <html> element red — so the entire browser window should go red if the javascript is applied properly: document.queryselector('html').style.backgroundcolor = 'red'; math.round() is a built-in javascript method that simply rounds the result of a calculation to the nearest whole number.

Useful string methods - Learn web development
extcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssol...
...tem.textcontent = result; list.appendchild(listitem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssol...
...tem.textcontent = result; list.appendchild(listitem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jsso...

Introduction to client-side frameworks - Learn web development
there are a number of advantages of this approach, mostly around performance (your user's device isn’t building the page with javascript; it's already complete) and security (static pages have fewer attack vectors).
... static site generators have been around for quite a long time, but they have seen a bit of a revival in the recent history of the web.
... summary and that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in!

Framework main features - Learn web development
while it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.
...the curly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our <h1>.
... given this handlebars template: <header> <h1>hello, {{subject}}!</h1> </header> and this data: { subject: "world" } handlebars will build html like this: <header> <h1>hello, world!</h1> </header> typescript typescript is a superset of javascript, meaning it extends javascript — all javascript code is valid typescript, but not the other way around.

Introduction to automated testing - Learn web development
this works on the premise that things like gulp plugins are basically wrappers around command line tools.
... from here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc.
... from here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc.

Introduction to cross browser testing - Learn web development
this is inevitable when you are dealing with bleeding edge features that browsers are just getting round to implementing, or if you have to support really old browsers that are no longer being developed, which may have been frozen (i.e.
...this may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a polyfill to mimic any missing support using javascript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the background depending on what the browser supports.
...once you've discovered what is causing your bug, you need to decide how to work around it in the particular browser it is causing problems in — you can't just change the problem code outright, as this may break the code in other browsers.

Mozilla’s UAAG evaluation report
checkpoint title status notes/plans 3.1 toggle background images.
... (p1) c preferences, appearance, colors - "use my chosen colors, ignoring the colors and background image specified" 3.2 toggle audio, video, animated images.
...(p1) vg provides a focus outline box highlights follow graphical rendering conventions for windows does not highlight selected images we do not have the ability to show a border around the text selection we have the following focus appearance prefs that are not exposed in the ui, but can be manually inserted in the user's prefs.js file: setboolpref("browser.display.use_focus_colors", usefocuscolors); /* true or false */ setcharpref("browser.display.focus_background_color", colorstring); /* for example #ffeedd or the name of a color */ setcharpref("browser.displa...

Debugging on Windows
there are two ways to work around this problem: turn off automatic symbol downloading for system libraries: in tools > options > debugging > symbols, uncheck the microsoft symbol server.
... for more details, including a work-around see this blog post or this social.msdn thread.
... (and just in-case those links die, the work-around is to execute bcdedit /set xsavedisable 1 from an elevated command-prompt to disable avx support.) got a tip?

Using the Browser API
this is implemented in our sample app with the following functions: browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function(e) { canmovebwd(); canmovefwd(); stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); when the mozbrowserloadstart event fires, the latest page request has started loading, and we change the button to a cross to indicate "stop".
... in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience — this can be read out of the event object's e.detail.backgroundcolor value.
... when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159).

HTML parser threading
initialization an nshtml5parser is constructed without an nshtml5streamparser due to legacy code structure around parser creation.
...a handle points to memory allocated by the tree builder and guaranteed to stick around for the life time of the parser.
...(nshtml5treeopexecutor::runflushloop is on the call stack already in this case and will loop around to start flushing the ops right away.) if there's only one speculation or the speculation failed, it's necessary to bother the parser thread.

CustomizableUI.jsm
typically, you would do this using a try...finally block wrapped around your insertion code.
... parameters aproperties the specification for the widget return value a wrapper around the created widget.
... parameters awidgetid the id of the widget whose information you need return value a wrapper around the widget as described above, or null if the widget is known not to exist (any more).

Sqlite.jsm
the sqlite.jsm javascript code module is a promise-based wrapper around the storage/sqlite interface.
...this is a glorified wrapper around the pragma shrink_memory statement, which tells sqlite to shrink its memory usage (by clearing caches, etc).
...this is a wrapper around the pragma user_version statement.

Mozilla DOM Hacking Guide
the relevant code is at nsdomclassinfo.cpp, around line 4520.
...specifically, due to some changes that happened around, april 2002, some things that were not possible before are now possible.
... for domimplementation, this is around line 1220 (at the time of writing this document): 1224 dom_classinfo_map_begin(domimplementation, nsidomdomimplementation) the next line specifies that the domimplementation object implements the nsidomdomimplementation interface.

Mozilla Web Developer FAQ
these aspects of the layout can be changed by explicitly setting the display css property of the images (and possible surrounding <a> elements) to block.
...when xhtml output has been retrofitted to a content management system that was not designed for xml from the ground up, the system usually ends up discriminating gecko users by serving tag soup labeled as xml to gecko (leading to a parse error) and serving the same soup labeled as text/html to ie (not leading to a parse error).
...this affects data round tripping using hidden form inputs.

Profiling with Xperf
(note that it's not the first version number in the about window; that's the windows version.) if you have an older version, you will experience bugs, especially around symbol loading for local builds.
...it's possible to get around that by doing a simultaneous capture of non-heap data.
... dragging the columns around will change grouping in various ways; experiment to get the data that you're looking for.

Animated PNG graphics
as per the png specification, if a 'bkgd' chunk exists it may be used to fill the canvas if there is no preferrable background.
... 1 apng_dispose_op_background the frame's region of the output buffer is to be cleared to fully transparent black before rendering the next frame.
... if the first 'fctl' chunk uses a dispose_op of apng_dispose_op_previous it should be treated as apng_dispose_op_background.

XPCOM array guide
typesafe arrays nscomarray<t> nscomarray<t> is a wrapper around nstarray<t>, so it has a similar api.
...you can work around this by using nstarray<uniqueptr<t>> instead.
... nsistringenumerator string enumerators provide an easy way to pass a list of strings around with minimal copying.

Avoiding leaks in JavaScript XPCOM components
one might think that the wrappers of native xpcom objects (to allow them to be used from javascript) would just work the other way around.
...this means that without some workaround, all of the browsers will remain in memory until the parent window is closed.
... the workaround is simple: we have a destroy method on browser that tabbrowser can call when it's done with a browser.

Using XPCOM Utilities to Make Things Easier
interface must be generated by xpidl using the macros described here, the code for the weblock component has gone from around 340 lines of code to just under 40.
...for weblock, where the string classes need to be only wrappers around already existing string data, trading advanced functionality for a much smaller footprint is the right way to go.
...if you need to keep this string data around past the lifetime of the string object, you must make a copy.

Detailed XPCOM hashtable guide
nsthashtable - low-level c++ wrapper around pldhash; generates callback functions and handles most casting automagically.
... nsdatahashtable/nsinterfacehashtable/nsclasshashtable - high-level c++ wrappers around pldhash; simplifies the common usage pattern mapping a simple keytype to a simple datatype; client does not need to declare or manage an entry class; nsdatahashtable datatype is a scalar such as pruint32; nsinterfacehashtable datatype is an interface; nsclasshashtable datatype is a class pointer owned by the hashtable.
...they provide the following features: hashtable operations can be completed without using an entry class, making code easier to read; optional thread-safety: the hashtable can manage a read-write lock around the table; predefined key classes provide automatic cleanup of strings/interfaces nsinterfacehashtable and nsclasshashtable automatically release/delete objects to avoid leaks.

Mozilla internal string guide
capacity-aware means that the caller is made aware of how the caller-requested buffer capacity was rounded up to mozjemalloc buckets.
...if the data that actually needs to be written is larger than the best-case estimate but still fits within the rounded-up capacity, there is no need to reallocate despite requesting the best-case capacity.
... bulkwrite() takes four arguments: the new capacity (which may be rounded up), the number of code units at the beginning of the string to preserve (typically the old logical length), a boolean indicating whether reallocating a smaller buffer is ok if the requested capacity would fit in a buffer that's smaller than current one, and a reference to an nsresult for indicating failure on oom.

nsILoadGroup
rview void addrequest(in nsirequest arequest, in nsisupports acontext); void removerequest(in nsirequest arequest, in nsisupports acontext, in nsresult astatus); attributes attribute type description activecount unsigned long returns the count of "active" requests (that is requests without the load_background bit set).
...if this is a foreground request then the groupobserver's onstartrequest will be called.
...if this is a foreground request then the groupobserver's onstoprequest will be called.

nsITaskbarPreviewController
return value true if you want a frame drawn around the preview, otherwise false.
... note: it's guaranteed that width ÷ height will equal the thumbnailaspectratio, within the margin of rounding errors.
... return value true if you want a frame drawn around the thumbnail, otherwise false.

nsITreeView
orientation the position around the given row.
... orientation the position around the given row.
... getcolumnproperties() called to get properties to paint a column background.

Performance
when you execute a sql statement in isolation, an implicit transaction is created around that statement.
...therefore, if you are doing many transactions in a row, you will get significant performance improvements by surrounding them in a transaction.
...the way to work around this is to run the vacuum command to remove this space.

wrappedJSObject
ent gets wrapped by xpconnect in the same way: var comp = components.classes["@myself.com/my-component;1"].getservice(); if we try to call the hello() method we defined in our component implementation, we get: > comp.hello(); typeerror on line 1: comp.hello is not a function this happens because, as we mentioned earlier, comp is not the helloworld js object itself, but an xpconnect wrapper around it: > dump(comp); [xpconnect wrapped nsisupports] the idea of these wrappers is to make the javascript-implemented xpcom components look just like any other xpcom component to the user.
... more specifically, as xpconnect source comments say, you can get comp.wrappedjsobject if three conditions are met: comp really is an xpconnect wrapper around a js object.
... wrappers around non-js objects don't have this property.

Creating a Custom Column
don't forget to add in a splitter before the column to ensure that the user can easily resize and drag our column around.
...most of the dirty tasks (displaying and sorting) are done for you in the background - so that all that's left to you, the extension developer is to populate the code with your feature.
...what happens is: usually, the event sequence is: jsm load -> onload -> msgcreatedbview with enigmail, the event sequence becomes jsm load -> msgcreatedbview -> onload to workaround this, you can either i) manually run addcustomhandler() at the end of your onload handler or ii) register createdbobserver when your .jsm is loaded.

Plug-in Basics - Plugins
the embed element has the following syntax and attributes: <embed src="location" type="mimetype" pluginspage="instrurl" pluginurl="pluginurl" align="left"|"right"|"top"|"bottom" border="borderwidth" frameborder="no" height="height" width="width" units="units" hidden="true|false" hspace="horizmargin" vspace="vertmargin" name="pluginname" palette="foreground"|"background" > ...
... hspace and vspace create a margin of the specified width, in pixels, around the plug-in.
... border: draw a border 25 pixels wide around the plug-in.

Examine and edit CSS - Firefox Developer Tools
in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.
...(note that this setting is independent of the "browser styles" checkbox in the computed view.) user-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix (user agent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule.
...for example, searching for "color" will highlight declarations containing border-bottom-color and background-color as well as just color.: if you enclose the search query in backticks, like this: `color`, the search is restricted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them.

Select an element - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
... click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard.
...after that, as you move the mouse around the page, the element under the mouse is highlighted.

Select and highlight elements - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
... click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard.
...after that, as you move the mouse around the page, the element under the mouse is highlighted.

AudioListener.dopplerFactor - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.forwardX - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.forwardY - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.forwardZ - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.positionX - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.positionY - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.positionZ - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.setOrientation() - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.setPosition() - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.speedOfSound - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.upX - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.upY - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener.upZ - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

AudioListener - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

BaseAudioContext.createPanner() - Web APIs
you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
... to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
...listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; }...

CSSImageValue - Web APIs
the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
... examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px; background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map.
... we then get() the background-image from the stylemap and stringify it: // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // return the cssimagevalue example console.log( allcomputedstyles.get('background-image') ); console.log( allcomputedstyles.get('background-image').tostring() ); specifications specification status comment css typed om level 1the definition of 'cssimagevalue' in that specification.

Using the CSS properties and values API - Web APIs
when a property has a registered syntax, though, the browser can optimize around that syntax, including being able to animate it!
... .registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 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 class="reg...
...istered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 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...

CanvasRenderingContext2D.arcTo() - Web APIs
this method is commonly used for making rounded corners.
... creating a rounded corner this example creates a rounded corner using arcto().
...you can play around with range input to see how arc changes.

CanvasRenderingContext2D.globalAlpha - Web APIs
we begin by drawing a solid background composed of four differently colored squares.
...if we were to increase the step count (and thus draw more circles), the background would eventually disappear completely from the center of the image.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.globalalpha' in that specification.

Manipulating video using canvas - Web APIs
<!doctype html> <html> <head> <style> body { background: black; color:#cccccc; } #c2 { background-image: url(media/foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" cro...
... canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video.
... the for loop that begins on line 6 scans through the frame's pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from foo.png.

Compositing example - Web APIs
pure black or white does not result in pure black or white.', 'subtracts the bottom layer from the top layer or the other way round to always get a positive value.', 'like difference, but with lower contrast.', 'preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.', 'preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.', 'preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.', 'preserves the hue and chroma of th...
... function createcanvas() { var canvas = document.createelement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); var dt = document.createelement("dt"); dt.t...
...idth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,30,30) ctx.fill(); return ctx.canvas; }; // hsv (1978) = h: hue / s: saturation / v: value color = {}; color.hsv_rgb = function (o) { var h = o.h / 360, s = o.s / 100, v = o.v / 100, r, g, b; var a, b, c, d; if (s == 0) { r = g = b = math.round(v * 255); } else { if (h >= 1) h = 0; h = 6 * h; d = h - math.floor(h); a = math.round(255 * v * (1 - s)); b = math.round(255 * v * (1 - (s * d))); c = math.round(255 * v * (1 - (s * (1 - d)))); v = math.round(255 * v); switch (math.floor(h)) { case 0: r = v; g = c; b = ...

Transformations - Web APIs
we use it to rotate the canvas around the current origin.
... rotate(angle) rotates the canvas clockwise around the current origin by the angle number of radians.
... ctx.fillrect(150, 30, 100, 100); ctx.translate(200, 80); // translate to rectangle center // x = x + 0.5 * width // y = y + 0.5 * height ctx.rotate((math.pi / 180) * 25); // rotate ctx.translate(-200, -80); // translate back // draw grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(150, 30, 100, 100); } to rotate the rectangle around its own center, we translate the canvas to the center of the rectangle, then rotate the canvas, then translate the canvas back to 0,0, and then draw the rectangle.

DeviceOrientationEvent.DeviceOrientationEvent() - Web APIs
options optional options are as follows: alpha: a number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360.
... beta: a number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180.
... gamma: a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90.

Document: drag event - Web APIs
html <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref.
....opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it if (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event.preve...
...ntdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.

Introduction to the DOM - Web APIs
but there are a number of different data types being passed around the api that you should be aware of.
... note: because the vast majority of code that uses the dom revolves around manipulating html documents, it's common to refer to the nodes in the dom as elements, although strictly speaking not every node is an element.
... figure 0.1 sample dom test page in this example, the drop-down menus dynamically update such dom—accessible aspects of the web page as its background color (bgcolor), the color of the hyperlinks (alink), and color of the text (text).

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
creating space around and inside elements is the job of css.
... consider this example (again, the whitespace characters in the html are marked so they are visible): .people-list { list-style-type: none; margin: 0; padding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; } <ul class="people-list">⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ </ul> this renders as follows: hidden example 3 .people-list { list-style-type: none; margin: 0; padding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; } <ul class="peopl...
... there are a few ways of getting around this problem: use flexbox to create the horizontal list of items instead of trying an inline-block solution.

Element: auxclick event - Web APIs
the former changes the color of the button background, while the latter changes the button foreground (text) color.
... javascript let button = document.queryselector('button'); let html = document.queryselector('html'); function random(number) { return math.floor(math.random() * number); } function randomcolor() { return `rgb(${random(255)}, ${random(255)}, ${random(255)})`; } button.onclick = function() { button.style.backgroundcolor = randomcolor(); }; button.onauxclick = function(e) { e.preventdefault(); button.style.color = randomcolor(); } button.oncontextmenu = function(e) { e.preventdefault(); } notice that in addition to capturing the auxclick event using onauxclick, the contextmenu event is also captured, and preventdefault() called on that event, in order to prevent the context menu from popping up aft...
... 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).

Element: click event - Web APIs
internet explorer internet explorer 8 & 9 suffer from a bug where elements with a computed background-color of transparent that are overlaid on top of other element(s) won't receive click events.
... known workarounds for this bug: for ie9 only: set background-color: rgba(0,0,0,0) set opacity: 0 and an explicit background-color other than transparent for ie8 and ie9: set filter: alpha(opacity=0); and an explicit background-color other than transparent safari mobile safari mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g.
... known workarounds for this bug: set cursor: pointer; on the element or any of its ancestors.

Event.eventPhase - Web APIs
<li>repeat the experience</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlis...
...= "divinfo") { if (chcapture.checked) { d.addeventlistener("click", ondivclick, true) } else { d.addeventlistener("click", ondivclick, false) d.onmousemove = function () { clear = true } } } } } function ondivclick(e) { if (clear) { clear() clear = false } if (e.eventphase == 2) e.currenttarget.style.backgroundcolor = 'red'; let level = e.eventphase == 0 ?
..."bubbling" : "error"; divinfo.innerhtml += e.currenttarget.id + "; eventphase: " + level + "<br/>"; } function clear() { for (let i = 0; i < divs.length; i++) { if (divs[i].id != "divinfo") { divs[i].style.backgroundcolor = (i & 1) ?

EventTarget.addEventListener() - Web APIs
note, however, that you'll need to keep a reference to the listener around so you can remove it later.
...this, and the fact that objects can have properties, and that they can be passed around by reference, makes them likely candidates for sharing data among scopes.
... polyfill you can work around addeventlistener(), removeeventlistener(), event.preventdefault(), and event.stoppropagation() not being supported by internet explorer 8 by using the following code at the beginning of your script.

Using files from web applications - Web APIs
you need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow.
...after creating the new filereader object, we set up its onload function and then call readasdataurl() to start the read operation in the background.
... function fileupload(img, file) { const reader = new filereader(); this.ctrl = createthrobber(img); const xhr = new xmlhttprequest(); this.xhr = xhr; const self = this; this.xhr.upload.addeventlistener("progress", function(e) { if (e.lengthcomputable) { const percentage = math.round((e.loaded * 100) / e.total); self.ctrl.update(percentage); } }, false); xhr.upload.addeventlistener("load", function(e){ self.ctrl.update(100); const canvas = self.ctrl.ctx.canvas; canvas.parentnode.removechild(canvas); }, false); xhr.open("post", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); xhr.

Introduction to the File and Directory Entries API - Web APIs
the file and directory entries api simulates a local file system that web apps can navigate around.
... it can improve performance by letting an app pre-fetch assets in the background and cache locally.
... the app pre-fetches assets in the background, so the user can go to the next task or game level without waiting for a download.

Using the Gamepad API - Web APIs
using button information let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad.
...this has the effect of moving the ball around the screen.
...controllers[j]; var d = document.getelementbyid("controller" + j); var buttons = d.getelementsbyclassname("button"); for (i = 0; i < controller.buttons.length; i++) { var b = buttons[i]; var val = controller.buttons[i]; var pressed = val == 1.0; if (typeof(val) == "object") { pressed = val.pressed; val = val.value; } var pct = math.round(val * 100) + "%"; b.style.backgroundsize = pct + " " + pct; if (pressed) { b.classname = "button pressed"; } else { b.classname = "button"; } } var axes = d.getelementsbyclassname("axis"); for (i = 0; i < controller.axes.length; i++) { var a = axes[i]; a.innerhtml = i + ": " + controller.axes[i].tofixed(4); a.setattribute("va...

GlobalEventHandlers.ondragend - Web APIs
=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev...
....preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it ...

GlobalEventHandlers.ondragenter - Web APIs
=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev...
....preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it ...

GlobalEventHandlers.ondragexit - Web APIs
=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev...
....preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it ...

GlobalEventHandlers.ondragleave - Web APIs
d black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's backg...
...round color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's background color back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element...

HTMLImageElement.border - Web APIs
the obsolete htmlimageelement property border specifies the number of pixels thick the border surrounding the image should be.
... syntax htmlimageelement.border = thickness; let thickness = htmlimageelement.border; value a domstring containing an integer value specifying the thickness of the border that should surround the image, in css pixels.
...instead, use the css border property and its longhand properties to establish borders around images.