Search completed in 2.05 seconds.
<color> - CSS: Cascading Style Sheets
the <
color> css data type represents a
color in the srgb
color space.
... a <
color> may also include an alpha-channel transparency value, indicating how the
color should composite with its background.
... a <
color> can be defined in any of the following ways: using a keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <
color> data type in detail.
...And 134 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
understaning
color, luminance, and saturation is important in meeting wcag 2 accessibility guidelines in terms of ensuring enough
color contrast for sighted users with
color blindness or reduced vision and preventing seizures and other physical reactions in people with vestibular disorders.
... overview
colors, and how they are used, are a major component of accessibility.
... at the surface, the subject seems simple, but it is actually a complex subject because
color is as much about the physiology of the eye and human perception as it is about light emitting from a computer screen.
...And 97 more matches
Color picker tool - CSS: Cascading Style Sheets
colorpicker tool html <div id="container"> <div id="palette" class="block"> <div id="
color-palette"></div> <div id="
color-info"> <div class="title"> css
color </div> </div> </div> <div id="picker" class="block"> <div class="ui-
color-picker" data-topic="picker" data-mode="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" 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%, 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%, 1...
...And 83 more matches
Applying styles and colors - Web APIs
you will learn how to add different
colors, line styles, gradients, patterns and shadows to your drawings.
...
colors up until now we have only seen methods of the drawing context.
... if we want to apply
colors to a shape, there are two important properties we can use: fillstyle and strokestyle.
...And 37 more matches
<input type="color"> - HTML: Hypertext Markup Language
<input> elements of type
color provide a user interface element that lets a user specify a
color, either by using a visual
color picker interface or by entering the
color into a text field in #rrggbb hexadecimal format.
... only simple
colors (without alpha channel) are allowed though css
colors has more formats, e.g.
...
color names, functional notations and a hexadecimal format with an alpha channel.
...And 33 more matches
color - CSS: Cascading Style Sheets
the
color css property sets the foreground
color value of an element's text and text decorations, and sets the current
color value.
... current
color may be used as an indirect value on other properties and is the default for other
color properties, such as border-
color.
... for an overview of using
color in html, see applying
color to html elements using css.
...And 17 more matches
border-color - CSS: Cascading Style Sheets
the border-
color shorthand css property sets the
color of an element's border.
... each side can be set individually using border-top-
color, border-right-
color, border-bottom-
color, and border-left-
color; or using the writing mode-aware border-block-start-
color, border-block-end-
color, border-inline-start-
color, and border-inline-end-
color.
... you can find more information about border
colors in borders in applying
color to html elements using css.
...And 15 more matches
Color masking - Web APIs
« previousnext » this webgl example modifies random
colors by applying
color masking to limit the range of displayed
colors to specific shades.
... masking random
colors this example modifies the random
color animation by applying
color masking with
colormask().
... you can think of the
color masking operation as if looking at the
colored canvas through some tinted glass or
color filter.
...And 13 more matches
Clearing with colors - Web APIs
« previousnext » an example showing how to clear a webgl rendering context to a solid
color.
... clearing the webgl context with a solid
color the simplest graphical webgl program.
...note that css sets the background
color of the canvas to black, so when the canvas turns green we know that webgl's magic has worked.
...And 12 more matches
Using shaders to apply color in WebGL - Web APIs
« previousnext » having created a square plane in the previous demonstration, the next obvious step is to add a splash of
color to it.
... applying
color to the vertices in webgl objects are built using sets of vertices, each of which has a position and a
color.
... by default, all other pixels'
colors (and all its other attributes, including position) are computed using interpolation, automatically creating smooth gradients.
...And 12 more matches
colorpicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a palette of
colors from which a user may select by clicking on one of the grid cells.
... attributes disabled,
color, onchange, preference, tabindex, type properties accessibletype,
color, disabled, open, tabindex, value examples <
colorpicker/> attributes disabled type: boolean indicates whether the element is disabled or not.
...
color type:
color string the currently selected
color.
...And 11 more matches
color-adjust - CSS: Cascading Style Sheets
the
color-adjust css property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device.
... syntax
color-adjust: economy;
color-adjust: exact; the
color-adjust property's value must be one of the following keywords.
...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.
...And 11 more matches
color-interpolation - SVG: Scalable Vector Graphics
the
color-interpolation attribute specifies the
color space for gradient interpolations,
color animations, and alpha compositing.
... note: for filter effects, the
color-interpolation-filters property controls which
color space is used.
... the
color-interpolation property chooses between
color operations occurring in the srgb
color space or in a (light energy linear) linearized rgb
color space.
...And 11 more matches
SVGFEColorMatrixElement - Web APIs
the svgfe
colormatrixelement interface corresponds to the <fe
colormatrix> element.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfe
colormatrixelement" target="_top"><rect x="251" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfe
colormatrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants...
... name value description svg_fe
colormatrix_type_unknown 0 the type is not one of predefined types.
...And 10 more matches
scrollbar-color - CSS: Cascading Style Sheets
the scrollbar-
color css property sets the
color of the scrollbar track and thumb.
... syntax /* keyword values */ scrollbar-
color: auto; scrollbar-
color: dark; scrollbar-
color: light; /* <
color> values */ scrollbar-
color: rebeccapurple green; /* two valid
colors.
...*/ /* global values */ scrollbar-
color: inherit; scrollbar-
color: initial; scrollbar-
color: unset; values <scrollbar-
color> defines the
color of the scrollbar.
...And 10 more matches
color-interpolation-filters - SVG: Scalable Vector Graphics
the
color-interpolation-filters attribute specifies the
color space for imaging operations performed via filter effects.
...
color-interpolation-filters has a different initial value than
color-interpolation.
...
color-interpolation-filters has an initial value of linearrgb, whereas
color-interpolation has an initial value of srgb.
...And 10 more matches
background-color - CSS: Cascading Style Sheets
the background-
color css property sets the background
color of an element.
... syntax /* keyword values */ background-
color: red; background-
color: indigo; /* hexadecimal value */ background-
color: #bbff00; /* fully opaque */ background-
color: #bf0; /* fully opaque shorthand */ background-
color: #11ffee00; /* fully transparent */ background-
color: #1fe0; /* fully transparent shorthand */ background-
color: #11ffeeff; /* fully opaque */ background-
color: #1fef; /* fully opaque shorthand */ /* rgb value */ background-
color: rgb(255, 255, 128); /* fully opaque */ background-
color: rgba(117, 190, 218, 0.5); /* 50% tran...
...sparent */ /* hsl value */ background-
color: hsl(50, 33%, 25%); /* fully opaque */ background-
color: hsla(50, 33%, 25%, 0.75); /* 75% transparent */ /* special keyword values */ background-
color: current
color; background-
color: transparent; /* global values */ background-
color: inherit; background-
color: initial; background-
color: unset; the background-
color property is specified as a single <
color> value.
...And 9 more matches
outline-color - CSS: Cascading Style Sheets
the outline-
color css property sets the
color of an element's outline.
... syntax /* <
color> values */ outline-
color: #f92525; outline-
color: rgb(30,222,121); outline-
color: blue; /* keyword value */ outline-
color: invert; /* global values */ outline-
color: inherit; outline-
color: initial; outline-
color: unset; the outline-
color property is specified as any one of the values listed below.
... values <
color> the
color of the outline, specified as a <
color>.
...And 9 more matches
text-decoration-color - CSS: Cascading Style Sheets
the text-decoration-
color css property sets the
color of decorations added to text by text-decoration-line.
... the
color applies to decorations, such as underlines, overlines, strikethroughs, and wavy lines like those used to mark misspellings, in the scope of the property's value.
... css does not provide a direct mechanism for specifying a unique
color for each line type.
...And 9 more matches
Color contrast - Accessibility
the
color contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.
... having good
color contrast on your site benefits all your users, but it is particularly beneficial to users with certain types of
color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar
colors.
... 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.
...And 7 more matches
color - CSS: Cascading Style Sheets
the
color css media feature can be used to test the number of bits per
color component (red, green, blue) of the output device.
... syntax the
color feature is specified as an <integer> value that represents the number of bits per
color component (red, green, blue) of the output device.
... if the device is not a
color device, the value is zero.
...And 7 more matches
forced-colors - CSS: Cascading Style Sheets
the forced-
colors css media feature is used to detect if the user agent has enabled a forced
colors mode where it enforces a user-chosen limited
color palette on the page.
... syntax the forced-
colors media feature indicates whether or not the browser is currently in forced-
colors mode.
... values none forced
colors mode is not active; the page’s
colors are not being forced into a limited palette.
...And 7 more matches
-moz-border-bottom-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-bottom-
colors css property sets a list of
colors for the bottom border.
... /* single <
color> value */ -moz-border-bottom-
colors: #f0f0f0; /* multiple <
color> values */ -moz-border-bottom-
colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-bottom-
colors: inherit; -moz-border-bottom-
colors: initial; -moz-border-bottom-
colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next
color specified in this property, from the outside in.
...if the border is wider than the number of specified
colors, the remaining part of the border is the innermost
color specified.
...And 6 more matches
-moz-border-left-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-left-
colors css property sets a list of
colors for the left border.
... /* single <
color> value */ -moz-border-left-
colors: #f0f0f0; /* multiple <
color> values */ -moz-border-left-
colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-left-
colors: inherit; -moz-border-left-
colors: initial; -moz-border-left-
colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next
color specified in this property, from the outside in.
...if the border is wider than the number of specified
colors, the remaining part of the border is the innermost
color specified.
...And 6 more matches
-moz-border-right-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-right-
colors css property sets a list of
colors for the right border.
... /* single <
color> value */ -moz-border-right-
colors: #f0f0f0; /* multiple <
color> values */ -moz-border-right-
colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-right-
colors: inherit; -moz-border-right-
colors: initial; -moz-border-right-
colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next
color specified in this property, from the outside in.
...if the border is wider than the number of specified
colors, the remaining part of the border is the innermost
color specified.
...And 6 more matches
-moz-border-top-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-top-
colors css property sets a list of
colors for the top border.
... /* single <
color> value */ -moz-border-top-
colors: #f0f0f0; /* multiple <
color> values */ -moz-border-top-
colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-top-
colors: inherit; -moz-border-top-
colors: initial; -moz-border-top-
colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next
color specified in this property, from the outside in.
...if the border is wider than the number of specified
colors, the remaining part of the border is the innermost
color specified.
...And 6 more matches
WebGLRenderingContext.clearColor() - Web APIs
the webglrenderingcontext.clear
color() method of the webgl api specifies the
color values used when clearing
color buffers.
... this specifies what
color values to use when calling the clear() method.
... syntax void gl.clear
color(red, green, blue, alpha); parameters red a glclampf specifying the red
color value used when the
color buffers are cleared.
...And 6 more matches
Simple color animation - Web APIs
« previousnext » a very basic
color animation created using webgl, performed by clearing the drawing buffer with a different random
color every second.
...
color animation with clear this example provides a simple illustration of
color animation with webgl, as well as user interaction.
... <p>a simple webgl program that shows
color animation.</p> <p>you can click the button below to toggle the
color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin...
...And 6 more matches
border-bottom-color - CSS: Cascading Style Sheets
the border-bottom-
color css property sets the
color of an element's bottom border.
... it can also be set with the shorthand css properties border-
color or border-bottom.
... syntax /* <
color> values */ border-bottom-
color: red; border-bottom-
color: #ffbb00; border-bottom-
color: rgb(255, 0, 0); border-bottom-
color: hsla(100%, 50%, 25%, 0.75); border-bottom-
color: current
color; border-bottom-
color: transparent; /* global values */ border-bottom-
color: inherit; border-bottom-
color: initial; border-bottom-
color: unset; the border-bottom-
color property is specified as a single value.
...And 6 more matches
border-left-color - CSS: Cascading Style Sheets
the border-left-
color css property sets the
color of an element's left border.
... it can also be set with the shorthand css properties border-
color or border-left.
... syntax /* <
color> values */ border-left-
color: red; border-left-
color: #ffbb00; border-left-
color: rgb(255, 0, 0); border-left-
color: hsla(100%, 50%, 25%, 0.75); border-left-
color: current
color; border-left-
color: transparent; /* global values */ border-left-
color: inherit; border-left-
color: initial; border-left-
color: unset; the border-left-
color property is specified as a single value.
...And 6 more matches
border-right-color - CSS: Cascading Style Sheets
the border-right-
color css property sets the
color of an element's right border.
... it can also be set with the shorthand css properties border-
color or border-right.
... syntax /* <
color> values */ border-right-
color: red; border-right-
color: #ffbb00; border-right-
color: rgb(255, 0, 0); border-right-
color: hsla(100%, 50%, 25%, 0.75); border-right-
color: current
color; border-right-
color: transparent; /* global values */ border-right-
color: inherit; border-right-
color: initial; border-right-
color: unset; the border-right-
color property is specified as a single value.
...And 6 more matches
border-top-color - CSS: Cascading Style Sheets
the border-top-
color css property sets the
color of an element's top border.
... it can also be set with the shorthand css properties border-
color or border-top.
... syntax /* <
color> values */ border-top-
color: red; border-top-
color: #ffbb00; border-top-
color: rgb(255, 0, 0); border-top-
color: hsla(100%, 50%, 25%, 0.75); border-top-
color: current
color; border-top-
color: transparent; /* global values */ border-top-
color: inherit; border-top-
color: initial; border-top-
color: unset; the border-top-
color property is specified as a single value.
...And 6 more matches
caret-color - CSS: Cascading Style Sheets
the caret-
color css property sets the
color of the insertion caret, the visible marker where the next character typed will be inserted.
...by default, it is black, but its
color can be altered with this property.
... syntax /* keyword values */ caret-
color: auto; caret-
color: transparent; caret-
color: current
color; /* <
color> values */ caret-
color: red; caret-
color: #5729e9; caret-
color: rgb(0, 200, 0); caret-
color: hsla(228, 4%, 24%, 0.8); values auto the user agent selects an appropriate
color for the caret.
...And 6 more matches
color-profile - SVG: Scalable Vector Graphics
the
color-profile attribute is used to define which
color profile a raster image included through the <image> element should use.
... note: as a presentation attribute,
color-profile can be used as a css property.
... as a presentation attribute, it can be applied to any element but it only has an effect on the following element: <image> usage notes value auto | srgb | <name> | <iri> default value auto animatable yes auto all
colors are presumed to be defined in the srgb
color space unless a more precise embedded profile is specified within content data.
...And 6 more matches
CanvasRenderingContext2D.shadowColor - Web APIs
the canvasrenderingcontext2d.shadow
color property of the canvas 2d api specifies the
color of shadows.
... be aware that the shadow's rendered opacity will be affected by the opacity of the fillstyle
color when filling, and of the strokestyle
color when stroking.
... note: shadows are only drawn if the shadow
color property is set to a non-transparent value.
...And 5 more matches
color-rendering - SVG: Scalable Vector Graphics
the
color-rendering attribute provides a hint to the svg user agent about how to optimize its
color interpolation and compositing operations.
...
color-rendering takes precedence over
color-interpolation-filters.
... for example, assume
color-rendering: optimizespeed and
color-interpolation-filters: linearrgb.
...And 5 more matches
stop-color - SVG: Scalable Vector Graphics
the stop-
color attribute indicates what
color to use at a gradient stop.
...so, specifying a stop-
color with the value transparent is equivalent to specifying a stop-
color with the value black and a stop-opacity with the value 0.
... note: as a presentation attribute, stop-
color can be used as a css property.
...And 5 more matches
<feColorMatrix> - SVG: Scalable Vector Graphics
the <fe
colormatrix> svg filter element changes
colors based on a transformation matrix.
... every pixel's
color value [r,g,b,a] is matrix multiplied by a 5 by 5
color matrix to create new
color [r',g',b',a'].
... | r' | | r1 r2 r3 r4 r5 | | r | | g' | | g1 g2 g3 g4 g5 | | g | | b' | = | b1 b2 b3 b4 b5 | * | b | | a' | | a1 a2 a3 a4 a5 | | a | | 1 | | 0 0 0 0 1 | | 1 | in simplified terms, below is how each
color channel in the new pixel is calculated.
...And 5 more matches
<solidcolor> - SVG: Scalable Vector Graphics
the <solid
color> svg element lets authors define a single
color for use in multiple places in an svg document.
... it is also useful as away of animating a palette
colors.
...a workaround is to use a <lineargradient> with only one
color stop.
...And 5 more matches
mozIColorAnalyzer
toolkit/components/places/mozi
coloranalyzer.idlscriptable provides methods to analyze
colors in an image 1.0 66 introduced gecko 17.0 inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) method overview void findrepresentative
color(in nsiuri imageuri, in mozirepresentative
colorcallback callback); methods findrepresentative
color() given an image uri, find the most representative
color for that image based on the frequency of each
color.
... preference is given to
colors that are more interesting.
... it avoids the background
color if it can be discerned and ignores sufficiently transparent
colors.
...And 4 more matches
CSSPrimitiveValue.getRGBColorValue() - Web APIs
the getrgb
colorvalue() method of the cssprimitivevalue interface is used to get an rgb
color value.
... if this css value doesn't contain a rgb
color value, a domexception is raised.
... modification to the corresponding style property can be achieved using the rgb
color interface.
...And 4 more matches
WebGLRenderingContext.colorMask() - Web APIs
the webglrenderingcontext.
colormask() method of the webgl api sets which
color components to enable or to disable when drawing or rendering to a webglframebuffer.
... syntax void gl.
colormask(red, green, blue, alpha); parameters red a glboolean specifying whether or not the red
color component can be written into the frame buffer.
... green a glboolean specifying whether or not the green
color component can be written into the frame buffer.
...And 4 more matches
-webkit-text-stroke-color - CSS: Cascading Style Sheets
the -webkit-text-stroke-
color css property specifies the stroke
color of characters of text.
... if this property is not set, the value of the
color property is used.
... /* <
color> values */ -webkit-text-stroke-
color: red; -webkit-text-stroke-
color: #e08ab4; -webkit-text-stroke-
color: rgb(200, 100, 0); /* global values */ -webkit-text-stroke-
color: inherit; -webkit-text-stroke-
color: initial; -webkit-text-stroke-
color: unset; syntax values <
color> the
color of the stroke.
...And 4 more matches
-ms-scrollbar-base-color - Archive of obsolete content
the -ms-scrollbar-base-
color css property is a microsoft extension that specifies the base
color of the main elements of a scroll bar.
... initial valuedepends on user agentapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <
color> the base
color of the main elements of a scroll bar.
... formal syntax <
color>where <
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 3 more matches
Color vision simulation - Firefox Developer Tools
the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of
color vision deficiency (better known as "
color blindness"), as well as contrast sensitivity loss.
... "
color blindness" is a bit of a misnomer, since most people with these disorders can see
colors, but do not see all of the distinctions that people with normal
color vision can see;
color vision deficiencies affect perception across the
color spectrum, not only of specific
colors like red or green.
...
color vision deficiencies affect about 8% of men, and 0.5% of women.
...And 3 more matches
CanvasGradient.addColorStop() - Web APIs
the canvasgradient.add
colorstop() method adds a new
color stop, defined by an offset and a
color, to a given canvas gradient.
... syntax void gradient.add
colorstop(offset,
color); parameters offset a number between 0 and 1, inclusive, representing the position of the
color stop.
...
color a css <
color> value representing the
color of the stop.
...And 3 more matches
Document.bgColor - Web APIs
the deprecated bg
color property gets or sets the background
color of the current document.
... syntax
color = document.bg
color document.bg
color =
color parameters
color is a string representing the
color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
... example document.bg
color = "darkblue"; notes the default value for this property in firefox is white (#ffffff in hexadecimal).
...And 3 more matches
-webkit-text-fill-color - CSS: Cascading Style Sheets
the -webkit-text-fill-
color css property specifies the fill
color of characters of text.
... if this property is not set, the value of the
color property is used.
... /* <
color> values */ -webkit-text-fill-
color: red; -webkit-text-fill-
color: #000000; -webkit-text-fill-
color: rgb(100, 200, 0); /* global values */ -webkit-text-fill-
color: inherit; -webkit-text-fill-
color: initial; -webkit-text-fill-
color: unset; syntax values <
color> the foreground fill
color of the element's text content.
...And 3 more matches
color-gamut - CSS: Cascading Style Sheets
the
color-gamut css media feature can be used to test the approximate range of
colors that are supported by the user agent and the output device.
... syntax the
color-gamut feature is specified as a keyword value chosen from the list below.
...this includes the vast majority of
color displays.
...And 3 more matches
color-index - CSS: Cascading Style Sheets
the
color-index css media feature can be used to test the number of entries in the output device's
color lookup table.
... syntax the
color-index feature is specified as an <integer> value representing the number of entries in the output device's
color lookup table.
... (this value is zero if the device does not use such a table.) it is a range feature, meaning that you can also use the prefixed min-
color-index and max-
color-index variants to query minimum and maximum values, respectively.
...And 3 more matches
prefers-color-scheme - CSS: Cascading Style Sheets
if you have set privacy.resistfingerprinting to true, prefers-
color-scheme preference is overridden to light.
...(any other value causes firefox to return light.) the prefers-
color-scheme css media feature is used to detect if the user has requested the system use a light or dark
color theme.
... examples the elements below have an initial
color theme.
...And 3 more matches
CSS Color - CSS: Cascading Style Sheets
css
color is a css module that deals with
colors,
color types,
color blending, opacity, and how you can apply these
colors and effects to html content.
... not all css properties that take a <
color> as a value are part of this module, but they do depend upon it.
... reference properties
color color-adjust opacity data types <
color> guides applying
color to html elements using css a guide to using css to apply
color to a variety of types of content.
...And 3 more matches
border-block-color - CSS: Cascading Style Sheets
the border-block-
color css property defines the
color of the logical block borders of an element, which maps to a physical border
color depending on the element's writing mode, directionality, and text orientation.
... it corresponds to the border-top-
color and border-bottom-
color, or border-right-
color and border-left-
color property depending on the values defined for writing-mode, direction, and text-orientation.
... border-block-
color: yellow; border-block-
color: #f5f6f7; the border
color in the other dimension can be set with border-inline-
color which sets border-inline-start-
color, and border-inline-end-
color.
...And 3 more matches
border-block-end-color - CSS: Cascading Style Sheets
the border-block-end-
color css property defines the
color of the logical block-end border of an element, which maps to a physical border
color depending on the element's writing mode, directionality, and text orientation.
... it corresponds to the border-top-
color, border-right-
color, border-bottom-
color, or border-left-
color property depending on the values defined for writing-mode, direction, and text-orientation.
... syntax border-block-end-
color: yellow; border-block-end-
color: #f5f6f7; related properties are border-block-start-
color, border-inline-start-
color, and border-inline-end-
color, which define the other border
colors of the element.
...And 3 more matches
border-inline-color - CSS: Cascading Style Sheets
the border-inline-
color css property defines the
color of the logical inline borders of an element, which maps to a physical border
color depending on the element's writing mode, directionality, and text orientation.
... it corresponds to the border-top-
color and border-bottom-
color, or border-right-
color and border-left-
color property depending on the values defined for writing-mode, direction, and text-orientation.
... border-inline-
color: yellow; border-inline-
color: #f5f6f7; the border
color in the other dimension can be set with border-block-
color which sets border-block-start-
color, and border-block-end-
color.
...And 3 more matches
border-inline-end-color - CSS: Cascading Style Sheets
the border-inline-end-
color css property defines the
color of the logical inline-end border of an element, which maps to a physical border
color depending on the element's writing mode, directionality, and text orientation.
... it corresponds to the border-top-
color, border-right-
color, border-bottom-
color, or border-left-
color property depending on the values defined for writing-mode, direction, and text-orientation.
... syntax border-inline-end-
color: rebeccapurple; border-inline-end-
color: #663399; related properties are border-block-start-
color, border-block-end-
color, and border-inline-start-
color, which define the other border
colors of the element.
...And 3 more matches
border-inline-start-color - CSS: Cascading Style Sheets
the border-inline-start-
color css property defines the
color of the logical inline start border of an element, which maps to a physical border
color depending on the element's writing mode, directionality, and text orientation.
... it corresponds to the border-top-
color, border-right-
color, border-bottom-
color, or border-left-
color property depending on the values defined for writing-mode, direction, and text-orientation.
... syntax border-inline-start-
color: red; border-inline-start-
color: #ee4141; related properties are border-block-start-
color, border-block-end-
color, and border-inline-end-
color, which define the other border
colors of the element.
...And 3 more matches
column-rule-color - CSS: Cascading Style Sheets
the column-rule-
color css property sets the
color of the line drawn between columns in a multi-column layout.
... syntax /* <
color> values */ column-rule-
color: red; column-rule-
color: rgb(192, 56, 78); column-rule-
color: transparent; column-rule-
color: hsla(0, 100%, 50%, 0.6); /* global values */ column-rule-
color: inherit; column-rule-
color: initial; column-rule-
color: unset; the column-rule-
color property is specified as a single <
color> value.
... values <
color> the
color of the rule that separates columns.
...And 3 more matches
String.prototype.fontcolor() - JavaScript
the font
color() method creates a <font> html element that causes a string to be displayed in the specified font
color.
... syntax str.font
color(
color) parameters
color a string expressing the
color as a hexadecimal rgb triplet or as a string literal.
... string literals for
color names are listed in the css
color reference.
...And 3 more matches
color - SVG: Scalable Vector Graphics
the
color attribute is used to provide a potential indirect value, current
color, for the fill, stroke, stop-
color, flood-
color, and lighting-
color attributes.
... note: as a presentation attribute,
color can be used as a css property.
... see css
color for further information.
...And 3 more matches
flood-color - SVG: Scalable Vector Graphics
the flood-
color attribute indicates what
color to use to flood the current filter primitive subregion.
... note: as a presentation attribute, flood-
color can be used as a css property.
... as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-
color="skyblue" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-
color="seagreen" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); transform: translatex(220px);" /> </svg> usage notes value
color initial value black animatable yes specifications specifica...
...And 3 more matches
-ms-scrollbar-3dlight-color - Archive of obsolete content
the -ms-scrollbar-3dlight-
color css property is a microsoft extension specifying the
color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
... initial valuedepends on user agentapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <
color> the
color of the top and left edges of the scroll box and scroll arrows of the scroll bar.
... formal syntax <
color>where <
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 2 more matches
-ms-scrollbar-arrow-color - Archive of obsolete content
the -ms-scrollbar-arrow-
color css property is a microsoft extension that specifies the
color of the arrow elements of a scroll arrow.
... initial valuebuttontextapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <
color> the
color of the scroll arrows of the scroll bar.
... formal syntax <
color>where <
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 2 more matches
-ms-scrollbar-darkshadow-color - Archive of obsolete content
the -ms-scrollbar-darkshadow-
color css property is a microsoft extension that specifies the
color of a scroll bar's gutter.
... initial valuethreeddarkshadowapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <
color> the
color of the scroll bar's gutter.
... formal syntax <
color>where <
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 2 more matches
-ms-scrollbar-face-color - Archive of obsolete content
the -ms-scrollbar-face-
color css property is a microsoft extension that specifies the
color of the scroll box and scroll arrows of a scroll bar.
... initial valuethreedfaceapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <
color> the
color of the scroll box and scroll arrows.
... formal syntax <
color>where <
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 2 more matches
-ms-scrollbar-highlight-color - Archive of obsolete content
the -ms-scrollbar-highlight-
color css property is a microsoft extension that specifies the
color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.
... initial valuethreedhighlightapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <
color> the
color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.
... formal syntax <
color>where <
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 2 more matches
-ms-scrollbar-shadow-color - Archive of obsolete content
the -ms-scrollbar-shadow-
color css property is a microsoft extension that specifies the
color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
... initial valuethreeddarkshadowapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <
color> the
color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
... formal syntax <
color>where <
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 2 more matches
-ms-scrollbar-track-color - Archive of obsolete content
the -ms-scrollbar-track-
color css property is a microsoft extension that specifies the
color of the track element of a scrollbar.
... initial valuescrollbarapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <
color> the
color of the track element.
... formal syntax <
color>where <
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 2 more matches
Document.alinkColor - Web APIs
returns or sets the
color of an active link in the document body.
... syntax var
color = document.alink
color; document.alink
color =
color;
color is a string containing the name of the
color (e.g., blue, darkblue, etc.) or the hexadecimal value of the
color (e.g., #0000ff) notes the default value for this property in mozilla firefox is red (#ee0000 in hexadecimal).
... document.alink
color is deprecated in dom level 2 html.
...And 2 more matches
Document.fgColor - Web APIs
fg
color gets/sets the foreground
color, or text
color, of the current document.
... syntax var
color = document.fg
color; document.fg
color =
color; parameters
color is a string representing the
color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
... example document.fg
color = "white"; document.bg
color = "darkblue"; notes the default value for this property in mozilla firefox is black (#000000 in hexadecimal).
...And 2 more matches
EXT_color_buffer_float - Web APIs
the ext_
color_buffer_float extension is part of webgl and adds the ability to render a variety of floating point formats.
... for webgl 1, see the ext_
color_buffer_half_float and webgl_
color_buffer_float extensions.
... extended methods the following sized formats become
color-renderable: gl.r16f, gl.rg16f, gl.rgba16f, gl.r32f, gl.rg32f, gl.rgba32f, gl.r11f_g11f_b10f.
...And 2 more matches
EXT_color_buffer_half_float - Web APIs
the ext_
color_buffer_half_float extension is part of the webgl api and adds the ability to render to 16-bit floating-point
color buffers.
...for webgl 2, use the ext_
color_buffer_float extension.
... constants ext.rgba16f_ext rgba 16-bit floating-point
color-renderable format.
...And 2 more matches
HTMLTableElement.bgColor - Web APIs
the htmltableelement.bg
color property represents the background
color of the table.
... the bg
color attribute is deprecated in html 4.01.
... the css background-
color property should be used instead by modifying the element's style object or using a style rule.
...And 2 more matches
SVGColorProfileElement - Web APIs
the svg
colorprofileelement interface corresponds to the <
color-profile> element.
... properties svg
colorprofileelement.local a domstring corresponding to the local attribute of the given element.
... svg
colorprofileelement.name a domstring corresponding to the name attribute of the given element.
...And 2 more matches
WEBGL_color_buffer_float - Web APIs
the webgl_
color_buffer_float extension is part of the webgl api and adds the ability to render to 32-bit floating-point
color buffers.
...for webgl 2, use the ext_
color_buffer_float extension.
... constants ext.rgba32f_ext rgba 32-bit floating-point
color-renderable format.
...And 2 more matches
WebGLRenderingContext.blendColor() - Web APIs
the webglrenderingcontext.blend
color() method of the webgl api is used to set the source and destination blending factors.
... syntax void gl.blend
color(red, green, blue, alpha); parameters red a glclampf for the red component in the range of 0 to 1.
... examples to set the blend
color, use: gl.blend
color(0, 0.5, 1, 1); to get the blend
color, query the blend_
color constant which returns a float32array.
...And 2 more matches
-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.
... /* keyword values */ -webkit-print-
color-adjust: economy; -webkit-print-
color-adjust: exact; /* global values */ -webkit-print-
color-adjust: inherit; -webkit-print-
color-adjust: initial; -webkit-print-
color-adjust: unset; syntax the -webkit-print-
color-adjust property is specified as one of the keyword values listed below.
... background
colors and images are only printed if the user explicitly allows it in their browser's print settings dialog.
...And 2 more matches
inverted-colors - CSS: Cascading Style Sheets
the inverted-
colors css media feature can be used to test whether the user agent or underlying os is inverting
colors.
... syntax the inverted-
colors feature is specified as a keyword value chosen from the list below.
... none
colors are displayed normally.
...And 2 more matches
text-emphasis-color - CSS: Cascading Style Sheets
the text-emphasis-
color css property sets the
color of emphasis marks.
... /* initial value */ text-emphasis-
color: current
color; /* <
color> */ text-emphasis-
color: #555; text-emphasis-
color: blue; text-emphasis-
color: rgba(90, 200, 160, 0.8); text-emphasis-
color: transparent; /* global values */ text-emphasis-
color: inherit; text-emphasis-
color: initial; text-emphasis-
color: unset; syntax values <
color> defines the
color of the emphasis marks.
... if no
color is present, it defaults to current
color.
...And 2 more matches
theme-color - HTML: Hypertext Markup Language
the theme-
color value for the name attribute of the <meta> element indicates a suggested
color that user agents should use to customize the display of the page or of the surrounding user interface.
... if specified, the content attribute must contain a valid css <
color>.
... example <meta name="theme-
color" content="#4285f4"> the following image shows the effect that the <meta> element above will have on a document displayed in chrome running on an android mobile device.
...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
lighting-color - SVG: Scalable Vector Graphics
the lighting-
color attribute defines the
color of the light source for lighting filter primitives.
... two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-
color="white"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-
color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); trans...
...form: translatex(220px);" /> </svg> usage notes value
color default value white animatable yes specifications specification status comment filter effects module level 1the definition of 'lighting-
color' in that specification.
...And 2 more matches
mozIRepresentativeColorCallback
toolkit/components/places/mozi
coloranalyzer.idlscriptable provides callback methods for mozi
coloranalyzer 1.0 66 introduced gecko 17.0 inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) method overview void oncomplete(in boolean success, [optional] in unsigned long
color); methods oncomplete() will be called when
color analysis finishes.
... void oncomplete( in boolean success, [optional] in unsigned long
color ); parameters success true if analysis was successful, false otherwise.
...
color the representative
color as an integer in rgb form.
...if success is false,
color is not provided.
Document.linkColor - Web APIs
the document.link
color property gets/sets the
color of links within the document.
...as an alternative, you can set the css
color property on either html anchor links (<a>) or on :link pseudo-classes.
... syntax
color = document.link
color document.link
color =
color parameters
color is a string representing the
color as a word (e.g., red) or hexadecimal value (e.g., #ff0000).
... example document.link
color = 'blue'; specification html5 document.link
color is deprecated in dom level 2 html.
Document.vlinkColor - Web APIs
the document.vlink
color property gets/sets the
color of links that the user has visited in the document.
... syntax
color = document.vlink
color document.vlink
color =
color parameters
color is a string representing the
color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
... document.vlink
color is deprecated in dom level 2 html.
... the recommended alternative is to get/set the
color of the css :visited pseudo-class on html <a> elements (e.g., a:visited {
color:red;}).
border-block-start-color - CSS: Cascading Style Sheets
the border-block-start-
color css property defines the
color of the logical block-start border of an element, which maps to a physical border
color depending on the element's writing mode, directionality, and text orientation.
... it corresponds to the border-top-
color, border-right-
color, border-bottom-
color, or border-left-
color property depending on the values defined for writing-mode, direction, and text-orientation.
... syntax border-block-start-
color: blue; border-block-start-
color: #4c5d21; related properties are border-block-end-
color, border-inline-start-
color, and border-inline-end-
color, which define the other border
colors of the element.
... values <'
color'> see border-
color formal definition initial valuecurrent
colorapplies toall elementsinheritednocomputed valuecomputed
coloranimation typea
color formal syntax <'border-top-
color'> examples border
color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-start-
color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-
color' in that specification.
color - Archive of obsolete content
« xul reference home
color type:
color string the currently selected
color.
... this is modified when the user selects a
color.
... you can assign a string of the form #rrggbb to this property to change the selected
color.
colorpicker.type - Archive of obsolete content
« xul reference home type type: string if this attribute is not present, the
colorpicker is displayed inside the window.
... if this is set to the text button, the
colorpicker is displayed as a button.
... when the user clicks the button, a popup appears for the user to select a
color.
color - Archive of obsolete content
« xul reference
color type:
color string the currently selected
color.
... this is modified when the user selects a
color.
... you can assign a string of the form #rrggbb to this property to change the selected
color.
-moz-windows-accent-color-in-titlebar - Archive of obsolete content
the -moz-windows-accent-
color-in-titlebar gecko-only css media feature can be used to apply styles based on whether accent
colors are enabled in microsoft windows titlebars.
... syntax <integer> in recent windows versions (e.g., 10), if accent
colors are enabled in window titlebars, this is 1.
... media: media/visual accepts min/max prefixes: no example @media (-moz-windows-accent-
color-in-titlebar: 1) { h1 {
color: -moz-win-accent
colortext; } body { background-
color: -moz-win-accent
color; } } ...
Inspect and select colors - Firefox Developer Tools
in the css pane's rules view, if a rule contains a
color value, you'll see a sample of the
color next to the value: a
color sample is also shown for css custom properties (variables) that represent
colors.
... if you click on the
color sample, you'll see a
color picker popup, enabling you to change the
color: if the
color is a foreground
color, the
color picker tells you whether its contrast with the background
color meets accessibility guidelines.
... the
color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new
color for the element from the page: clicking the
color sample while holding down the shift key changes the
color format: ...
SVGAnimateColorElement - Web APIs
the svganimate
colorelement interface corresponds to the <animate
color> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svganimate
colorelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimate
colorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties fr...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svganimate
colorelement' in that specification.
-webkit-tap-highlight-color - CSS: Cascading Style Sheets
-webkit-tap-highlight-
color is a non-standard css property that sets the
color of the highlight that appears over a link while it's being tapped.
... -webkit-tap-highlight-
color: red; -webkit-tap-highlight-
color: transparent; /* for removing the highlight */ syntax values a <
color value>.
... formal definition initial valueblackapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <
color>where <
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
::-moz-color-swatch - CSS: Cascading Style Sheets
the ::-moz-
color-swatch css pseudo-element is a mozilla extension that represents the
color selected in an <input> of type="
color".
... note: using ::-moz-
color-swatch with anything but an <input type="
color"> doesn't match anything and has no effect.
... examples html <input type="
color" value="#de2020" /> css input[type=
color]::-moz-
color-swatch { border-radius: 10px; border-style: none; } result specifications not part of any standard.
theme_color - Web app manifests
type string mandatory no the theme_
color member is a string that defines the default theme
color for the application.
... this sometimes affects how the os displays the site (e.g., on android's task switcher, the theme
color surrounds the site).
... examples "theme_
color": "red" specification specification status comment feedback web app manifestthe definition of 'theme_
color' in that specification.
<animateColor> - SVG: Scalable Vector Graphics
the <animate
color> svg element specifies a
color transformation over time.
...:descriptive elements attributes global attributes conditional processing attributes core attributes animation event attributes xlink attributes animation attribute target attributes animation timing attributes animation value attributes animation addition attributes externalresourcesrequired specific attributes by from to dom interface this element implements the svganimate
colorelement interface.
... example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50"> <animate
color attributename="fill" attributetype="xml" from="black" to="red" dur="6s" repeatcount="indefinite"/> </circle> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<animate
color>' in that specification.
<color-profile> - SVG: Scalable Vector Graphics
the <
color-profile> element allows describing the
color profile used for the image.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes core attributes » xlink attributes » specific attributes local name rendering-intent xlink:href dom interface this element implements the svg
colorprofileelement interface.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<
color-profile>' in that specification.
HTMLFontElement.color - Web APIs
the obsolete htmlfontelement.
color property is a domstring that reflects the
color html attribute, containing either a named
color or a
color specified in the hexadecimal #rrggbb format.
... the format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid name
color string nameof
color (case insensitive) green green green valid hex
color string in rgb format: #rrggbb #008000 rgb using decimal values rgb(x,x,x) (x in 0-255 range) rgb(0,128,0) syntax
colorstring = fontobj.
color; fontobj.
color =
colorstring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.
color = "green"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.
color.
SVGSolidcolorElement - Web APIs
the svgsolid
colorelement interface corresponds to the <solid
color> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgsolid
colorelement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsolid
colorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but i...
Screen.colorDepth - Web APIs
the screen.
colordepth read-only property returns the
color depth of the screen.
... syntax bitdepth = window.screen.
colordepth; example // check the
color depth of the screen if ( window.screen.
colordepth < 8) { // use low-
color version of page } else { // use regular,
colorful page } specification specification status comment css object model (cssom) view modulethe definition of 'screen.
colordepth' in that specification.
Linear-gradient Generator - CSS: Cascading Style Sheets
le"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-
color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> <div class="property"> <div class="name"> axis unit </div> <div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> <div data-value='px'> pixels (px) </div> ...
...rder"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <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, #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 - ...
...And 60 more matches
Image file type and format guide - Web media technologies
in the tables below, the term bits per component refers to the number of bits used to represent each
color component.
... for example, an rgb
color depth of 8 indicates that each of the red, green, and blue components are represented by an 8-bit value.
...conceptually similar to the animated gif format which has been in use for decades, apng is more capable in that it supports a variety of
color depths, whereas animated gif supports only 8-bit indexed
color.
...And 54 more matches
Index - Web APIs
it allows them to react to such a change, for example by changing the
color contrast of the user interface (ui) or by changing the exposure necessary to take a picture.
... 442 cssprimitivevalue.getrgb
colorvalue() api, cssprimitivevalue, method, getrgb
colorvalue the getrgb
colorvalue() method of the cssprimitivevalue interface is used to get an rgb
color value.
... if this css value doesn't contain a rgb
color value, a domexception is raised.
...And 44 more matches
Box-shadow generator - CSS: Cascading Style Sheets
</div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="
colorpicker category"> <div class="title"> </div> <div id="
colorpicker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_selector"> </div> </div...
... <div class="input" data-topic="r" data-title='r:' data-action="rgb"></div> <div class="input" data-topic="g" data-title='g:' data-action="rgb"></div> <div class="input" data-topic="b" data-title='b:' data-action="rgb"></div> </div> <div class="preview block"> <div id="output_
color"> </div> </div> <div class="block info"> <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> </div> </div> </div> </div> <div class="wrap-ri...
... </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=[""] position=[absolute] width height top left z-index background-
color box-shadow transform -webkit-transform -ms-transform"> </div> <div class="output" data-...
...And 42 more matches
Web video codec guide - Web media technologies
imagine the amount of data needed to store uncompressed video: a single frame of high definition (1920x1080) video in full
color (4 bytes per pixel) is 8,294,400 bytes.
... the potential effect of source video format and contents on the encoded video quality and size feature effect on quality effect on size
color depth (bit depth) the higher the
color bit depth, the higher the quality of
color fidelity is achieved in the video.
... additionally, in saturated portions of the image (that is, where
colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]),
color depths below 10 bits per component (10-bit
color) allow banding, where gradients cannot be represented without visible stepping of the
colors.
...And 39 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>.
... when you see the value <
color> as valid for a particular property, that means you can use any valid
color as a value for that property, as listed on the <
color> reference page.
...the
color property, versus the <
color> data type).
...And 38 more matches
Using CSS gradients - CSS: Cascading Style Sheets
css gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more
colors.
... we'll start by introducing linear gradients, then introduce features that are supported in all gradient types using linear gradients as the example, then move on to radial, conic and repeating gradients using linear gradients a linear gradient creates a band of
colors that progress in a straight line.
... a basic linear gradient to create the most basic type of gradient, all you need is to specify two
colors.
...And 37 more matches
SVG documentation index - SVG: Scalable Vector Graphics
44
color svg, svg attribute the
color attribute is used to provide a potential indirect value, current
color, for the fill, stroke, stop-
color, flood-
color, and lighting-
color attributes.
... 45
color-interpolation needsexample, svg, svg attribute the
color-interpolation attribute specifies the
color space for gradient interpolations,
color animations, and alpha compositing.
... 46
color-interpolation-filters needsexample, svg, svg attribute the
color-interpolation-filters attribute specifies the
color space for imaging operations performed via filter effects.
...And 34 more matches
The "codecs" parameter in common media types - Web media technologies
2 "professional" profile adds support for 4:2:2 chroma subsampling and 12 bit per component
color.
...see yuv in digital video concepts for details on how the yuv
color system works.
... cp the two-digit
color_primaries value indicates the
color system used by the media.
...And 30 more matches
filter - CSS: Cascading Style Sheets
the filter css property applies graphical effects like blur or
color shift to an element.
...> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161"
color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="...
...img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif;
color: rgb(51, 51, 51); height: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.
...And 28 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).
... example conic gradients include pie charts and
color wheels.
... 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.
...And 27 more matches
linear-gradient() - CSS: Cascading Style Sheets
the linear-gradient() css function creates an image consisting of a progressive transition between two or more
colors along a straight line.
... syntax /* a gradient tilted 45 degrees, starting blue and finishing red */ linear-gradient(45deg, blue, red); /* a gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /*
color stop: a gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */ linear-gradient(0deg, blue, green 40%, red); /*
color hint: a gradient going from the left to right, starting red, getting to the midpoint
color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-...
...gradient(.25turn, red, 10%, blue); /* multi-position
color stop: a gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue */ linear-gradient(45deg, red 0 50%, blue 50% 100%); values <side-or-corner> the position of the gradient line's starting point.
...And 27 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
arance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret; values standard keywords value demo browser description none div{
color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; } <div>lorem</div> firefox chrome safari edge no special styling is applied.
... auto div{
color: black; -moz-appearance: auto; -webkit-appearance: auto; appearance:auto; } <div>lorem</div> none the user agent selects the appropriate special styling based on the element.
... menulist-button div {
color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>lorem</div> firefox chrome safari edge the element is styled as a button that would indicate a menulist can be opened.
...And 26 more matches
Digital video concepts - Web media technologies
encoding
color representing the
colors in an image or video requires several values for each pixel.
... what those values are depends on how you "split up" the
color when converting it to numeric form.
... there are several
color models, and video codec makes use of one or more of these to represent their pixels during the encoding process as well as after decoding the video frames.
...And 26 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).
... <angular-
color-stop> a
color-stop's <
color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axis).
... the last
color stop minus the first
color-stop angle defines the size of the repeating gradient.
...And 25 more matches
Using CSS transitions - CSS: Cascading Style Sheets
for example, if you change the
color of an element from white to black, usually the change is instantaneous.
... 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
color; ...
... 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) { ...
...And 24 more matches
<blend-mode> - CSS: Cascading Style Sheets
the <blend-mode> css data type describes how
colors should appear when elements overlap.
... values normal the final
color is the top
color, regardless of what the bottom
color is.
... <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.
...And 23 more matches
WebGL constants - Web APIs
color_buffer_bit 0x00004000 passed to clear to clear the current
color buffer.
... src_
color 0x0300 passed to blendfunc or blendfuncseparate to multiply a component by the source elements
color.
... one_minus_src_
color 0x0301 passed to blendfunc or blendfuncseparate to multiply a component by one minus the source elements
color.
...And 22 more matches
The Firefox codebase: CSS Guidelines
formatting spacing & indentation 2 spaces indentation is preferred add a space after each comma, except within
color functions: linear-gradient(to bottom, black 1px, rgba(255,255,255,0.2) 1px) always add a space before !important.
... do this: border-
color: red; not this: border: red; put multiple selectors on different lines do this: h1, h2, h3 { font-family: sans-serif; text-align: center; } not this: h1, h2, h3 { font-family: sans-serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common.
... is there an alternative to using the variable like inheriting or using the current
color keyword?
...And 21 more matches
Index - Archive of obsolete content
the structure layer identifies the widgets (menus, buttons, etc.) and their position in the ui relative to each other, the style layer defines how the widgets look (size,
color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals.
... 758 activetitlebar
color xul attributes, xul reference no summary!
... 810
color xul attributes, xul reference no summary!
...And 20 more matches
nsIHTMLEditor
election); 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 getbackground
colorstate(out boolean amixed); nsidomelement getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring getfont
colorstate(out boolean amixed); astring getfontfacestate(out boolean amixed); astring getheadcontentsashtml(); astring gethighlight
colorstate(out boolean amixed); void getindentstate(out boolean acanindent, out boolean ...
...rty, 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 setbackground
color(in astring a
color); 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 avalue);...
...example: aproperty="font", aattribute="
color" avalue if aattribute is not null, the value of the attribute.
...And 19 more matches
Xptcall Porting Status
status status platform contributors and <font
color="red">?</font> possible contributors notes <font
color="white">done</font> win32 x86 john bandhauer <jband@netscape.com> win32 <font
color="white">done</font> linux x86 john bandhauer <jband@netscape.com> ulrich drepper <drepper@cygnus.com> unix <font
color="white">done</font> freebsd and netbsd x86 christoph toshok <toshok@hungry.com>, john bandhauer <jband@netscape.com> unix (same as...
... linux 86 code) <font
color="white">done</font> bsd/os x86 bert driehuis <bert_driehuis@nl.compuware.com> unix (same as linux 86 code) bert contributed patches that *should* do the right thing for all the unixish-x86 versions of this code for gcc 2.7 or 2.8 vs.
...bert's details <font
color="white">done</font> mac ppc roger lawrence <rogerl@netscape.com>, patrick beard <beard@netscape.com> mac (passing tests and checked in) <font
color="white">done</font> solaris sparc roger lawrence <rogerl@netscape.com>, chris mcafee <mcafee@netscape.com> unix this is checked in and working.
...And 19 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 18 more matches
WebGLRenderingContext.blendFunc() - Web APIs
if a constant
color and a constant alpha value are used together as source and destination factors, a gl.invalid_enum error is thrown.
... the formula for the blending
color can be described like this:
color(rgba) = (source
color * sfactor) + (destination
color * dfactor).
... constant factor description gl.zero 0,0,0,0 multiplies all
colors by 0.
...And 17 more matches
CSS basics - Learn web development
how do i decorate my webpage with background images and
colors?
...for example, this css selects paragraph text, setting the
color to red: p {
color: red; } let's try it out!
... declaration this is a single rule like
color: red;.
...And 16 more matches
WebGLRenderingContext.blendFuncSeparate() - Web APIs
if a constant
color and a constant alpha value are used together as source (srcrgb) and destination (dstrgb) factors, a gl.invalid_enum error is thrown.
... constants the following constants can be used for srcrgb, dstrgb, srcalpha, and dstalpha the formulas for the blending factors can be described like this (all rgba values are between 0 and 1):
color(rgb) = (source
color * srcrgb) + (destination
color * dstrgb)
color(a) = (sourcealpha * srcalpha) + (destinationalpha * dstalpha) constant rgb factor alpha factor description gl.zero 0,0,0 0 multiplies all
colors by 0.
... gl.one 1,1,1,1 1 multiplies all
colors by 1.
...And 16 more matches
background - CSS: Cascading Style Sheets
the background shorthand css property sets all background style properties at once, such as
color, image, origin and size, or repeat method.
... constituent properties this property is a shorthand for the following css properties: background-attachment background-clip background-
color background-image background-origin background-position background-repeat background-size syntax /* using a <background-
color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-
color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background ...
... the <background-
color> value may only be included in the last layer specified.
...And 16 more matches
image() - CSS: Cascading Style Sheets
the image() css function defines an <image> in a similar fashion to the <url> function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid
color as a fallback in case none of the specified images are able to be rendered.
..., <
color>?
...)where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...And 15 more matches
Cascade and inheritance - Learn web development
the h1 ends up being
colored blue — these rules have an identical selector and therefore carry the same specificity, so the last one in the source order wins.
...the below h1 ends up being
colored red — the class selector gives its rule a higher specificity, and so it will be applied even though the rule with the element selector appears further down in the source order.
... for example, if you set a
color and font-family on an element, every element inside it will also be styled with that
color and font, unless you've applied different
color and font values directly to them.
...And 14 more matches
Introduction to events - Learn web development
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.background
color = rndcol; } in this code, we st...
...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.
...returning to the above example: const btn = document.queryselector('button'); btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.background
color = rndcol; } the onclick property is the event handler property being used in this situation.
...And 14 more matches
-ms-high-contrast - CSS: Cascading Style Sheets
the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what
color variation.
... 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.
... for web content, theme
colors are mapped to content types.
...And 14 more matches
Challenge solutions - Developer guides
why use css
colors challenge without looking up a reference, find five more
color names that work in your stylesheet.
... solution css supports common
color names like orange, yellow, blue, green, or black.
... it also supports some more exotic
color names like chartreuse, fuschia, or burlywood.
...And 14 more matches
Content type - SVG: Scalable Vector Graphics
thus: 00.5s = 500 milliseconds 00:00.005 = 5 milliseconds
color <
color> the basic type <
color> is a css2 compatible specification for a
color in the srgb
color space.
... <
color> applies to svg's use of the
color attribute and is a component of the definitions of attributes fill, stroke, stop-
color, flood-
color, and lighting-
color, which also offer optional icc-based
color specifications.
... svg supports all of the syntax alternatives for <
color> defined in css2 syntax and basic data types, and (depend on the implementation) in the future css
color module level 3.
...And 14 more matches
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
they are set using custom property notation (e.g., --main-
color: black;) and are accessed using the var() function (e.g.,
color: var(--main-
color);).
...for example, the same
color might be used in hundreds of different places, requiring global search and replace if that
color needs to change.
...for example, --main-text-
color is easier to understand than #00ff00, especially if this same
color is also used in other contexts.
...And 13 more matches
background-image - CSS: Cascading Style Sheets
the borders of the element are then drawn on top of them, and the background-
color is drawn beneath them.
... note: even if the images are opaque and the
color won't be displayed in normal circumstances, web developers should always specify a background-
color.
... if the images cannot be loaded—for instance, when the network is down—the background
color will be used as a fallback.
...And 13 more matches
repeating-linear-gradient() - CSS: Cascading Style Sheets
it is similar to linear-gradient() and takes the same arguments, but it repeats the
color stops infinitely in all directions so as to cover its entire container.
... the length of the gradient that repeats is the distance between the first and last
color stop.
... if the first
color does not have a
color-stop-length, the
color-stop-length defaults to 0.
...And 13 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="checkbox" name="checkbox"/>
color a control for specifying a
color; opening a
color picker when active in supporting browsers.
... <input type="
color" name="
color"/> html5 date a control for entering a date (year, month, and day, with no time).
... the autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range,
color, and password.
...And 13 more matches
fill - SVG: Scalable Vector Graphics
for shapes and text it's a presentation attribute that defines the
color (or any svg paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
... for animation five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set>.
... html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple
color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-
color="pink" /> <stop offset="100%" stop-
color="black" /> </radialgradient> </defs> <circle cx="150" cy="50" r="40" fill="url(#mygradient)" /> <!-- keeping the final state of an animated circle which is a circle with a radius of 40.
...And 13 more matches
Border-image generator - CSS: Cascading Style Sheets
ursor: 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-radius: 5px;
color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-
color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropd...
...own */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-
color: #359740; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-
color: #208b20; } /* dropdown select button */ .ui-dropdown-select { height: inherit; padding: 0 0.75em;
color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 100%; height: 150px; max-height: 150p...
...x; margin: 0; padding: 0 0.3em; border: 3px solid #3490d2; border-
color: #208b20; background: #666; background-
color: #eef1f5;
color: #000; position: absolute; top: 2em; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list:hover { overflow: auto; } .ui-dropdown-list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-list { left: 100%; top: 0; } .ui-dropdown-list > div { width: 100%; height: 1.6em; margin: 0.3em 0; padding: 0.3em; line-height: 1em; -moz-box-sizing: border-box; -webkit-box-si...
...And 12 more matches
content - CSS: Cascading Style Sheets
, <
color>?
...)<leader-type> = dotted | solid | space | <string>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 12 more matches
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: nonezero|evenodd|inherit; animatable: yes
color it provides a potential indirect value (current
color) for the fill, stroke, stop-
color, flood-
color and lighting-
color presentation attributes.
... value: <
color>|inherit; animatable: yes
color-interpolation it specifies the
color space for gradient interpolations,
color animations, and alpha compositing.
...And 12 more matches
Backgrounds and borders - Learn web development
background
colors the background-
color property defines the background
color on any element in css.
... the property accepts any valid <
color>.
... a background-
color extends underneath the content and padding box of the element.
...And 11 more matches
Floats - Learn web development
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.
... to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px; background-
color: rgb(207,232,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin-right: 15px; width: 150px; height: 150px; border-radius: 5px; background-
color: rgb(207,232,220); padding: 1em; } so let's think about how the float works — the element with the float set on it (the <div> element in this case) is taken out of the normal layout flow of the document and stuck to the left-hand side of its parent container (<body>, in this case).
...And 11 more matches
CSS property compatibility table for form controls - Learn web development
text and font
color[1] yes yes if the border-
color property is not set, some webkit based browsers will apply the
color property to the border as well as the font on <textarea>s.
... text and font
color yes yes font yes yes see the note about line-height.
... text and font
color yes yes font yes yes see the note about line-height.
...And 11 more matches
Using the CSS Painting API - Web APIs
we define the fillstyle as being hsla(55, 90%, 60%, 1.0), which is a shade of yellow, and then call fillrect() to create a rectangle of that
color.
... registerpaint('csspaintfunctionname', class { static get inputproperties() { return ['propertyname1', '--custompropertyname2']; } static get inputarguments() { return ['<
color>']; } static get contextoptions() { return {alpha: true}; } paint(drawingcontext, elementsize, stylemap) { // paint code goes here.
... example let's create a list of items with a background image that rotates between three different
colors and three widths.
...And 11 more matches
Lighting a WebXR setting - Web APIs
the reflected light ray's
color may, of course, be altered in intensity and/or hue due to the light's interaction with the surface, but the angle is always the same.
... components of a light source a light source has three major components; each component is in essence a type of light there are three kinds of light that can affect the
color and brightness of objects and their pixels as displayed on the viewer's screen or headset.
...the
color and intensity of every pixel in the scene is affected exactly the same way, regardless of where it is in the scene or the direction it's facing.
...And 11 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
bg
colorobsolete since html5 a domstring specifying a
color to apply to the backgrounds of each of the row's cells.
... this can be either an hexadecimal #rrggbb or #rgb value or a
color keyword.
... 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.
...And 11 more matches
Advanced form styling - Learn web development
<input type="
color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable.
...ce: none; } we can use the :checked and :disabled pseudo-classes to change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast 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; } yo...
...in short, these are drop-down boxes, complex control types like
color and datetime-local, and feedback—oriented controls like <progress> and <meter>.
...And 10 more matches
Object building practice - Learn web development
in this article we dive into a practical exercise, giving you some more practice in building custom javascript objects, with a fun and
colorful result.
...our little balls will bounce around on the screen, and change
color when they touch each other.
... function ball(x, y, velx, vely,
color, size) { this.x = x; this.y = y; this.velx = velx; this.vely = vely; this.
color =
color; this.size = size; } here we include some parameters that define the properties each ball needs in order to function in our program: x and y coordinates — the horizontal and vertical coordinates where the ball starts on the screen.
...And 10 more matches
Examine and edit CSS - Firefox Developer Tools
you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the
color scheme preference (as of firefox 72, you must set devtools.inspector.
color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules.
...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.
... inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is
colored gray, with an info icon that gives more information when clicked.
...And 10 more matches
Intersection Observer API - Web APIs
each
colored box within it displays the percentage of itself that's visible in all four of its corners, so you can see these ratios change over time as you scroll the container.
...></div> <div class="label bottomleft"></div> <div class="label bottomright"></div> </div> </template> <main> <div class="contents"> <div class="wrapper"> </div> </div> </main> .contents { position: absolute; width: 700px; height: 1725px; } .wrapper { position: relative; top: 600px; } .samplebox { position: relative; left: 175px; width: 150px; background-
color: rgb(245, 170, 140); border: 2px solid rgb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; position: absolute; margin: 0; background-
color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.7); width: 3...
... a simple example this simple example causes a target element to change its
color and transparency as it becomes more or less visible.
...And 10 more matches
Key Values - Web APIs
keycode_avr_power (181) "
colorf0red" [3] general-purpose media function key,
color-coded red.
... this has index 0 among the
colored keys.
... vk_
colored_key_0 keycode_prog_red (183) "
colorf1green" [3] general-purpose media funciton key,
color-coded green.
...And 10 more matches
Web accessibility for seizures and physical reactions - Accessibility
certain video games or tv broadcasts containing rapid flashes or alternating patterns of different
colors.
... certain visual patterns, especially stripes of contrasting
colors.
...in the article, "understanding wcag 2.0 three flashes or below threshold" notes generally that: “individuals who have photosensitive seizure disorders can have a seizure triggered by content that flashes at certain frequencies for more than a few flashes” and goes on to note, very specifically that: “people are even more sensitive to red flashing than to other
colors, so a special test is provided for saturated red flashing”.
...And 10 more matches
mix-blend-mode - CSS: Cascading Style Sheets
syntax /* keyword values */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode:
color-dodge; mix-blend-mode:
color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode:
color; mix-blend-mode: luminosity; /* global values */ mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset; values <blend-mode> the blending mode that should be ...
... formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscretecreates stacking 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-
color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-
color="hsl(120,100%,50%)" /> <stop offset="100%" stop-
color="hsl(120,0%,100%)" /> </lineargradient> <lineargradient id="blue"> <stop offset="0" stop-
color="hsl(240,100%,50%)" /> <stop offset="100%" stop-
color="hsl(240,0%,100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" r...
...And 10 more matches
Standard metadata names - HTML: Hypertext Markup Language
theme-
color: indicates a suggested
color that user agents should use to customize the display of the page or of the surrounding user interface.
... the content attribute contains a valid css <
color>.
... standard metadata names defined in other specifications the css
color adjustment specification defines the following metadata name:
color-scheme: specifies one or more
color schemes with which the document is compatible.
...And 10 more matches
XUL accessibility guidelines - Archive of obsolete content
many users set their computers to use larger than normal fonts and/or specific
color themes.
... by default, xul menus, labels, and other widgets get their font, size, and
color settings from the user settings specified in the operating system.
...
color color is an important tool.
...And 9 more matches
Building up a basic demo with A-Frame - Game development
add it now: <a-box
color="#0095dd" position="0 1 0" rotation="20 40 0"> </a-box> it contains a few parameters already defined:
color, position and rotation — these are fairly obvious, and define the base
color of the cube, the position inside the 3d scene, and the rotation of the cube.
...in our case we will use a simple
color, but it could also be an image, etc.
...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.
...And 9 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 the va...
... the
color value is the base
color of the shadow.
... you can use any length and
color units that would make sense to do so to define these values.
...And 9 more matches
WebGL model view projection - Web APIs
eatecontext(canvas); var gl = this.gl; // setup a webgl program, anything part of the mdn object is defined outside of this article this.webglprogram = mdn.createwebglprogramfromids(gl, 'vertex-shader', 'fragment-shader'); gl.useprogram(this.webglprogram); // save the attribute and uniform locations this.positionlocation = gl.getattriblocation(this.webglprogram, 'position'); this.
colorlocation = gl.getuniformlocation(this.webglprogram, '
color'); // tell webgl to test the depth when drawing, so if a square is behind // another square it won't be drawn gl.enable(gl.depth_test); } webglbox draw now we'll create a method to draw a box on the screen.
... var gl = this.gl; // create a buffer and bind the data var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, data, gl.static_draw); // setup the pointer to our attribute data (the triangles) gl.enablevertexattribarray(this.positionlocation); gl.vertexattribpointer(this.positionlocation, 3, gl.float, false, 0, 0); // setup the
color uniform that will be shared across all triangles gl.uniform4fv(this.
colorlocation, settings.
color); // draw the triangles to the screen gl.drawarrays(gl.triangles, 0, 6); } the shaders are the bits of code written in glsl that take our data points and ultimately render them to the screen.
...the vertex shader that will move the vertices on the screen: // the individual position vertex attribute vec3 position; void main() { // the gl_position is the final position in clip space after the vertex shader modifies it gl_position = vec4(position, 1.0); } next, to actually rasterize the data into pixels, the fragment shader evaluates everything on a per pixel basis, setting a single
color.
...And 9 more matches
Using the Web Speech API - Web APIs
demo to show simple usage of web speech recognition, we've written a demo called speech
color changer.
... when the screen is tapped/clicked, you can say an html
color keyword, and the app's background
color will change to that
color.
... <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 9 more matches
-webkit-box-reflect - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
additive-symbols - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
negative - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
pad - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
prefix - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
suffix - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
symbols - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
border-image-source - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
cross-fade() - CSS: Cascading Style Sheets
it can be used for many simple image manipulations, such as tinting an image with a solid
color or highlighting a particular area of the page by combining an image with a radial gradient.
...when using background images, make sure the contrast in
color is great enough that any text is legible over the image as well as if the images is missing.
...&& <image><cf-final-image> = <image> | <
color>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <image()> = image( <image-tags>?
...And 9 more matches
mask-border-source - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
mask-image - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
shape-outside - CSS: Cascading Style Sheets
, <
color>?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<fill-rule> = nonzero | evenodd<image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 9 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
basic example <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-
color="red"/> <stop offset="50%" stop-
color="black" stop-opacity="0"/> <stop offset="100%" stop-
color="blue"/> </lineargradient> <style type="text/css"><![cdata[ #rect1 { fill: url(#gradient1); } .stop1 { stop-
color: red; } .stop2 { stop-
color: black; stop-opacity: 0; } .stop3 { stop-
color: blue; } ]]></style> </defs> <rect id="rect...
...these nodes tell the gradient what
color it should be at certain positions by specifying an offset attribute for the position, and a stop-
color attribute.
...for instance, this one tells the gradient to start at the
color red, change to transparent-black in the middle, and end at the
color blue.
...And 9 more matches
New Skin Notes - Archive of obsolete content
--nickolay 07:16, 29 aug 2005 (pdt) imho the visited
color looks horrible.
...in all other dev centres there is no "visited link
color" and we should remove imho.
... it looks odd when someone who uses devmo on regular basis sees some violet links just because he already worked with this site yesterday.also, the current
color for visited links makes them less visible.
...And 8 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 8 more matches
CSS and JavaScript accessibility best practices - Learn web development
your text
color should contrast well with your background
color.
... emphasised text inline markup that confers specific emphasis to the text that it wraps: <p>the water is <em>very hot</em>.</p> <p>water droplets collecting on surfaces is called <strong>condensation</strong>.</p> you might want to add some simple
coloring to your emphasised text: strong, em {
color: #a60000; } you will however rarely need to style emphasis elements in any significant way.
... abbreviations an element that allows an abbreviation, acronym, or initialization to be associated with its expansion: <p>web content is marked up using <abbr title="hypertext markup language">html</abbr>.</p> again, you might want to style it in some simple way: abbr {
color: #a60000; } the recognised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this.
...And 8 more matches
Beginner's guide to media queries - Learn web development
for example, to change the body text
color to red if the viewport is exactly 600 pixels, you would use the following media query.
... @media screen and (width: 600px) { body {
color: red; } } open this example in the browser, or view the source.
...for example, to make the
color blue if the viewport is narrower than 600 pixels, use max-width: @media screen and (max-width: 600px) { body {
color: blue; } } open this example in the browser, or view the source.
...And 8 more matches
Getting started with CSS - Learn web development
using your code editor add the following to your css file: h1 {
color: red; } save your html and css files and reload the page in a web browser.
...to turn all paragraphs green you would use: p {
color: green; } you can target multiple selectors at once, by separating the selectors with a comma.
... if i want all paragraphs and all list items to be green my rule looks like this: p, li {
color: green; } try this out in the interactive editor below (edit the code boxes), or in your local css document.
...And 8 more matches
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).
...
color can accept any css
color unit, for example: p {
color: red; } this will cause the paragraphs to become red, rather than the standard browser default black, like so: <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 its way into his mighty throat.
... a font-family example let's add to our previous example, giving the paragraphs a sans-serif font: p {
color: red; font-family: helvetica, arial, sans-serif; } this gives us the following result: <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 its way into his mighty throat.
...And 8 more matches
Styling links - Learn web development
the default styles can be turned off/changed using the following css properties:
color for the text
color.
... 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>,...
... next, we use the a:link and a:visited selectors to set a couple of
color variations on unvisited and visited links, so they are distinct.
...And 8 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(bg
color, text
color) { html.style.background
color = bg
color; html.style.
color = text
color; } select.onchange = function() { ( select.value === 'black' ) ?
...we also have a function called update(), which takes two
colors as parameters (inputs).
... the website's background
color is set to the first provided
color, and its text
color is set to the second provided
color.
...And 8 more matches
Clearing by clicking - Web APIs
« previousnext » this example demonstrates how to combine user interaction with webgl graphics operations by clearing the rendering context with a random
color when the user clicks.
... clearing the rendering context with random
colors this example provides a simple illustration of how to combine webgl and user interaction.
... every time the user clicks the canvas or the button, the canvas is cleared with a new randomly chosen
color.
...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 auto-pla...
...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: 100px...
... * {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
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, you can ...
... * {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 betwee...
... * {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 { align-se...
...And 8 more matches
Using media queries - CSS: Cascading Style Sheets
aspect-ratio width-to-height aspect ratio of the viewport
color number of bits per
color component of the output device, or zero if the device isn't
color color-gamut approximate range of
colors that are supported by the user agent and output device added in media queries level 4.
...
color-index number of entries in the output device's
color lookup table, or zero if the device does not use such a table device-aspect-ratio width-to-height aspect ratio of the output device deprecated in media queries level 4.
... forced-
colors detect whether user agent restricts
color palette added in media queries level 5.
...And 8 more matches
border - CSS: Cascading Style Sheets
it sets the values of border-width, border-style, and border-
color.
... constituent properties this property is a shorthand for the following css properties: border-
color border-style border-width syntax /* style */ border: solid; /* width | style */ border: 2px dotted; /* style |
color */ border: outset #f33; /* width | style |
color */ border: medium dashed green; /* global values */ border: inherit; border: initial; border: unset; the border property may be specified using one, two, or three of the values listed below.
... <
color> sets the
color of the border.
...And 8 more matches
box-shadow - CSS: Cascading Style Sheets
a box shadow is described by x and y offsets relative to the element, blur and spread radius, and
color.
... syntax /* keyword values */ box-shadow: none; /* offset-x | offset-y |
color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius |
color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius |
color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y |
color */ box-shadow: inset 5em 1em gold; /* any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /*...
... optionally, a <
color> value.
...And 8 more matches
mask - CSS: Cascading Style Sheets
, <
color>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><box> = border-box | padding-box | content-boxwhere <image-tags> = ltr | rtl<image-src> = <url> | <string><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
... && <image><cf-final-image> = <image> | <
color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 8 more matches
radial-gradient() - CSS: Cascading Style Sheets
the radial-gradient() css function creates an image consisting of a progressive transition between two or more
colors that radiate from an origin.
... <linear-
color-stop> a
color-stop's <
color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient's axis).
...including two stop positions is equivalent to declaring two
color stops with the same
color at the two positions.
...And 8 more matches
rendering-intent - SVG: Scalable Vector Graphics
the rendering-intent attribute permits the specification of a
color profile rendering intent other than the default.
... rendering-intent is applicable primarily to
color profiles corresponding to cmyk
color spaces.
... the different options cause different methods to be used for translating
colors to the
color gamut of the target rendering device.
...And 8 more matches
CSS3 - Archive of obsolete content
css
color module level 3 recommendation since june 7th, 2011 adds the opacity property, and the hsl(), hsla(), rgba() and rgb() functions to create <
color> values.
... it also defines the current
color keyword as a valid
color.
... the transparent
color is now a real
color (thanks to the support for the alpha channel) and is a now an alias for rgba(0,0,0,0.0).
...And 7 more matches
Creating a Skin - Archive of obsolete content
we'll make some simple
color changes, modify the button styles, and modify the spacing a bit.
... 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 background
color of the caption has also been changed to match the background.
...And 7 more matches
Building up a basic demo with Babylon.js - Game development
let's create a scene by adding the following lines just below our previous code: var scene = new babylon.scene(engine); scene.clear
color = new babylon.
color3(0.8, 0.8, 0.8); thus, the scene is created and the second line sets the background
color to light gray.
...let's start with the camera — add this line to your code below the scene creation and the line where we defined the clear
color.
...babylon.js is bundled with a complete math library for handling vectors,
colors, matrices etc.
...And 7 more matches
GLSL Shaders - Game development
fragment shaders compute the renderings of a shape's
colors and other attributes.
... fragment shaders fragment (or texture) shaders define rgba (red, blue, green, alpha)
colors for each pixel being processed — a single fragment shader is called once per pixel.
... the purpose of the fragment shader is to set up the gl_frag
color variable.
...And 7 more matches
Drawing graphics - Learn web development
we'll
color the canvas background black to give you a first taste of the canvas api.
... add the following lines at the bottom of your javascript: ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); here we are setting a fill
color using the canvas' fillstyle property (this takes
color values just like css properties do), then drawing a rectangle that covers the entire area of the canvas with thefillrect method (the first two parameters are the coordinates of the rectangle's top left hand corner; the last two are the width and height you want the rectangle drawn at — we told you those width and height variables would be useful)!
... note that you can draw semi-transparent graphics by specifying a semi-transparent
color, for example by using rgba().
...And 7 more matches
Mozilla’s UAAG evaluation report
(p1) c preferences, appearance,
colors - "use my chosen
colors, ignoring the
colors and background image specified" 3.2 toggle audio, video, animated images.
...(p1) c can be changed through preferences or user style sheet the prefs are at preferences, appearances, fonts 4.3 configure text
colors.
... (p1) vg can be changed through preferences or by editing the prefs.js file the prefs are at preferences, appearances,
colors to use any
color offered in windows, the prefs.js file must be edited by hand 4.4 slow multimedia.
...And 7 more matches
Perceivable - Accessibility
note: conveying instructions solely by
color is related, but covered in a different guideline — 1.4.1.
...the classic example is
color (both
color contrast and use of
color to convey instructions), but it applies in other situations too.
... success criteria how to conform to the criteria practical resource 1.4.1 use of
color (a)
color should not be solely relied upon to convey information.
...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
Mozilla CSS extensions - CSS: Cascading Style Sheets
b -moz-binding -moz-border-bottom-
colors -moz-border-left-
colors -moz-border-right-
colors -moz-border-top-
colors -moz-box-align -moz-box-direction -moz-box-flex -moz-box-ordinal-group -moz-box-orient -moz-box-pack c–i -moz-context-properties -moz-float-edge -moz-force-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outl...
... -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-border-end-style [superseded by the standard version border-inline-end-style] -moz-border-end-width [superseded by the standard version border-inline-end-width] -moz-border-image -moz-border-start [superseded by the standard version border-inline-start] -moz-border-start-
color [superseded by the standard version bo...
...rder-inline-start-
color] -moz-border-start-style [superseded by the standard version border-inline-start-style] -moz-border-start-width [superseded by the standard version border-inline-start-width] -moz-box-sizing [prefixed version still accepted] c clip-path [applying to more than svg] -moz-column-count [prefixed version still accepted] -moz-column-fill [prefixed version still accepted] -moz-column-gap [prefixed version still accepted] -moz-column-width [prefixed version still accepted] -moz-column-rule [prefixed version still accepted] -moz-column-rule-width [prefixed version still accepted] -moz-column-rule-style [prefixed version still accepted] -moz-column-rule-
color [prefixed version still accepted] -moz-context-properties f–m filter ...
...And 7 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.
...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.
... background-
color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: left top; ...
...And 7 more matches
Specificity - CSS: Cascading Style Sheets
by indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority: <div id="test"> <span>text</span> </div> div#test span {
color: green; } div span {
color: blue; } span {
color: red; } no matter the order, text will be green because that rule is most specific.
... #myid#myid span {
color: yellow; } .myclass.myclass span {
color: orange; } how !important can be used: a) overriding inline styles your global css file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements.
... <div class="foo" style="
color: red;">what
color am i?</div> .foo[style*="
color: red"] {
color: firebrick !important; } many javascript frameworks and libraries add inline styles.
...And 7 more matches
repeating-radial-gradient() - CSS: Cascading Style Sheets
it is similar to radial-gradient() and takes the same arguments, but it repeats the
color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient() .
... with each repetition, the positions of the
color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last
color stop and the first).
... thus, the position of each ending
color stop coincides with a starting
color stop; if the
color values are different, this will result in a sharp visual transition, which can be mitigated by repeating the first
color as the last
color.
...And 7 more matches
text-shadow - CSS: Cascading Style Sheets
each shadow is described by some combination of x and y offsets from the element, blur radius, and
color.
... syntax /* offset-x | offset-y | blur-radius |
color */ text-shadow: 1px 1px 2px black; /*
color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y |
color */ text-shadow: 5px 5px #558abb; /*
color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* use defaults for
color and blur-radius */ text-shadow: 5px 10px; /* global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; this property is specified as a comma-separated list of shadows.
... each shadow is specified as two or three <length> values, followed optionally by a <
color> value.
...And 7 more matches
JXON - Archive of obsolete content
conversion snippets now imagine you have this sample xml document: example.xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_item gender="men's"> <item_number>qwz5671</item_number> <price>39.95</price> <size description="medium"> <
color_swatch image="red_cardigan.jpg">red</
color_swatch> <
color_swatch image="burgundy_cardigan.jpg">burgundy</
color_swatch> </size> <size description="large"> <
color_swatch image="red_cardigan.jpg">red</
color_swatch> <
color_swatch image="burgundy_cardigan.jpg">burgundy</
color_swatch> </size> </catalog_item> <catalog_item gender="women's"> <item_number>rrx...
...9856</item_number> <discount_until>dec 25, 1995</discount_until> <price>42.50</price> <size description="medium"> <
color_swatch image="black_cardigan.jpg">black</
color_swatch> </size> </catalog_item> </product> <script type="text/javascript"><![cdata[function matchwo(a,b) { if (a < b && a < 0) { return 1; } else { return 0; } }]]></script> </catalog> first, create a dom tree like the previous example as described in the how to create a dom tree article.
... with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue": "qwz5671" }, "price": { "keyvalue": 39.95 }, "size": [{ "
color_swatch": [{ "keyvalue": "red", "keyattributes": { "image": "red_cardigan.jpg" } }, { "keyvalue": "burgundy", "keyattributes": { "image": "burgundy_cardigan.jpg" } }], "keyvalue": null, "keyattributes": { "description": "medium" } }, { ...
...And 6 more matches
Writing Skinnable XUL and CSS - Archive of obsolete content
they should instead rely on the context in which they will appear for
color, font, and border information.
... for example, the sidebar should not import the global skin, since it could appear in messenger and in navigator (which could have two completely different
color schemes).
... derived skin files should not contain any font,
color, or border information.
...And 6 more matches
Browser Feature Detection - Archive of obsolete content
() 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 background
color 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 true borderright true true true borderbottom true true true ...
...borderleft true true true bordertopwidth true true true borderrightwidth true true true borderbottomwidth true true true borderleftwidth true true true borderwidth true true true clear true true true
color true true true display true true true cssfloat true false true font true true true fontfamily true true true fontsize true true true fontstyle true true true fontvariant true true true fontweight true true true height true true true letterspacing true true true lineheight ...
... 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 bordertop
color true true true borderright
color true true true borderbottom
color true true true borderleft
color true true true bordertopstyle true true true borderrightstyle true true true borderbottomstyle true true true borderleftstyle true true true bottom true ...
...And 6 more matches
Building up a basic demo with PlayCanvas editor - Game development
to add some
colors to the scene we need a new material that will be used on the newly created box.
... to change its
color we'll use the diffuse option in the entity inspector.
... click diffuse, then select the
colored box next to the
color label — it will open a
color wheel.
...And 6 more matches
Building up a basic demo with the PlayCanvas engine - Game development
var camera = new pc.entity(); camera.addcomponent("camera", { clear
color: new pc.
color(0.8, 0.8, 0.8) }); app.root.addchild(camera); camera.setposition(0, 0, 7); the code above will create a new entity.
... then it adds a camera component to it with the light gray clear
color — the
color will be visible as the background.
...it's time to add the ambient light: app.scene.ambientlight = new pc.
color(0.2, 0.2, 0.2); the code above assign a dark grey ambient light for the whole scene.
...And 6 more matches
Styling tables - Learn web development
the result looks a bit neater: graphics and
colors now onto graphics and
colors!
... 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
Introduction to CSS layout - Learn web development
flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-
color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items.
... flexbox example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-
color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } .wrapper > div { flex: 1; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: this has been a very short introduction to what is possible in flexbox, to find out more, see our flexbox article.
... grid example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-
color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> <div class="box6">six</d...
...And 6 more matches
CSS FAQ - Learn web development
for example: /* heading default
color is black */ h1 {
color: red; } h1 {
color: black; } this has changed with css 2; the keyword initial is now a valid value for a css property.
... /* heading default
color is black */ h1 {
color: red; } h1 {
color: initial; } how do i derive one style from another?
... <style type="text/css"> .news { background: black;
color: white; } .today { font-weight: bold; } </style> <div class="news today"> ...
...And 6 more matches
create fancy boxes - Learn web development
its background properties: background, background-
color, background-image, background-position, background-size, etc.
... backgrounds can be either solid
colors or images: solid
color always fills the whole surface but images can be scaled and positioned.
...i want to be fancy.</div> okay, let's have fun with backgrounds: .fancy { padding : 1em; width: 100%; height: 200px; box-sizing: border-box; /* at the bottom of our background stack, let's have a misty grey solid
color */ background-
color: #e4e4d9; /* we stack linear gradients on top of each other to create our
color strip effect.
...And 6 more matches
UI pseudo-classes - Learn web development
for a start, we are signalling required versus optional status using
color alone, which isn't great for
colorblind people.
...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 checke...
...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).
...And 6 more matches
Theme concepts
additionally, firefox
color can be used to preview customizations to the browser's theme with options to share and export a theme.
... 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.
...And 6 more matches
Timing element visibility with the Intersection Observer API - Web APIs
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.
...the sidebar is represented using an <aside> element, and is styled as follows: aside { grid-column: 1; grid-row: 2; background-
color: cornsilk; padding: 5px 10px; } aside ul { padding-left: 0; } aside ul li { list-style: none; } aside ul li a { text-decoration: none; } the most important thing to note here is that the grid-column is set to 1, to place the sidebar on the left-hand side of the screen.
...And 6 more matches
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of
color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.
color_attachment0: texture attachment for the framebuffer's
color buffer.
... when using a webgl 2 context, the following values are available additionally: gl.
color_attachment1 gl.
color_attachment2 gl.
color_attachment3 gl.
color_attachment4 gl.
color_attachment5 gl.
color_attachment6 gl.
color_attachment7 gl.
color_attachment8 gl.
color_attachment9 gl.
color_attachment10 gl.
color_attachment11 gl.
color_attachment12 gl.
color_attachment13 gl.
color_attachment14 gl.
color_attachment15 when using the webgl_draw_buffers extension: ext.
color_at...
...And 6 more matches
A basic 2D WebGL animation example - Web APIs
its role is to return the
color of each pixel in the shape being rendered.
... since we're drawing a solid, untextured object with no lighting applied, this is exceptionally simple: <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 uglobal
color; void main() { gl_frag
color = uglobal
color; } </script> this starts by specifying the precision of the float type, as required.
... then we set the global gl_frag
color to the value of the uniform uglobal
color, which is set by the javascript code to the
color being used to draw the square.
...And 6 more matches
Scissor animation - Web APIs
in contrast, the
color of the square (set with clear
color) is only updated when a new square is created.
...for each square, we set its
color once, and then update only its position every frame.
... the clear
color state of webgl remains at the set value, until we change it again when a new square is created.
...And 6 more matches
Adding 2D content to a WebGL context - Web APIs
we need to define the shaders that will create the
color for our simple scene as well as draw our object.
... the shaders a shader is a program, written using the opengl es shading language (glsl), that takes information about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their
colors.
...its job is to determine the
color of that pixel by figuring out which texel (that is, the pixel from within the shape's texture) to apply to the pixel, getting that texel's
color, then applying the appropriate lighting to the
color.
...And 6 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-items: s...
... * {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 { gri...
...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 { gri...
...And 6 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> <div...
... * {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...
... * {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...
...And 6 more matches
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
logical property physical property border-block-end border-bottom border-block-end-
color border-bottom-
color border-block-end-style border-bottom-style border-block-end-width border-bottom-width border-block-start border-top border-block-start-
color border-top-
color border-block-start-style border-top-style border-block-start-width border-top-width border-inline-end border-right border-inl...
...ine-end-
color border-right-
color border-inline-end-style border-right-style border-inline-end-width border-right-width border-inline-start border-left border-inline-start-
color border-left-
color border-inline-start-style border-left-style border-inline-start-width border-left-width border-start-start-radius border-top-left-radius border-start-end-radius border-bottom-left-radius border-end-start-radius border-top-right-radius border-end-end-radius border-bottom-right-radius margin-block-end margin-bottom margin-block-start margin-top margin-inline-end margin-right margin-inline-start margin-left padding-block-end p...
... property purpose border-block sets border-
color, border-style, and border-width for both block borders.
...And 6 more matches
Index - Archive of obsolete content
11 activetitlebar
color xul attributes, xul reference no summary!
... 63
color xul attributes, xul reference no summary!
... 64
colorpicker.type xul attributes, xul reference no summary!
...And 5 more matches
Alpha (alpha channel) - MDN Web Docs Glossary: Definitions of Web-related terms
colors are represented in digital form as a collection of numbers, each representing the strength or intensity level of a given component of the
color.
...in a typical image file, the
color channels describe how much red, green, and blue are used to make up the final
color.
... 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.
...And 5 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
18 alpha (alpha channel) alpha, alpha channel, drawing, glossary, graphics, translucency, translucent, transparency, transparent, webgl, webxr, channel,
color, pixel
colors are represented in digital form as a collection of numbers, each representing the strength or intensity level of a given component of the
color.
...in a typical image file, the
color channels describe how much red, green, and blue are used to make up the final
color.
... 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.
...And 5 more matches
Grids - Learn web development
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 percentages, we ...
... 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.
... 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; grid-gap: 20px; } .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 *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is to make them usable in multiple layout method...
...And 5 more matches
HTML table basics - Learn web development
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 informatio...
...we could create the same effect as we see above by specifying our table as follows: <table> <colgroup> <col> <col style="background-
color: yellow"> </colgroup> <tr> <th>data 1</th> <th>data 2</th> </tr> <tr> <td>calcutta</td> <td>orange</td> </tr> <tr> <td>robots</td> <td>jazz</td> </tr> </table> effectively we are defining two "style columns", one specifying styling information for each column.
... if we wanted to apply the styling information to both columns, we could just include one <col> element with a span attribute on it, like this: <colgroup> <col style="background-
color: yellow" span="2"> </colgroup> just like colspan and rowspan, span takes a unitless number value that specifies the number of columns you want the styling to apply to.
...And 5 more matches
A first splash into JavaScript - Learn web development
the simple game you can see below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .lastresult {
color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100.
...you got it right!'; lastresult.style.background
color = 'green'; loworhi.textcontent = ''; setgameover(); } else if (guesscount === 10) { lastresult.textcontent = '!!!game over!!!'; loworhi.textcontent = ''; setgameover(); } else { lastresult.textcontent = 'wrong!'; lastresult.style.background
color = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last...
...esscount = 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.background
color = '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.
...And 5 more matches
Handling common accessibility problems - Learn web development
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.
... your design might look cool, but it is no good if people with visual impairments like
color blindness can't read your content.
... use a tool like webaim's
color contrast checker to check whether your scheme is contrasting enough.
...And 5 more matches
Handling common HTML and CSS problems - Learn web development
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.
... html5 form elements also exhibit fallback qualities — html5 introduced some special <input> types for inputting specific information into forms, such as times, dates,
colors, numbers, etc.
... 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 changes o...
...And 5 more matches
Accessibility Inspector - Firefox Developer Tools
simulate the accessibility inspector offers (as of firefox 70), a simulator that lets you see what a web page would look like to users with various forms of
color vision deficiency (better known as "
color blindness"), as well as contrast sensitivity loss.
...the role and name of the item will be shown in a small information bar along with
color contrast information if appropriate.
... in the following example, you can see that the image has been highlighted and its role, graphic, name, "road, asphalt, sky, clouds, fall", and the
color contrast ratio, 3.46, appears in the information bar above it.
...And 5 more matches
Using the CSS Typed Object Model - Web APIs
let's start by adding some css to our example, including a custom property and an inhertable property: p { font-weight: bold; } a { --
color: red;
color: var(--
color); } instead of getting all the properties, we create an array of properties of interest and use the stylepropertymapreadonly.get() method to get each of their values: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist ...
...= document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-
color', '
color', '--
color']; // iterate through our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode( allcomputedstyles.get(ofinterest[i]))); styleslist.appendchild(cssvalue); } we included border-left-
color to demonstrate that, had we include...
...d all the properties, every value that defaults to current
color (including caret-
color, outline-
color, text-decoration-
color, column-rule-
color, etc.) would return rgb(255, 0, 0).
...And 5 more matches
CanvasRenderingContext2D.drawWindow() - Web APIs
syntax void ctx.drawwindow(window, x, y, w, h, bg
color [, flags]); parameters window the window to render.
... bg
color a domstring that specifies the
color the canvas is filled with before the window is rendered into it.
... this
color may be transparent/translucent.
...And 5 more matches
CanvasRenderingContext2D - Web APIs
fill and stroke styles fill styling is used for
colors and styles inside shapes and stroke styling is used for the lines around shapes.
... canvasrenderingcontext2d.fillstyle
color or style to use inside shapes.
... canvasrenderingcontext2d.strokestyle
color or style to use for the lines around shapes.
...And 5 more matches
Compositing example - Web APIs
var canvas1 = document.createelement("canvas"); var canvas2 = document.createelement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', '
color-dodge', '
color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', '
color', 'luminosity' ].reverse(); var gcotext = [ 'this is the default setting and draws new shapes on top of the existing canvas content.', 'the new shape is drawn only where both the new shape and the destination canvas overlap.
...the new shape is drawn behind the canvas content.', 'where both shapes overlap the
color is determined by adding
color values.', 'only the new shape is shown.', 'shapes are made transparent where both overlap and drawn normal everywhere else.', 'the pixels are of the top layer are multiplied with the corresponding pixel of the bottom layer.
...erse(); var width = 320; var height = 340; main program when the page loads, this code runs to set up and run the example: window.onload = function() { // lum in srgb var lum = { r: 0.33, g: 0.33, b: 0.33 }; // resize canvas canvas1.width = width; canvas1.height = height; canvas2.width = width; canvas2.height = height; lightmix()
colorsphere(); runcomposite(); return; }; and this code, runcomposite(), handles the bulk of the work, relying on a number of utility functions to do the hard parts.
...And 5 more matches
Pixel manipulation with canvas - Web APIs
each
color component is represented by an integer between 0 and 255.
... for example, to read the blue component's value from the pixel at column 200, row 50 in the image, you would do the following: bluecomponent = imagedata.data[((50 * (imagedata.width * 4)) + (200 * 4)) + 2]; if given a set of coordinates (x and y), you may end up doing something like this: var xcoord = 50; var ycoord = 100; var canvaswidth = 1024; function get
colorindicesforcoord(x, y, width) { var red = y * (width * 4) + x * 4; return [red, red + 1, red + 2, red + 3]; } var
colorindices = get
colorindicesforcoord(xcoord, ycoord, canvaswidth); var redindex =
colorindices[0]; var greenindex =
colorindices[1]; var blueindex =
colorindices[2]; var alphaindex =
colorindices[3]; var redforcoord = imagedata.data[redindex]; var greenforcoord = imagedata.data...
...[greenindex]; var blueforcoord = imagedata.data[blueindex]; var alphaforcoord = imagedata.data[alphaindex]; or, if es2015 is appropriate: const xcoord = 50; const ycoord = 100; const canvaswidth = 1024; const get
colorindicesforcoord = (x, y, width) => { const red = y * (width * 4) + x * 4; return [red, red + 1, red + 2, red + 3]; }; const
colorindices = get
colorindicesforcoord(xcoord, ycoord, canvaswidth); const [redindex, greenindex, blueindex, alphaindex] =
colorindices; you may also access the size of the pixel array in bytes by reading the uint8clampedarray.length attribute: var numbytes = imagedata.data.length; creating an imagedata object to create a new, blank imagedata object, you should use the createimagedata() method.
...And 5 more matches
Document.execCommand() - Web APIs
commands back
color changes the document background
color.
... in stylewithcss mode, it affects the background
color of the containing block instead.
... this requires a <
color> value string to be passed in as a value argument.
...And 5 more matches
Basic scissoring - Web APIs
although the clear() drawing command writes the clear
color (set by clear
color()) to all pixels in the drawing buffer, scissor() defines a mask that only allows pixels inside the specified rectangular area to be updated.
...a pixel is a picture element (in practice, a point) on the screen, or a single element of the drawing buffer, that area in memory that holds your pixel data (such as rgba
color components).
... the reason for this distinction is that fragment
color (and other fragment values, such as depth) may be manipulated and changed several times during graphics operations before finally being written to the screen.
...And 5 more matches
Using textures in WebGL - Web APIs
« previousnext » now that our sample program has a rotating 3d cube, let's map a texture onto it instead of having its faces be solid
colors.
...this makes the texture immediately usable as a solid blue
color even though it may take a few moments for our image to download.
...this replaces all the previously existing code for configuring
colors for each of the cube's faces in initbuffers().
...And 5 more matches
Accessibility Information for Web Authors - Accessibility
color contrast analyzer by juicy studio "contrast is the perceived difference between two adjacent
colors.
... (...) contrast is extremely important in web design." wheel of
color: pump up the contrast, robert hess, msdn "for this year's list of worst design mistakes, (...) i asked readers of my newsletter to nominate the usability problems they found the most irritating.
...legibility problems how can a web author establish easily and quickly if the background
color and foreground (text)
color in use in his webpages have sufficient
color contrast difference and sufficient
color brightness difference?
...And 5 more matches
@media - CSS: Cascading Style Sheets
aspect-ratio width-to-height aspect ratio of the viewport
color number of bits per
color component of the output device, or zero if the device isn't
color color-gamut approximate range of
colors that are supported by the user agent and output device added in media queries level 4.
...
color-index number of entries in the output device's
color lookup table, or zero if the device does not use such a table device-aspect-ratio width-to-height aspect ratio of the output device deprecated in media queries level 4.
... forced-
colors detect whether user agent restricts
color palette added in media queries level 5.
...And 5 more matches
CSS values and units - CSS: Cascading Style Sheets
other possible combinations are as follows: <frequency-percentage> <angle-percentage> <time-percentage> special data types (defined in other specs) <
color> <image> <position>
color the <
color> value specifies the
color of an element feature (e.g.
... it's background
color), and is defined in the css
color module.
... adds the min(), max() and clamp() functional notation adds toggle() css values and units module level 3 candidate recommendation adds calc(), ch, rem, vw, vw, vmin, vmax, q css
color module level 4 working draft adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions.
...And 5 more matches
border-inline-end - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-inline-end-
color border-inline-end-style border-inline-end-width syntax border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end maps depends on the element's writing mode, directionality, and text orientation.
... initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: none
color: varies from one browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if b...
...order-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-inline-end-
color: computed
coloranimation typeas each of the properties of the shorthand:border-inline-end-
color: a
colorborder-inline-end-style: discreteborder-inline-end-width: a length values the border-inline-end is specified with one or more of the following, in any order: <'border-width'> the width of the border.
...And 5 more matches
revert - CSS: Cascading Style Sheets
so if you have a
color: green for all sections and all: revert on a specific section the
color of the section will be black.
... h3 { font-weight: normal;
color: blue; } <h3 style="font-weight: unset;
color: unset;">this will still have font-weight: normal, but
color: black</h3> <p>just some text</p> <h3 style="font-weight: revert;
color: revert;">this should have its original font-weight (bold) and
color: black</h3> <p>just some text</p> revert all reverting all values is useful when you did heavy modifications for something and then want to revert...
...so to iterate on above example instead of reverting font-weight and
color separately you could just revert all of them.
...And 5 more matches
text-emphasis - CSS: Cascading Style Sheets
it is a shorthand for text-emphasis-style and text-emphasis-
color.
...this is because if the style and the
color of emphasis marks may vary in a text, it is extremely unlikely that their position will.
... constituent properties this property is a shorthand for the following css properties: text-emphasis-
color text-emphasis-style syntax /* initial value */ text-emphasis: none; /* no emphasis marks */ /* <string> value */ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25b2'; text-emphasis: '*' #555; text-emphasis: 'foo'; /* should not use.
...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:2s; ...
... 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.classna...
...me = "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; backg...
...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
color; ...
... 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.clas...
...sname = "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-function...
...And 5 more matches
requiredFeatures - SVG: Scalable Vector Graphics
twentynine elements are using this attribute: <a>, <altglyph>, <animate>, <animate
color>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect ...
...g11/feature#style http://www.w3.org/tr/svg11/feature#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://www.w3.org/tr/svg11/feature#
colorprofile http://www.w3.org/tr/svg11/feature#gradient http://www.w3.org/tr/svg11/feature#pattern http://www.w3.org/tr/svg11/feature#clip http://www.w3.org/tr/svg11/feature#mask http://www.w3.org/tr/svg11/feature#filter http://www.w3.org/tr/svg11/feature#xlinkattribute http://www.w3.org/tr/svg11/feature#font http://www.w3.org/tr/svg11/feature#extensibility http://www.w3.org/tr/sv...
... http://www.w3.org/tr/svg11/feature#basictext the browser supports the <text> element http://www.w3.org/tr/svg11/feature#paintattribute the browser supports the
color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width,
color-interpolation and
color-rendering attributes http://www.w3.org/tr/svg11/feature#basicpaintattribute the browser supports the
color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width...
...And 5 more matches
values - SVG: Scalable Vector Graphics
the values attribute has different meanings, depending upon the context where itʼs used, either it defines a sequence of values used over the course of an animation, or itʼs a list of numbers for a
color matrix, which is interpreted differently depending on the type of
color change to be performed.
... five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <fe
colormatrix> animate, animate
color, animatemotion, animatetransform for <animate>, <animate
color>, <animatemotion>, and <animatetransform>, values is a list of values defining the sequence of values over the course of the animation.
... fe
colormatrix for the <fe
colormatrix> element, values is a list of numbers interpreted differently depending on the value of the type attribute.
...And 5 more matches
ui/button/action - Archive of obsolete content
by default the badge's
color is red, but you can set your own
color using the badge
color property, specified as a css <
color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badge
color: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if ...
...(state.checked) { button.badge
color = "#aa00aa"; } else { button.badge
color = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
... badge
color css <
color> value new in firefox 36.
...And 4 more matches
ui/button/toggle - Archive of obsolete content
by default the badge's
color is red, but you can set your own
color using the badge
color property, specified as a css <
color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badge
color: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if ...
...(state.checked) { button.badge
color = "#aa00aa"; } else { button.badge
color = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
... badge
color css <
color> value new in firefox 36.
...And 4 more matches
-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: 20px; ...
... filterfrom.filters.item(0).transition=12; imagefrom.style.visibility = "hidden"; filterto.style.visibility = ""; filterfrom.filters.item(0).play(14); } </script> </body> gradient progid:dximagetransform.microsoft.gradient( <properties> ) where <properties> = [ <enabled> | <end
color> | <end
colorstr> | <gradienttype> | <start
color> | <start
colorstr> ]# where <enabled> = 'enabled=' [ true | false ] <end
color> = 'start
color=' <
color> <end
colorstr> = 'start
colorstr=' <
color> <gradienttype> = 'gradienttype=' <integer> <start
color> = 'start
color=' <
color> <start
colorstr> = 'start
colorstr=' <
color> enabled default: true set to false to disable.
... end
color the end
color, supports only opaque
colors in the #rrggbb notation.
...And 4 more matches
Building up a basic demo with Three.js - Game development
var renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); renderer.setclear
color(0xdddddd, 1); document.body.appendchild(renderer.domelement); we are creating a new webgl renderer, setting its size to fit the whole available space on the screen, and appending the dom structure to the page.
...the setclear
color() method sets our background to a light gray colour, instead of the default black one.
... material a material is what covers an object, the
colors, or textures on its surface.
...And 4 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.
...in a similar way to the border property that you encountered in previous lessons, column-rule is a shorthand for column-rule-
color, column-rule-style, and column-rule-width, and accepts the same values as border.
... .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); } try adding rules of different styles and
colors.
...And 4 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 4 more matches
What is CSS? - Learn web development
links are
colored and underlined to distinguish them from the rest of the text.
... css can be used for very basic document text styling — for example changing the
color and size of headings and links.
...for example "i want the main heading on my page to be shown as large red text." the following code shows a very simple css rule that would achieve the styling described above: h1 {
color: red; font-size: 5em; } the rule opens with a selector .
...And 4 more matches
Mozilla's Section 508 Compliance
(g) applications shall not override user selected contrast and
color selections and other individual display attributes.
...the default theme, classic, uses the operating system's font and
color contrast settings.
...the default theme, classic, uses gnome's font and
color contrast settings.
...And 4 more matches
Mozilla Quirks Mode Behavior
make table borders gray rather than using the foreground
color.
... the css parser accepts
colors not beginning with #, except in shorthands.
... obsolete since gecko 2.0 html
colors were parsed differently up to gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) (bug 121738).
...And 4 more matches
Examples of web and XML development using the DOM - Web APIs
<!doctype html> <html lang="en"> <head> <title>changing
color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.
color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets...
... 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.
...And 4 more matches
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
the webgl_draw_buffers.drawbufferswebgl() method is part of the webgl api and allows you to define the draw buffers to which all fragment
colors are written.
... note: when using webgl2, this method is available as gl.drawbuffers() by default and the constants are named gl.
color_attachment1 etc.
...possible values: gl.none: the fragment shader is not written to any
color buffer.
...And 4 more matches
WebGLRenderingContext.getParameter() - Web APIs
constant returned type description gl.active_texture glenum gl.aliased_line_width_range float32array (with 2 elements) gl.aliased_point_size_range float32array (with 2 elements) gl.alpha_bits glint gl.array_buffer_binding webglbuffer gl.blend glboolean gl.blend_
color float32array (with 4 values) gl.blend_dst_alpha glenum gl.blend_dst_rgb glenum gl.blend_equation glenum gl.blend_equation_alpha glenum gl.blend_equation_rgb glenum gl.blend_src_alpha glenum gl.blend_src_rgb glenum gl.blue_bits glint gl.
color_clear_value ...
... float32array (with 4 values) gl.
color_writemask sequence<glboolean> (with 4 values) gl.compressed_texture_formats uint32array returns the compressed texture formats.
... gl.green_bits glint gl.implementation_
color_read_format glenum gl.implementation_
color_read_type glenum gl.line_width glfloat gl.max_combined_texture_image_units glint gl.max_cube_map_texture_size glint gl.max_fragment_uniform_vectors glint gl.max_renderbuffer_size glint gl.max_texture_image_units glint gl.max_tex...
...And 4 more matches
Raining rectangles - Web APIs
« previousnext » a simple webgl game that demonstrates clearing with solid
colors, scissoring, animation, and user interaction.
...in this example, we use an object-oriented approach for the displayed rectangles, which helps to keep the state of the rectangle (its position,
color, and so on) organized in one place, and the overall code more compact and reusable.
... this example combines clearing the drawing buffer with solid
colors and scissoring operations.
...And 4 more matches
Creating 3D objects using WebGL - Web APIs
if you wonder why we need 24 vertices, and not just 8, it is because each corner belongs to three faces of different
colors, and a single vertex needs to have a single specific
color; therefore we will create three copies of each vertex in three different
colors, one for each face.
... gl.vertexattribpointer( programinfo.attriblocations.vertexposition, numcomponents, type, normalize, stride, offset); gl.enablevertexattribarray( programinfo.attriblocations.vertexposition); } define the vertices'
colors we also need to build an array of
colors for each of the 24 vertices.
... this code starts by defining a
color for each face, then uses a loop to assemble an array of all the
colors for each of the vertices.
...And 4 more matches
Using the Web Animations API - Web APIs
the css version here’s a tumbling animation written in css showing alice falling down the rabbit hole that leads to wonderland (see the full code on codepen): notice that the background moves, alice spins, and her
color changes at an offset from her spinning.
...here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% {
color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% {
color: #431236; } 100% {
color: #000; transform: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes alice’s
color and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely.
... in the @keyframes block we can see that 30% of the way through each loop (about .9 seconds in), alice’s
color changes from black to a deep burgundy then back again by the end of the loop.
...And 4 more matches
Accessibility documentation index - Accessibility
83 accessibility and spacial patterns accessibility, braille, patterns, photosensitive seizures nasa conducted research on the perception of
color, and found that luminance contrast mattered greatly as to how they were perceived.
... 85 accessibility: what users can do to browse more safely
color, epilepsy, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, user settings, web animation this article discusses making web content accessible for those with vestibular disorders, and those who support them, by taking advantage of personalization and accessibility settings built into the operating systems.
... 99
color contrast accessibility, wcag, contrast, perceivable the
color contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.
...And 4 more matches
::placeholder - CSS: Cascading Style Sheets
::placeholder {
color: blue; font-size: 1.5em; } only the subset of css properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.
... note: in most browsers, the appearance of placeholder text is a translucent or light gray
color by default.
... syntax ::placeholder accessibility concerns
color contrast contrast ratio placeholder text typically has a lighter
color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.
...And 4 more matches
Attribute selectors - CSS: Cascading Style Sheets
/* <a> elements with a title attribute */ a[title] {
color: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] {
color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { padding: 2px; } syntax [attr] represents elements with an attribute name of attr.
... examples links css a {
color: blue; } /* internal links, beginning with "#" */ a[href^="#"] { background-
color: gold; } /* links with "example" anywhere in the url */ a[href*="example"] { background-
color: silver; } /* links with "insensitive" anywhere in the url, regardless of capitalization */ a[href*="insensitive" i] {
color: cyan; } /* links with "case" anywhere in the url, with matching capitalization */ a[...
...href*="case" s] {
color: pink; } /* links that end in ".org" */ a[href$=".org"] {
color: red; } /* links that start with "https" and end in ".org" */ a[href^="https"][href$=".org"] {
color: green; } html <ul> <li><a href="#internal">internal link</a></li> <li><a href="http://example.com">example link</a></li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul> result languages css /* all divs with a `lang` attribute are bold.
...And 4 more matches
Border-radius generator - CSS: Cascading Style Sheets
ursor: 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-radius: 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: non...
...e; -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-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillade...
...mos.org/files/5681/checked.png"); background-
color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview { height: 500px; border: 1px solid #ccc; border-radius: 3px; text-align: center; overflow: hidden; position: relative; } #previe...
...And 4 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.
... * {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.
... * {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(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...
...And 4 more matches
CSS reference - CSS: Cascading Style Sheets
style rule examples strong {
color: red; } div.menu-bar li:hover > ul { display: block; } for a beginner-level introduction to the syntax of selectors, see our guide on css selectors.
...er (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-
colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-
colorborder-block-endborder-block-end-
colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-
colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-width...
...border-bottomborder-bottom-
colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-
colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-
colorborder-inline-endborder-inline-end-
colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-
colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-
colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-
colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-
colorborder-top-left-r...
...And 4 more matches
border-bottom - CSS: Cascading Style Sheets
it sets the values of border-bottom-width, border-bottom-style and border-bottom-
color.
... constituent properties this property is a shorthand for the following css properties: border-bottom-
color border-bottom-style border-bottom-width syntax border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
... <
color> see border-bottom-
color.
...And 4 more matches
outline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: outline-
color outline-style outline-width syntax /* style */ outline: solid; /*
color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /*
color | style | width */ outline: green solid 3px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below.
... values <'outline-
color'> sets the
color of the outline.
... defaults to current
color if absent.
...And 4 more matches
HTML documentation index - HTML: Hypertext Markup Language
3 applying
color to html elements using css beginner, css, css
colors, guide, html, html
colors, html styles, styling html,
color with css, there are lots of ways to add
color to your html elements to create just the look you want.
... this article is a primer introducing each of the ways css
color can be used in html.
... 66 <basefont> element, fonts, html, layout, obsolete, reference, style, web, basefont the obsolete html base font element (<basefont>) sets a default font face, size, and
color for the other elements which are descended from its parent element.
...And 4 more matches
Working with objects - JavaScript
a cup has a
color, a design, weight, a material it is made of, etc.
... mycar.
color; // undefined properties of javascript objects can also be accessed or set using a bracket notation (for more details see property accessors).
... var myhonda = {
color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; you can also use object initializers to create arrays.
...And 4 more matches
edgeMode - SVG: Scalable Vector Graphics
the edgemode attribute determines how to extend the input image as necessary with
color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
... two elements are using this attribute: <feconvolvematrix> and <fegaussianblur> feconvolvematrix for <feconvolvematrix>, edgemode determines how to extend the input image as necessary with
color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
... value duplicate | wrap | none default value duplicate animatable yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the
color values at the given edge of the input image.
...And 4 more matches
name - SVG: Scalable Vector Graphics
the name attribute specifies either the name of a
color profile or a font face.
... two elements are using this attribute: <
color-profile> and <font-face-name>
color-profile for <
color-profile>, name defines the name of the
color profile.
... value <name> default value none animatable yes <name> this value is the name which is used as the first parameter for icc
color specifications within fill, stroke, stop-
color, flood-
color and lighting-
color property values to identify the
color profile to use for the icc
color specification and the name which can be the value of the
color-profile property.
...And 4 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the text changes occur because authors encapsulate the areas with the anchor-setting markup: css: a:hover {
color: green;} html: <a href="foo.com">this text should turn green when you hover over it.</a> <a name="anchor-name"> this text should change
color when hovered over, but doesn't in internet explorer.
... </a> mozilla follows the css specification correctly and will change the
color to green in this example.
... you can use two ways to make mozilla behave like internet explorer and not change the
color of the text when hovered over: first, you can change the css rule to be a:link:hover {
color: green;}, which will only change the
color if the element is a link (has an href attribute).
...And 3 more matches
Skinning XUL Files by Hand - Archive of obsolete content
nitions 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.
... the following table shows the basic format for these two common types of style definitions: class id element.class { attribute: value; } element#id { attribute: value; } menu.baseline { border: 0px; font-size: 9pt; } menu#edit {
color: red; } other style subgroups contextualsubgroups -- elements appearing within other elements, such as italicized text anywhere within a <p> element or a <div> -- can be grouped in css, but this is an extremely inefficient way to style xul, and is frowned upon in the mozilla development community (again, refer to the skinning guidelines in writing skinnable xul and css for more info); css2 also provides some new ways to group elements for styling, which we summarize briefly here, because the...
... note that much of the style attributes in these rules have to do with borders, font information,
color, margin, native appearance.
...And 3 more matches
Explaining basic 3D theory - Game development
color: holds an rgba value (r, g and b for the red, green, and blue channels, alpha for transparency — all values range from 0.0 to 1.0).
... texture: a 2d image that the vertex can use to decorate the surface it is part of instead of a simple
color.
...the geometry is built from a vertex and the face, while material is a texture, which uses a
color or an image.
...And 3 more matches
RGB - MDN Web Docs Glossary: Definitions of Web-related terms
red green blue (rgb) is a
color model that represents
colors as mixtures of three underlying components (or channels), namely, red, green, and blue.
... each
color is described by a sequence of three numbers (typically between 0.0 and 1.0, or between 0 and 255) that represent the different intensities (or contributions) of red, green, and blue, in determining the final
color.
... there are many ways to describe the rgb components of a
color.
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bg
color="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <f...
... <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bg
color="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bg
color="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bg
color="#ffffff"...
... link styling by default, links are visually different from other text in both
color and text-decoration, with links being blue and underlined by default, purple and underlined if visited, and with a focus-ring when they receive keyboard focus.
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bg
color="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <f...
... <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bg
color="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bg
color="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bg
color="#ffffff"...
... link styling by default, links are visually different from other text in both
color and text-decoration, with links being blue and underlined by default, purple and underlined if visited, and with a focus-ring when they receive keyboard focus.
...And 3 more matches
Organizing your CSS - Learn web development
consistency can be applied in all sorts of ways, such as using the same naming conventions for classes, choosing one method of describing
color, or maintaining consistent formatting (for example will you use tabs or spaces to indent your code?
...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.
...And 3 more matches
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.
... the second list item should use rgb
color.
...And 3 more matches
Example 1 - Learn web development
: 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 .o...
...ption { 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 class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* --------...
...: 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 .o...
...And 3 more matches
What will your website look like? - Learn web development
discusses the planning and design work you have to do for your website before writing code, including "what information does my website offer?", "what fonts and
colors do i want?", and "what does my site do?" first things first: planning before doing anything, you need some ideas.
...what's the background
color?
... note: complex projects need detailed guidelines that go into all the details of
colors, fonts, spacing between items on a page, appropriate writing style, and so on.
...And 3 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, this css selects paragraph text, setting the
color to red: 38 dealing with files beginner, codingscripting, files, guide, html, l10n:priority, theory, website when you are working on a website locally on your computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server.
...for example, you can use css to alter the font,
color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
...And 3 more matches
Styling Vue components with CSS - Learn web development
he 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-radi...
...us: 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 3 more matches
Accessibility information for UI designers and developers
color enough contrast ensure there is enough contrast between foreground and background
colors.
... your content can then be better consumed by users with low vision and people with
color deficiencies.
... don't rely on
color alone when your interface uses
color to distinguish between things, make sure the distinction is also made in other ways.
...And 3 more matches
Accessible Toolkit Checklist
the high contrast theme can be toggled dynamically with leftalt+leftshift+printscreen expose the spi_getscreenreader flag to xml/scripts so that apps can alter behavior use system highlight
color where possible for item selection, but never use that exact
color in more than 1 place at a time, otherwise screen reader will read everything with that
color whenever highlight changes pay attention to spi_getcaretwidth for the correct width of the caret pay attention to 'route mouse pointer to default button' setting it's possible that the user wants mnemonics hidden except wh...
... and traversed states, and accessible value that holds destination url text fields - single and multiple line it's probably best to use native widgets for these, otherwise accessibility support will be quite difficult tab should always focus the next item, not insert a tab, unless there's a really good reason and another way to navigate always use system selection
color, otherwise screen reader won't read the text make sure the caret is never blinking when focus is not in text field handle standard editing keys, such as arrow keys, home, end, pageup, pagedown, ctrl+left/right, shifted keys for selection, delete, ctrl+delete, backspace, ctrl+backspace, ctrl+a, ctrl+b, ctrl+c, ctrl+i, ctrl+u, ctrl+x, ctrl+v, ctrl+[shift]+z in multiline text field...
..., enter key inserts new line (thus default button no longer shows dark border when multiline text field is focused) in autocomplete text fields, make sure the autocomplete popup doesn't receive actual or msaa focus unless an up/down arrow is pressed, and don't use the default system highlight
color in the list itself unless it really has focus in autocomplete text fields, make sure that the delete or backspace key removes all auto completed selected text.
...And 3 more matches
imgIContainer
gfxiimageframe getframeat(in unsigned long index); obsolete since gecko 1.9.2 void getframe
colormap(in unsigned long framenumber, [array, size_is(palettelength)] out pruint32 palettedata, out unsigned long palettelength); obsolete since gecko 2.0 unsigned long getframeimagedatalength(in unsigned long framenumber); obsolete since gecko 2.0 imagecontainer getimagecontainer(); native code only!
... flag_decode_no_
colorspace_conversion: do not do any
colorspace conversion; ignore any embedded profiles, and do not convert to any particular destination space.
... flag_sync_decode 0x1 flag_decode_no_premultiply_alpha 0x2 flag_decode_no_
colorspace_conversion 0x4 flag_clamp 0x8 frame_first 0 constants for specifying various "special" frames.
...And 3 more matches
Eyedropper - Firefox Developer Tools
the eyedropper tool enables you to select
colors in the current page.
...underneath the magnifying glass it shows the
color value for the current pixel using whichever scheme you've selected in settings > inspector > default
color unit: you can use it in one of two ways: to select a
color from the page and copy it to the clipboard to change a
color value in the inspector's rules view to a
color you've selected from the page copying a
color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current
color value in the eyedropper change.
... clicking copies the current
color value to the clipboard.
...And 3 more matches
Flame Chart - Firefox Developer Tools
functions are
color-coded to make them easier to distinguish.
.../ 8 -> sort() // 37 -> bubblesort() // 1345 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 103 -> partition() // 12 first, we'll just select the whole section in which the program was active: at the top,
colored purple, is the sortall() call, running throughout the program from start to finish.
... underneath that,
colored olive-green, are the calls it's making to sort().
...And 3 more matches
CSSPrimitiveValue - Web APIs
there is one exception for
color percentage values: since a
color percentage value is relative to the range 0-255, a
color percentage value can be converted to a number (see also the rgb
color interface).
... css_rgb
color the value is an <
color>.
... the value can be obtained by using the getrgb
colorvalue() method.
...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.background
color="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).
...--> <p id="p1" onclick="alterstyle(this);"> click here to change background
color.
...And 3 more matches
CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the
color, gradient, or pattern to use inside shapes.
... for more examples of fill and stroke styles, see applying styles and
color in the canvas tutorial.
... syntax ctx.fillstyle =
color; ctx.fillstyle = gradient; ctx.fillstyle = pattern; options
color a domstring parsed as css <
color> value.
...And 3 more matches
CanvasRenderingContext2D.strokeStyle - Web APIs
the canvasrenderingcontext2d.strokestyle property of the canvas 2d api specifies the
color, gradient, or pattern to use for the strokes (outlines) around shapes.
... for more examples of stroke and fill styles, see applying styles and
color in the canvas tutorial.
... syntax ctx.strokestyle =
color; ctx.strokestyle = gradient; ctx.strokestyle = pattern; options
color a domstring parsed as css <
color> value.
...And 3 more matches
Advanced animations - Web APIs
var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var ball = { x: 100, y: 100, radius: 25,
color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.
color; ctx.fill(); } }; ball.draw(); nothing special here, the ball is actually a simple circle and gets drawn with the help of the arc() method.
... var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25,
color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.
color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover...
... <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25,
color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.
color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball...
...And 3 more matches
Basic animations - Web APIs
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.background
color = "#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++) { ...
...,0.05)"; c.fillrect(0, 0, cn.width, cn.height); a.foreach(function(e, i) { e.dr(); }); } </script> <style> #cw { position: fixed; z-index: -1; } body { margin: 0; padding: 0; background-
color: rgba(0,0,0,0.05); } </style> </head> <body> <canvas id="cw"></canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nokia 1100:snake...
..."time">0</span> </div> <div>lousygames ©</div> <div> score :<span id="score">0</span> </div> <div class="touch off" onclick="touch(this)">touch</div> </div> <canvas id="main"></canvas> </body> <style> body { margin: 0; overflow: hidden; background: #000 } .banner { text-align: center;
color: #fff; background: #3f51b5; line-height: 29px; position: fixed; left: 0; top: 0; right: 0; font-family: monospace; height: 30px; opacity: .4; display: flex; transition: .5s } .banner:hover { opacity: 1 } div#selector>div { flex-basis: 30% } @keyframes diss { f...
...And 3 more matches
ElementCSSInlineStyle.style - Web APIs
setting styles styles should not be set by assigning a string directly to the style property (as in elt.style = "
color: blue;"), since it is considered read-only, as the style attribute returns a cssstyledeclaration object which is also read-only.
...for adding specific styles to an element without altering other style values, it is preferred to use the individual properties of style (as in elt.style.
color = '...') as using elt.style.csstext = '...' or elt.setattribute('style', '...') sets the complete inline style for the element by overriding the existing inline styles.
... a style declaration is reset by setting it to null or an empty string, e.g., elt.style.
color = null.
...And 3 more matches
HTMLBodyElement - Web APIs
htmlbodyelement.alink is a domstring that represents the
color of active hyperlinks.
... htmlbodyelement.bg
color is a domstring that represents the background
color for the document.
... htmlbodyelement.link is a domstring that represents the
color of unvisited links.
...And 3 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.
...if two pointers are down, and the distance between the pointers is increasing (signifying a pinch out or zoom in), the element's background
color is changed to pink, and if the distance between the pointers is decreasing (a pinch in or zoom out), the background
color is changed to lightblue.
...And 3 more matches
Using Pointer Events - Web APIs
function handlestart(evt) { log("pointerdown."); var el = document.getelementsbytagname("canvas")[0]; var ctx = el.getcontext("2d"); log("pointerdown: id = " + evt.pointerid); ongoingtouches.push(copytouch(evt)); var
color =
colorfortouch(evt); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey, 4, 0, 2 * math.pi, false); // a circle at the start ctx.arc(evt.clientx, evt.clienty, 4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle =
color; ctx.fill(); } after storing some of the event's processing in the ongoingtouches for later processing, the start point is drawn as a small ci...
... function handlemove(evt) { var el = document.getelementsbytagname("canvas")[0]; var ctx = el.getcontext("2d"); var
color =
colorfortouch(evt); var idx = ongoingtouchindexbyid(evt.pointerid); log("continuing touch: idx = " + idx); if (idx >= 0) { ctx.beginpath(); log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " + ongoingtouches[idx].pagey + ");"); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); log("ctx.lineto(" + evt.clientx + ", " + evt.clienty + ");"); ctx.lineto(...
...evt.clientx, evt.clienty); ctx.linewidth = 4; ctx.strokestyle =
color; ctx.stroke(); ongoingtouches.splice(idx, 1, copytouch(evt)); // swap in the new touch record log("."); } else { log("can't figure out which touch to continue: idx = " + idx); } } this function looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn.
...And 3 more matches
Touch events - Web APIs
function handlestart(evt) { evt.preventdefault(); console.log("touchstart."); var el = document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { console.log("touchstart:" + i + "..."); ongoingtouches.push(copytouch(touches[i])); var
color =
colorfortouch(touches[i]); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey, 4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle =
color; ctx.fill(); console.log("touchstart:" + i + "."); } } this calls event.preventdefault() to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivere...
... function handlemove(evt) { evt.preventdefault(); var el = document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { var
color =
colorfortouch(touches[i]); var idx = ongoingtouchindexbyid(touches[i].identifier); if (idx >= 0) { console.log("continuing touch "+idx); ctx.beginpath(); console.log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " + ongoingtouches[idx].pagey + ");"); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); console.log("ctx.lineto(" + touches[i].p...
...agex + ", " + touches[i].pagey + ");"); ctx.lineto(touches[i].pagex, touches[i].pagey); ctx.linewidth = 4; ctx.strokestyle =
color; ctx.stroke(); ongoingtouches.splice(idx, 1, copytouch(touches[i])); // swap in the new touch record console.log("."); } else { console.log("can't figure out which touch to continue"); } } } this iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn.
...And 3 more matches
WEBGL_draw_buffers - Web APIs
ext.
color_attachment0_webgl ext.
color_attachment1_webgl ext.
color_attachment2_webgl ext.
color_attachment3_webgl ext.
color_attachment4_webgl ext.
color_attachment5_webgl ext.
color_attachment6_webgl ext.
color_attachment7_webgl ext.
color_attachment8_webgl ext.
color_attachment9_webgl ext.
color_attachment10_webgl ext.
color_attachment11_webgl ext.
color_attachment12_webgl ext.
color_attachment13_webgl ...
... ext.
color_attachment14_webgl ext.
color_attachment15_webgl a glenum specifying a
color buffer.
... ext.max_
color_attachments_webgl a glint indicating the maximum number of framebuffer
color attachment points.
...And 3 more matches
WebGL2RenderingContext.drawBuffers() - Web APIs
the webgl2renderingcontext.drawbuffers() method of the webgl 2 api defines draw buffers to which fragment
colors are written into.
... syntax void gl.drawbuffers(buffers); parameters buffers an array of glenum specifying the buffers into which fragment
colors will be written.
... possible values are: gl.none: fragment shader output is not written into any
color buffer.
...And 3 more matches
WebGL2RenderingContext.readBuffer() - Web APIs
the webgl2renderingcontext.readbuffer() method of the webgl 2 api selects a
color buffer as the source for pixels for subsequent calls to copyteximage2d, copytexsubimage2d, copytexsubimage3d or readpixels.
... syntax void gl.readbuffer(src); parameters src a glenum specifying a
color buffer.
... possible values: gl.back: reads from the back
color buffer.
...And 3 more matches
WebGL by example - Web APIs
clearing with
colors how to clear the rendering context with a solid
color.
...clearing the rendering context with a random
color when the user clicks.
... simple
color animation a very basic
color animation, done by clearing the webgl drawing buffer with a different random
color every second.
...And 3 more matches
Lighting in WebGL - Web APIs
then we update the vertex shader to adjust the
color of each vertex, taking into account the ambient lighting as well as the effect of the directional lighting given the angle at which it's striking the face.
... uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; varying highp vec2 vtexturecoord; varying highp vec3 vlighting; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vtexturecoord = atexturecoord; // apply lighting effect highp vec3 ambientlight = vec3(0.3, 0.3, 0.3); highp vec3 directionallight
color = vec3(1, 1, 1); highp vec3 directionalvector = normalize(vec3(0.85, 0.8, 0.75)); highp vec4 transformednormal = unormalmatrix * vec4(avertexnormal, 1.0); highp float directional = max(dot(transformednormal.xyz, directionalvector), 0.0); vlighting = ambientlight + (directionallight
color * directional); } `; once the position of the vertex is computed, and we pass...
... once the amount of directional lighting is computed, we can generate the lighting value by taking the ambient light and adding in the product of the directional light's
color and the amount of directional lighting to provide.
...And 3 more matches
WebGL best practices - Web APIs
(the spec calls this "
color-renderable formats") for example, if a system supports float-textures but not render-to-float, generatemipmaps will fail for float formats.
... on webgl 1, use the ext_
color_buffer_half_float and webgl_
color_buffer_float extensions to check for render-to-float-texture support for float32 and float16 respectively.
... on webgl 2, ext_
color_buffer_float is your check for render-to-float-texture support for both float32 and float16.
...And 3 more matches
Using the Web Storage API - Web APIs
these three lines all set the (same)
colorsetting entry: localstorage.
colorsetting = '#a4509b'; localstorage['
colorsetting'] = '#a4509b'; localstorage.setitem('
colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.
...the landing page provides controls that can be used to customize the
color, font, and decorative image: when you choose different options, the page is instantly updated; in addition, your choices are stored in localstorage, so that when you leave the page and load it again, later on, your choices are remembered.
... testing whether your storage has been populated to start with, in main.js, we test whether the storage object has already been populated (i.e., the page was previously accessed): if(!localstorage.getitem('bg
color')) { populatestorage(); } else { setstyles(); } the storage.getitem() method is used to get a data item from storage; in this case, we are testing to see whether the bg
color item exists; if not, we run populatestorage() to add the existing customization values to the storage.
...And 3 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
problems can easily happen merely by having two listboxes visible at the same time, because selected listbox items use the system highlight
color, even when the listbox itself is not focused.
... other problems occur when a piece of static text which has the same
color background, which will cause that text to be repeated each time the focus or highlight moves.
... solution: don't use the system highlight
color for items that you don't want spoken when the highlight or focus moves.
...And 3 more matches
-webkit-border-before - CSS: Cascading Style Sheets
/* border values */ -webkit-border-before: 1px; -webkit-border-before: 2px dotted; -webkit-border-before: medium dashed blue; /* global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before can be used to set the values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-
color.
... syntax values one or more of the following, in any order: <'border-width'> see border-width <'border-style'> see border-style <'
color'> see
color formal definition initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: non...
...e
color: varies from one browser to anotherapplies toall elementsinheritedyespercentagesas each of the properties of the shorthand:-webkit-border-before-width: logical-width of containing blockcomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-sty...
...And 3 more matches
:visited - CSS: Cascading Style Sheets
/* selects any <a> that has been visited */ a:visited {
color: green; } styles defined by the :visited pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :active) that has at least equal specificity.
... styling restrictions for privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used: allowable css properties are
color, background-
color, border-
color, border-bottom-
color, border-left-
color, border-right-
color, border-top-
color, column-rule-
color, outline-
color, text-decoration-
color, and text-emphasis-
color.
... although these styles can be change the appearance of
colors to the end user, the window.getcomputedstyle method will lie and always return the value of the non-:visited
color.
...And 3 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
.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 grid lay...
...it then moves onto the next line, creating a new row track, and fills in more items: * {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, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="ite...
... * {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 { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">i...
...And 3 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 this ...
... .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" "sd sd 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" "sd sd s...
...And 3 more matches
CSS Scrollbars - CSS: Cascading Style Sheets
css scrollbars standardizes the obsolete scrollbar
color properties introduced in 2000 by windows ie 5.5.
... .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-
color: rebeccapurple green; scrollbar-width: thin; } html <div class="scroller"> veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
...</div> result reference css properties scrollbar-width scrollbar-
color specifications specification status comment css scrollbars level 1 working draft initial definition.
...And 3 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-spacing -webkit-border-start** -webkit-border-start-
color** -we...
...sk-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-
color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-
color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-
color -webkit-text-security -webkit-text-stroke-
color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-or...
...it-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 -webkit-column-rule -webkit-column-rule-
color -webkit-column-rule-style -webkit-column-rule-width -webkit-column-span -webkit-column-width -webkit-columns f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap -webkit-font-feature-settings -webkit-font-kerning -webkit-font-variant-ligatures g-j -webkit-grid -webkit-grid-area ...
...And 3 more matches
border-block-start - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-block-start-
color border-block-start-style border-block-start-width syntax border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-
color.
... <'
color'> the
color of the border.
... see
color.
...And 3 more matches
border-block - CSS: Cascading Style Sheets
border-block: 1px; border-block: 2px dotted; border-block: medium dashed blue; border-block can be used to set the values for one or more of border-block-width, border-block-style, and border-block-
color setting both the start and end in the block dimension at once.
... constituent properties this property is a shorthand for the following css properties: border-block-
color border-block-style border-block-width syntax values the border-block is specified with one or more of the following, in any order: <'border-width'> the width of the border.
... <'
color'> the
color of the border.
...And 3 more matches
border-inline-start - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-inline-start-
color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orientation.
... <'
color'> the
color of the border.
... see
color.
...And 3 more matches
border-left - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-left-
color border-left-style border-left-width syntax border-left: 1px; border-left: 2px dotted; border-left: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
... <
color> see border-left-
color.
... formal definition initial valueas each of the properties of the shorthand:border-left-width: mediumborder-left-style: noneborder-left-
color: current
colorapplies toall elements.
...And 3 more matches
border-right - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-right-
color border-right-style border-right-width syntax border-right: 1px; border-right: 2px dotted; border-right: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
... <
color> see border-right-
color.
... formal definition initial valueas each of the properties of the shorthand:border-right-width: mediumborder-right-style: noneborder-right-
color: current
colorapplies toall elements.
...And 3 more matches
border-top - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-top-
color border-top-style border-top-width syntax border-top: 1px; border-top: 2px dotted; border-top: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
... <
color> see border-top-
color.
... formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-
color: current
colorapplies toall elements.
...And 3 more matches
column-rule - CSS: Cascading Style Sheets
the column-rule shorthand css property sets the width, style, and
color of the line drawn between columns in a multi-column layout.
... it is a shorthand property that sets the individual column-rule-* properties in a single, convenient declaration: column-rule-width, column-rule-style, and column-rule-
color.
... <'column-rule-
color'> is a <
color> value.
...And 3 more matches
<gradient> - CSS: Cascading Style Sheets
the <gradient> css data type is a special type of <image> that consists of a progressive transition between two or more
colors.
... linear gradient linear gradients transition
colors progressively along an imaginary line.
... radial gradient radial gradients transition
colors progressively from a center point (origin).
...And 3 more matches
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animate
color>, <animatemotion>, <animatetransform>, <
color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href d...
... value <iri> default value none animatable no animate, animate
color, animatemotion, animatetransform, set for <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set>, xlink:href defines the reference to the element which is the target of this animation and which therefore will be modified over time.
... value <iri> default value none animatable no
color-profile for <
color-profile>, xlink:href defines the location of an icc profile resource.
...And 3 more matches
SVG element reference - SVG: Scalable Vector Graphics
svg elements a to z a <a> <animate> <animatemotion> <animatetransform> c <circle> <clippath> <
color-profile> d <defs> <desc> <discard> e <ellipse> f <feblend> <fe
colormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlig...
...ht> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solid
color> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animate
color>, <animatemotion>, <animatetransform>, <discard>, <mpath>, <set> basic shapes <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <...
...unknown> descriptive elements <desc>, <metadata>, <title> filter primitive elements <feblend>, <fe
colormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>,<fefunca>, <fefuncb>, <fefuncg>, <fefuncr>,<fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elemen...
...And 3 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
« previousnext » there are several ways to
color shapes (including specifying attributes on the object) using inline css, an embedded css section, or an external css file.
... fill and stroke attributes painting basic
coloring can be done by setting two attributes on the node: fill and stroke.
... using fill sets the
color inside the object and stroke sets the
color of the line drawn around the object.
...And 3 more matches
Enabling the behavior - updating the status bar panel - Archive of obsolete content
etattribute("status", "testfailed"); else if (gxmlhttprequest.responsetext.match("11dd11")) icon.setattribute("status", "success"); else icon.setattribute("status", ""); } updatetinderboxstatus() retrieves a reference to the statusbarpanel element then searches through the retrieved html document (stored in the responsetext property of the xmlhttprequest instance) for one of several
color references.
... the
color red (represented by the rgb code ee0000) means a tinderbox client failed to build mozilla.
... the
color orange ("ffaaoo") means a client successfully built mozilla, but the build failed tests.
...And 2 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.
... app button not styled on linux, but is styled on windows on linux the firefox app button that is displayed when tabs are on top and menu bar is disabled is not styled properly compared to windows and is not changing
colors when in private browsing mode.
... 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 2 more matches
::-ms-check - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style bor...
...der-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </form> css input, label { display: inline; } input[type=radio]::-ms-check { border-
color: red; /* this will make the border red when the button is checked.
... */
color: red; /* this will make the circle red when the button is checked.
...And 2 more matches
Examples - Archive of obsolete content
tml 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>.
...pe 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>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>.
...<!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>example 2 - xhtml 1.0 strict as text/xml</title> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <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 2 - xhtml 1.0 strict as text/xml</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/xml</code>.
...And 2 more matches
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
for example: :hover {
color: red;} this is equivalent to the css2 rule: *:hover {
color: red;} ..which translates as "any element that is being hovered should have its foreground
colored red." thus, hovering over paragraphs, tables, headings, and any other element in a document will cause text to become red.
... a common variant is to use a bare class and hover pseudo-class together, like this: .nav:hover {
color: red;} in situations where the only instances of the class value nav are applied to hyperlinks, this will work fine.
...the most reliable fix is to add the anchor element to the selectors, like this: a:hover {
color: red;} a.nav:hover {
color: red;} in an attempt to avoid causing problems for legacy documents, browsers based on mozilla 1.0 and later (netscape 7+) include code that causes bare pseudo-classes to be restricted only to links if the document is rendered in "quirks" mode.
...And 2 more matches
Create the Canvas and draw on it - Game development
the fillstyle property stores a
color that will be used by the fill() method to paint the square, in our case, red.
...this is because, just as with css,
color can be specified as a hexadecimal value, a
color keyword, the rgba() function, or any of the other available
color methods.
... instead of using fill() and filling the shapes with
colors, we can use stroke() to only colour the outer stroke.
...And 2 more matches
A cool-looking box - Learn web development
a base
color for the design.
... give the box this
color as its background
color.
... the same
color for the text; make it readable using a black text shadow.
...And 2 more matches
Debugging CSS - Learn web development
perhaps you want to see if another
color looks better, or wish to tweak the size of something?
... with box1 selected, click on the swatch (the small
colored circle) that shows the
color applied to the border.
... a
color picker will open up and you can try out some different
colors; these will update in real time on the page.
...And 2 more matches
CSS selectors - Learn web development
h1 {
color: blue; } .special {
color: blue; } i could also combine these into a selector list, by adding a comma between them.
... h1, .special {
color: blue; } white space is valid before or after the comma.
... h1, .special {
color: blue; } in the live example below try combining the two selectors which have identical declarations.
...And 2 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.
... note: alternatively you can find a number of contrast checkers online, such as webaim's
color contrast checker.
...And 2 more matches
HTML forms in legacy browsers - Learn web development
<label for="my
color"> pick a
color <input type="
color" id="my
color" name="
color"> </label> supported not supported form buttons there are two ways to define buttons within html forms: the <input> element with its attribute type set to the values button, submit, reset or image the <button> element <input> the <input> element can make things a little difficult if you ...
...for example, the input of
color type looks different in safari, chrome and firefox browser, but the
color picker widget is the same in all browsers on a device as it opens up the operating system's native
color picker.
...for example, if you declare input { font-size: 2rem; }, it will impact number, date, and text, but not
color or range.
...And 2 more matches
Build your own function - Learn web development
the alert function is limited: you can alter the message, but you can't easily vary anything else, such as the
color, icon, or anything else.
...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.
...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.background
color = 'red'; } else if (msgtype === 'chat') { msg.style.backgroundimage = 'url(icons/chat.png)'; panel.style.background
color = '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
Adding features to our bouncing balls demo - Learn web development
creating our new objects first of all, change your existing ball() constructor so that it becomes a shape() constructor and add a new ball() constructor: the shape() constructor should define the x, y, velx, and vely properties in the same way as the ball() constructor did originally, but not the
color and size properties.
... it should also define a
color and a size property, like the original ball() constructor did.
... you should do this something like shape.call(this, x, y, 20, 20, exists); it should also define its own properties, as follows:
color — 'white' size — 10 again, remember to define your inherited properties as parameters in the constructor, and set the prototype and constructor properties correctly.
...And 2 more matches
Multimedia: Images - Learn web development
the less
colors an image has and the less photographic it is, the better it is to use the svg format.
... pngs can be saved with three different output combinations: 24 bit
color + 8 bit transparency — offer full
color acurracy and smooth transparencies at the expense of size.
... 8 bit
color + 8 bit transparency — offer no more than 255
colors but maintain smooth transparencies.
...And 2 more matches
Beginning our React todo list - Learn web development
t 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; } b...
...ody { 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: 1.2rem; } /* end glob...
...And 2 more matches
Starting our Svelte Todo list app - Learn web development
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; } b...
...ody { 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 { colo...
...r: #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-large > * + * { margi...
...And 2 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", boolsystem
colors); setboolpref("browser.display.use_document_
colors", boolu...
...seauthor
colors); /* 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", usefocus
colors); setcharpref("browser.display.focus_background_
color",
colorstring); setcharpref("browser.display.focus_text_
color",
colorstring); ...
...And 2 more matches
Extras
for example with the style rule: <code style="white-space: nowrap;">*[title] {
color: blue; }</code> <math class="cue" display="block"> <mrow> <mrow> <msub title="base-a log"> <mi>log</mi> <mi>a</mi> </msub> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </p> css content ...
... math.cue *[title] {
color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-
color:rgb(255,255,255); stop-opacity:1;"/> <s...
...top offset="100%" style="stop-
color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="15px" height="15px"> <defs> <radialgradient id="radgrad2" ...
...And 2 more matches
Index - Firefox Developer Tools
4
color vision simulation accessibility, accessibility inspector,
color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various forms of
color vision deficiency (better known as "
color blindness"), as well as contrast sensitivity loss.
... 30 devtools
colors css this chart lists
colors and css variables as implemented in the dark theme and light theme for developer tools.
... 31 eyedropper firefox, tools, web development:tools the eyedropper tool enables you to select
colors in the current page.
...And 2 more matches
Using the CSS properties and values API - Web APIs
css.registerproperty the following will register a css custom properties, --my-prop, using css.registerproperty, as a
color, give it a default value, and have it not inherit its value: window.css.registerproperty({ name: '--my-prop', syntax: '<
color>', inherits: false, initialvalue: '#c0ffee', }); @property the same registration can take place in css.
... the following will register a css custom properties, --my-prop, using @property, as a
color, give it a default value, and have it not inherit its value: @property --my-prop { syntax: '<
color>'; inherits: false; initial-value: #c0ffee; } using registered custom properties one of the advantages of registering a property is that the browser now knows how it should handle your custom property through things like transitions!
... in this example, the custom property --registered has been registered using the syntax <
color> and then used in a linear gradient.
...And 2 more matches
Document - Web APIs
deprecated properties document.alink
color returns or sets the
color of active links in the document body.
... document.bg
color gets/sets the background
color of the current document.
... document.fg
color gets/sets the foreground
color, or text
color, of the current document.
...And 2 more matches
KeyframeEffect.setKeyframes() - Web APIs
element.animate([ { // from opacity: 0,
color: "#fff" }, { // to opacity: 1,
color: "#000" } ], 2000); offsets for each keyframe can be specified by providing an offset value.
... element.animate({ opacity: [ 0, 1 ], // [ from, to ]
color: [ "#fff", "#000" ] // [ from, to ] }, 2000); using this format, the number of elements in each array does not need to be equal.
... element.animate({ opacity: [ 0, 1 ], // offset: 0, 1 background
color: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1 }, 2000); the special keys offset, easing, and composite (described below) may be specified alongside the property values.
...And 2 more matches
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.
...first of all, we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'noto
coloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't ap...
...pear 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 to grab the media stream we want to capture, we use ...
...And 2 more matches
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of
color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.
color_attachment0: attaches the texture to the framebuffer's
color buffer.
... gl.
color_attachment1 gl.
color_attachment2 gl.
color_attachment3 gl.
color_attachment4 gl.
color_attachment5 gl.
color_attachment6 gl.
color_attachment7 gl.
color_attachment8 gl.
color_attachment9 gl.
color_attachment10 gl.
color_attachment11 gl.
color_attachment12 gl.
color_attachment13 gl.
color_attachment14 gl.
color_attachment15 when using the webgl_draw_buffers extension: ext.
color_attachment0_webgl (same as gl.
color_attachment0) ext.
color_attachment1_webgl ext.
color_attachment2_webgl ext.
color_attachment3_webgl ex...
...And 2 more matches
Multi-touch interaction - Web APIs
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.
... // save this event for later processing (this could be part of a // multi-touch interaction) and update the background
color push_event(ev); if (logevents) log("pointerdown: name = " + ev.target.id, ev); update_background(ev); } pointer move the pointermove handler is called when the pointer moves.
...And 2 more matches
Multi-touch interaction - Web APIs
// ev.preventdefault(); if (logevents) log("touchmove", ev, false); // to avoid too much
color flashing many touchmove events are started, // don't update the background if two touch points are active if (!(ev.touches.length == 2 && ev.targettouches.length == 2)) update_background(ev); // set the target element's border to dashed to give a clear visual // indication the element received a move event.
... ev.target.style.border = "dashed"; // check this event for 2-touch move/pinch/zoom gesture handle_pinch_zoom(ev); } touch end handler the touchend handler restores the event target's background
color back to its original
color.
... update background
color the background
color of the touch areas will change as follows: no touch is white; one touch is yellow; two simultaneous touches is pink, and three or more simultaneous touches is lightblue.
...And 2 more matches
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of
color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.
color_attachment0:
color buffer.
... when using a webgl 2 context, the following values are available additionally: gl.
color_attachment1 gl.
color_attachment2 gl.
color_attachment3 gl.
color_attachment4 gl.
color_attachment5 gl.
color_attachment6 gl.
color_attachment7 gl.
color_attachment8 gl.
color_attachment9 gl.
color_attachment10 gl.
color_attachment11 gl.
color_attachment12 gl.
color_attachment13 gl.
color_attachment14 gl.
color_attachment15 when using the webgl_draw_buffers extension: ext.
color_attachment0_webgl (same as gl.
color_attachment0) ext.
color_attachment1_webgl ext.
color_attachment2_webgl ...
...And 2 more matches
WebGLRenderingContext.framebufferTexture2D() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of
color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.
color_attachment0: attaches the texture to the framebuffer's
color buffer.
... gl.
color_attachment1 gl.
color_attachment2 gl.
color_attachment3 gl.
color_attachment4 gl.
color_attachment5 gl.
color_attachment6 gl.
color_attachment7 gl.
color_attachment8 gl.
color_attachment9 gl.
color_attachment10 gl.
color_attachment11 gl.
color_attachment12 gl.
color_attachment13 gl.
color_attachment14 gl.
color_attachment15 when using the webgl_draw_buffers extension: ext.
color_attachment0_webgl (same as gl.c...
...And 2 more matches
WebGLRenderingContext - Web APIs
webglrenderingcontext.blend
color() sets the source and destination blending factors.
... webglrenderingcontext.clear
color() specifies the
color values used when clearing
color buffers.
... webglrenderingcontext.
colormask() sets which
color components to enable or to disable when drawing or rendering to a webglframebuffer.
...And 2 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
within site css video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip; } video::cue(b) {
color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground
color of "papayawhip".
... in addition, text boldfaced using the <b> element are
colored "peachpuff".
...in this case, you insert your css rules into the file with each rule preceded by the string "style" all by itelf on a line of text, as shown below: webvtt style ::cue { background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip; } /* style blocks cannot use blank lines nor "dash dash greater than" */ note comment blocks can be used between style blocks.
...And 2 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
console.log(a); console.log(b); } example 2: alternating two
colors the following example calls the flashtext() function once a second until the stop button is pressed.
... <!doctype html> <html> <head> <meta charset="utf-8" /> <title>setinterval/clearinterval example</title> <script> var nintervid; function change
color() { nintervid = setinterval(flashtext, 1000); } function flashtext() { var oelem = document.getelementbyid('my_box'); oelem.style.
color = oelem.style.
color == 'red' ?
... 'blue' : 'red'; // oelem.style.
color == 'red' ?
...And 2 more matches
Web APIs
ecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch documenttype doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_
color_buffer_float ext_
color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyimportparams ecdhkeyderiveparams ecdsaparams effecttiming element elementcssinlinestyle elementtraversal errorevent event eventlistener eventsource eventtarg...
...treamdefaultcontroller readablestreamdefaultreader relativeorientationsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsaoaepparams rsapssparams s svgaelement svgaltglyphdefelement svgaltglyphelement svgaltglyphitemelement svgangle svganimate
colorelement svganimateelement svganimatemotionelement svganimatetransformelement svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist svganimationelement svgcircleelement svgclippathelement...
... svg
colorprofileelement svgcomponenttransferfunctionelement svgcursorelement svgdefselement svgdescelement svgelement svgellipseelement svgevent svgexternalresourcesrequired svgfeblendelement svgfe
colormatrixelement svgfecomponenttransferelement svgfecompositeelement svgfeconvolvematrixelement svgfediffuselightingelement svgfedisplacementmapelement svgfedistantlightelement svgfedropshadowelement svgfefloodelement svgfefuncaelement svgfefuncbelement svgfefuncgelement svgfefuncrelement svgfegaussianblurelement svgfeimageelement svgfemergeelement svgfemergenodeelement svgfemorphologyelement svgfeoffsetelement svgfepointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement sv...
...And 2 more matches
-webkit-text-stroke - CSS: Cascading Style Sheets
the -webkit-text-stroke css property specifies the width and
color of strokes for text characters.
... this is a shorthand property for the longhand properties -webkit-text-stroke-width and -webkit-text-stroke-
color.
... /* width and
color values */ -webkit-text-stroke: 4px navy; text-stroke: 4px navy; /* global values */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: unset; text-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following css properties: -webkit-stroke-
color -webkit-stroke-width syntax values <length> the width of the stroke.
...And 2 more matches
::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.
...And 2 more matches
:link - CSS: Cascading Style Sheets
/* selects any <a> that has not been visited yet */ a:link {
color: red; } styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class (:active, :hover, or :visited) that has at least equal specificity.
... syntax :link examples by default, most browsers apply a special
color value to visited links.
... thus, the links in this example will probably have special font
colors only before you visit them.
...And 2 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
* {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 href=...
... .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; } .wrapper { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; } to demonstrate how this grid system works i have four child elements inside my wrapper.
... * {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 href=...
...And 2 more matches
Animatable CSS properties - CSS: Cascading Style Sheets
the animatable properties are: -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-line-clamp -webkit-text-fill-
color -webkit-text-stroke -webkit-text-stroke-
color all backdrop-filter background background-
color background-position background-size block-size border border-block-end border-block-end-
color border-block-end-width border-block-start border-block-start-
color border-block-start-width border-bottom border-bottom-c...
...olor border-bottom-left-radius border-bottom-right-radius border-bottom-width border-
color border-end-end-radius border-end-start-radius border-image-outset border-image-slice border-image-width border-inline-end border-inline-end-
color border-inline-end-width border-inline-start border-inline-start-
color border-inline-start-width border-left border-left-
color border-left-width border-radius border-right border-right-
color border-right-width border-start-end-radius border-start-start-radius border-top border-top-
color border-top-left-radius border-top-right-radius border-top-width border-width bottom box-shadow caret-
color clip...
... clip-path
color column-count column-gap column-rule column-rule-
color column-rule-width column-width columns filter flex flex-basis flex-grow flex-shrink font font-size font-size-adjust font-stretch font-variation-settings font-weight gap grid-column-gap grid-gap grid-row-gap grid-template-columns grid-template-rows height inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start left letter-spacing line-clamp line-height margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start ...
...And 2 more matches
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
iv> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast mode the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what
color variation.
... values active indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any
color variation.
... black-on-white indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white
color variation.
...And 2 more matches
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.
...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
<alpha-value> - CSS: Cascading Style Sheets
the <alpha-value> css data type represents a value that can be either a <number> or a <percentage>, specifying the alpha channel or transparency of a
color.
... if given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground
color is used and half of the background
color is used.
... examples setting text
color opacity here an alpha value is used to set partially transparent text: /* <rgba()> */
color: rgba(34, 12, 64, 0.6);
color: rgba(34.0 12 64 / 60%); setting shape image threshold here an alpha value is used to determine which parts of an image are considered part of a shape: /* shape-image-threshold */ shape-image-threshold: 70%; shape-image-threshold: 0.7; specifications specifica...
...And 2 more matches
border-block-end - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-block-end-
color border-block-end-style border-block-end-width syntax border-block-end: 1px; border-block-end: 2px dotted; border-block-end: medium dashed blue; border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-
color.
... <'
color'> the
color of the border.
... see
color.
...And 2 more matches
border-inline - CSS: Cascading Style Sheets
initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-
color: current
colorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-
color: computed
coloranimation typediscrete constituent properties this property is a shorthand for the following css properties: border-inline-
color border-inline-style...
... <'
color'> the
color of the border.
... see
color.
...And 2 more matches
opacity - CSS: Cascading Style Sheets
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.
...
color contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background
color values.
... webaim:
color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</d...
...And 2 more matches
text-decoration - CSS: Cascading Style Sheets
it is a shorthand for text-decoration-line, text-decoration-
color, text-decoration-style, and the newer text-decoration-thickness property.
... constituent properties this property is a shorthand for the following css properties: text-decoration-
color text-decoration-line text-decoration-style text-decoration-thickness syntax the text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.
... text-decoration-
color sets the
color of the decoration.
...And 2 more matches
transform-origin - CSS: Cascading Style Sheets
| 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"> </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"> </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); transform-or...
...igin: 0 0; <div class="box3"> </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"> </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"> </div> .box5 { ma...
...rgin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-
color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: scale(1.7); <div class="box6"> </div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-
color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); } transform: scale(1.7); transform-origin: 0 0; <div class="box7"> </div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-
color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); transform-origin: 0 0; -webkit-transform-or...
...And 2 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 the req...
... progress bar the <progress> element has the following basic style set up: .controls progress { display:block; width:100%; height:81%; margin-top:0.125rem; border:none;
color:#0095dd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } like the <button> elements, <progress> also has a default border, which is removed here.
...the
color property is also defined here as internet explorer uses this defined colour for styling the progress bar's background colour as it increases.
...And 2 more matches
JavaScript modules - JavaScript
draw() — draws a square on a specified canvas, with a specified size, position, and
color.
... returns an object containing the square's size, position, and
color.
... the easiest way to use it is to place it in front of any items you want exported out of the module, for example: export const name = 'square'; export function draw(ctx, length, x, y,
color) { ctx.fillstyle =
color; ctx.fillrect(x, y, length, length); return { length: length, x: x, y: y,
color:
color }; } you can export functions, var, let, const, and — as we'll see later — classes.
...And 2 more matches
Array.prototype.slice() - JavaScript
when the
color of myhonda is changed to purple, both arrays reflect the change.
...let myhonda = {
color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } } let mycar = [myhonda, 2, 'cherry condition', 'purchased 1997'] let newcar = mycar.slice(0, 2) // display the values of mycar, newcar, and the
color of myhonda // referenced from both arrays.
... console.log('mycar = ' + json.stringify(mycar)) console.log('newcar = ' + json.stringify(newcar)) console.log('mycar[0].
color = ' + mycar[0].
color) console.log('newcar[0].
color = ' + newcar[0].
color) // change the
color of myhonda.
...And 2 more matches
MathML attribute reference - MathML
the attributes background,
color, fontfamily, fontsize, fontstyle, fontweight and xlink:href are deprecated.
... mathbackground all the background
color.
... you can use #rgb, #rrggbb and html
color names.
...And 2 more matches
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.
... theme_
color: a primary
color for the ui, used by operating system.
...And 2 more matches
spreadMethod - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> context notes value pad | reflect | repeat initial value pad animatable yes pad this value indicates that the final
color of the gradient fills the shape beyond the gradient's edges.
... examples of spreadmethod with linear gradients svg <svg width="220" height="150" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="padgradient" x1="33%" x2="67%"> <stop offset="0%" stop-
color="fuchsia"/> <stop offset="100%" stop-
color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" x1="33%" x2="67%"> <stop offset="0%" stop-
color="fuchsia"/> <stop offset="100%" stop-
color="orange"/> </lineargradient> <lineargradient id="repeatgradient" spreadmethod="repeat" x1="33%" x2="6...
...7%"> <stop offset="0%" stop-
color="fuchsia"/> <stop offset="100%" stop-
color="orange"/> </lineargradient> </defs> <rect fill="url(#padgradient)" x="10" y="0" width="200" height="40"/> <rect fill="url(#reflectgradient)" x="10" y="50" width="200" height="40"/> <rect fill="url(#repeatgradient)" x="10" y="100" width="200" height="40"/> </svg> result notice that the middle third of each gradient is the same.
...And 2 more matches
stop-opacity - SVG: Scalable Vector Graphics
the stop-opacity attribute defines the opacity of a given
color gradient stop.
... the opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of the stop-
color attribute.
... for stop-
color values that donʼt include explicit opacity information, the opacity is treated as 1.
...And 2 more matches
SVG Attribute reference - SVG: Scalable Vector Graphics
svg attributes a to z a accent-height accumulate additive alignment-baseline allowreorder alphabetic amplitude arabic-form ascent attributename attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule
color color-interpolation
color-interpolation-filters
color-profile
color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits...
... flood-
color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-
color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity oper...
...saty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-
color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex tablevalues target targetx targety text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u...
...And 2 more matches
<feComponentTransfer> - SVG: Scalable Vector Graphics
th <fecomponenttransfer> svg filter primitive performs
color-component-wise remapping of data for each pixel.
... it allows operations like brightness adjustment, contrast adjustment,
color balance or thresholding.
... the calculations are performed on non-premultiplied
color values.
...And 2 more matches
<stop> - SVG: Scalable Vector Graphics
the svg <stop> element defines a
color and its position to use on a gradient.
... html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-
color="gold" /> <stop offset="95%" stop-
color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector.
... value type: <number>|<percentage>; default value: 0; animatable: yes stop-
color this attribute defines the
color of the gradient stop.
...And 2 more matches
Using templates and slots - Web Components
so for example: <template id="my-paragraph"> <style> p {
color: white; background-
color: #666; padding: 5px; } </style> <p>my paragraph</p> </template> now we can use it by just adding it to our html document: <my-paragraph></my-paragraph> note: templates are well-supported in browsers; the shadow dom api is supported by default in firefox (version 63 onwards), chrome, opera, safari, and edge (starting with version 79).
... creating a template with some slots first of all, we use the <slot> element within a <template> element to create a new "element-details-template" document fragment containing some named slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold;
color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span { background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-radius: 4px } h4 span {
color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<s...
... adding a final bit of style as a finishing touch, we'll add a tiny bit more css for the <dl>, <dt>, and <dd> elements in our doc: dl { margin-left: 6px; } dt { font-weight: bold;
color: #217ac0; font-size: 110% } dt { font-family: consolas, "liberation mono", courier } dd { margin-left: 16px } body { margin-top: 47px } result finally let’s put all the snippets together and see what the rendered result looks like.
...And 2 more matches
core/heritage - Archive of obsolete content
}) sometimes (single) inheritance is not enough and defining reusable, composable pieces of functionality does a better job: var hex = class({ hex: function hex() { return '#' + this.
color; } }); var rgb = class({ red: function red() { return parseint(this.
color.substr(0, 2), 16); }, green: function green() { return parseint(this.
color.substr(2, 2), 16); }, blue: function blue() { return parseint(this.
color.substr(4, 2), 16); } }); var cmyk = class({ black: function black() { var
color = math.max(math.max(this.red(), this.green()), this.blue()); ...
... return (1 -
color / 255).tofixed(4); }, magenta: function magenta() { var k = this.black(); return (((1 - this.green() / 255).tofixed(4) - k) / (1 - k)).tofixed(4); }, yellow: function yellow() { var k = this.black(); return (((1 - this.blue() / 255).tofixed(4) - k) / (1 - k)).tofixed(4); }, cyan: function cyan() { var k = this.black(); return (((1 - this.red() / 255).tofixed(4) - k) / (1 - k)).tofixed(4); } }); such composable pieces can be combined into a single class definition by passing special implements option to a class function: // composing `
color` prototype out of reusable components: var
color = class({ implements: [ hex, rgb, cmyk ], initialize: function initialize(
color) { this.
color =
color; } }); var pink =
color('ffc0cb'); /...
.../ rgb pink.red() // => 255 pink.green() // => 192 pink.blue() // => 203 // cmyk pink.magenta() // => 0.2471 pink.yellow() // => 0.2039 pink.cyan() // => 0.0000 pink instanceof
color // => true be aware though that it's not multiple inheritance and ancestors prototypes of the classes passed under implements option are ignored.
... also you can mix inheritance and composition together if necessary: var point = class({ initialize: function initialize(x, y) { this.x = x; this.y = y; }, tostring: function tostring() { return this.x + ':' + this.y; } }) var pixel = class({ extends: point, implements: [
color ], initialize: function initialize(x, y,
color) {
color.prototype.initialize.call(this,
color); point.prototype.initialize.call(this, x, y); }, tostring: function tostring() { return this.hex() + '@' + point.prototype.tostring.call(this) } }); var pixel = pixel(11, 23, 'cc3399'); pixel.tostring(); // => #cc3399@11:23 pixel instanceof pixel /...
In-Depth - Archive of obsolete content
reeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bottom-
colors defines a series of colours.
...example: -moz-border-top-
colors: threeddarkshadow threedshadow transparent; -moz-border-right-
colors: threeddarkshadow threedshadow transparent; -moz-border-bottom-
colors: threeddarkshadow threedshadow transparent; -moz-border-left-
colors: threeddarkshadow threedshadow transparent; -moz-border-top-
colors see -moz-border-bottom-
colors above.
... -moz-border-left-
colors see -moz-border-bottom-
colors above.
... -moz-border-right-
colors see -moz-border-bottom-
colors above.
Editor Embedding Guide - Archive of obsolete content
cmd_font
color acts upon the current selection to set the font
color.
... getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) note for
color values, use the cstring representation of rrggbb, e.g., red="#ff0000" and black="#000000".
... cmd_background
color sets the background
color of the document.
... getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) note for
color values, use the cstring representation of rrggbb, e.g., red="#ff0000" and black="#000000".
Style System Overview - Archive of obsolete content
p {
color: green; font-size: 12em; } selector { property: value; property: value; } css style rules what do style rules mean?
... inherited: 'font-size', '
color', etc.
... css style rule representation h1, h2 {
color: green; text-align: right; text-indent: 0; } cssstyleruleimpl cssstyleruleimpl ↓ ↓ ↓ ↓ h1 nscssdeclaration h2 ↙ ↘ nscss
color —
color: green nscsstext — text-align: right text-indent: 0 css style rule representation problem: t...
... various rules in nshtmlstylesheet.cpp do other things with presentational
color-related attributes and with tables.
jspage - Archive of obsolete content
gin|padding)/)){return"0px";}}return a;},setstyles:function(b){for(var a in b){this.setstyle(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=this.getstyle(b);},this);return a;}});element.styles=new hash({left:"@px",top:"@px",bottom:"@px",right:"@px",width:"@px",height:"@px",maxwidth:"@px",maxheight:"@px",minwidth:"@px",minheight:"@px",background
color:"rgb(@, @, @)",backgroundposition:"@px @px",
color:"rgb(@, @, @)",fontsize:"@px",letterspacing:"@px",lineheight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderwidth:"@px @px @px @px",borderstyle:"@ @ @ @",border
color:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:"@",zoom:"@...
...",fontweight:"@",textindent:"@px",opacity:"@"}); element.shortstyles={margin:{},padding:{},border:{},borderwidth:{},borderstyle:{},border
color:{}};["top","right","bottom","left"].each(function(g){var f=element.shortstyles; var b=element.styles;["margin","padding"].each(function(h){var i=h+g;f[h][i]=b[i]="@px";});var e="border"+g;f.border[e]=b[e]="@px @ rgb(@, @, @)";var d=e+"width",a=e+"style",c=e+"
color"; f[e]={};f.borderwidth[d]=f[e][d]=b[d]="@px";f.borderstyle[a]=f[e][a]=b[a]="@";f.border
color[c]=f[e][c]=b[c]="rgb(@, @, @)";});(function(){element.implement({scrollto:function(h,i){if(b(this)){this.getwindow().scrollto(h,i); }else{this.scrollleft=h;this.scrolltop=i;}return this;},getsize:function(){if(b(this)){return this.getwindow().getsize();}return{x:this.offsetwidth,y:this.offsetheight}; }...
...array.each(f,function(j,g){if(!j.style){return;}var h=(j.selectortext)?j.selectortext.replace(/^\w+/,function(i){return i.tolowercase(); }):null;if(!h||!h.test("^"+a+"$")){return;}element.styles.each(function(k,i){if(!j.style[i]||element.shortstyles[i]){return;}k=string(j.style[i]);b[i]=(k.test(/^rgb/))?k.rgbtohex():k; });});});return fx.css.cache[a]=b;}});fx.css.cache={};fx.css.parsers=new hash({
color:{parse:function(a){if(a.match(/^#[0-9a-f]{3,6}$/i)){return a.hextorgb(true); }return((a=a.match(/(\d+),\s*(\d+),\s*(\d+)/)))?[a[1],a[2],a[3]]:false;},compute:function(c,b,a){return c.map(function(e,d){return math.round(fx.compute(c[d],b[d],a)); });},serve:function(a){return a.map(number);}},number:{parse:parsefloat,compute:fx.compute,serve:function(b,a){return(a)?b+a:b;}},string:{parse:$lambda(fa...
...(d,1);break;case"out":e.start(d,0);break;case"show":e.set(d,1);break;case"hide":e.set(d,0);break;case"toggle":var b=this.retrieve("fade:flag",this.get("opacity")==1); e.start(d,(b)?0:1);this.store("fade:flag",!b);a=true;break;default:e.start(d,arguments);}if(!a){this.eliminate("fade:flag");}return this;},highlight:function(c,a){if(!a){a=this.retrieve("highlight:original",this.getstyle("background-
color")); a=(a=="transparent")?"#fff":a;}var b=this.get("tween");b.start("background-
color",c||"#ffff88",a).chain(function(){this.setstyle("background-
color",this.retrieve("highlight:original")); b.callchain();}.bind(this));return this;}});fx.morph=new class({extends:fx.css,initialize:function(b,a){this.element=this.subject=document.id(b);this.parent(a); },set:function(a){if(typeof a=="string"){a=this.
Binding Implementations - Archive of obsolete content
for example, given a binding with an implementation
colorpickergrid that derives from an implementation
colorpicker where the two implementations both specify the set
color method, a caller could invoke
colorpicker's method with the following syntax: ...
... // myelement is a
colorpickergrid myelement.
colorpicker.set
color(); // calls the
colorpicker method.
... myelement.set
color(); // calls the
colorpickergrid method.
... myelement.basebinding.set
color(); // calls the
colorpicker method.
XUL controls - Archive of obsolete content
checkbox reference <
colorpicker> a control that may be used to select a
color.
... <
colorpicker
color="#ff0000"/>
colorpicker reference <
colorpicker type="button"> a specialized type of
color picker which shows only a button.
... pressing the button displays a
color picker popup window.
... <
colorpicker type="button"
color="#cc0080"/>
colorpicker reference <datepicker> a set of textboxes which may be used to allow the entry of a date.
::-ms-track - Archive of obsolete content
applying the
color property within the ::-ms-track selector affects the tick marks inside the track area.
...to remove tick marks altogether, set the
color property to transparent.
... background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-po...
...sition-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...
CSS - Archive of obsolete content
obsolete css features -moz-bindingthe -moz-binding css property is used by mozilla-based applications to attach an xbl binding to a dom element.-moz-border-bottom-
colorsin mozilla applications like firefox, the -moz-border-bottom-
colors css property sets a list of
colors for the bottom border.-moz-border-left-
colorsin mozilla applications like firefox, the -moz-border-left-
colors css property sets a list of
colors for the left border.-moz-border-right-
colorsin mozilla applications like firefox, the -moz-border-right-
colors css property sets a list of
colors for the right border.-moz-border-top-
colorsin mozilla applications like firefox, the -moz-border-top-
colors css property sets a list of
colors for the top border.-moz-stack-sizing-moz-stack-sizing is an extended css property.
...roperties.-ms-scroll-snap-ythe -ms-scroll-snap-x css shorthand property is a microsoft extension that specifies values for the -ms-scroll-snap-type and -ms-scroll-snap-points-y properties.-ms-scroll-translationthe -ms-scroll-translation css property is a microsoft extension that specifies whether vertical-to-horizontal scroll wheel translation occurs on the specified element.-ms-scrollbar-3dlight-
colorthe -ms-scrollbar-3dlight-
color css property is a microsoft extension specifying the
color of the top and left edges of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-arrow-
colorthe -ms-scrollbar-arrow-
color css property is a microsoft extension that specifies the
color of the arrow elements of a scroll arrow.-ms-scrollbar-base-
colorthe -ms-scrollbar-base-
color css property is a mi...
...crosoft extension that specifies the base
color of the main elements of a scroll bar.-ms-scrollbar-darkshadow-
colorthe -ms-scrollbar-darkshadow-
color css property is a microsoft extension that specifies the
color of a scroll bar's gutter.-ms-scrollbar-face-
colorthe -ms-scrollbar-face-
color css property is a microsoft extension that specifies the
color of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-highlight-
colorthe -ms-scrollbar-highlight-
color css property is a microsoft extension that specifies the
color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.-ms-scrollbar-shadow-
colorthe -ms-scrollbar-shadow-
color css property is a microsoft extension that specifies the
color of the bottom and right edges of the scroll box and s...
...croll arrows of a scroll bar.-ms-scrollbar-track-
colorthe -ms-scrollbar-track-
color css property is a microsoft extension that specifies the
color of the track element of a scrollbar.-ms-text-autospacethe -ms-text-autospace css property is a microsoft extension that specifies the autospacing and narrow space width adjustment of text.-ms-touch-selectthe -ms-touch-select css property is a microsoft extension that toggles the gripper visual elements that enable touch text selection.-ms-wrap-flowthe -ms-wrap-flow css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements.-ms-wrap-marginthe -ms-wrap-margin css property is a microsoft extension that specifies a margin that offsets the inner wrap shape from other shapes.-ms-wrap-throughthe -ms...
2D collision detection - Game development
green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> crafty.init(200, 200); var dim1 = {x: 5, y: 5, w: 50, h: 50} var dim2 = {x: 20, y: 10, w: 60, h: 40} var rect1 = crafty.e("2d, canvas,
color").attr(dim1).
color("red"); var rect2 = crafty.e("2d, canvas,
color, keyboard, fourway").fourway(2).attr(dim2).
color("blue"); rect2.bind("enterframe", function () { if (rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x && rect1.y < rect2.y + rect2.h && rect1.h + rect1.y > rect2.y) { // collision detected!
... this.
color("green"); } else { // no collision this.
color("blue"); } }); note: another example without canvas or external libraries.
...green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> #cr-stage { position: static !important; height: 200px !important; } crafty.init(200, 200); var dim1 = {x: 5, y: 5} var dim2 = {x: 20, y: 20} crafty.c("circle", { circle: function(radius,
color) { this.radius = radius; this.w = this.h = radius * 2; this.
color =
color || "#000000"; this.bind("move", crafty.drawmanager.drawall) return this; }, draw: function() { var ctx = crafty.canvas.context; ctx.save(); ctx.fillstyle = this.
color; ctx.beginpath(); ctx.arc( this.x + this.radius, this...
... this.
color = "green"; } else { // no collision this.
color = "blue"; } }); var circle1 = {radius: 20, x: 5, y: 5}; var circle2 = {radius: 12, x: 10, y: 5}; var dx = circle1.x - circle2.x; var dy = circle1.y - circle2.y; var distance = math.sqrt(dx * dx + dy * dy); if (distance < circle1.radius + circle2.radius) { // collision detected!
Test your skills: Selectors - Learn web development
stripe every other row in the table by selecting these rows and giving them a background
color of #333 and foreground of white.
... selectors five in this final task add css using attribute selectors to do the following: target the <a> element with a title attribute and make the border pink (border-
color: pink).
... target the <a> element with an href attribute that contains the word contact somewhere in its value and make the border orange (border-
color: orange).
... target the <a> element with an href value starting with https and give it a green border (border-
color: green).
The box model - Learn web development
for styling borders, there are a large number of properties — there are four borders, and each border has a style, width and
color that we might want to manipulate.
... you can set the width, style, or
color of all four borders at once using the border property.
... to set the properties of each side individually, you can use: border-top border-right border-bottom border-left to set the width, style, or
color of all sides, use the following: border-width border-style border-
color to set the width, style, or
color of a single side, you can use one of the most granular longhand properties: border-top-width border-top-style border-top-
color border-right-width border-right-style border-right-
color border-bottom-width border-bottom-style border-bottom-
color border-left-width border-left-style border-left-
color in the example below we have used various shorthands and longhands to create borders.
...the navigation below is displayed in a row using flexbox and we have added padding to the <a> element as we want to be able to change the background-
color when the <a> is hovered.
How CSS works - Learn web development
again, the html is as follows: <p> let's use: <span>cascading</span> <span>style</span> <span>sheets</span> </p> let's suppose we apply the following css to it: span { border: 1px solid black; background-
color: lime; } the browser will parse the html and create a dom from it, then parse the css.
... in the example below i have used the british english spelling for
color, which makes that property invalid as it is not recognised.
... so my paragraph has not been
colored blue.
... <p> i want this text to be large, bold and blue.</p> p { font-weight: bold; colour: blue; /* incorrect spelling of the
color property */ font-size: 200%; } this behavior is very useful.
Using your new knowledge - Learn web development
font-family
color border-bottom font-weight font-size text-decoration i have used a mixture of selectors, styling elements such as h1 and h2, but also creating a class for the job title and styling that.
... make the level one heading pink, using the css
color keyword hotpink.
... give the heading a 10px dotted border-bottom which uses the css
color keyword purple.
... give the ul used for the contact details a background-
color of #eeeeee, and a 5px solid purple border.
What text editors are available? - Learn web development
in particular (if possible in your editor), try to: change syntax highlighting settings and
colors play with indentation width, setting it to an appropriate setting for your needs check autosave and session saving settings configure any available plugins and investigate how to get new ones change
color schemes adjust view settings and see how you can change the layout of the views check what programming languages/technologies your editor supports while you're learning the default sett...
...make your file more legible by
color-coding keywords based on the technology you're using.
... well, that's a matter of taste, but some people like customizing every bit of the ui (user interface), from
colors to button positions.
...it's not hard to find a text editor that can change
color scheme, but if you want hefty customizing you may be better off with an ide.
The HTML5 input types - Learn web development
color picker control
colors are always a bit difficult to handle.
... a
color control can be created using the <input> element with its type attribute set to the value
color: <input type="
color" name="
color" id="
color"> when supported, clicking a
color control will tend to display the operating system's default
color picking functionality for you to actually make your choice with.
... the following screenshot taken on firefox for macos provides an example: and here is a live example for you to try out: the value returned is always a lowercase 6-value hexidecimal
color.
... note:
color inputs are not supported in internet explorer.
Image gallery - Learn web development
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.background
color = xxx; hints and tips you don't need to edit the html or css in any way.
Manipulating documents - Learn web development
as an example, try adding these lines to our ongoing example: para.style.
color = 'white'; para.style.background
color = '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.
... if you look at that paragraph in your browser's page inspector/dom inspector, you'll see that these lines are indeed adding inline styles to the document: <p style="
color: white; background-
color: black; padding: 10px; width: 250px; text-align: center;">we hope you enjoyed the ride.</p> note: notice how the javascript property versions of the css styles are written in lower camel case whereas the css versions are hyphenated (e.g.
... background
color versus background-
color).
... add the following inside your html <head>: <style> .highlight {
color: white; background-
color: black; padding: 10px; width: 250px; text-align: center; } </style> now we'll turn to a very useful method for general html manipulation — element.setattribute() — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to.
Video and Audio APIs - Learn web development
first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width: 400px; border-radius: 10px; position: absolute; bottom: 20px; left: 50%; margin-left: -200px; background-
color: black; box-shadow: 3px 3px 5px black; transition: 1s all; display: flex; } .player:hover .controls, player:focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden.
...src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/heydings_controls-webfont.woff') format('woff'), url('fonts/heydings_controls-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } button:before { font-family: heydingscontrolsregular; font-size: 20px; position: relative; content: attr(data-icon);
color: #aaa; text-shadow: 1px 1px 0px black; } first of all, at the top of the css we use a @font-face block to import a custom web font.
... icon fonts are very cool for many reasons — cutting down on http requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like
color and text-shadow.
... last but not least, let's look at the css for the timer: .timer { line-height: 38px; font-size: 10px; font-family: monospace; text-shadow: 1px 1px 0px black;
color: white; flex: 5; position: relative; } .timer div { position: absolute; background-
color: rgba(255,255,255,0.2); left: 0; top: 0; width: 0; height: 38px; z-index: 2; } .timer span { position: absolute; z-index: 3; left: 19px; } we set the outer .timer <div> to have flex: 5, so it takes up most of the width of the controls bar.
SVG Guidelines
invisible shapes there are two kinds of invisible shapes: the off-screen ones and the un
colored ones.
... on the other hand, the un
colored ones are easier to spot, since they usually come with styles making them invisible.
...pty tags, this may be obvious, but those are sometimes found in svgs unreferenced ids (usually on gradient stops, but also on shapes or paths) clip-rule attribute when the element is not a descendant of a <clippath> fill-rule attribute when the element is a descendant of a <clippath> unreferenced/unused clip paths, masks or defs (example) styling basics privilege short lowercase hex for
colors don't use excessive precision for numeric values (usually comes from illustrator) use descriptive ids avoid inline styles and use class names or svg attributes examples here are some examples for excessive number precision: 5.000000e-02 → 0.05 (as seen here) -3.728928e-10 → 0 (as seen here) translate(0.000000, -1.000000) → translate(0, -1) (as seen here) as for descriptive id...
...you can also use svg grouping to avoid duplicating those attributes avoid introducing variants of the same file (
color/style variants), and use sprites instead (with class names) default style values there's usually no need to set the default style value unless you're overriding a style.
Experimental features in Firefox
nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic gradients conic gradients expand css gradients to allow the
color transitions to be rendered circling around a center point rather than radiating from it.
...
color scheme simulation adds an option to simulate different
color schemes allowing to test @prefers-
color-scheme media queries.
...this feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide
color scheme setting).
... nightly 72 no developer edition 72 no beta 72 no release 72 no preference name devtools.inspector.
color-scheme-simulation.enabled execution context selector this feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed.
mozbrowserloadend
detail the detail property returns an anonymous javascript object with the following properties: background
color a domstring representing the main background
color of the browser <iframe> content, expressed as an rgb value.
...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.
... when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.background
color value reported is rgb(0, 83, 159).
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.background
color); controls.style.background = e.detail.background
color; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
MathML Torture Test
<mo>‴</mo> </msubsup> </math> </td> <td> <math display="block"> <msubsup> <mi>y</mi> <mn>۳</mn> <mo>‴</mo> </msubsup> </math> </td> </tr> <tr> <td>29</td> <td><math dir="rtl" display="block" xmlns="http://www.w3.org/1998/math/mathml"><mrow><munder><mo lspace="0em" rspace="0em" math
color="red">lim</mo><mrow><mi>𞸝</mi><mo stretchy="false">←</mo><mo>+</mo><mn>∞</mn></mrow></munder><mfrac><msqrt><mrow><mn>٢</mn><mi>π</mi><mi>𞸝</mi></mrow></msqrt><mrow><mi>𞸝</mi><mo>!</mo></mrow></mfrac><msup><mrow><mo>(</mo><mfrac><mi>𞸝</mi><mi>e</mi></mfrac><mo>)</mo></mrow><mi>𞸝</mi></msup></mrow><mo>=</mo><mn>1</mn></math></td> <td><math dir="rtl"...
... display="block" xmlns="http://www.w3.org/1998/math/mathml"><mrow><munder><mo lspace="0em" rspace="0em" math
color="red">lim</mo><mrow><mi>𞸝</mi><mo stretchy="false">←</mo><mo>+</mo><mn>∞</mn></mrow></munder><mfrac><msqrt><mrow><mn>٢</mn><mi>π</mi><mi>𞸝</mi></mrow></msqrt><menclose notation="madruwb"><mi>𞸝</mi></menclose></mfrac><msup><mrow><mo>(</mo><mfrac><mi>𞸝</mi><mi>e</mi></mfrac><mo>)</mo></mrow><mi>𞸝</mi></msup></mrow><mo>=</mo><mn>1</mn></math></td> <td><math display="block" xmlns="http://www.w3.org/1998/math/mathml"><mrow><munder><mo lspace="0em" rspace="0em">𞻱</mo><mrow><mi>n</mi><mo stretchy="false">→</mo><mo>+</mo><mn>∞</mn></mrow></munder><mfrac><msqrt><mrow><mn>۲</mn><mi>π</mi><mi>n</mi></mrow></msqrt><mrow><mi>n</mi><...
...mlns="http://www.w3.org/1998/math/mathml"><mrow><mrow><mo lspace="0em" rspace="0em">det</mo><mo stretchy="false">(</mo><mi>a</mi><mo stretchy="false">)</mo></mrow><mo>=</mo><munder><mo>𞻰</mo><mrow><mi>σ</mi><mo>∊</mo><msub><mi>s</mi><mi>𞸝</mi></msub></mrow></munder><mrow><mi>ϵ</mi><mo stretchy="false">(</mo><mi>σ</mi><mo stretchy="false">)</mo></mrow><mrow><munderover><mo math
color="red">∏</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>𞸝</mi></munderover><msub><mi>𞸀</mi><mrow><mi>i</mi><mo>,</mo><msub><mi>σ</mi><mi>i</mi></msub></mrow></msub></mrow></mrow></math></td> <td><math display="block" xmlns="http://www.w3.org/1998/math/mathml"><mrow><mrow><mo lspace="0em" rspace="0em">det</mo><mo stretchy="false">(</mo><mi>a</mi><mo stretchy="false">)</mo...
...<mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msub><mi>a</mi><mrow><mi>i</mi><mo>,</mo><msub><mi>σ</mi><mi>i</mi></msub></mrow></msub></mrow></mrow></math></td> </tr> </table> css content /* table style */ body { text-align: center; } table { border: solid thin; border-collapse: collapse; margin-left: auto; margin-right: auto; } th { background-
color: #ddf; border: solid thin;
color: black; padding: 5px; } td { border: solid thin; padding: 5px; text-align: center; } .asana math { font-family: asana math; } .cambria math { font-family: cambria math; } .dejavu math { font-family: dejavu math tex gyre; } .latinmodern math { font-family: latin modern math; } .libertinus math { font-family: libertinus math; } .luc...
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.
..., 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.
Midas
supported commands command value description back
color a
color code.
... this command will set the background
color of the document.
... fore
color a
color code this command will set the text
color of the selection or at the insertion point.
... hilite
color a
color code this command will set the hilite
color of the selection or at the insertion point.
Index
194 moziasynchistory interfaces, interfaces:scriptable, places, xpcom interface reference implemented by: @mozilla.org/browser/history;1 as a service: 195 mozi
coloranalyzer interfaces, interfaces:scriptable, places, reference, xpcom api reference, xpcom interface reference given an image uri, find the most representative
color for that image based on the frequency of each
color.
... preference is given to
colors that are more interesting.
... it avoids the background
color if it can be discerned and ignores sufficiently transparent
colors.
... 201 mozirepresentative
colorcallback interfaces, interfaces:scriptable, places, xpcom api reference, xpcom interface reference will be called when
color analysis finishes.
IAccessibleComponent
method overview [propget] hresult background([out] ia2
color background ); [propget] hresult foreground([out] ia2
color foreground ); [propget] hresult locationinparent([out] long x, [out] long y ); methods background() returns the background
color of this object.
... [propget] hresult background( [out] ia2
color 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] ia2
color foreground ); parameters foreground the returned
color is the foreground
color of this object or, if that is not supported, the default foreground
color.
nsIDOMNSHTMLDocument
ing querycommandtext(in domstring commandid); obsolete since gecko 14.0 domstring querycommandvalue(in domstring commandid); void releaseevents(in long eventflags); void routeevent(in nsidomevent evt); void write(); obsolete since gecko 2.0 void writeln(); obsolete since gecko 2.0 attributes attribute type description alink
color domstring same as body.alink bg
color domstring same as body.bg
color compatmode domstring returns "backcompat" if the document is in quirks mode or "css1compat" if the document is in full standards or almost standards mode.
... fg
color domstring same as body.text head nsidomhtmlheadelement returns the first child element of the html element that is a head element, or null if there is no html or head element.
...obsolete since gecko 6.0 link
color domstring same as body.link plugins nsidomhtmlcollection same as embeds for compatibility with netscape 4.x read only.
... vlink
color domstring same as body.vlink width long the width of the body element.
Waterfall - Firefox Developer Tools
markers the markers for operations are
color-coded and labeled.
... the following operations are recorded: name and description
color detailed information dom event javascript code that's executed in response to a dom event.
... the markers, and their
colors, are the same in the waterfall tool as in the waterfall overview, making is easy to correlate from one to the other.
...however, changing properties that don't alter geometry or position, such as
color or opacity, will not.
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="bg
color">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: 20px; 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 bg
colorbtn = document.queryselector('.bg
color'); 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 random
color() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } ...
...const stylesheet = document.stylesheets[1]; let boxpararule; for(let i = 0; 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 ' + random
color(); boxpararule.style.setproperty('border', newborder); } function setrandombg
color() { const newbg
color = random
color(); boxpararule.style.setproperty('background-
color', newbg
color); } function setrandom
color() { const new
color = random
color(); boxpararule.style.setproperty('
color', new
color); } borderbtn.addeventlistener('click', setrandomborder); bg
colorbtn.addeventlistener('click', setrandombg
color);
colorbtn.addeventlistener('click', setrandom
color); result specific...
CSS Painting API - Web APIs
we create our paintworklet called 'hollowhighlights' using the registerpaint() function: registerpaint('hollowhighlights', class { static get inputproperties() { return ['--box
color']; } static get inputarguments() { return ['*','<length>']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, props, args) { const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const blockheight = size.height * 0.85; const the
color = props.get( '--box
color' ); const stroketype = args[0].tostring(); const strokewidth = pars...
...eint(args[1]); console.log(the
color); if ( strokewidth ) { ctx.linewidth = strokewidth; } else { ctx.linewidth = 1.0; } if ( stroketype === 'stroke' ) { ctx.fillstyle = 'transparent'; ctx.strokestyle = the
color; } else if ( stroketype === 'filled' ) { ctx.fillstyle = the
color; ctx.strokestyle = the
color; } else { ctx.fillstyle = 'none'; ctx.strokestyle = 'none'; } ctx.beginpath(); ctx.moveto( x, y ); ctx.lineto( blockwidth, y ); ctx.lineto( blockwidth + blockheight, blockheight ); ctx.lineto( x, blockheight ); ctx.lineto( x, y ); ctx.closepath(); ctx.fill(); ctx.stroke(); for (let i = 0; i < 4; i++) { let start = i * 2; ctx.beginpath(); ctx.moveto( blockwidth + (start * 10) + 10, y); ctx.lineto( blockwidth + (sta...
...> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); then we can use the <image> with the css paint() function: li { --box
color: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --box
color: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --box
color: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defin...
...ing a box
color.
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.
...{ mycurrent_row=document.createelement("tr"); for(var col = 0; col < 2; col++) { mycurrent_cell = document.createelement("td"); currenttext = document.createtextnode("cell is: " + row + col); mycurrent_cell.appendchild(currenttext); mycurrent_row.appendchild(mycurrent_cell); // set the cell background
color // if the column is 0.
Document Object Model (DOM) - Web APIs
svg interfaces svg element interfaces svgaelement svgaltglyphelement svgaltglyphdefelement svgaltglyphitemelement svganimationelement svganimateelement svganimate
colorelement svganimatemotionelement svganimatetransformelement svgcircleelement svgclippathelement svg
colorprofileelement svgcomponenttransferfunctionelement svgcursorelement svgdefselement svgdescelement svgelement svgellipseelement svgfeblendelement svgfe
colormatrixelement svgfecomponenttransferelement svgfecompositeelement svgfeconvolvematrixelement svgfediffuselightingelement ...
...imageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpolygonelement svgradialgradientelement svgrectelement svgscriptelement svgsetelement svgsolid
colorelement svgstopelement svgstyleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtrefelement svgtspanelement svguseelement svgunknownelement svgviewelement svgvkernelement svg data type interfaces here are the dom apis for data types used in the definitions of svg ...
... static type svgangle svg
color svgicc
color svgelementinstance svgelementinstancelist svglength svglengthlist svgmatrix svgnamelist svgnumber svgnumberlist svgpaint svgpathseg svgpathsegclosepath svgpathsegmovetoabs svgpathsegmovetorel svgpathseglinetoabs svgpathseglinetorel svgpathsegcurvetocubicabs svgpathsegcurvetocubicrel svgpathsegcurvetoquadraticabs svgpathsegcurvetoquadraticrel svgpathsegarcabs svgpathsegarcrel svgpathseglinetohorizontalabs svgpathseglinetohorizontalrel svgpathseglinetoverticalabs svgpathseglinetoverticalrel svgpathsegcurvetocubicsmoothabs svgpathsegcurvetocubicsmoothrel svgpathsegcurvetoquadraticsmoothabs svgpathsegcurvetoquadraticsmoothrel svgpathseglist svgpo...
...tedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeevent other svg interfaces getsvgdocument shadowanimation svg
colorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status comment dom living sta...
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 random
color() { return `rgb(${random(255)}, ${random(255)}, ${random(255)})`; } button.onclick = function() { button.style.background
color = random
color(); }; button.onauxclick = function(e) { e.preventdefault(); button.style.
color = random
color(); } 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 after the
color change is applied.
... 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: mouseout event - Web APIs
the mouseleave event is added to the <ul> to
color the list purple whenever the mouse exits the <ul>.
... mouseout is added to the list to
color the targeted element orange when the mouse exits it.
... html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.addeventlistener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.
color = "purple"; // reset the
color after a short delay settimeout(function() { event.target.style.
color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.
color = "orange"; // reset the
color after a short delay settimeout(function() { ...
... event.target.style.
color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseout' in that specification.
SpeechRecognition - Web APIs
examples in our simple speech
color changer example, we create a new speechrecognition object instance using the speechrecognition() constructor, create a new speechgrammarlist, and set it to be the grammar that will be recognised by the speechrecognition instance using the speechrecognition.grammars property.
... after some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see speechrecognition.start().) when a result has been successfully recognised, the speechrecognition.onresult handler fires, we extract the
color that was spoken from the event object, and then set the background
color of the <html> element to that
color.
... var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; var diagnostic = d...
...ocument.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a
color command.'); } recognition.onresult = function(event) { var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'speechrecognition' in that specification.
WebGLRenderingContext.clear() - Web APIs
the preset values can be set by clear
color(), cleardepth() or clearstencil().
...possible values are: gl.
color_buffer_bit gl.depth_buffer_bit gl.stencil_buffer_bit return value none.
... gl.clear(gl.depth_buffer_bit); gl.clear(gl.depth_buffer_bit | gl.
color_buffer_bit); to get the current clear values, query the
color_clear_value, depth_clear_value, and stencil_clear_value constants.
... gl.getparameter(gl.
color_clear_value); gl.getparameter(gl.depth_clear_value); gl.getparameter(gl.stencil_clear_value); specifications specification status comment webgl 1.0the definition of 'clear' in that specification.
WebGLRenderingContext.getUniformLocation() - Web APIs
gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobal
color = gl.getuniformlocation(shaderprogram, "uglobal
color"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(uglobal
color, [0.1, 0.7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that arti...
... after setting the current shading program to shaderprogram, this code fetches the three uniforms "uscalingfactor", "uglobal
color", and "urotationvector", calling getuniformlocation() once for each uniform.
... finally, the uniform uglobal
color is set to the
color [0.1, 0.7, 0.2, 1.0], the components in this 4-component vector represent the values of red, green, blue, and alpha, respectively.
... having done this, the next time the shading functions are called, their own variables named uscalingfactor, uglobal
color, and urotationvector will all have the values provided by the javascript code.
WebGLRenderingContext.texImage2D() - Web APIs
internalformat a glenum specifying the
color components in the texture.
... luminance_alpha unsigned_byte 2 2 luminance unsigned_byte 1 1 alpha unsigned_byte 1 1 other possible values in webgl2 for the versions of teximage2d that take an arraybufferview or a glintptr offset sized format base format r bits g bits b bits a bits shared bits
color renderable texture filterable r8 red 8 ● ● r8_snorm red s8 ● rg8 rg 8 8 ● ● rg8_snorm rg s8 s8 ● rgb8 rgb 8 8 8 ● ● rgb8_snorm rgb s8 s8 s8 ● ...
... gl.rgba: red, green, blue and alpha components are read from the
color buffer.
... gl.luminance: each
color component is a luminance component, alpha is 1.0.
Keyframe Formats - Web APIs
element.animate([ { // from opacity: 0,
color: "#fff" }, { // to opacity: 1,
color: "#000" } ], 2000); offsets for each keyframe can be specified by providing an offset value.
... element.animate({ opacity: [ 0, 1 ], // [ from, to ]
color: [ "#fff", "#000" ] // [ from, to ] }, 2000); using this format, the number of elements in each array does not need to be equal.
... element.animate({ opacity: [ 0, 1 ], // offset: 0, 1 background
color: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1 }, 2000); the special keys offset, easing, and composite (described below) may be specified alongside the property values.
...the property names are specified using camel-case so for example background-
color becomes background
color and background-position-x becomes backgroundpositionx.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
ont properties : font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height and font-family all background properties : background, background-
color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, b...
...order-
color, border-width, border-radius, border-image, and the longhands properties the
color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-
color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the <h2>.
...stet clita kasd gubergren, no sea takimata sanctus est.</p> <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> css p { width: 500px; line-height: 1.5; } h2 + p::first-letter {
color: white; background-
color: black; border-radius: 2px; box-shadow: 3px 3px 0 red; font-size: 250%; padding: 6px 3px; margin-right: 6px; float: left; } result effect on special punctuation and non-latin characters this example illustrates the effect of ::first-letter on special punctuation and non-latin characters.
...unctuation mark.</p> <p>"the beginning of a special punctuation mark.</p> <p>'the beginning of a special punctuation mark.</p> <p>*the beginning of a special punctuation mark.</p> <p>#the beginning of a special punctuation mark.</p> <p>「特殊的汉字标点符号开头。</p> <p>《特殊的汉字标点符号开头。</p> <p>“特殊的汉字标点符号开头。</p> css p::first-letter {
color: red; font-size: 150%; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-letter' in that specification.
:fullscreen - CSS: Cascading Style Sheets
examples in this example, the
color of a button is changed depending on whether or not the document is in full-screen mode.
...the first establishes the background
color of the "toggle full-screen mode" button when the element is not in a full-screen state.
... #fs-toggle:not(:fullscreen) { background-
color: #afa; } when the document is in full-screen mode, the following css applies instead, setting the background
color to a pale shade of red.
... #fs-toggle:fullscreen { background-
color: #faa; } specifications specification status comment fullscreen apithe definition of ':fullscreen' in that specification.
:invalid - CSS: Cascading Style Sheets
/* selects any invalid <input> */ input:invalid { background-
color: pink; } this pseudo-class is useful for highlighting field errors for the user.
... syntax :invalid examples this example presents a simple form that
colors elements green when they validate and red when they don't.
...class="field"> <label for="url_input">enter a url:</label> <input type="url" id="url_input"> </div> <div class="field"> <label for="email_input">enter an email address:</label> <input type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-
color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-
color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-
color: #800000; border-width: 3px; } input:required:invalid { border-
color: #c00000; } result accessibility concerns the
color red is commonly used to indicate invalid input.
... people who have certain types of
color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on
color to convey meaning.
:valid - CSS: Cascading Style Sheets
/* selects any valid <input> */ input:valid { background-
color: powderblue; } this pseudo-class is useful for highlighting correct fields for the user.
...a: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖';
color: red; } input:valid + span::before { content: '✓';
color: green; } we set the <span>s to position: relative so that we can position the generated content relative to them.
... accessibility concerns the
color green is commonly used to indicate valid input.
... people who have certain types of
color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on
color to convey meaning.
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.
...(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-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element.
... applying
color to html elements using css an overview of how css
color can be used in html, including for borders.
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 class="im...
...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; } <div...
...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; } @suppo...
...i have used the vertical-align property on my item when in the inline-block display mode, but this property does not apply to grid items and, therefore, is ignored once the item becomes a grid item: * {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 { margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width: calc(33.333333% - 20px); margin: 0 10px 20px...
Using CSS transforms - CSS: Cascading Style Sheets
*/ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { 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); transform: 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.
..., and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .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); tr...
...ansform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: 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.
attr() - CSS: Cascading Style Sheets
color <
color> the attribute value is parsed as a hash (3- or 6-value hash) or a keyword.
... current
color url <url> the attribute value is parsed as a string that is used inside a css url() function.
...)where <type-or-unit> = string |
color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <
color> value html <div class="back...
...ground" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div> css .background { height: 100vh; } .background { background-
color: red; } .background[data-background] { background-
color: attr(data-background
color, red); } specifications specification status comment css values and units module level 4the definition of 'attr()' in that specification.
backdrop-filter - CSS: Cascading Style Sheets
the backdrop-filter css property lets you apply graphical effects such as blurring or
color shifting to the area behind an element.
...er-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <
color>?
... )<grayscale()> = grayscale( <number-percentage> )<hue-rotate()> = hue-rotate( <angle> )<invert()> = invert( <number-percentage> )<opacity()> = opacity( [ <number-percentage> ] )<saturate()> = saturate( <number-percentage> )<sepia()> = sepia( <number-percentage> )where <number-percentage> = <number> | <percentage><
color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-
color> | <named-
color> | current
color | <deprecated-system-
color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples css .box { background-
color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 16...
drop-shadow() - CSS: Cascading Style Sheets
a drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific
color and composited below the image.
... syntax drop-shadow(offset-x offset-y blur-radius
color) the drop-shadow() function accepts a parameter of type <shadow> (defined in the box-shadow property), with the exception that the inset keyword and spread parameters are not allowed.
...
color (optional) the
color of the shadow, specified as a <
color>.
... if unspecified, the value of the
color property is used.
Inheritance - CSS: Cascading Style Sheets
a typical example of an inherited property is the
color property.
... given the style rules: p {
color: green; } ...
...the words "emphasized text" will appear green, since the em element has inherited the value of the
color property from the p element.
... it does not get the initial value of the property (which is the
color that is used for the root element when the page specifies no
color).
HTML attribute reference - HTML: Hypertext Markup Language
bg
color <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> background
color of the element.
...please use the css background-
color property instead.
...
color <basefont>, <font>, <hr> this attribute sets the text
color using either a named
color or a
color specified in the hexadecimal #rrggbb format.
...please use the css
color property instead.
<basefont> - HTML: Hypertext Markup Language
the obsolete html base font element (<basefont>) sets a default font face, size, and
color for the other elements which are descended from its parent element.
... you should not use this element; instead, you should use css properties such as font, font-family, font-size, and
color to change the font configuration for an element and its contents.
...
color this attribute sets the text
color using either a named
color or a
color specified in the hexadecimal #rrggbb format.
... example <basefont
color="#ff0000" face="helvetica" size="+2" /> ...
<input type="button"> - HTML: Hypertext Markup Language
the top two controls allow you to choose the
color and size of the drawing pen.
... <div class="toolbar"> <input type="
color" aria-label="select pen
color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> <input type="button" value="clear canvas"> </div> <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="
color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } var canvas = document.queryselector('.mycanvas'); var width = canvas.width = window.innerwid...
...th; var height = canvas.height = window.innerheight-85; var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var
colorpicker = document.queryselector('input[type="
color"]'); var sizepicker = document.queryselector('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]'); // covert degrees to radians function degtorad(degrees) { return degrees * math.pi / 180; }; // update sizepicker output value sizepicker.oninput = function() { output.textcontent = sizepicker.value; } // store mouse pointer coordinates, and whether the button is pressed var curx; var cury; var pressed = false; // update mouse pointer coordinates document.onmousemove = function(e) { curx = (windo...
...document.documentelement.scrolltop : document.body.scrolltop); } canvas.onmousedown = function() { pressed = true; }; canvas.onmouseup = function() { pressed = false; } clearbtn.onclick = function() { ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); } function draw() { if(pressed) { ctx.fillstyle =
colorpicker.value; ctx.beginpath(); ctx.arc(curx, cury-85, sizepicker.value, degtorad(0), degtorad(360), false); ctx.fill(); } requestanimationframe(draw); } draw(); specifications specification status comments html living standardthe definition of '<input type="button">' in that specification.
<maction> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color and also the fraction line
color.
... you can use #rgb, #rrggbb and html
color names.
<math> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
<menclose> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
<msubsup> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
<msup> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
<mtable> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
<mtd> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
<mtext> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
<mtr> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
<munder> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
<munderover> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... math
color the text
color.
... you can use #rgb, #rrggbb and html
color names.
opacity - SVG: Scalable Vector Graphics
foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-
color:skyblue;" /> <stop offset="100%" style="stop-
color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" /> </svg> usage notes default value 1 value <alpha-value> animatable yes ...
... specifications specification status comment css
color module level 4the definition of 'opacity' in that specification.
... css
color module level 3the definition of 'opacity' in that specification.
... candidate recommendation references the specification in css
color 3 and notes that there are some related attributes.
to - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animate
color, animatemotion, animatetransform for <animate>, <animate
color>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation.
... editor's draft no change svg animations level 2the definition of 'to for <animate>, <animate
color>, <animatemotion>, and <animatetransform>' in that specification.
... recommendation initial definition for <set> scalable vector graphics (svg) 1.1 (second edition)the definition of 'to for <animate>, <animate
color>, <animatemotion>, and <animatetransform>' in that specification.
... recommendation initial definition for <animate>, <animate
color>, <animatemotion>, and <animatetransform> ...
type - SVG: Scalable Vector Graphics
for the <fe
colormatrix> element, it indicates the type of matrix operation.
...the other keywords represent convenience shortcuts to allow commonly used
color operations to be performed without specifying a complete matrix.
... usage context for the <animatetransform> elements categories none value translate | scale | rotate | skewx | skewy animatable no normative document svg 1.1 (2nd edition) for the <fe
colormatrix> element categories none value matrix | saturate | huerotate | luminancetoalpha animatable yes normative document svg 1.1 (2nd edition) for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements categories none value identity | table | discrete | linear | gamma animatable yes normative...
...atable yes normative document svg 1.1 (2nd edition) for the <style> and <script> elements categories none value <content-type> animatable no normative document svg 1.1 (2nd edition) : script svg 1.1 (2nd edition) : style example elements the following elements can use the values attribute <animatetransform> <fe
colormatrix> <fefunca> <fefuncb> <fefuncg> <fefuncr> <feturbulence> <script> <style> ...
xChannelSelector - SVG: Scalable Vector Graphics
the xchannelselector attribute indicates which
color channel from in2 to use to displace the pixels in in along the x-axis.
...nelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red
color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
... g this keyword specifies that the green
color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
... b this keyword specifies that the blue
color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
yChannelSelector - SVG: Scalable Vector Graphics
the ychannelselector attribute indicates which
color channel from in2 to use to displace the pixels in in along the y-axis.
...nelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red
color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
... g this keyword specifies that the green
color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
... b this keyword specifies that the blue
color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
<feFlood> - SVG: Scalable Vector Graphics
the <feflood> svg filter primitive fills the filter subregion with the
color and opacity defined by flood-
color and flood-opacity.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animate
color>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes flood-
color flood-opacity dom interface this element implements the svgfefloodelement interface.
... example html content <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="100" height="100" flood-
color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter: url(#floodfilter);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feflood>' in that specification.
... working draft removed <icc
color> value from flood-
color property and defined that the alpha channel of it gets multiplied with the computed value of the flood-opacity property.
Creating annotations - Archive of obsolete content
it is initially off: var matchedelement = null; var originalbg
color = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-
color', originalbg
color); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter even...
... $('*').mouseenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbg
color = $(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 a...
... 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.
Canvas code snippets - Archive of obsolete content
code usable from web content getting the number of pixels of a certain
color in a canvas the following function will return the number of pixels in a canvas that have the rgb
color of r, g and b.
... function getpixelamount(canvas, r, g, b) { var cx = canvas.getcontext('2d'); var pixels = cx.getimagedata(0, 0, canvas.width, canvas.height); var all = pixels.data.length; var amount = 0; for (i = 0; i < all; i += 4) { if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) { amount++; } } return amount; }; getting the
color of a pixel in a canvas this following snippet returns an object with the rgba values of the pixel at position x and y of the canvas.
... // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadow
color', 'strokestyle', 'textalign', 'textbaseline']; for (let m of methods) { let method = m; canvas2dcontext.prototype[method] = function() { this.ctx[method].apply(this.ctx, arguments); return this; }; } for (let m of gettermethods) { let method = m; canvas2dcontext.prototype[method] = function() { return this.ctx[method].apply(this.ctx, arguments); }...
Inline options - Archive of obsolete content
setting types there are several types of <setting>s, each with a different type attribute: type attribute displayed as preference stored as bool checkbox boolean boolint checkbox integer (use the attributes on and off to specify what values to store) integer textbox integer string textbox string
color colorpicker string (in the #123456 format) file browse button and label string directory browse button and label string menulist menulist dependent on the menu item values radio radio buttons dependent on the radio values control button no pref stored the pref attribute should have the full name of the prefere...
...teger --> <setting pref="extensions.myaddon.boolint" type="boolint" title="boolean 3" on="1" off="2"/> <!-- integer example --> <setting pref="extensions.myaddon.int" type="integer" title="integer"/> <!-- string examples --> <setting pref="extensions.myaddon.text" type="string" title="text"/> <setting pref="extensions.myaddon.password" type="string" title="password" inputtype="password"/> <!--
color example --> <setting pref="extensions.myaddon.
color" type="
color" title="
color"/> <!-- file and directory examples --> <setting pref="extensions.myaddon.file" type="file" title="file"/> <setting pref="extensions.myaddon.directory" type="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon.options1" type="menulist" ti...
... <setting pref="extensions.throbberrestored.showtxtontoolbar" title="show text on toolbar button" type="bool" oninputchanged="alert('new value is = ' + this.value); this.style.background
color='red';"> if labels on other toolbar buttons are visible (like by using add-on "classic theme restorer") then show label on throbber toolbar button </setting> note in order for the oninputchanged to execute, the setting must have a pref attribute, otherwise the oninputchanged will not trigger.
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 shrin...
...it also eliminates most of the background
colors and images to save on printer ink.
...besides the idea that we're changing our entire
color scheme every day of the week by merely pointing to a different css file and altering an image variable?
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, inc.
...lick"><![cdata[ if (this.priority == 'normal') { this.priority = 'high'; this.setborder('2px solid red'); } else { this.priority = 'normal'; this.setborder('2px solid blue'); } var str = this.innertext + '\n\n'; str+= ('on ' + event.type + ' priority set to: ' + this.priority); window.alert(str); ]]></handler> <handler event="mouseover"><![cdata[ this.$bg = this.style.background
color || '#ffff00'; this.style.background
color = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.background
color = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.css .sticker { position: relative; left: 0px; right: 0px; float: left; clear: none; width: 10em; height: 10em; overflow: visible; margin: 1em 1em; padding: 0.5em 0.5em; border:...
... 2px solid blue; background-
color: yellow; font: 1em normal "times new roman",serif; font-style: italic; cursor: default; } view this example ...
Broadcasters and Observers - Archive of obsolete content
example 3 : source view <broadcasterset> <broadcaster id="
colorchanger" style="
color: black"/> </broadcasterset> <button label="test"> <observes element="
colorchanger" attribute="style" onbroadcast="alert('
color changed');"/> </button> <button label="observer" oncommand="document.getelementbyid('
colorchanger').setattribute('style','
color: red');" /> two buttons have been created, one labeled test and the other labeled observer.
...first, the button changes to have red text and, second, an alert box appears with the message '
color changed'.
...the script here gets a reference to the broadcaster and changes the style of it to have a
color that is red.
XUL Questions and Answers - Archive of obsolete content
possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-
color, network.
...(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.
NPSetWindowCallbackStruct - Archive of obsolete content
syntax typedef struct { int32 type; display* display; visual* visual;
colormap
colormap; unsigned int depth; } npsetwindowcallbackstruct; fields the data structure has the following fields: type always contains np_setwindow.
...
colormap standard x toolkit attribute.
...
colormap for the plug-in window or drawable.
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.
... for this tutorial, we're going to update the background
color of the toolbars.
...after it restarts this second time, you should see the background
color of the toolbars is displayed in orange now.
::-ms-clear - Archive of obsolete content
such inputs include: <input type="
color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email"> <input type="month"> <input type="number"> <input type="search"> <input type="tel"> <input type="time"> <input type="url"> <input type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector.
... -ms-high-contrast-adjust background-clip background-
color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-
color outline-style outline-width pad...
... visibility width syntax ::-ms-clear example html <form> <label for="firstname">first name:</label> <input type="text" id="firstname" name="firstname" placeholder="first name"> <br> <label for="lastname">last name:</label> <input type="text" id="lastname" name="lastname" placeholder="second name"> </form> css input, label { display: block; } input[type=text]::-ms-clear {
color: red; /* this sets the cross
color as red.
::-ms-ticks-after - Archive of obsolete content
to remove tick marks altogether, set the
color property to transparent.
... background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-backgro...
...und-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-after ...
::-ms-ticks-before - Archive of obsolete content
to remove tick marks altogether, set the
color property to transparent.
... background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-backgr...
...ound-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-before ...
Descendants and Filters - Archive of obsolete content
for instance var element = <pets> <dogs> <fido
color="red"/> <spike
color="blue"/> </dogs> </pets>; element..fido.@
color = "green"; element..spike.@
color = "purple"; changes the
colors of both of our pet dogs.
...consider var element = <dogs> <fido
color="brown"/> <spike
color="black"/> <killer
color="brown"/> </dogs>; var list = element.*.(@
color == "brown"); originally, elements.* returns a list with all 3 dogs in it.
... however, only fido and killer have their
color attributes as brown.
LiveConnect Overview - Archive of obsolete content
as shown in the following code, the javadog constructor takes the javascript object jsdog, which is defined as type jsobject, as an argument: import netscape.javascript.*; public class javadog{ public string dogbreed; public string dog
color; public string dogsex; // define the class constructor public javadog(jsobject jsdog){ // use try...catch to handle jsexceptions here this.dogbreed = (string)jsdog.getmember("breed"); this.dog
color = (string)jsdog.getmember("
color"); this.dogsex = (string)jsdog.getmember("sex"); } } notice that the getmember method of jsobject is used to access th...
...to get a better sense of how getmember works, look at the definition of the custom javascript object dog: function dog(breed,
color,sex){ this.breed = breed; this.
color =
color; this.sex = sex; } you can create a javascript instance of dog called gabby as follows: var gabby = new dog("lab", "chocolate", "female"); if you evaluate gabby.
color, you can see that it has the value "chocolate".
... now suppose you create an instance of javadog in your javascript code by passing the gabby object to the constructor as follows: var javadog = new packages.javadog(gabby); if you evaluate javadog.dog
color, you can see that it also has the value "chocolate", because the getmember method in the java constructor assigns dog
color the value of gabby.
color.
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
thus: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed;
color: #339;} finishing the style adding the background to the heading containing the name of the fish created three problems: the double border was completely covered up by the image.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed;
color: #339;} note how the image is pushed downward four pixels, while the h3 is pushed rightward four pixels.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed;
color: #339;} div.card p {margin: 0.5em 0.5em 0.5em 160px;} and voila!
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 background
color 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.background
color = '#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.
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, 1fr); ...
... * {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] 1fr ...
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.
...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.
... as a last little touch, give the paragraph inside the <article> an appropriate padding value so that its left edge lines up with the <h2> and footer paragraph, and set its
color to be fairly light so it is easy to read.
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.
... many form controls are added to your page by way of the <input> element — this defines simple form fields such as text inputs, through to more complex fields added in html5 such as
color and date pickers.
...try changing how this form looks by adjusting the borders, adding background
colors to the fields, and changing fonts and padding.
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.
... try adding the following to your css, to make the first paragraph absolutely positioned too: p:nth-of-type(1) { position: absolute; background: lime; top: 10px; right: 30px; } at this point you'll see the first paragraph
colored lime, moved out of the document flow, and positioned a bit above from where it originally was.
... dt { background-
color: black;
color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; } body { width: 500px; height: 1400px; margin: 0 auto; } dt { background-
color: black;
color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; } <h1>sticky positioning</h1> <dl> <dt>a</dt> <dd>apple</dd> <dd>ant</dd> <dd>altimeter</d...
Supporting older browsers - Learn web development
* {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 no effe...
... * {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 issue ...
... * {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> <div cl...
Learn to style HTML using CSS - Learn web development
for example, you can use css to alter the font,
color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
... css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font,
color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
... 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.
How to build custom form controls - Learn web development
"; /* 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 control, the...
... .select .option { padding: .2em .3em; /* 2px 3px */ } .select .highlight { background: #000;
color: #ffffff; } so here's the result with our three states: basic state active state open state check out the source code bringing your control to life with javascript now that our design and structure are ready, we can write the javascript code to make the control actually work.
...0 0 4px; } .styledselect:not(:focus-within) input:not(:checked) + label { height: 0; outline: none; overflow: hidden; } .styledselect:not(:focus-within) input:checked + label { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:not(:focus-within) input:checked + label::after { content : "▼"; background: black; float: right;
color: white; padding: 0 4px; margin: 0 -4px 0 4px; } .styledselect:focus-within { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:focus-within input:checked + label { background-
color: #333;
color: #fff; width: 100%; } with no javascript, and just a little bit of css, we are able to style the list of radio buttons to display only ...
Adding vector graphics to the Web - Learn web development
on the web, you'll work with two types of image — raster images, and vector images: raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what
color it should be.
... the difference becomes apparent when you zoom in the page — the png image becomes pixellated as you zoom in because it contains information on where each pixel should be (and what
color).
...more advanced svg features include <fe
colormatrix> (transform
colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" ...
Aprender y obtener ayuda - Learn web development
for example, if you are looking at a task of "build a simple two-column website", you could break it down as follows: create the html structure work out basic site typography work out a basic
color scheme implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer.
... if you want to find out more about a specific technology feature, such as the html <video> element, or the css background-
color or opacity properties, or the javascript date.settime() method, you should just search for the feature's name.
...to search on mdn, you can either use the site's in-built search functionality or better still, use your favorite search engine and put "mdn" in front of the search term, for example, "mdn responsive web design" or "mdn background-
color".
Performance best practices for Firefox front-end engineers
paint flashing tints each region being painted with a randomly selected
color so that it’s more easy to see what on the screen is being painted.
...see a lot of flashing /
colors?
...for example, transitioning the background-
color of a dom node from red to blue will result in a repaint for every frame of the animation, and paint flashing will reveal that.
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.background
color); controls.style.background = e.detail.background
color; }); 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.background
color value.
... when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.background
color value reported is rgb(0, 83, 159).
Basics
so it responds to other browser operations such as the zoom (try view -> text zoom), and you can do links a 2 + b 2 = c 2 , apply stylistic effects a 2 + b 2 = c 2 , or use
color a 2 + b 2 = c 2 in very strange ways p(x) q(x) = a0 + a1x + a2 x2 + ...
...>y</mi> <mn>3</mn> </msup> </mrow> <mo>+</mo> <mrow> <mn>5</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>4</mn> </msup> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>5</mn> </msup> </mrow> </maction> </mtd> </mtr> </mtable> </mtd> </mtr> </mtable> </math> </div> css content .control { text-decoration: none; font-weight: bold; font-size: 200%; } input {
color: red; } [class="inputmath"] { border: 1px dotted; } javascript content function setselection(id,value) { document.getelementbyid(id).setattribute("selection",value); } function expand() { setselection("a11","2"); setselection("a12","2"); setselection("a13","2"); setselection("a21","2"); setselection("a22","2"); setselection("a23","2"); setselection("a31","2"); setselection("a32","...
... mathml button html content <div style="text-align: center"> <button style="white-space: normal;"> <span style="
color: brown;"> for example, <b>click</b> this mathml continued fraction<br/> inside this html button<br /> </span> <math> <mrow> <mfrac> <mi>π</mi> <mn>4</mn> </mfrac> <mo>=</mo> <mfrac numalign="left"> <mstyle scriptlevel="0"> <mn>1</mn> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac numalign="left"> <mstyle scriptlevel="0"> <msup><mn>1</mn><mn>2</mn></m...
browser.urlbar.formatting.enabled
the preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by
coloring it black and the other parts grey.
... type:boolean default value: true exists by default: yes application support:firefox 6.0 status: active; last updated 2012-04-03 introduction: pushed to nightly on 2011-05-03 bugs: bug 451833 values true (default) the domain name including the top level domain is highlighted in the address bar by
coloring it black and the other parts grey.
... false all parts of the url are given the same
color: black.
JSAPI User Guide
besides its name, * each property has a "tiny" identifier (my_
color, e.g.) that can be used * in switch statements (in a common my_getproperty function, for example).
... */ enum my_tinyid { my_
color, my_height, my_width, my_funny, my_array, my_rdonly }; static jspropertyspec my_props[] = { {"
color", my_
color, jsprop_enumerate}, {"height", my_height, jsprop_enumerate}, {"width", my_width, jsprop_enumerate}, {"funny", my_funny, jsprop_enumerate}, {"array", my_array, jsprop_enumerate}, {"rdonly", my_rdonly, jsprop_readonly}, {0} }; js_defineproperties(cx, obj, my_props); /* * given the above definitions and call to js_defineproperties, obj will * need this sort of "getter" method in its class (my_class, above).
... */ static jsbool my_getproperty(jscontext *cx, jsobject *obj, jsval id, jsval *vp) { if (jsval_is_int(id)) { switch (jsval_to_int(id)) { case my_
color: *vp = .
nsIDOMWindowUtils
t ax, in float 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 ns
color abackground
color, in gfxcontext athebescontext); native code only!
... this is easier to implement than adding our property restrictions to this api, and is sufficient for the present testing requirements (which are essentially testing '
color').
... native code only!renderdocument void renderdocument( in nsconstrect arect, in pruint32 aflags, in ns
color abackground
color, in gfxcontext athebescontext ); parameters arect aflags abackground
color athebescontext resumetimeouts() resumes timeouts on this window and its descendant windows.
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
note: your grid preferences such as overlay
color and display settings choices are persisted across page loads for each separate page.
... a
color picker icon that allows you to change the primary
color of the grid overlay.
... this is useful for selecting different
colors so you can easily tell your grids apart.
CSSPrimitiveValue.primitiveType - Web APIs
css_rgb
color the value is an <
color>.
... the value can be obtained by using the getrgb
colorvalue() method.
... example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("
color"); console.log(cssvalue.primitivetype); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.primitivetype' in that specification.
CanvasRenderingContext2D.shadowBlur - Web APIs
note: shadows are only drawn if the shadow
color property is set to a non-transparent value.
...the shadow
color property sets its
color, and shadowblur sets its level of bluriness.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadow
color = 'red'; ctx.shadowblur = 15; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowblur' in that specification.
CanvasRenderingContext2D.shadowOffsetX - Web APIs
note: shadows are only drawn if the shadow
color property is set to a non-transparent value.
...the shadow
color property sets its
color, shadowoffsetx sets its offset 25 units to the right, and shadowblur gives it a blur level of 10.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadow
color = 'red'; ctx.shadowoffsetx = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsetx' in that specification.
CanvasRenderingContext2D.shadowOffsetY - Web APIs
note: shadows are only drawn if the shadow
color property is set to a non-transparent value.
...the shadow
color property sets its
color, shadowoffsety sets its offset 25 units towards the bottom, and shadowblur gives it a blur level of 10.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadow
color = 'red'; ctx.shadowoffsety = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 80); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsety' in that specification.
Drawing shapes with canvas - Web APIs
in upcoming pages we'll see two alternative methods for clearrect(), and we'll also see how to change the
color and stroke style of the rendered shapes.
...a path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different
color.
...here, all we're doing is using it to change the fill
color for paths from the default
color of black to white, and then back again.
Transformations - Web APIs
the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadow
color, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.
...next we save this state and make changes to the fill
color.
...if we hadn't saved the state using save(), we would need to change the fill
color and transparency manually in order to return to the previous state.
Using light sensors - Web APIs
you are working in a dark environment'); bodybg.background
color="lightgrey"; } else { bodybg.background
color="#fff"; } }); this example shows how the api can actually be used in the wild.
... if your app contains a lot of white in the ui, it is usually beneficial to the user to change the ui to a darker
color in a darker environment.
... the code alerts the user that they are working in a dark environment and then changes the page's background to a darker
color.
DocumentOrShadowRoot.elementFromPoint() - Web APIs
example this example creates two buttons which let you set the current
color of the paragraph element located under the coordinates (2, 2).
... javascript function change
color(new
color) { elem = document.elementfrompoint(2, 2); elem.style.
color = new
color; } the change
color() method simply obtains the element located at the specified point, then sets that element's current foreground
color property to the
color specified by the new
color parameter.
... html <p id="para1">some text here</p> <button onclick="change
color('blue');">blue</button> <button onclick="change
color('red');">red</button> the html provides the paragraph whose
color will be affected, as well as two buttons: one to change the
color to blue, and another to change the
color to red.
Introduction to the DOM - Web APIs
t.body[attr] = value; else throw new error("no support"); } </script> </head> <body> <div style="margin: .5in; height: 400px;"> <p><b><tt>text</tt></b></p> <form> <select onchange="setbodyattr('text', this.options[this.selectedindex].value);"> <option value="black">black</option> <option value="red">red</option> </select> <p><b><tt>bg
color</tt></b></p> <select onchange="setbodyattr('bg
color', this.options[this.selectedindex].value);"> <option value="white">white</option> <option value="lightgrey">gray</option> </select> <p><b><tt>link</tt></b></p> <select onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> ...
... <option value="green">green</option> </select> <small> <a href="http://some.website.tld/page.html" id="sample"> (sample link) </a> </small><br /> <input type="button" value="version" onclick="ver()" /> </form> </div> </body> </html> to test a lot of interfaces in a single page—for example, a "suite" of properties that affect the
colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other html elements.
... 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 (bg
color), the
color of the hyperlinks (alink), and
color of the text (text).
EXT_blend_minmax - Web APIs
the ext_blend_minmax extension is part of the webgl api and extends blending capabilities by adding two new blend equations: the minimum or maximum
color components of the source and destination
colors.
... constants this extension adds two new constants, which can be used in webglrenderingcontext.blendequation() and webglrenderingcontext.blendequationseparate(): ext.min_ext produces the minimum
color components of the source and destination
colors.
... ext.max_ext produces the maximum
color components of the source and destination
colors.
EXT_float_blend - Web APIs
however, to use it, you need to enable the use of 32-bit floating-point draw buffers by enabling the extension webgl_
color_buffer_float (for webgl1) or ext_
color_buffer_float (for webgl2).
... usage notes on devices that support the ext_float_blend extension, it is automatically, implicitly, enabled when any one or more of ext_
color_buffer_float, oes_texture_float, or webgl_
color_buffer_float are enabled.
... examples const gl = canvas.getcontext('webgl2'); // enable necessary extensions gl.getextension('ext_
color_buffer_float'); gl.getextension('ext_float_blend'); const tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); // use floating point format gl.teximage2d(gl.texture_2d, 0, gl.rgba32f, 1, 1, 0, gl.rgba, gl.float, null); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.framebuffer, fb); gl.framebuffertexture2d(gl.framebuffer, gl.
color_attachment0, gl.texture_2d, tex, 0); // enable blending gl.enable(gl.blend); gl.drawarrays(gl.points, 0, 1); // won't throw gl.invalid_operation with the extension enabled specifications specification status ...
Element.shadowRoot - Web APIs
examples the following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and
color specified in the element's attributes.
... inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updatestyle(), which actually applies the size and
color to the element.
...dom and then update the css found inside it: function updatestyle(elem) { const shadow = elem.shadowroot; const childnodes = array.from(shadow.childnodes); childnodes.foreach(childnode => { if (childnode.nodename === 'style') { childnode.textcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; background-
color: ${elem.getattribute('c')}; } `; } }); } specifications specification status comment domthe definition of 'shadowroot' in that specification.
Event.eventPhase - Web APIs
>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() addlisteners...
...vinfo") { 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.background
color = '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.background
color = (i & 1) ?
GlobalEventHandlers.onanimationend - Web APIs
ext">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center;
color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box ...
...we set its size, position,
color, and layout.
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-
color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next.
GlobalEventHandlers.onanimationiteration - Web APIs
id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div> css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center;
color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box th...
...we set its size, position,
color, and layout.
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-
color: #2233ff; display: flex; justify-content: center; animation: 2s ease-in-out 0s infinite alternate both paused slidebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.
GlobalEventHandlers.onanimationstart - Web APIs
ext">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center;
color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box ...
...we set its size, position,
color, and layout.
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-
color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next.
GlobalEventHandlers.ondragleave - Web APIs
<!doctype html> <html lang=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 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"); // chang...
...e 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 background
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 indi...
... 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"> ...
GlobalEventHandlers.ontransitioncancel - Web APIs
html this simply creates a <div> which we'll style with css below to make into a box that resizes and changes
color and such.
... <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's
color and size change, and causes the box to rotate, while the mouse cursor hovers over it.
... .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-
color: #0000ff;
color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-
color 2s, -webkit-transform 2s,
color 2s; transition: width 2s, height 2s, background-
color 2s, transform 2s,
color 2s; } .box:hover { background-
color: #ffcccc;
color: #000000; width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
GlobalEventHandlers.ontransitionend - Web APIs
html this simply creates a <div> which we'll style with css below to make into a box that resizes and changes
color and such.
... <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's
color and size change, and causes the box to rotate, while the mouse cursor hovers over it.
... .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-
color: #0000ff;
color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-
color 2s, transform 2s,
color 2s; } .box:hover { background-
color: #ffcccc;
color: #000000; width: 200px; height: 200px; transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
HTMLCanvasElement.toDataURL() - Web APIs
color in this example): html <img class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript window.addeventlistener('load', remove
colors); function show
colorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function remove
colors(...
...) { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelement('canvas'), octx = ocanvas.getcontext('2d'); for (var nwidth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimgid = 0; nimgid < nimgslen; nimgid++) { o
colorimg = aimages[nimgid]; nwidth = o
colorimg.offsetwidth; nheight = o
colorimg.offsetheight; ocanvas.width = nwidth; ocanvas.height = nheight; octx.drawimage(o
colorimg, 0, 0); oimgdata = octx.getimagedata(0, 0, nwidth, nheight); apix = oimgdata.data; npixlen = apix.length; for (npixel = 0; npixel < npixlen; npixel += 4) { apix[npixel + 2] = apix[npixel + 1] = apix[npixel] = (apix[npixel] + apix[npixel + 1] + apix[npixel + 2]) / 3; } octx.putim...
...agedata(oimgdata, 0, 0); ograyimg = new image(); ograyimg.src = ocanvas.todataurl(); ograyimg.onmouseover = show
colorimg; o
colorimg.onmouseout = showgrayimg; octx.clearrect(0, 0, nwidth, nheight); o
colorimg.style.display = "none"; o
colorimg.parentnode.insertbefore(ograyimg, o
colorimg); } } specifications specification status comment html living standardthe definition of 'htmlcanvaselement.todataurl' in that specification.
HTMLElement.offsetLeft - Web APIs
example var
colortable = document.getelementbyid("t1"); var toleft =
colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.
... <div style="width: 300px; border-
color:blue; border-style:solid; border-width:1;"> <span>short span.
... </span> <span id="longspan">long span that wraps within this div.</span> </div> <div id="box" style="position: absolute; border-
color: red; border-width: 1; border-style: solid; z-index: 10"> </div> <script type="text/javascript"> var box = document.getelementbyid("box"); var longspan = document.getelementbyid("longspan"); box.style.left = longspan.offsetleft + document.body.scrollleft + "px"; box.style.top = longspan.offsettop + document.body.scrolltop + "px"; box.style.width = longspan.offsetwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> specification specification status comment css object model (cssom) view modulethe definition of 'offsetleft' in that specification.
HTMLTableCellElement - Web APIs
htmltablecellelement.bg
color a domstring containing the background
color of the cells.
... it reflects the obsolete bg
color attribute.
... recommendation the following properties have been obsoleted: align, axis, bg
color, height, width, ch, choff, nowrap, and valign.
MediaStreamTrack: mute event - Web APIs
musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.background
color = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.background
color = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its background
color changed to #aaa.
... when the track exits the muted state—detected by the arrival of an unmute event—the background
color is restored to white.
...the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.background
color = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.background
color = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'mute' in that specification.
MediaStreamTrack: unmute event - Web APIs
musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.background
color = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.background
color = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its background
color changed to #aaa.
... when the track exits the muted state—detected by the arrival of an unmuted event—the background
color is restored to white.
...the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.background
color = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.background
color = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'unmute' in that specification.
Microdata DOM API - Web APIs
code example in an earlier example, a "http://example.org/animals#cat" item had two "http://example.com/
color" values.
... var cat = document.getitems('http://example.org/animals#cat')[0]; var
colors = cat.properties['http://example.com/
color'].getvalues(); var result; if (
colors.length == 0) { result = '
color unknown.'; } else if (
colors.length == 1) { result = '
color: ' +
colors[0]; } else { result = '
colors:'; for (var i = 0; i <
colors.length; i += 1) result += ' ' +
colors[i]; } it's also possible to get a list of all the property names using the object's names idl attribute.
...ndchild(propli); } itemli.appendchild(inner); outer.appendchild(itemli); } document.body.appendchild(outer); if faced with the following from an earlier example: <section itemscope itemtype="http://example.org/animals#cat"> <h1 itemprop="name http://example.com/fn">hedral</h1> <p itemprop="desc">hedral is a male american domestic shorthair, with a fluffy <span itemprop="http://example.com/
color">black</span> fur with <span itemprop="http://example.com/
color">white</span> paws and belly.</p> <img itemprop="img" src="hedral.jpeg" alt="" title="hedral, age 18 months"> </section> ...it would result in the following output: name http://example.com/fn desc http://example.com/
color img (the duplicate occurrence of "http://example.com/
color" is not included in the list.) htmlpropertiescollec...
ShadowRoot - Web APIs
examples the following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and
color specified in the element's attributes.
... inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updatestyle(), which actually applies the size and
color to the element.
...e css found inside it: function updatestyle(elem) { var shadow = elem.shadowroot; var childnodes = shadow.childnodes; for(var i = 0; i < childnodes.length; i++) { if(childnodes[i].nodename === 'style') { childnodes[i].textcontent = 'div {' + 'width: ' + elem.getattribute('l') + 'px;' + 'height: ' + elem.getattribute('l') + 'px;' + 'background-
color: ' + elem.getattribute('c') + ';' + '}'; } } } specifications specification status comment domthe definition of 'interface shadowroot' in that specification.
Storage - Web APIs
we first test whether the local storage contains data items using !localstorage.getitem('bg
color').
... if(!localstorage.getitem('bg
color')) { populatestorage(); } setstyles(); function populatestorage() { localstorage.setitem('bg
color', document.getelementbyid('bg
color').value); localstorage.setitem('font', document.getelementbyid('font').value); localstorage.setitem('image', document.getelementbyid('image').value); } function setstyles() { var current
color = localstorage.getitem('bg
color'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.gete...
...lementbyid('bg
color').value = current
color; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.style.background
color = '#' + current
color; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this running as a complete working example, see our web storage demo.
USBDevice.opened - Web APIs
example this example is for a hypothetical usb device with a multi-
colored led.
... it shows how to test that a device is open before calling usbdevice.controltransferout to set a specified led
color.
... async setdevice
color(usbdevice, r, g, b) { if (device.opened) { // this hypothetical usb device requires that the data passed to // it be in a uint8array.
WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of
color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.
color_attachment{0-15}: attaches the texture to one of the framebuffer's
color buffers.
... examples gl.framebuffertexturelayer(gl.framebuffer, gl.
color_attachment0, texture, 0, 8); specifications specification status comment webgl 2.0the definition of 'framebuffertexturelayer' in that specification.
WebGL2RenderingContext.getFragDataLocation() - Web APIs
the webgl2renderingcontext.getfragdatalocation() method of the webgl 2 api returns the binding of
color numbers to user-defined varying out variables.
... return value a glint indicating the assigned
color number binding, or -1 otherwise.
... examples // program is a linked webglprogram gl.getfragdatalocation(program, 'frag
color'); specifications specification status comment webgl 2.0the definition of 'getfragdatalocation' in that specification.
WebGL2RenderingContext.invalidateFramebuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of
color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.
color_attachment{0-15}: invalidates one of the framebuffer's
color buffers.
... examples gl.invalidateframebuffer(gl.read_framebuffer, [gl.
color_attachment0, gl.
color_attachment1]); specifications specification status comment webgl 2.0the definition of 'invalidateframebuffer' in that specification.
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
possible values: gl.framebuffer: collection buffer data storage of
color, alpha, depth and stencil buffers used to render an image.
...possible values: gl.
color_attachment{0-15}: invalidates one of the framebuffer's
color buffers.
... examples gl.invalidatesubframebuffer(gl.read_framebuffer, [gl.
color_attachment0, gl.
color_attachment1], 0, 0, 256, 256); specifications specification status comment webgl 2.0the definition of 'invalidatesubframebuffer' in that specification.
WebGL2RenderingContext.texImage3D() - Web APIs
internalformat a glint specifying the
color components in the texture.
... gl.rgba: red, green, blue and alpha components are read from the
color buffer.
... gl.luminance: each
color component is a luminance component, alpha is 1.0.
WebGL2RenderingContext - Web APIs
webgl2renderingcontext.invalidatesubframebuffer() invalidates portions of the contents of attachments in a framebuffer webgl2renderingcontext.readbuffer() selects a
color buffer as the source for pixels.
... programs and shaders webgl2renderingcontext.getfragdatalocation() returns the binding of
color numbers to user-defined varying out variables.
... webgl2renderingcontext.drawbuffers() specifies a list of
color buffers to be drawn into.
WebGLRenderingContext.copyTexImage2D() - Web APIs
internalformat a glenum specifying the
color components in the texture.
... gl.rgba: red, green, blue and alpha components are read from the
color buffer.
... gl.luminance: each
color component is a luminance component, alpha is 1.0.
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
gl.renderbuffer_green_size: returns a glint that is the resolution size (in bits) for the green
color.
... gl.renderbuffer_blue_size: returns a glint that is the resolution size (in bits) for the blue
color.
... gl.renderbuffer_red_size: returns a glint that is the resolution size (in bits) for the red
color.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
for example, your vertex shader may be using a position and a
color attribute.
... most meshes have the
color specified at a per-vertex level, but some meshes are of a uniform shade.
... for those meshes, it is not necessary to place the same
color for each vertex into the array buffer, so you use gl.vertexattrib4fv() to set a constant
color.
Hello GLSL - Web APIs
« previousnext » this webgl example demonstrates a very basic glsl shader program that draws a solid
color square.
...hello glsl!</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-
color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_frag
color = vec4(0.18, 0.54, 0.34, 1.0); } </scr...
...nvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clear
color(0.0, 0.0, 0.0, 1.0); gl.clear(gl.
color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Hello vertex attributes - Web APIs
click on the canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-
color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision m...
...ediump float; void main() { gl_frag
color = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.
...nvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clear
color(0.0, 0.0, 0.0, 1.0); gl.clear(gl.
color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Textures from code - Web APIs
simple demonstration of procedural texturing</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-
color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_pointsize = 128.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision medium...
...p float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_frag
color = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fra...
...nvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clear
color(0.0, 0.0, 0.0, 1.0); gl.clear(gl.
color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Data in WebGL - Web APIs
attributes are typically used to store
color information, texture coordinates, and any other data calculated or retrieved that needs to be shared between the javascript code and the vertex shader.
... //init
colors var vertex
colors = [ vec4( 0.0, 0.0, 0.0, 1.0 ), // black vec4( 1.0, 0.0, 0.0, 1.0 ), // red vec4( 1.0, 1.0, 0.0, 1.0 ), // yellow vec4( 0.0, 1.0, 0.0, 1.0 ), // green vec4( 0.0, 0.0, 0.0, 1.0 ), // black vec4( 1.0, 0.0, 0.0, 1.0 ), // red vec4( 1.0, 1.0, 0.0, 1.0 ), // yellow vec4( 0.0, 1.0, 0.0, 1.0 ), // green ]; var cbuffer = gl.createbuffer(); //continued //create buffer to store
colors and reference it to "v
color" which is in glsl gl.bindbuffer( gl.array_buffer, cbuffer ); gl.bufferdata( gl.array_buffer, flatten(vertex
colors), gl.static_draw ); var v
color = gl.getattriblocation( program, "v
color" ); gl.vertexattribpointer( v
color, 4, gl.float, false, 0, 0 ); gl.en...
...ablevertexattribarray( v
color ); //glsl attribute vec4 v
color; void main() { f
color = v
color; } varyings varyings are variables that are declared by the vertex shader and used to pass data from the vertex shader to the fragment shader.
WebGL: 2D and 3D graphics for the web - Web APIs
ce standard interfaces webglrenderingcontext webgl2renderingcontext webglactiveinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject extensions angle_instanced_arrays ext_blend_minmax ext_
color_buffer_float ext_
color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic khr_parallel_shader_compile oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float oes_texture_float_linear oes_texture_half_float...
... oes_texture_half_float_linear oes_vertex_array_object ovr_multiview2 webgl_
color_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context events webglcontextlost webglcontextrestored webglcontextcreationerror constants and types webgl constants webgl types webgl 2 webgl 2 is a major update to webgl which is provided through the webgl2renderingcontext interface.
... examples a basic 2d webgl animation example this example demonstrates the simple animation of a one-
color shape.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
{ let adjustedrefspace = applypositionoffsets(xrreferencespace); let pose = frame.getviewerpose(adjustedrefspace); animationframerequestid = frame.session.requestanimationframe(myanimationframecallback); if (pose) { let gllayer = frame.session.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); checkglerror("binding the framebuffer"); gl.clear
color(0, 0, 0, 1.0); gl.cleardepth(1.0); gl.clear(gl.
color_buffer_bit | gl.depth_buffer_bit); checkglerror("clearing the framebuffer"); const deltatime = (time - lastframetime) * 0.001; lastframetime = time; for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); checkglerr...
...we set the clear
color to opaque black using gl.clear
color() and the value to clear the depth buffer to to 1.0 by calling the webglrenderingcontext method gl.cleardepth().
... then we call the webglrenderingcontext method gl.clear(), which clears the framebuffer (since we include gl.
color_buffer_bit in the mask parameter) and the depth buffer (because we include gl.depth_buffer_bit).
Rendering and the WebXR frame animation callback - Web APIs
viewerpose = frame.getviewerpose(viewerrefspace); if (viewerpose) { let gllayer = session.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); // start by erasing the
color and depth framebuffers.
... gl.clear
color(0, 0, 0, 1.0); gl.cleardepth(1.0); gl.clear(gl.
color_buffer_bit | gl.depth_buffer_bit); // compute the time elapsed since the last frame was rendered.
...the background
color is set to fully opaque black using gl.clear
color(); 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.
Accessibility: What users can do to browse more safely - Accessibility
grayscale those who have sufferred traumatic brain injury (tbi) may be highly sensitive to
color; it can require such a great "investment of cognitive energy" on their part, there's no energy for other daily tasks.
...in the screenshot below, you can see an example of windows 10 accessibility settings allowing for
color filters to be selected.
... grayscale is enabled when the
color filters button is toggled "on" see also accessibilty accessibility learning path web accessibility for seizures and physical reactions
color blindness discussion: "what is the “grayscale” setting for in accessibility options?" contributors many, many thanks to eric eggert from knowbility; for his discussions and huge help on this topic.
Accessibility and Spacial Patterns - Accessibility
spatial localization nasa conducted research on the perception of
color, and found that luminance contrast mattered greatly as to how they were perceived.
... there is such a thing as "local" adaptation to
colors.
... see also mdn accessibiltity: what users can do to browse more safely web accessibiltity for seizures and physical reactions web accessibility: understanding
colors and luminance braille part 3: a step-by-step guide to typesetting ada braille correctly in adobe illustrator spatial math in brailleblaster (4 of 5) government literature nasa: designing with blue math spatial reasoning: why math talk is about more than numbers scientific literature colour constancy in context: roles for local adaptation and levels of reference gamma o...
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
initial valuesee proseapplies toall elementsinheritedyescomputed valueas specified with variables substitutedanimation typediscrete syntax --somekeyword: left; --some
color: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); <declaration-value> this value matches any sequence of one or more tokens, so long as the sequence does not contain an unallowed token.
... note: custom property names are case sensitive — --my-
color will be treated as a separate custom property to --my-
color.
... formal syntax <declaration-value> example html <p id="firstparagraph">this paragraph should have a blue background and yellow text.</p> <p id="secondparagraph">this paragraph should have a yellow background and blue text.</p> <div id="container"> <p id="thirdparagraph">this paragraph should have a green background and yellow text.</p> </div> css :root { --first-
color: #488cff; --second-
color: #ffff8c; } #firstparagraph { background-
color: var(--first-
color);
color: var(--second-
color); } #secondparagraph { background-
color: var(--second-
color);
color: var(--first-
color); } #container { --first-
color: #48ff32; } #thirdparagraph { background-
color: var(--first-
color);
color: var(--second-
color); } result specifications specification status co...
::after (:after) - CSS: Cascading Style Sheets
html <p class="boring-text">here is some plain old boring text.</p> <p>here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">contributing to mdn is easy and fun.</p> css .exciting-text::after { content: " <- exciting!";
color: green; } .boring-text::after { content: " <- boring";
color: red; } result decorative example we can style text or images in the content property almost any way we want.
...</span> css .ribbon { background-
color: #5bc8f7; } .ribbon::after { content: "this is a fancy orange box."; background-
color: #ffba10; border-
color: black; border-style: dotted; } result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips.
...</p> css span[data-descr] { position: relative; text-decoration: underline;
color: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-
color: #ffffcc; padding: 12px;
color: #000000; font-size: 14px; z-index: 1; } result specifications specification status c...
::before (:before) - CSS: Cascading Style Sheets
html <q>some quotes,</q> he said, <q>are better than none.</q> css q::before { content: "«";
color: blue; } q::after { content: "»";
color: red; } result decorative example we can style text or images in the content property almost any way we want.
... html <span class="ribbon">notice where the orange box is.</span> css .ribbon { background-
color: #5bc8f7; } .ribbon::before { content: "look at this orange box."; background-
color: #ffba10; border-
color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements.
...>buy milk</li> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>relax</li> </ul> css li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-
color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code examp...
::cue - CSS: Cascading Style Sheets
::cue {
color: yellow; font-weight: bold; } the properties are applied to the entire set of cues as if they were a single unit.
... syntax ::cue | ::cue( <selector> ) permitted properties rules whose selectors include this element may only use the following css properties: background background-attachment background-clip background-
color background-image background-origin background-position background-repeat background-size
color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-
color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-
color text-decoration-line text-decoration-style text-decoration-thickness ...
... ::cue {
color: #fff; background-
color: rgba(0, 0, 0, 0.6); } specifications specification status comment webvtt: the web video text tracks formatthe definition of '::cue' in that specification.
::first-line (:first-line) - CSS: Cascading Style Sheets
/* selects the first line of a <p> */ p::first-line {
color: red; } css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
...: all font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-related properties: background-
color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode the
color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shadow, text-decoration, text-decoration-
color, text-decoration-line, text-decoration-style, and vertical-align.
...see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line {
color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification.
:active - CSS: Cascading Style Sheets
/* selects any <a> that is being activated */ a:active {
color: red; } the :active pseudo-class is commonly used on <a> and <button> elements.
...</p> css a:link {
color: blue; } /* unvisited links */ a:visited {
color: purple; } /* visited links */ a:hover { background: yellow; } /* hovered links */ a:active {
color: red; } /* active links */ p:active { background: #eee; } /* active paragraphs */ result active form elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking ...
...me or my label!</button> </form> css form :active {
color: red; } form button { background: white; } result specifications specification status comment html living standardthe definition of ':active' in that specification.
:first-of-type - CSS: Cascading Style Sheets
/* selects any <p> that is the first element of its type among its siblings */ p:first-of-type {
color: red; } note: as originally defined, the selected element had to have a parent.
... syntax :first-of-type examples styling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type {
color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted.
... html <article> <div>this `div` is first!</div> <div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nested `span` gets styled</span>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`.</div> </article> css article :first-of-type { background-
color: pink; } result specifications specification status comment selectors level 4the definition of ':first-of-type' in that specification.
:host-context() - CSS: Cascading Style Sheets
another typical use would be to allow inner elements to react to classes or attributes on any anscestor elements - for example, applying a different text
color when a .dark-theme class is applied to <body>.
... /* selects a shadow root host, only if it is a descendant of the selector argument given */ :host-context(h1) { font-weight: bold; } :host-context(main article) { font-weight: bold; } /* changes paragraph text
color from black to white when a .dark-theme class is applied to the document body */ p {
color: #000; } :host-context(body.dark-theme) p {
color: #fff; } syntax :host-context( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
...tcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) {
color: gray; }' + ':host(.footer) {
color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host-context(h1) { font-style: italic; } and :host-context(h1):after { content: " - no links in headers!" } rules style the instance of the <context-span> element (the shadow host in this instance) inside the <h1>.
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
/* selects any paragraph inside a header, main or footer element that is being hovered */ :is(header, main, footer) p:hover {
color: red; cursor: pointer; } /* the above is equivalent to the following */ header p:hover, main p:hover, footer p:hover {
color: red; cursor: pointer; } /* backwards-compatible version with :-*-any() and :matches() (it is not possible to group selectors into single rule, because presence of invalid selector would invalidate whole rule.) */ :-webkit-any(header, main, footer) p:hover { ...
...
color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover {
color: red; cursor: pointer; } :matches(header, main, footer) p:hover {
color: red; cursor: pointer; } syntax :is( <complex-selector-list> )where <complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>?
...'='<attr-modifier> = i | s examples cross-browser example <header> <p>this is my header paragraph</p> </header> <main> <ul> <li><p>this is my first</p><p>list item</p></li> <li><p>this is my second</p><p>list item</p></li> </ul> </main> <footer> <p>this is my footer paragraph</p> </footer> :-webkit-any(header, main, footer) p:hover {
color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover {
color: red; cursor: pointer; } :matches(header, main, footer) p:hover {
color: red; cursor: pointer; } :is(header, main, footer) p:hover {
color: red; cursor: pointer; } let matcheditems; try { matcheditems = document.queryselectorall(':is(header, main, footer) p'); } catch(e) { try { matcheditems = doc...
:last-of-type - CSS: Cascading Style Sheets
/* selects any <p> that is the last element of its type among its siblings */ p:last-of-type {
color: lime; } note: as originally defined, the selected element had to have a parent.
... syntax :last-of-type examples styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type {
color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted.
... html <article> <div>this `div` is first.</div> <div>this <span>nested `span` is last</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`!</div> </article> css article :last-of-type { background-
color: pink; } result specifications specification status comment selectors level 4the definition of ':last-of-type' in that specification.
:nth-last-child() - CSS: Cascading Style Sheets
/* selects every fourth element among any group of siblings, counting backwards from the last one */ :nth-last-child(4n) {
color: lime; } note: this pseudo-class is essentially the same as :nth-child, except it counts items backwards from the end, not forwards from the beginning.
...xample html <table> <tbody> <tr> <td>first line</td> </tr> <tr> <td>second line</td> </tr> <tr> <td>third line</td> </tr> <tr> <td>fourth line</td> </tr> <tr> <td>fifth line</td> </tr> </tbody> </table> css table { border: 1px solid blue; } /* selects the last three elements */ tr:nth-last-child(-n+3) { background-
color: pink; } /* selects every element starting from the second to last item */ tr:nth-last-child(n+2) {
color: blue; } /* select only the last second element */ tr:nth-last-child(2) { font-weight: 600; } result quantity query a quantity query styles elements depending on how many of them there are.
... html <h4>a list of four items (styled):</h4> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <h4>a list of two items (unstyled):</h4> <ol> <li>one</li> <li>two</li> </ol> css /* if there are at least three list items, style them all */ li:nth-last-child(n+3), li:nth-last-child(n+3) ~ li {
color: red; } result specifications specification status comment selectors level 4the definition of ':nth-last-child' in that specification.
:read-only - CSS: Cascading Style Sheets
input:read-only, textarea:read-only { background-
color: #ccc; } p:read-only { background-
color: #ccc; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-
color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-
color: red;
color: white; } p:read-write { background-
color: lime; } specifications specification status comment html living standardthe definition of ':read-only' in that specification.
:read-write - CSS: Cascading Style Sheets
input:read-write, textarea:read-write { background-
color: #bbf; } p:read-write { background-
color: #bbf; } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-
color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element wi...
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-
color: red;
color: white; } p:read-write { background-
color: lime; } specifications specification status comment html living standardthe definition of ':read-write' in that specification.
:target - CSS: Cascading Style Sheets
isn't that delightful?</p> css p:target { background-
color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►";
color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i {
color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
...agna.</figcaption> </figure> </div> css /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position: relative; padding: 1.5em; background-
color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-
color: black; border-radius: 50%;
color: white; content: "×"; cursor: pointer; } /* lightb...
...ox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-
color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status comment html living standardthe definition of ':target' in that specification.
Resizing background images with background-size - CSS: Cascading Style Sheets
html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid;
color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background.
... html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid;
color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
... html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid;
color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
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.
Styling Columns - CSS: Cascading Style Sheets
the anonymous boxes that make up your columns can’t be targeted in any way, meaning it isn’t possible to change a box's background
color or have one column larger than the others.
... column rules the specification defines column-rule-width, column-rule-style and column-rule-
color, providing a shorthand column-rule.
... in this next example i have created a 5px dotted rule with a
color of rebeccapurple, using the longhand values.
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.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete 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 <div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>
color-dodge</option> <option>
color-burn...
...</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>
color</option> <option>luminosity</option> </select> #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: screen; } document.getelementbyid("select").onchange = function(event) { document.getelementbyid("div").style.backgroundblendmode = document.getelementbyid("select").selectedoptions[0].innerhtml; } console.log(document.getelementbyid('div')); specifications specification status comment compositing and blend...
background-clip - CSS: Cascading Style Sheets
if the element has no background-image or background-
color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise, the border masks the difference.
...see "the backgrounds of special elements." note: for documents whose root element is an html element: if the computed value of background-image on the root element is none and its background-
color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first html <body> child element.
...er-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text;
color: rgba(0,0,0,.2); } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-clip' in that specification.
clear - CSS: Cascading Style Sheets
suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-
color: black;
color: #fff; width: 20%; } .red { float: left; margin: 0; background-
color: pink; width:20%; } p { width: 50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="right">this paragraph clears right.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-
color: black;
color: #fff; width:20%; } .red { float: right; margin: 0; background-
color: pink; width:20%; } p { width: 50%; } clear: both html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="both">this paragraph clears both.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0; background-
color: black;
color: #fff; width:20%; } .red { float: right; margin: 0; background-
color: pink; width:20%; } p { width: 45%; } specifications specification status comment css logical properties and values level 1the definition of 'float and clear' in that specification.
<easing-function> - CSS: Cascading Style Sheets
for example, a
color component greater than 255 or smaller than 0 will be clipped to the closest allowed value (255 and 0, respectively).
...ease-out</option> <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > div { position: relative; height: 100px; } div > div { position: absolute; width: 50px; height: 50px; background-
color: blue; background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = docu...
...*/ cubic-bezier(0, 1.1, 0.8, 4) these cubic bézier curves definitions are invalid: /* though the animated output type may be a
color, bézier curves work w/ numerical ratios.*/ cubic-bezier(0.1, red, 1.0, green) /* abscissas must be in the [0, 1] range or the curve is not a function of time.
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.
... </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.
...ns in the sky</dd> </div> <div> <dt>t</dt> <dd>ted leo & 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; white-space: nowrap; } dd + dd { border-top: 1px solid #ccc; } result specifications specification status comment ...
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.
...e 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 supported features of webvtt is the ability to style the individual subtitles (something called text cues) via css extensions.
...there are only a handful of css properties that can be applied to a text cue:
color opacity visibility text-decoration text-shadow background shorthand properties outline shorthand properties font shorthand properties, including line-height white-space for example, to change the text colour of the text track cues you can write: ::cue {
color:#ccc; } if the webvtt file uses voice spans, which allow cues to be defined as having a particular "voice": 0 00:00:00.000 --> 00:00:12.000 <v test>[test]</v> then this specific 'voice' will be stylable like so: ::cue(v[voice='test']) {
color:#fff; background:#0095dd; } note: some of the styling of cues with...
Rich-Text Editing in Mozilla - Developer guides
figure 2 : first example html: <body contenteditable="true" onload="load()"> javascript: function load(){ window.document.designmode = "on"; } example 2 the second example is a simple rich text editing page, where text can be bolded/italicized/underlined, new links can be added and the
color of text changed.
... the example page consists of an iframe, which will be the rich editing area, as well as elements for basic editing commands such as bold/italics/text
color.
...s[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc('fore
color',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>-
color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('back
color',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- backgro...
HTML attribute: required - HTML: Hypertext Markup Language
the attribute is not supported or relevant to range and
color, as both have default values.
... note
color and range don't support required, but type
color defaults to #00000, and range defaults to the midpoint between min and max -- with min and max defaulting to 0 and 100 respectively in most browsers if not declared -- so always has a value.
...ensure the messaging is multi-faceted, such as thru text,
color, markings, and attribute, so that all users understand the requirements whether they have
color blindness, cognitive differences, or are using a screen reader.
<col> - HTML: Hypertext Markup Language
bg
color the background
color of the table.
...one of the predefined
color kewords can also be used.
... to achieve a similar effect, use the css background-
color property.
<input type="tel"> - HTML: Hypertext Markup Language
/div> <div> <button>submit</button> </div> </form> and let's include the following css to highlight valid entries with a checkmark and invalid entries with a cross: div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px;
color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px;
color: #009000; } the output looks like this: pattern validation if you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the pattern attribute, which takes as its value a regular expression that entered values have to match.
...telno" type="tel" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px;
color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px;
color: #009000; } notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px;
color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px;
color: #009000; } specifications specification status comment html living standardthe definition of '<input type="tel">' in that specification.
<style>: The Style Information element - HTML: Hypertext Markup Language
examples a simple stylesheet in the following example, we apply a very simple stylesheet to a document: <!doctype html> <html> <head> <style> p {
color: red; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> multiple style elements in this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity.
... <!doctype html> <html> <head> <style> p {
color: white; background-
color: blue; padding: 5px; border: 1px solid black; } </style> <style> p {
color: blue; background-
color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> including a media query in this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width.
... <!doctype html> <html> <head> <style> p {
color: white; background-
color: blue; padding: 5px; border: 1px solid black; } </style> <style media="all and (max-width: 500px)"> p {
color: blue; background-
color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> technical summary content categories metadata content, and if the scoped attribute is present: flow content.
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
bg
color this attribute defines the background
color of each cell of the column.
...one of the sixteen predefined
color strings may be used: black = "#000000" green = "#008000" silver = "#c0c0c0" lime = "#00ff00" gray = "#808080" olive = "#808000" white = "#ffffff" yellow = "#ffff00" maroon = "#800000" navy = "#000080" red = "#ff0000" blue = "#0000ff" purple = "#800080" teal = "#008080" fuchsia = "#ff00ff" aqua = "#00ffff" usage note: do not use this attribute, as it is non-standard and only implemented some versions of microsoft internet explorer: the <tfoot> element should be st...
...to give a similar effect to the bg
color attribute, use the css property background-
color, on the relevant <td> or <th> elements.
<th> - HTML: Hypertext Markup Language
bg
color this attribute defines the background
color of each cell in a column.
...this attribute may be used with one of sixteen predefined
color strings: black = "#000000" green = "#008000" silver = "#c0c0c0" lime = "#00ff00" gray = "#808080" olive = "#808000" white = "#ffffff" yellow = "#ffff00" maroon = "#800000" navy = "#000080" red = "#ff0000" blue = "#0000ff" purple = "#800080" teal = "#008080" fuchsia = "#ff00ff" aqua = "#00ffff" note: do not use this attribute, as it is non-standard and only implemented in some versions of microsoft internet explorer: the <th> elemen...
...to create a similar effect use the background-
color property in css instead.
<thead>: The Table Head element - HTML: Hypertext Markup Language
bg
color this attribute defines the background
color of each cell of the column.
...one of the sixteen predefined
color strings may be used: black = "#000000" green = "#008000" silver = "#c0c0c0" lime = "#00ff00" gray = "#808080" olive = "#808000" white = "#ffffff" yellow = "#ffff00" maroon = "#800000" navy = "#000080" red = "#ff0000" blue = "#0000ff" purple = "#800080" teal = "#008080" fuchsia = "#ff00ff" aqua = "#00ffff" usage note: do not use this attribute, as it is non-standard and only implemented in some versions of microsoft internet explorer: the <thead> element should be...
...to give a similar effect to the bg
color attribute, use the css property background-
color, on the relevant <td> or <th> elements.
Inline elements - HTML: Hypertext Markup Language
first, some simple css that we'll be using: .highlight { background-
color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its background has been
colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text.
...because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-
color:#ee3; } block-level now let's change that <span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been
colored to display both the beginning and end of the block-level element's influence.</div> the css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-...
...
color:#ee3; } rendered using the same css as before, we get: see the difference?
Object.prototype.toString() - JavaScript
the following code defines the dog object type and creates thedog, an object of type dog: function dog(name, breed,
color, sex) { this.name = name; this.breed = breed; this.
color =
color; this.sex = sex; } thedog = new dog('gabby', 'lab', 'chocolate', 'female'); if you call the tostring() method on this custom object, it returns the default value inherited from object: thedog.tostring(); // returns [object object] the following code creates and assigns dogtostring() to override the default tostring() m...
...this function generates a string containing the name, breed,
color, and sex of the object, in the form "property = value;".
... dog.prototype.tostring = function dogtostring() { const ret = 'dog ' + this.name + ' is a ' + this.sex + ' ' + this.
color + ' ' + this.breed; return ret; } or, using es6 template strings: dog.prototype.tostring = function dogtostring() { return `dog ${this.name} is a ${this.sex} ${this.
color} ${this.breed}`; } with the preceding code in place, any time thedog is used in a string context, javascript automatically calls the dogtostring() function, which returns the following string: "dog gabby is a female chocolate lab" using tostring() to detect object class tostring() can be used with every object and (by default) allows you to get its class.
new operator - JavaScript
for example, the statement car1.
color = "black" adds a property
color to car1, and assigns it a value of "black".
...the following code adds a
color property with value "original
color" to all objects of type car, and then overwrites that value with the string "black" only in the instance object car1.
... function car() {} car1 = new car(); car2 = new car(); console.log(car1.
color); // undefined car.prototype.
color = 'original
color'; console.log(car1.
color); // 'original
color' car1.
color = 'black'; console.log(car1.
color); // 'black' console.log(object.getprototypeof(car1).
color); // 'original
color' console.log(object.getprototypeof(car2).
color); // 'original
color' console.log(car1.
color); // 'black' console.log(car2.
color); // 'original
color' if you didn't write the new operator, the constructor function would be invoked like any regular function, without creating an object.
<mspace> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
... note that some common attributes like math
color, mathvariant or dir have no effect on <mspace>.
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
example: masking for example, you can make a gradient mask for html content using svg and css code similar to the following, inside your html document: <svg height="0"> <mask id="mask-1"> <lineargradient id="gradient-1" y2="1"> <stop stop-
color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </lineargradient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> </mask> </svg> .target { mask: url(#mask-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specifie...
...for example, to apply a blur effect, you might use: <svg height="0"> <filter id="f1"> <fegaussianblur stddeviation="3"/> </filter> </svg> you could also apply a
color matrix: <svg height="0"> <filter id="f2"> <fe
colormatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> and some more filters: <svg height="0"> <filter id="f3"> <feconvolvematrix filterres="100 100" style="
color-interpo...
...lation-filters:srgb" order="3" kernelmatrix="0 -1 0 -1 4 -1 0 -1 0" preservealpha="true"/> </filter> <filter id="f4"> <fespecularlighting surfacescale="5" specularconstant="1" specularexponent="10" lighting-
color="white"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> </filter> <filter id="f5"> <fe
colormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 1 0 0 0" style="
color-interpolation-filters:srgb"/> </filter> </svg> the five filters are applied using the following css: p.target { filter:url(#f3); } p.target:hover { filter:url(#f5); } b.target { filter:url(#f1); } b.target:hover { filter:url(#f4); } pre.target { filter:url(#f2); } ...
cx - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-
color="white" /> <stop offset="100%" stop-
color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cx="0" id="mygradient000"> <stop offset="0%" stop-
color="gold" /> <stop offset="50%" stop-
color="green" /> <stop offset="100%" stop-
color="white" /> </radialgradient> <radialgradient cx="50%" id="mygradient050"> <stop offset="0%" stop-
color="gold" /> <stop offset="50%" stop-
color="green" /> <stop offset="100%" stop-
color="white" /> </radialgradient> <radialgradient cx="100%" id="mygradient100"> ...
... <stop offset="0%" stop-
color="gold" /> <stop offset="50%" stop-
color="green" /> <stop offset="100%" stop-
color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cx' in that specification.
cy - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-
color="white" /> <stop offset="100%" stop-
color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cy="0" id="mygradient000"> <stop offset="0%" stop-
color="gold" /> <stop offset="50%" stop-
color="green" /> <stop offset="100%" stop-
color="white" /> </radialgradient> <radialgradient cy="50%" id="mygradient050"> <stop offset="0%" stop-
color="gold" /> <stop offset="50%" stop-
color="green" /> <stop offset="100%" stop-
color="white" /> </radialgradient> <radialgradient cy="100%" id="mygradient100"> ...
... <stop offset="0%" stop-
color="gold" /> <stop offset="50%" stop-
color="green" /> <stop offset="100%" stop-
color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cy' in that specification.
divisor - SVG: Scalable Vector Graphics
the divisor attribute specifies the value by which the resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the input image
color value is divided to yield the destination
color value.
... a divisor that is the sum of all the matrix values tends to have an evening effect on the overall
color intensity of the result.
.../www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_
color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_
color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <number> default value sum of all values in kernelmatrix or 1 if sum is 0 anima...
in - SVG: Scalable Vector Graphics
fourteen elements are using this attribute: <feblend>, <fe
colormatrix>, <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 sour...
...--> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_
color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
... --> <feimage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_
color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
local - SVG: Scalable Vector Graphics
the local attribute specifies the unique id for a locally stored
color profile as specified by international
color consortium.
... if both the xlink:href and the local attribute are specified, then the local file system is searched for the
color profile first, and, if not available locally, then the resource identified by the xlink:href attribute is used.
... only one element is using this attribute: <
color-profile> usage notes value <string> default value none animatable no <string> this value specifies the unique id for a locally stored
color profile as specified by international
color consortium.
preserveAlpha - SVG: Scalable Vector Graphics
> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_
color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_
color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes default value false value true | false animatable yes true this value in...
...dicates that the convolution will only apply to the
color channels.
... in this case, the filter will temporarily unpremultiply the
color component values and apply the kernel.
tableValues - SVG: Scalable Vector Graphics
the tablevalues attribute defines a list of numbers defining a lookup table of values for a for a
color component transfer function.
... four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-
color="#ff0000" /> <stop offset="0.5" stop-
color="#00ff00" /> <stop offset="1" stop-
color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 1"/> <fefuncg type="table" tablevalues="0 1"/> <fefuncb type="table" tablevalues="0 1"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" ...
...ght="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer animatable yes <list-of-numbers> this value holds a comma- and/or space-separated list of <number>s, which define a lookup table for the
color component transfer function.
<a> - SVG: Scalable Vector Graphics
see warning below */ svg|a:link, svg|a:visited { cursor: pointer; } svg|a text, text svg|a { fill: blue; /* even for text, svg uses fill over
color */ text-decoration: underline; } svg|a:hover, svg|a:active { outline: dotted 1px blue; } since this element shares its tag name with html's <a> element, selecting a with css or queryselector may apply to the wrong kind of element.
... ; default value: none; animatable: yes global attributes core attributes most notably: id, lang, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant, aria-a...
...a-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<a>' in that specification.
<cursor> - SVG: Scalable Vector Graphics
if a different image format is used, this format should support the definition of a transparency mask (two options: provide an explicit alpha channel or use a particular pixel
color to indicate transparency).
...typically, the other pixel information (e.g., the r, g and b channels) defines the
colors for those parts of the cursor which are not masked out.
... note that cursors usually contain at least two
colors so that the cursor can be visible over most backgrounds.
<feComposite> - SVG: Scalable Vector Graphics
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="backgroundimage" operator="in" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="outflood" 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="out" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="atopflood" 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="atop" result="comp...
..."/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="xorflood" 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="xor" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="arithmeticflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-
color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" result="comp" operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> <fem...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
the basic convolution formula which is applied to each
color value for a given pixel is:
colorx,y = ( sum i=0 to [ordery-1] { sum j=0 to [orderx-1] { source x-targetx+j, y-targety+i * kernelmatrixorderx-j-1, ordery-i-1 } } ) / divisor + bias * alphax,y where "orderx" and "ordery" represent the x and y values for the ‘order’ attribute, "targetx" ...
... to illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose
color values for one of the
color channels are as follows: 0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255 and you define a 3-by-3 convolution kernel as follows: 1 2 3 4 5 6 7 8 9 let's focus on the
color value at the second row and second column of the image (source pixel value is 120).
... assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘targetx’ and ‘targety’, then resulting
color value will be: (9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in order kernelmatrix divisor bias targetx targety edgemode kernelunitlength preservealpha dom interface this element implements the svgfeconvolvematrixelement interface.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
the resulting image, which is an rgba opaque image, depends on the light
color, light position and surface geometry of the input bump map.
..."140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied --> <text text-anchor="middle" x="60" y="22">no light</text> <circle cx="60" cy="80" r="50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="middle" x="170" y="22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" lighting-
color="white"> <fepointlight x="150" y="60" z="20" /> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightme1)" /> <!-- the light source is a fedistantlight element --> <text text-anchor="middle" x="280" y="22">fedistan...
...tlight</text> <filter id="lightme2"> <fediffuselighting in="sourcegraphic" result="light" lighting-
color="white"> <fedistantlight azimuth="240" elevation="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightme2)" /> <!-- the light source is a fespotlight source --> <text text-anchor="middle" x="390" y="22">fespotlight</text> <filter id="lightme3"> <fediffuselighting in="sourcegraphic" result="light" lighting-
color="white"> <fespotlight x="360" y="5" z="30" limitingconeangle="20" pointsatx="390" pointsaty="80" pointsatz="0"/> </fediffuselighting> ...
<feDropShadow> - SVG: Scalable Vector Graphics
the drop shadow
color and opacity can be changed by using the flood-
color and flood-opacity presentation attributes.
... html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="shadow"> <fedropshadow dx="0.2" dy="0.4" stddeviation="0.2"/> </filter> <filter id="shadow2"> <fedropshadow dx="0" dy="0" stddeviation="0.5" flood-
color="cyan"/> </filter> <filter id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviation="0" flood-
color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);"/> <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);"/> <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset of ...
... value type: <number>; default value: 2; animatable: yes global attributes core attributes most notably: id styling attributes class, style filter primitive attributes height, in, result, x, y, width presentation attributes most notably: flood-
color, flood-opacity usage notes categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <script>, <set> specifications specification status comment filter effects module level 1the definition of '<fedropshadow>' in that specification.
<feSpecularLighting> - SVG: Scalable Vector Graphics
the resulting image is an rgba image based on the light
color.
...the resulting image depends on the light
color, light position and surface geometry of the input bump map.
... example <svg height="200" width="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id = "filter"> <fespecularlighting result="specout" specularexponent="20" lighting-
color="#bbbbbb"> <fepointlight x="50" y="75" z="200"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> </svg> result specifications specification status comment filter effects module level 1the defini...
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
color profile module
color-profile not implemented (bug 427713).
... fe
colormatrix implemented.
... animation module animate implemented set implemented animatemotion implemented animatetransform implemented animate
color not implemented (bug 436296).
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
svgexternalresourcesrequired removed never implemented svgelement.viewportelement and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921456) svg
color and svgicc
color removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778654) svgelement.tabindex implemented (bug 778654) document.activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() imp...
...int value implementation status unknown display of zero-length subpaths depends on stroke-linecap attribute implementation status unknown markers on all shapes implementation status unknown <marker> element display defined in ua style sheet implementation status unknown only single paints for fills and strokes implementation status unknown
color change notes
color managed images implementation status unknown rgba, hsl, lab, icc named
colors and device
colors implementation status unknown
color-profile removed implementation status unknown <
color-profile> removed implementation status unknown paint servers change notes <solid
color> (renamed s...
...olid
color) not implemented (bug 1177032) fr attribute for <radialgradient> not implemented (bug 1240275) <mesh> (renamed meshgradient) not implemented (bug 1238882) <meshrow> (renamed meshrow) not implemented (bug 1238882) <meshpatch> (renamed meshpatch) not implemented (bug 1238882) <hatch> not implemented (bug 1239147) <hatchpath> (renamed hatchpath) not implemented (bug 1239147) display behavior of paint server elements defined by ua style sheet not implemented clipping, masking, and compositing change notes overflow respected on outermost <svg> elements inline in html implementation status unknown interactivity change notes tabindex attr...
Clipping and masking - SVG: Scalable Vector Graphics
color, opacity and such have no effect as long as they don't let parts vanish completely.
... <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="gradient"> <stop offset="0" stop-
color="black" /> <stop offset="1" stop-
color="white" /> </lineargradient> <mask id="mask"> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="green" /> <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#mask)" /> </svg> you see a green-filled rect at the lowest layer and on top a red-filled rect.
...the yellow stroke is set to 50% opacity, which leads effectively to a double-
color stroke.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
source here is the source to the example: <html> <head> <title>xtech svg demo</title> <style> stop.begin { stop-
color:yellow; } stop.end { stop-
color:green; } body.invalid stop.end { stop-
color:red; } #err { display:none; } body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <...
...the gradient
color stops have their
colors set by css.
... when the user enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a style rule changes the gradient end-stop
color to red.
Using custom elements - Web Components
this is a trivial example that simply generates a
colored square of a fixed size on the page.
...nd <style> elements to the shadow root: const shadow = this.attachshadow({mode: 'open'}); const div = document.createelement('div'); const style = document.createelement('style'); shadow.appendchild(style); shadow.appendchild(div); the key function in this example is updatestyle() — this takes an element, gets its shadow root, finds its <style> element, and adds width, height, and background-
color to the style.
... function updatestyle(elem) { const shadow = elem.shadowroot; shadow.queryselector('style').textcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; background-
color: ${elem.getattribute('c')}; } `; } the actual updates are all handled by the life cycle callbacks, which are placed inside the class definition as methods.
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
the following document passes the two parameters "
color" and "size" to the stylesheet "style.xsl".
... <?xslt-param name="
color" value="blue"?> <?xslt-param name="size" select="2"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> note that these pis have no effect when transformation is done using the xsltprocessor object in javascript.
... examples set the parameter '
color' to the string 'red': <?xslt-param name="
color" value="red"?> set the parameter 'columns' to the number 2: <?xslt-param name="columns" select="2"?> set the parameter 'books' to a nodeset containing all <book> elements in the null namespace: <?xslt-param name="books" select="//book"?> set the parameter 'show-toc' to boolean true: <?xslt-param name="show-toc" select="true()"?> the sele...
panel - Archive of obsolete content
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 need to ...
simple-prefs - Archive of obsolete content
{ "type": "string", "name": "monstername", "value": "kraken", "title": "monster name" }
color displayed as a
colorpicker and stores a string in the #123456 format.
... { "type": "
color", "name": "highlight
color", "value": "#6a5acd", "title": "highlight
color" } file displayed as a "browse" button that opens a file picker and stores the full path and name of the file selected.
Forms related code snippets - Archive of obsolete content
document.attachevent("onmousedown", ondocclick) : (document.onmousedown = ondocclick); })(); </script> <style type="text/css"> table.zdp-calendar { border: 1px solid #666666; border-collapse: collapse; background-
color: #cccccc; cursor: default; font-family: verdana; font-size: 12px; } table.zdp-calendar th { border: 1px solid #666666; font-weight: bold; background-
color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666; text-align: center; } table.zdp-calendar caption { background-
color: #333333; padding: 2px; } span.zdp-current-month { display: inline-block; width: auto...
...; height: 16px; padding: 0 2px; line-height: 16px; margin: 0 auto; background-
color: #999999; border-radius: 5px; } span.zdp-increase-month, span.zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; padding: 0 2px; height: 16px; font-weight: bold; background-
color: #999999; border-radius: 5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer;
color: #000000; text-align: center; vertical-align: middle; } td.zdp-active-cell:hover { background-
color: #999999; cursor: pointer; } td.zdp-empty-cell { cursor: not-allowed; } <...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
by referring to a special style sheet within chrome://global/skin/, we can make label and button sizes, window background
color, etc, match the currently selected theme in firefox.
... figure 8: a button with an image icon attribute value icon attribute value accept close cancel print help add open remove save refresh find go-forward clear go-back yes properties no select-font apply select-
color table 2: values for the icon attribute toolbar buttons the toolbarbutton element is the element used to define toolbar buttons.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
this is a matter of personal preference, but the mac os theme seems to be designed so that the bookmarks toolbar is always the last one (it has a lighter
color than the rest).
...this is also the reason this is the only theme that still has
colorful icons for its buttons.
Tabbed browser - Archive of obsolete content
sidomwindow); 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.background
color = 'blue'; //can stylize the tab like atab.style.font
color = '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 likely ...
...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.background
color = 'blue'; //can stylize the tab like atab.style.font
color = '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, contentwindow: co...
Underscores in class and ID Names - Archive of obsolete content
the css1 specification, published in its final form in 1996, did not allow for the use of underscores in class and id names unless they were "escaped." an escaped underscore would look something like this: p.urgent\_note {
color: maroon;} this was not well supported by browsers at the time, however, and the practice has never caught on.
...a common substitute is the hyphen character (-), as in: p.urgent-note {
color: maroon;} many authors choose instead to use camel case names such as this: p.urgentnote {
color: maroon;} if the initial-cap approach is used, however, remember that class and id names are also supposed to be case-sensitive.
Creating reusable content with CSS and XBL - Archive of obsolete content
dren/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "button") ]]></field> <method name="dodemo"> <body><![cdata[ this.square.style.background
color = "#cf4" this.square.style.marginleft = "20em" this.button.setattribute("disabled", "true") settimeout(this.cleardemo, 2000, this) ]]></body> </method> <method name="cleardemo"> <parameter name="me"/> <body><![cdata[ me.square.style.background
color = "transparent" me.square.style.marginleft = "0" me.button.removeattrib...
... challenges change the xbl file so that the square doubles in width when it changes
color, instead of jumping to the right.
XUL user interfaces - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: /*** xul demonstration ***/ window { -moz-box-align: start; background-
color: -moz-dialog; font: -moz-dialog; padding: 2em; } .head-1 { font-weight: bold; font-size: 200%; padding-left: 5px; } /* the group box */ .demo-group { padding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { margin-bottom: .5em; } .demo-group .buttons { -moz-box-pack: end; } /* the day-of-week l...
...abels */ .day { margin-left: 1em; } .day[disabled] {
color: #777; } .day:first-child { margin-left: 4px; } /* the left column labels */ .text-prompt { padding-top: .25em; } /* the date input box */ #date-text { max-width: 8em; } /* the status bar */ statusbar { width: 100%; border: 1px inset -moz-dialog; margin: 4px; padding: 0px 4px; } #status { padding: 4px; } #status[warning] {
color: red; } make a new text file, script7.js.
Case Sensitivity in class and id Names - Archive of obsolete content
for example, there might be this css: p.warning {
color: red; background: yellow;} ...coupled with this html: <p class="warning">warning!</p> in netscape 6, the paragraph in question will have neither red text nor a yellow background.
...for example, you would not want to do something like: .urgent {
color: purple;} .urgent {
color: yellow;} even though these are technically two distinct class names, browsers other than netscape 6 will treat them as though they are the same thing.
Finding the file to modify - Archive of obsolete content
the structure layer identifies the widgets (menus, buttons, etc.) and their position in the ui relative to each other, the style layer defines how the widgets look (size,
color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals.
...it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers,
color pickers).
Clipboard Test - Archive of obsolete content
<style></style> <style>.description{ display: block; font-size: 13pt;
color: #444; font-style: italic; margin-bottom: 7px; } .method>.returns{display: none;} .method>.name>.param:not(:last-child):after{content: ","; padding-right: .5em; } .method>.name>.param:not(:last-child):after{content: ","; padding-right: .5em; } .method>.name>.param>.name:after{content: " as "; font-weight: normal; } .method>.params{display: block;
color:#555;} .method>.params>.param{display: block; margin-bottom:5px;} .method>.params>.param>.name{font-weight:bold; margin-right:.5em; min-width:80px; display:inline-block;} .method>.params>.param>.description{display:inline-block; width:300px; vertical-align:top;margin-right:30px} .method>.params>.param>.type{display:inline-block; width:100px; vertical-align:top;font-weight...
...:bold;} .method>.params>.param>.type:before{content: "type ";
color: #888; font-weight:normal;} .method>.params>.param>.default{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.default:before{content: "default ";
color: #888;font-weight:normal;} ]]></style> clipboard jetpack's clipboard support api provides a standardized way for features to access the clipboard.
Monitoring downloads - Archive of obsolete content
string(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.createelement('listcell'); cell.setattribute("label", speed.tofixed(1) + "kb/sec"); cell.setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "
color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "
color:green"; break; case 2: statusstr = "failed"; style = "
color:red"; break; case 3:...
... statusstr = "canceled"; style = "
color:purple"; break; case 4: statusstr = "paused"; style = "
color:blue"; break; case 5: statusstr = "queued"; style = "
color:teal"; break; case 6: statusstr = "blocked"; style = "
color:white background-
color:red"; break; case 7: statusstr = "scanning"; style = "
color:silver"; break; default: statusstr = "unknown"; break; } cell.setattribute("label", statusstr); cell.setattribute("style", style); row.appendchild(cell); loglist.appendchild(row); } } finally { statement.reset(); dbc...
Supporting private browsing mode - Archive of obsolete content
for example, if you want to use a different background
color for the url bar when in private browsing mode, you could do the following: [browsingmode=private] #urlbar { -moz-appearance: none; background: #eee } similarly, if you want to theme the firefox button in firefox 4 differently when private browsing mode is permanent: #main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive) { -moz-border-left-
colors: rgba(255,25...
...5,255,.5) rgba(43,8,65,.9); -moz-border-bottom-
colors: rgba(255,255,255,.5) rgba(43,8,65,.9); -moz-border-right-
colors: rgba(255,255,255,.5) rgba(43,8,65,.9); } this snippet is pulled directly from the standard skin; you can customize as you see fit.
Tamarin Build System Documentation - Archive of obsolete content
the page is divided into the phase table at the top and the waterfall table below the phase table shows all phases at the top of the page, each slave is shown as a box with a red,green, or yellow
color: red means failed, green passed, and yellow has warnings.
...o show the build slaves from the most recent phase run or click on an individual box to display the test result below the phase table the waterfall displays each buildstep and result the left side contains the time column and the user/revision link to represent the revision triggering a build, mouse over the user to see the revision and submission notes each buildstep run on a slave is a box with
color indicating status, red is failed, green passed, yellow has warnings click the stdio link to see the output click on the build yellow box at the bottom of a set of buildsteps to see the result of all of the buildsteps for a build and the time each buildstep took scroll down to see previous builds triggered at the bottom of the page click on the [next page] link to display more previous builds ...
width - Archive of obsolete content
<hbox> <hbox width="40" style="background-
color: red;"> <label value="40"/> </hbox> </hbox> however, in the following example, despite that the preferred width of the box is 30 pixels, the displayed size of the box will be larger to accommodate the larger label.
... <vbox width="30" align="start" style="background-
color: red;"> <label value="vbox xul width 10px red"/> </vbox> note: when used on treecol objects, the width attribute can be used to allow a tree to be scrolled horizontally if the column widths add up to be wider than the containing object.
Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebar
color afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed col...
...entnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebar
color increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate ...
Adding Style Sheets - Archive of obsolete content
the style sheet contains information such as the fonts,
colors, borders, and size of elements.
...the style sheet applies various fonts,
colors and borders to make the elements look more suitable.
Modifying the Default Skin - Archive of obsolete content
a skin is described using css, allowing you to define the
colors, borders and images used to draw elements.
... menubar { background-
color: red; } if you open any firefox window after making this change, the menu bars will be red.
More Wizards - Archive of obsolete content
for example, here are a set of wizard pages (the inner content has been omitted): <wizardpage pageid="type" next="font"> <wizardpage pageid="font" next="done"> <wizardpage pageid="
color" next="done"> <wizardpage pageid="done"> the wizard always starts at the first page, which in this case has the page id type.
... a script will adjust the next attributes as necessary to go to the page with the page id
color when needed.
Popup Menus - Archive of obsolete content
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.
Stacks and Decks - Archive of obsolete content
for example, you could create an effect similar to the text-shadow property with the following: example 1 : source view <stack> <description value="shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/> <description value="shadowed" style="
color: red; font-size: 15pt;"/> </stack> both description elements create text with a size of 15 points.
...shadowing is very useful for creating the disabled appearance of buttons: example 2 : source view <stack style="background-
color: #c0c0c0"> <description value="disabled" style="
color: white; padding-left: 1px; padding-top: 1px;"/> <description value="disabled" style="
color: grey;"/> </stack> this arrangement of text and shadow
colors creates the disabled look under some platforms.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll
colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale scrip...
...itlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox
colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
caption see groupbox checkbox <checkbox label='<!--label text-->' />
colorpicker <
colorpicker type="button" palettename="standard" />
colorpicker appears to read
color values out if the
colorpicker can get focus in the first place.
... <label control='listid'><!--label text--></label> <listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </listbox> <label control='listid2' value='<!--list label-->' /> <listbox rows="5" id='listid2'> <listcols> <listcol/> <listcol/> <listcol/> </listcols> <listhead> <listheader label="name" /> <listheader label="sex" /> <listheader label="
color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws.
dialog - Archive of obsolete content
buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selected="true"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebar
color type:
color string specify background
color of the window's titlebar when it is active (foreground).
... inactivetitlebar
color type:
color string specify background
color of the window's titlebar when it is inactive (background).
prefwindow - Archive of obsolete content
<preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes activetitlebar
color type:
color string specify background
color of the window's titlebar when it is active (foreground).
... inactivetitlebar
color type:
color string specify background
color of the window's titlebar when it is inactive (background).
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" height="...
tree - Archive of obsolete content
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; } i...
...*/ 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;} treechildren:...
window - Archive of obsolete content
activetitlebar
color type:
color string specify background
color of the window's titlebar when it is active (foreground).
... inactivetitlebar
color type:
color string specify background
color of the window's titlebar when it is inactive (background).
wizard - Archive of obsolete content
elementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> attributes activetitlebar
color type:
color string specify background
color of the window's titlebar when it is active (foreground).
... inactivetitlebar
color type:
color string specify background
color of the window's titlebar when it is inactive (background).
Adobe Flash - Archive of obsolete content
below that, you can change the
color of the entire html page by clicking a
colored tab.
... the background
color of the entire page is toggled by clicking on a
color within the flash animation.
Theme changes in Firefox 3.5 - Archive of obsolete content
to do this only for 3.5 use a css selector that is only supported in 3.5, like so: window:not([active="true"]) menubar>menu:nth-child(1n) {
color:threedshadow } private browsing: show private browsing state by
coloring the url bar, or by adding an icon to the toolbox/tabbrowserbar.
... native hyperlink
color: use -moz-nativehyperlinktext, to select the computer's native hyperlink
color.
::-ms-browse - Archive of obsolete content
-ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style bor...
...der-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-browse example html <label>select image: <input type="file"></label> css input[type="file"]::-ms-browse {
color: red; background-
color: yellow; } result output example specifications not part of any specification.
::-ms-expand - Archive of obsolete content
-ms-high-contrast-adjust background-clip background-
color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius b...
...order-top-right-radius border-top-style border-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-clear specifications not part of any specification.
::-ms-fill-lower - Archive of obsolete content
background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style bor...
...der-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width specifications not part of any specification.
::-ms-fill-upper - Archive of obsolete content
background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style bor...
...der-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-fill-upper specifications not part of any specification.
::-ms-fill - Archive of obsolete content
animation-name background-clip, background-
color, background-image, background-origin, background-repeat, and background-size border border-radius box-shadow box-sizing
color cursor display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-
color, outline-style, and outline-width padding transform and transform-origin visibility s...
...yntax ::-ms-fill example html <progress value="10" max="50"></progress> css progress::-ms-fill { background-
color: orange; } result a progress bar using this style might look something like this: ...
::-ms-reveal - Archive of obsolete content
background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style bor...
...der-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-reveal specifications not part of any specification.
::-ms-thumb - Archive of obsolete content
background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style bor...
...der-top-width box-shadow box-sizing
color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-thumb specifications not part of any specification.
::-ms-value - Archive of obsolete content
background-clip background-
color background-image background-origin background-repeat background-size border-bottom-
color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-
color border-left-style border-left-width border-right-
color border-right-style border-right-width border-top-
color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing
color c...
...ursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-
color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-value example input::-ms-value {
color: lime; font-style: italic; } to disable the default styling: select::-ms-value { background-
color: transparent;
color: inherit; } specifications not part of any specification.
Property (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
a css property is a characteristic (like
color) whose associated value defines one aspect of how the browser should display the element.
... here's an example of a css rule: /* "div" is a selector indicating that all the div elements */ /* in the document will be styled by that rule */ div { /* the property "
color" with the value "black" indicates */ /* that the text will have the
color black */
color: black; /* the property "background-
color" with the value "white" indicates */ /* that the background
color of the elements will be white */ background-
color: white; } learn more general knowledge learn css technical reference the css reference on mdn the css working group current work ...
What are browser developer tools? - Learn web development
this will give you a window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter): alert('hello!'); document.queryselector('html').style.background
color = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get.
... alert('hello!); document.cheeseselector('html').style.background
color = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); you'll start to see the kind of errors that the browser returns.
Basic native form controls - Learn web development
it is used for creating most types of form widgets including single line text fields, time and date controls, controls without text input like checkboxes, radio buttons, and
color pickers, and buttons.
...the value text for this attribute is also the fallback value if the value you specify for the type attribute is unknown by the browser (for example if you specify type="
color" and the browser doesn't support native
color pickers).
Client-side form validation - Learn web development
input data is invalid: body { font: 1em sans-serif; width: 200px; padding: 0; margin : 0 auto; } p * { display: block; } input[type=email]{ -webkit-appearance: none; appearance: none; width: 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; box-sizing: border-box; } /* this is our style for the invalid fields */ input:invalid{ border-
color: #900; background-
color: #fdd; } input:focus:invalid { outline: none; } /* this is the style of our error messages */ .error { width : 100%; padding: 0; font-size: 80%;
color: white; background-
color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .error.active { padding: 0.3em; } now lets look at the javascript that implements the custom error validation.
... body { font: 1em sans-serif; width: 200px; padding: 0; margin : 0 auto; } form { max-width: 200px; } p * { display: block; } input.mail { -webkit-appearance: none; width: 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; box-sizing: border-box; } /* this is our style for the invalid fields */ input.invalid{ border-
color: #900; background-
color: #fdd; } input:focus.invalid { outline: none; } /* this is the style of our error messages */ .error { width : 100%; padding: 0; font-size: 80%;
color: white; background-
color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .error.active { padding: 0.3em; } the big changes are in the javascript code, which needs to do much more heavy ...
Example 2 - Learn web development
: 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); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; o...
...verflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000;
color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> ...
Example 3 - Learn web development
: 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); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; o...
...verflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000;
color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { v...
Example 4 - Learn web development
: 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); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; o...
...verflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000;
color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { v...
Example 5 - Learn web development
: 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); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; o...
...verflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000;
color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { v...
Other form controls - Learn web development
and browsers that support <datalist>s and <input type="
color"> should display a customized palette of
colors as the default, while still making the full
color palette available.
... all browsers that implement the <meter> element use those values to change the
color of the meter bar: if the current value is in the prefered part of the range, the bar is green.
Styling web forms - Learn web development
these include: <input type="
color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>.
...e with css; you can do whatever you want, even using pseudo-elements: button { padding : 5px; font : bold .6em sans-serif; border : 2px solid #333; border-radius: 5px; background : none; cursor : pointer; transform : rotate(-1.5deg); } button:after { content : " >>>"; } button:hover, button:focus { outline : none; background : #000;
color : #fff; } the final result and voila!
Test your skills: Advanced styling - Learn web development
first of all, try giving the search box a consistent width, height, padding, and border
color across browsers.
...this can be anything you like, but you probably want to set a width and height (of somewhere between about 18 and 24 pixels), and a subtle border and/or background
color.
The web and web standards - Learn web development
cascading style sheets (css) is a rule-based language used to apply styles to your html, for example setting text and background
colors, adding borders, animating things, or laying out a page in a certain way.
... as a simple example, the following code would turn our html paragraph red: p {
color: red; } in the house analogy, css is like the paint, wallpaper, carpets and paintings you'd use to make the house look nice.
Advanced text formatting - Learn web development
a light brown
color.</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.getelementbyi...
...tion.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<dl>\n <dt>bacon</dt>\n <dd>the glue that binds the world together.</dd>\n <dt>eggs</dt>\n <dd>the glue that binds the cake together.</dd>\n <dt>coffee</dt>\n <dd>the drink that gets the world running in the morning.</dd>\n <dd>a light brown
color.</dd>\n</dl>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blu...
Document and website structure - Learn web development
we use
color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?
... 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.
Getting started with HTML - Learn web development
l">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>this is my page</p> </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; } h1 {
color: blue; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } img { max-width: 100%; } 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 c...
...(for example, changing fonts or
colors, or altering the page layout) html and css work well together, as you will soon discover.
Client-side storage - Learn web development
showing a user's choice of custom widgets,
color scheme, or font size).
...this is useful when you just need to store some simple data, like the user's name, whether they are logged in, what
color to use for the background of the screen, etc.
Third-party APIs - Learn web development
add the following code to your example, again inside window.onload: l.marker([53.480759, -2.242631], { icon: l.mapquest.icons.marker({ primary
color: '#22407f', secondary
color: '#3b5998', shadow: true, size: 'md', symbol: 'a' }) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array containing the coordinates at which to display the marker, and an options object containing an icon property that defines the icon to display at that point.
... the icon is defined using an mapquest.icons.marker() method, which as you can see contains information such as
color and size of marker.
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 new name'); para.textcont...
Getting started with Svelte - Learn web development
you should see something like the following: <script> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 {
color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created.
... the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 {
color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element.
Accessibility API cross-reference
n/a n/a canvas n/a <canvas> (accessible alternative richtext content may be nested inside, but the canvas itself is presentational) a dialog for picking a
color n/a
color_chooser
color_chooser n/a <input type=
color> a dialog for picking a file n/a file_chooser file_chooser n/a invoked with <input type=file> no explanation given n/a n/a invalid n/a contains accessible info, but its role is not known n/a n/a unknown ...
...ltiline=true can select more than one of the children multiselectable multiselectable multi_selectable aria-multiselectable=true currently off-screen offscreengrouping n/a n/a n/a indicates that every pixel is painted within the object's rectangular region n/a opaque opaque n/a bg
color (deprecated in favor of css background-
color) object is currently pressed down.
Lightweight themes
ultrawide monitors can run to 3440px wide, to look good on these monitors, ensure the left of the image fades to a solid
color.
... select text and tab
colors — you can choose the tab ("background")
color and foreground text
color that work best with your header image.
mach
if you don't use mach, you have to find another solution for the following problems: discovering what commands or make targets are available (mach exposes everything through mach help while inside "mozilla-central" , else you'll just get a cryptic error message) making more sense out of command output (mach offers terminal
colorization and structured logging) getting productive tools in the hands of others (mach "advertises" tools to people through mach help (unless it actually just gives you a cryptic error message) - in the former case, people don't need to discover your tool from a blog post, wiki page, or word of mouth).
... mach will
colorize terminal output (on terminals that support it - typically most terminals except on windows) mach will scan build output for compiler warnings and will automatically record them to a database which can be queried with mach warnings-list and mach warnings-summary.
MathML Demo: <mspace> - space
mathml demo: <mspace> - space the background
color of <mspace> elements has been set to yellow for easier viewing.
...vascript:upwidth();" title="increase width">+</a>/ <a class="control" href="javascript:downwidth();" title="decrease width">-</a> depth <a class="control" href="javascript:updepth();" title="increase depth">+</a>/ <a class="control" href="javascript:downdepth();" title="decrease depth">-</a> <math display="block"> <mstyle displaystyle="true"> <msqrt> <mrow> <mn>3</mn> <mspace style="background-
color: yellow" id="thespace" height="0.1ex" depth="0.1ex" width="0.1em" /> <mi>x</mi> </mrow> </msqrt> </mstyle> </math> </p> javascript content var height=0; var width=0; var depth=0; function upheight() { height++; document.getelementbyid("thespace").setattribute("height",height+".1ex"); } function downheight() { height--; document.getelementbyid("thespace").setattribute("height",height...
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.
... type:string with rgb hex value as
color code default value:#ef0fff (blue) [1] exists by default: no application support: before gecko 1.7 status: active; last updated 2015-09-21 introduction: pushed to trunk on 2000-04-13 bugs: bug 34704 [1]: nsxplookandfeel.cpp, line 628, retrieved 2015-09-21 ...
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.
... type:string with rgb hex value as
color code default value:#ffffff (white) [1] exists by default: no application support: before gecko 1.7 status: active; last updated 2015-09-21 introduction: pushed to trunk on 2000-04-13 bugs: bug 34704 [1]: nsxplookandfeel.cpp, line 635, retrieved 2015-09-21 ...
Preference reference
er 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.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by
coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and ...
...ch popup notifications invoked by nsialertsservice are sliding in.ui.spellcheckerunderlineui.spellcheckerunderline holds the colour which is used to underline words not recognized by the spellchecker.ui.spellcheckerunderlinestyleui.spellcheckerunderlinestyle holds the style which is used to underline words not recognized by the spellchecker.ui.textselectbackgroundui.textselectbackground saves the
color in which the background of a text selection in the user interface or in content will be styled.ui.textselectforegroundui.textselectforeground saves the
color in which the text of a text selection in the user interface or the content will be styled.ui.tooltipdelayui.tooltipdelay stores the delay in milliseconds between the mouse stopping over an element and the appearing of its tooltip.view_source...
NSS Code Coverage
colors green: 70-100% of blocks tested.
... these numbers doesn't count blocks in files which are not tested (marked with red
color), because we don't know number of blocks there.
Hacking Tips
each root has the form "0xabcd1234 <
color> <description>", where <
color> is the
color of the given gc thing (b for black, g for gray, w for white) and <description> is a string.
...a gc thing starts with a line giving its address, its
color, and the thing kind (object, function, whatever).
JS_DefinePropertyWithTinyId
for example, if a property named "
color" is defined with tiny id 10, then the javascript expressions obj[10] and obj.
color will both result in int_to_jsval(10) being passed to jsclass.getproperty as the id parameter.
... per-property getters and setters do not suffer from this confusion: in the above example, obj.
color would cause the javascript engine to call the getter for the
color property, but obj[10] wouldn't.
Web Replay
the button will be
colored blue when the tab is being recorded.
... timeline the timeline is shown above the developer tools and provides several features to help with navigating the recording: the timeline changes
color depending on whether the tab is currently recording (red) or replaying (blue).
Animated PNG graphics
valid values for <code>blend_op are: value constant description 0 apng_blend_op_source all
color components of the frame, including alpha, overwrite the current contents of the frame's output buffer region.
...it utilizes the same bit depth,
color type, compression method, filter method, interlace method, and palette (if any) as the default image.
inIDOMUtils
: @mozilla.org/inspector/dom-utils;1 as a service: var inidomutils = components.classes["@mozilla.org/inspector/dom-utils;1"] .getservice(components.interfaces.inidomutils); method overview void addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval
colornametorgb(in domstring a
colorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long getcontentstate(in nsidomelement aelement); void getcsspropertynames([optional] in unsigned long aflags, [optional] out unsigned long acount, [retval, array, size_...
...udoclasslock(in nsidomelement aelement, in domstring apseudoclass); boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ainput); void removepseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); astring rgbto
colorname(in octet ar, in octet ag, in octet ab); bool selectormatcheselement(in nsidomelement aelement, in nsidomcssstylerule arule, in unsigned long aselectorindex, [optional] in domstring apseudo); void setcontentstate(in nsidomelement aelement, in unsigned long long astate); constants constant value description exclude_shorthands (1<<0) ...
mozIRegistry
some are for illustrative purposes (the lighter-
colored boxes near the top of the picture).
...these components (indicated by the darker-
colored boxes) are the services you'll be using.
nsIAccessibleRole
it is used for xul:
colorpicker.
... role_
color_chooser 68 represents a specialized dialog that lets the user choose a
color.
nsIScreen
n); method overview void getavailrect(out long left, out long top, out long width, out long height); void getrect(out long left, out long top, out long width, out long height); void lockminimumbrightness(in unsigned long brightness); void unlockminimumbrightness(in unsigned long brightness); attributes attribute type description
colordepth long the screen's
color depth; this is the number of bits used to represent a
color.
... gecko 1.9.2 note starting in gecko 1.9.2, gecko running on microsoft windows reports 24 bits per pixel instead of 32 bits per pixel on 8-bits per
color component displays, since this is typically what the caller is actually looking for.
Creating a gloda message query
so if we had a "
color" constraint such as query.
color("red", "green", "blue") would mean any of red, green, or blue is okay.
... so if we had a "shape" constraint such as query.shape("square") and we combined it with the previous
color constraint it would match a red square, a green square, or a blue square.
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
flex container options the flex container section of the layout view looks like this: there are two settings you can change in the flex container section: you can control the
color of the overlay by clicking on the small circle next to the selector.
... this will toggle a
color picker so you can select a different
color for the overlay.
Work with animations - Firefox Developer Tools
if you click the icon, it enlarges and changes to
color, and the name of the browser appears.
... the img#icon animation: animated the filter and transform properties, to scale the icon and
color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar.
Shader Editor - Firefox Developer Tools
with webgl you provide 2 programs called shaders which are called at the appropriate stages of the opengl rendering pipeline: a vertex shader, which computes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the
color for each pixel to be drawn.
...for example, you can modify the
colors: the editor highlights syntax errors in your code: if you hover over the cross shown next to a line containing an error, you'll see more details about the problem: ...
Background Tasks API - Web APIs
css content body { font-family: "open sans", "lucida grande", "arial", sans-serif; font-size: 16px; } .logbox { margin-top: 16px; width: 400px; height:500px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; } .logheader { margin: 0; padding: 0 6px 4px; height: 22px; background-
color: lightblue; border-bottom: 1px solid black; border-radius: 6px 6px 0 0; } #log { font: 12px "courier", monospace; padding: 6px; overflow: auto; overflow-y: scroll; width: 388px; height: 460px; } .container { width: 400px; padding: 6px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; display: block; overflow: auto; } .label { display: ...
...inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; margin-top: 0;
color: white; background-
color: darkgreen; } #progress { width: 100%; padding-top: 6px; } javascript content now that the document structure is defined, construct the javascript code that will do the work.
CSS.registerProperty() - Web APIs
examples the following will register a custom property, --my-
color, using registerproperty(), as a
color, give it a default value, and have it not inherit its value: window.css.registerproperty({ name: '--my-
color', syntax: '<
color>', inherits: false, initialvalue: '#c0ffee', }); in this example, the custom property --my-
color has been registered using the syntax <
color> .
... .registered { --my-
color: #c0ffee; background-image: linear-gradient(to right, #fff, var(--my-
color)); transition: --my-
color 1s ease-in-out; } .registered:hover, .registered:focus { --my-
color: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">bac...
CSSStyleSheet.insertRule() - Web APIs
mystyle.insertrule('#blanc {
color: white }', 0); function to add a stylesheet rule /** * add a stylesheet rule to the document (it may be better practice * to dynamically change classes, so style information can be kept in * genuine stylesheets and avoid adding extra elements to the dom).
... * @param {array} rules accepts an array of json-encoded declarations * @example addstylesheetrules([ ['h2', // also accepts a second argument as an array of arrays instead ['
color', 'red'], ['background-
color', 'green', true] // 'true' for !important rules ], ['.myclass', ['background-
color', 'yellow'] ] ]); */ function addstylesheetrules (rules) { var styleel = document.createelement('style'); // append <style> element to <head> document.head.appendchild(styleel); // grab style element's sheet var stylesheet = styleel.sheet; for (var i = 0; i < rules.length; i++) { var j = 1, ...
CanvasGradient - Web APIs
canvasgradient.add
colorstop() adds a new stop, defined by an offset and a
color, to the gradient.
... if the offset is not between 0 and 1, inclusive, an index_size_err is raised; if the
color can't be parsed as a css <
color>, a syntax_err is raised.
CanvasRenderingContext2D.createLinearGradient() - Web APIs
three
color stops between the gradient's start and end points are then created.
... html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a linear gradient // the start gradient point is at x=20, y=0 // the end gradient point is at x=220, y=0 var gradient = ctx.createlineargradient(20,0, 220,0); // add three
color stops gradient.add
colorstop(0, 'green'); gradient.add
colorstop(.5, 'cyan'); gradient.add
colorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 200, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createlineargradient' in that specificati...
CanvasRenderingContext2D.createRadialGradient() - Web APIs
three
color stops between the gradient's two circles are then created.
... html <canvas id="canvas" width="200" height="200"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // create a radial gradient // the inner circle is at x=110, y=90, with radius=30 // the outer circle is at x=100, y=100, with radius=70 var gradient = ctx.createradialgradient(110,90,30, 100,100,70); // add three
color stops gradient.add
colorstop(0, 'pink'); gradient.add
colorstop(.9, 'white'); gradient.add
colorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createradialgradient' in that specificati...
CanvasRenderingContext2D.filter - Web APIs
a drop shadow is effectively a blurred, offset version of the drawing's alpha mask drawn in a particular
color, composited below the drawing.
... <
color>: see <
color> values for possible keywords and notations.
CanvasRenderingContext2D.miterLimit - Web APIs
for more info about miters, see applying styles and
color in the canvas tutorial.
... examples using the miterlimit property see the chapter applying styles and
color in the canvas tutorial for more information.
console - Web APIs
styling console output you can use the %c directive to apply a css style to console output: console.log("this is %cmy stylish message", "
color: yellow; font-style: italic; background-
color: blue;padding: 2px"); the text before the directive will not be affected, but the text after the directive will be styled using the css declarations in the parameter.
... border and its longhand equivalents border-radius box-decoration-break box-shadow clear and float
color cursor display font and its longhand equivalents line-height margin outline and its longhand equivalents padding text-* properties such as text-transform white-space word-spacing and word-break writing-mode note: the console message behaves like an inline element by default.
DataTransfer.clearData() - Web APIs
</span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source {
color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; ...
... event.preventdefault(); // get data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var element = document.getelementbyid(_data); // append drag source element to event's target element event.target.appendchild(element); // change css styles and displayed text element.style.csstext = 'border: 1px solid black;display: block;
color: red'; element.innerhtml = "i'm in the drop zone!"; } }) specifications specification status comment html living standardthe definition of 'datatransfer.cleardata()' in that specification.
DataTransfer.getData() - Web APIs
"allowdrop(event)"> <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"></div> css content #div1, #div2 { width:100px; height:50px; padding:10px; border:1px solid #aaaaaa; } javascript content function allowdrop(allowdropevent) { allowdropevent.target.style.
color = 'blue'; allowdropevent.preventdefault(); } function drag(dragevent) { dragevent.datatransfer.setdata("text", dragevent.target.id); dragevent.target.style.
color = 'green'; } function drop(dropevent) { dropevent.preventdefault(); var data = dropevent.datatransfer.getdata("text"); dropevent.target.appendchild(document.getelementbyid(data)); document.getelementbyid("dr...
...ag").style.
color = 'black'; } result specifications specification status comment html living standardthe definition of 'getdata()' in that specification.
EXT_sRGB - Web APIs
the constants in webgl2 are: gl.srgb, gl.srgb8, gl.srgb8_alpha8 and gl.framebuffer_attachment_
color_encoding.
... ext.framebuffer_attachment_
color_encoding_ext returns the framebuffer
color encoding (gl.linear or ext.srgb_ext).
EffectTiming.fill - Web APIs
</div> css content .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0px; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; padding: 10px; position: relative; text-align: center; align-self: center;
color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other css involved in this example, the part that really matters for our purposes is the css that styles the "...
...that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position: relative; background-
color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and
color information, as well as indicate that the box should be centered both vertically and horizontally inside its container.
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.
Element.getElementsByClassName() - Web APIs
however the following code will not work as one might expect because "matches" will change as soon as any "
colorbox" class is removed.
... var matches = element.getelementsbyclassname('
colorbox'); for (var i=0; i<matches.length; i++) { matches[i].classlist.remove('
colorbox'); matches.item(i).classlist.add('hueframe'); } instead, use another method, such as: var matches = element.getelementsbyclassname('
colorbox'); while (matches.length > 0) { matches.item(0).classlist.add('hueframe'); matches[0].classlist.remove('
colorbox'); } this code finds descendant elements with the "
colorbox" class, adds the class "hueframe", by calling item(0), then removes "
colorbox" (using array notation).
Element: mouseover event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.
color = "purple"; // reset the
color after a short delay settimeout(function() { event.target.style.
color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.
color = "orange"; // reset the
color after a short d...
...elay settimeout(function() { event.target.style.
color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseover' in that specification.
GlobalEventHandlers.onanimationcancel - Web APIs
d="text">box</div> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center;
color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box th...
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-
color: #2233ff; display: flex; justify-content: center; animation: 5s ease-in-out 0s infinite alternate both slidebox; } the animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner.
GlobalEventHandlers.onauxclick - Web APIs
the former changes the
color of the button background, while the latter changes the button foreground (text)
color.
... var button = document.queryselector('button'); var html = document.queryselector('html'); function random(number) { return math.floor(math.random() * number); } button.onclick = function() { var rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; button.style.background
color = rndcol; }; button.onauxclick = function() { var rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; button.style.
color = rndcol; } note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when either of the non-left mouse buttons are clicked.
GlobalEventHandlers.onclick - Web APIs
examples detecting clicks this example simply changes the
color of an element when it's clicked upon.
... html <div id="demo">click here</div> javascript document.getelementbyid('demo').onclick = function changecontent() { document.getelementbyid('demo').innerhtml = "help me"; document.getelementbyid('demo').style = "
color: red"; } result getting the coordinates of clicks this example displays the coordinates at which the most recent mouse button click occurred.
GlobalEventHandlers.ondragend - Web APIs
<!doctype html> <html lang=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");...
... 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.
GlobalEventHandlers.ondragenter - Web APIs
<!doctype html> <html lang=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");...
... 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.
GlobalEventHandlers.ondragexit - Web APIs
<!doctype html> <html lang=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");...
... 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.
HTMLFontElement - Web APIs
the html font element <font> defines the font size, font face and
color of text.
... htmlfontelement.
color is a domstring that reflects the
color html attribute, containing either a named
color or a
color specified in the hexadecimal #rrggbb format.
HTMLHRElement - Web APIs
htmlhrelement.
color is a domstring representing the name of the
color of the rule.
... living standard the
color property has been added, as an obsolete property, to increase compatibility with the existing web.
HTMLTableElement - Web APIs
htmltableelement.bg
color is a domstring containing the background
color of the cells.
... it reflects the obsolete bg
color attribute.
HTMLTableRowElement - Web APIs
htmltablerowelement.bg
color is a domstring containing the background
color of the cells.
... it reflects the obsolete bg
color attribute.
Using IndexedDB - Web APIs
arch-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 get goo...
MediaStreamConstraints.audio - Web APIs
s="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.src...
...s="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancella...
MediaStreamConstraints.video - Web APIs
s="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.s...
...s="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 1...
MediaTrackConstraints - Web APIs
colortemperature a constraindouble (a double-precision integer) specifying a desired
color temperature in degrees kelvin.
... saturation a constraindouble (a double-precision integer) specifying the degree of
color intensity.
Media Capabilities API - Web APIs
the api also provides abilities to access display property information such as supported
color gamut, dynamic range abilities, and real-time feedback about the playback.
... screen
colorgamut will describe the
color gamut, or the range of
color, the screen can display (not currently supported anywhere).
OVR_multiview2 - Web APIs
const gl = document.createelement('canvas').getcontext( 'webgl2', { antialias: false } ); const ext = gl.getextension('ovr_multiview2'); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.draw_framebuffer, fb); const
colortex = gl.createtexture(); gl.bindtexture(gl.texture_2d_array,
colortex); gl.texstorage3d(gl.texture_2d_array, 1, gl.rgba8, 512, 512, 2); ext.framebuffertexturemultiviewovr(gl.draw_framebuffer, gl.
color_attachment0,
colortex, 0, 0, 2); const depthstenciltex = gl.createtexture(); gl.bindtexture(gl.texture_2d_array, depthstenciltex); gl.texstorage3d(gl.texture_2d_array, 1, gl.depth32f_stencil8, 512,...
... 512, 2); ext.framebuffertexturemultiviewovr(gl.draw_framebuffer, gl.depth_stencil_attachment, depthstenciltex, 0, 0, 2); gl.drawelements(...); // draw will be broadcasted to the layers of
colortex and depthstenciltex.
SVGRenderingIntent - Web APIs
rendering_intent_relative_
colorimetric 3 corresponds to the value relative-
colorimetric.
... rendering_intent_absolute_
colorimetric 5 corresponds to the value absolute-
colorimetric.
Screen - Web APIs
screen.
colordepth returns the
color depth of the screen.
... void seteventhandler(domstring type, eventhandler handler) eventhandler geteventhandler(domstring type) example if (screen.pixeldepth < 8) { // use low-
color version of page } else { // use regular,
colorful page } specification specification status comment css object model (cssom) view modulethe definition of 'screen' in that specification.
Using the Screen Capture API - Web APIs
generally, the browser will provide an image which obscures the hidden portion of the logical display surface in some way, such as by blurring or replacing with a
color or pattern.
... #video { border: 1px solid #999; width: 98%; max-width: 860px; } .error {
color: red; } .warn {
color: orange; } .info {
color: darkgreen; } result the final product looks like this.
SpeechGrammarList.SpeechGrammarList() - Web APIs
examples in our simple speech
color changer example, we create a new speechrecognition object instance using the speechrecognition() constructor, create a new speechgrammarlist, add our grammar string to it using the speechgrammarlist.addfromstring method, and set it to be the grammar that will be recognised by the speechrecognition instance using the speechrecognition.grammars property.
... var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; specifications specification status comment web speech apithe definition of 'speechgrammarlist' in that specification.
SpeechGrammarList - Web APIs
examples in our simple speech
color changer example, we create a new speechrecognition object instance using the speechrecognition() constructor, create a new speechgrammarlist, add our grammar string to it using the speechgrammarlist.addfromstring method, and set it to be the grammar that will be recognised by the speechrecognition instance using the speechrecognition.grammars property.
... var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; specifications specification status comment web speech apithe definition of 'speechgrammarlist()' in that specification.
SpeechRecognition() - Web APIs
examples this code is excerpted from our speech
color changer example.
... var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition.abort() - Web APIs
examples var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgram...
...marlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a
color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment web speech apithe definition of 'abort()' in that specification.
SpeechRecognition.continuous - Web APIs
true means continuous, and false means not continuous (single result each time.) examples this code is excerpted from our speech
color changer example.
... var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition.grammars - Web APIs
examples this code is excerpted from our speech
color changer example.
... var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition.interimResults - Web APIs
examples this code is excerpted from our speech
color changer example.
... var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition.lang - Web APIs
examples this code is excerpted from our speech
color changer example.
... var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition.maxAlternatives - Web APIs
examples this code is excerpted from our speech
color changer example.
... var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition.onresult - Web APIs
}; examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'onresult' in that specification.
SpeechRecognition: result event - Web APIs
the result event of the web speech api is fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app bubbles no cancelable no interface speechrecognitionevent event handler property onresult examples this code is excerpted from our speech
color changer example.
... you can use the result event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('result', function(event) { var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; }); or use the onresult event handler property: recognition.onresult = function(event) { var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition.start() - Web APIs
examples var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognit...
...ionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a
color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment web speech apithe definition of 'start()' in that specification.
SpeechRecognition.stop() - Web APIs
examples var grammar = '#jsgf v1.0; grammar
colors; public <
color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecogniti...
...onlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a
color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment web speech apithe definition of 'stop()' in that specification.
SpeechRecognitionAlternative.confidence - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; console.log('confidence: ' + event.results[0][0].confidence); } specifications specification status comment web speech apithe definition of 'confidence' in that specification.
SpeechRecognitionAlternative.transcript - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'transcript' in that specification.
SpeechRecognitionAlternative - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'speechrecognitionalternative' in that specification.
SpeechRecognitionEvent.results - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'results' in that specification.
SpeechRecognitionEvent - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'speechrecognitionevent' in that specification.
SpeechRecognitionResult.item() - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'item()' in that specification.
SpeechRecognitionResult.length - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; console.log(event.results[0].length); } specifications specification status comment web speech apithe definition of 'length' in that specification.
SpeechRecognitionResult - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'speechrecognitionresult' in that specification.
SpeechRecognitionResultList.item() - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'item()' in that specification.
SpeechRecognitionResultList.length - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; console.log(event.results.length); } specifications specification status comment web speech apithe definition of 'length' in that specification.
SpeechRecognitionResultList - Web APIs
examples this code is excerpted from our speech
color changer example.
... // we then return the transcript property of the speechrecognitionalternative object var
color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' +
color + '.'; bg.style.background
color =
color; } specifications specification status comment web speech apithe definition of 'speechrecognitionresultlist' in that specification.
Storage.removeItem() - Web APIs
function populatestorage() { localstorage.setitem('bg
color', 'red'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'mycat.png'); localstorage.removeitem('image'); } we can do the same for the session storage.
... function populatestorage() { sessionstorage.setitem('bg
color', 'red'); sessionstorage.setitem('font', 'helvetica'); sessionstorage.setitem('image', 'mycat.png'); sessionstorage.removeitem('image'); } note: to see this used within a real world example, see our web storage demo.
StylePropertyMapReadOnly.get() - Web APIs
let's start by creating a link inside a paragraph in our html, and adding a definition list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of css, including a custom property and an inhertable property: p { font-weight: bold; } a { --colour: red;
color: var(--colour); } we use the element's computedstylemap() to return a stylepropertymapreadonly object.
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const stylemap = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-
color', '
color', '--colour']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode...
WebGL2RenderingContext.blitFramebuffer() - Web APIs
possible values: gl.
color_buffer_bit gl.depth_buffer_bit gl.stencil_buffer_bit filter a glenum specifying the interpolation to be applied if the image is stretched.
... examples gl.blitframebuffer(0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height, gl.
color_buffer_bit, gl.nearest); specifications specification status comment webgl 2.0the definition of 'blitframebuffer' in that specification.
WebGL2RenderingContext.clearBuffer[fiuv]() - Web APIs
possible values are: gl.
color:
color buffer.
... examples gl.clearbufferiv(gl.
color, 0, new int32array([r, g, b, a])); gl.clearbufferuiv(gl.
color, 0, new uint32array([r, g, b, a])); gl.clearbufferfv(gl.
color, 0, new float32array([r, g, b, a])); gl.clearbufferfv(gl.
color, 0, [0.0, 0.0, 0.0, 0.0]); gl.clearbufferfi(gl.depth_stencil, 0, 1.0, 0); specifications specification status comment webgl 2.0the definition of 'clearbuffer[fiuv]()' in that specificat...
WebGLRenderingContext.blendEquationSeparate() - Web APIs
syntax void gl.blendequationseparate(modergb, modealpha); parameters modergb a glenum specifying how the red, green and blue components of source and destination
colors are combined.
... modealpha a glenum specifying how the alpha component (transparency) of source and destination
colors are combined.
WebGLRenderingContext.createBuffer() - Web APIs
the webglrenderingcontext.createbuffer() method of the webgl api creates and initializes a webglbuffer storing data such as vertices or
colors.
... return value a webglbuffer storing data such as vertices or
colors.
WebGLRenderingContext.disable() - Web APIs
possible values: constant description gl.blend deactivates blending of the computed fragment
color values.
... gl.dither deactivates dithering of
color components before they get written to the
color buffer.
WebGLRenderingContext.enable() - Web APIs
possible values: constant description gl.blend activates blending of the computed fragment
color values.
... gl.dither activates dithering of
color components before they get written to the
color buffer.
WebGLRenderingContext.getExtension() - Web APIs
the current extensions are: angle_instanced_arrays ext_blend_minmax ext_
color_buffer_float ext_
color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic khr_parallel_shader_compile oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float oes_texture_float_linear oes_texture_half_float...
... oes_texture_half_float_linear oes_vertex_array_object ovr_multiview2 webgl_
color_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.getextension' in that specification.
WebGLRenderingContext.getSupportedExtensions() - Web APIs
the current extensions are: angle_instanced_arrays ext_blend_minmax ext_
color_buffer_float ext_
color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic khr_parallel_shader_compile oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float oes_texture_float_linear oes_texture_half_float...
... oes_texture_half_float_linear oes_vertex_array_object ovr_multiview2 webgl_
color_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.getsupportedextensions' in that specification.
WebGLRenderingContext.isEnabled() - Web APIs
possible values: constant description gl.blend blending of the computed fragment
color values.
... gl.dither dithering of
color components before they get written to the
color buffer.
WebGLRenderingContext.readPixels() - Web APIs
the webglrenderingcontext.readpixels() method of the webgl api reads a block of pixels from a specified rectangle of the current
color framebuffer into an arraybufferview object.
... gl.rgba: red, green, blue and alpha components are read from the
color buffer.
WebGLRenderingContext.renderbufferStorage() - Web APIs
6ui gl.rg16i gl.rg32ui gl.rg32i gl.rgb8 gl.rgba8 gl.srgb8_alpha8 (also available as an extension for webgl 1, see below) gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a2ui gl.rgba16ui gl.rgba16i gl.rgba32i gl.rgba32ui gl.depth_component24 gl.depth_component32f gl.depth24_stencil8 gl.depth32f_stencil8 when using the webgl_
color_buffer_float extension: ext.rgba32f_ext: rgba 32-bit floating-point type.
... when using a webgl 2 context and the ext_
color_buffer_float extension: gl.r16f gl.rg16f gl.rgba16f gl.r32f gl.rg32f gl.rgba32f gl.r11f_g11f_b10f width a glsizei specifying the width of the renderbuffer in pixels.
Boilerplate 1 - Web APIs
]</button> <canvas>your browser does not seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-
color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document...
....queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clear
color(0.0, 0.0, 0.0, 1.0); gl.clear(gl.
color_buffer_bit); return gl; } the source code of this example is also available on github.
Canvas size and WebGL - Web APIs
<p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-
color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") ...
..." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clear
color(1.0, 1.0, 0.0, 1.0); gl.clear(gl.
color_buffer_bit); }); }, false); the source code of this example is also available on github.
Getting started with WebGL - Web APIs
your browser or machine may not support it."); return; } // set clear
color to black, fully opaque gl.clear
color(0.0, 0.0, 0.0, 1.0); // clear the
color buffer with specified clear
color gl.clear(gl.
color_buffer_bit); } window.onload = main; the first thing we do here is obtain a reference to the canvas, assigning it to a variable named canvas.
...in this case, we set the clear
color to black, and clear the context to that
color (redrawing the canvas with the background
color).
Using WebGL extensions - Web APIs
extension list the current extensions are: angle_instanced_arrays ext_blend_minmax ext_
color_buffer_float ext_
color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic khr_parallel_shader_compile oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float oes_texture_float_linear oes_texture_half_float...
... oes_texture_half_float_linear oes_vertex_array_object ovr_multiview2 webgl_
color_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context enabling an extension before an extension can be used it has to be enabled using webglrenderingcontext.getextension().
Movement, orientation, and motion: A WebXR example - Web APIs
the fragment shader returns the
color of each vertex, interpolating as needed from the values found in the texture and applying the lighting effects.
...efspace = xrreferencespace; let pose = null; animationframerequestid = session.requestanimationframe(drawframe); adjustedrefspace = applyviewercontrols(xrreferencespace); pose = frame.getviewerpose(adjustedrefspace); if (pose) { let gllayer = session.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); logglerror("bindframebuffer"); gl.clear
color(0, 0, 0, 1.0); gl.cleardepth(1.0); // clear everything gl.clear(gl.
color_buffer_bit | gl.depth_buffer_bit); logglerror("glclear"); const deltatime = (time - lastframetime) * 0.001; // convert to seconds lastframetime = time; for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.w...
self.createImageBitmap() - Web APIs
premultiplyalpha: specifies whether the bitmap's
color channels should be premultiplied by the alpha channel.
...
colorspaceconversion: specifies whether the image should be decoded using
color space conversion.
XRWebGLLayer() - Web APIs
the options available are: alpha optional the frame buffer's
color buffer will be established with an alpha channel if the alpha boolean property is true.
... otherwise, the
color buffer will not have an alpha channel.
XRWebGLLayer.framebuffer - Web APIs
the xr compositor assumes that opaque framebuffers use
colors with premultiplied allpha, regardless of whether or not the webgl context's premultipliedalpha context attribute is set.
... the default configuration of a new framebuffer upon creating a new xrwebgllayer, its new framebuffer is initialized just like the default framebuffer for any webgl interface: the
color buffer is configured with its clear value set to the
color (0, 0, 0, 0) (meaning transparent black).
XRWebGLLayerInit.alpha - Web APIs
the alpha property is a boolean value which, if present and set to true in the xrwebgllayerinit dictionary passed into the xrwebgllayer() constructor, specifies that the new layer's
color buffer is to include an alpha channel.
... otherwise, the
color buffer won't have an alpha channel.
XRWebGLLayerInit - Web APIs
properties alpha optional the frame buffer's
color buffer will be established with an alpha channel if the alpha boolean property is true.
... otherwise, the
color buffer will not have an alpha channel.
Using the link role - Accessibility
the default purple
color for visited links).
... html <h1>role="link" example</h1> <span data-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] {
color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.target != null ?
ARIA: grid role - Accessibility
<td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> css body { margin: 2rem; font-family: "helvetica neue", sans-serif; } table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right;
color: #767676; } tbody td[role="gridcell"] {
color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-
color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'), row = 0, co...
... </td> <td role="gridcell" tabindex="-1"> 7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <!-- … additional rows … --> </tbody> </table> css table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right;
color: #767676; } tbody td[role="gridcell"] {
color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-
color: #f6f6f6; outline: 3px solid blue; } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'), row = 0, col = 0, ...
ARIA: listbox role - Accessibility
<p id="listbox1label" role="label">select a
color:</p> <div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" onclick="return listitemclick(event);" onkeydown="return listitemkeyevent(event);" onkeypress="return listitemkeyevent(event);" aria-activedescendant="listbox1-1"> <div role="option" id="listbox1-1" class="selected" aria-selected="true">green</div> <div role="option" id="listbox1-2">orange</div> ...
... <div role="option" id="listbox1-3">red</div> <div role="option" id="listbox1-4">blue</div> <div role="option" id="listbox1-5">violet</div> <div role="option" id="listbox1-6">periwinkle</div> </div> this could have more easily been handled with the native html <select> and <label> elements <label for="listbox1">select a
color:</label> <select id="listbox1"> <option selected>green</option> <option>orange</option> <option>red</option> <option>blue</option> <option>violet</option> <option>periwinkle</option> </select> more examples scrollable listbox example: single-select listbox that scrolls to reveal more options, similar to html select with size attribute greater than one.
Keyboard-navigable JavaScript widgets - Accessibility
the event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background
color).
...choose between changing the background
color via something like this.style.background
color = "gray"; or add a dotted border via this.style.border = "1px dotted invert".
-moz-context-properties - CSS: Cascading Style Sheets
width='30px' fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill/context-stroke keywords in their values, along with a fallback
color for the fill (red) which will be used in the case that the svg is loaded standalone in a top-level window (where it will have no context element to provide context values).
... note that if a
color is set directly on the svg, but then the context
color is also specified, the context
color overrides the direct
color.
::-moz-focus-inner - CSS: Cascading Style Sheets
the ::-moz-focus-inner css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and
color types of the <input> element.
... examples html <input type="submit" value="input"/> <button type="submit">button</button> css button::-moz-focus-inner, input[type="
color"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; } result specifications not part of any standard.
::-webkit-meter-optimum-value - CSS: Cascading Style Sheets
green is the default
color.
... html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-webkit-meter-bar { /* required to get rid of the default background property */ background : none; background-
color : whitesmoke; box-shadow : 0 5px 5px -5px #333 inset; } meter::-webkit-meter-optimum-value { box-shadow: 0 5px 5px -5px #999 inset; } result ...
::backdrop - CSS: Cascading Style Sheets
syntax ::backdrop examples styling the backdrop for full-screen video in this example, the backdrop style used when a video is shifted to full-screen mode is configured to be a grey-blue
color rather than the black it defaults to in most browsers.
... video::backdrop { background-
color: #448; } the resulting screen looks like this: note the dark grey-blue letterbox effect above and below where the backdrop is visible.
::cue-region - CSS: Cascading Style Sheets
::cue-region {
color: yellow; font-weight: bold; } the properties are applied to the entire set of cues as if they were a single unit.
... syntax ::cue-region | ::cue-region( <selector> ) permitted properties rules whose selectors include this element may only use the following css properties: background background-attachment background-clip background-
color background-image background-origin background-position background-repeat background-size
color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-
color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-
color text-decoration-line text-decoration-style text-decoration-...
::grammar-error - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used in a rule with ::grammar-error in its selector:
color background-
color cursor caret-
color outline and its longhands text-decoration and its associated properties text-emphasis-
color text-shadow syntax ::grammar-error examples simple document grammar check in this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.
... html <p>my friends is coming to the party tonight.</p> css ::grammar-error { text-decoration: underline red;
color: red; } result specifications specification status comment css pseudo-elements level 4the definition of '::grammar-error' in that specification.
::marker - CSS: Cascading Style Sheets
::marker {
color: blue; font-size: 1.2em; } allowable properties only certain css properties can be used in a rule with ::marker as a selector: all font properties the white-space property
color text-combine-upright, unicode-bidi and direction properties the content property all animation and transition properties the specification states that additional css properties may be supported in future.
... syntax ::marker examples html <ul> <li>peaches</li> <li>apples</li> <li>plums</li> </ul> css ul li::marker {
color: red; font-size: 1.5em; } result specifications specification status comment css pseudo-elements level 4the definition of '::marker' in that specification.
::part() - CSS: Cascading Style Sheets
x ::part( <ident>+ ) examples html <template id="tabbed-custom-element"> <style type="text/css"> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">tab 1</div> <div part="tab">tab 2</div> <div part="tab">tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element> css tabbed-custom-element::part(tab) {
color: #0c0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-
color: #0c0c0d19; border-
color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active { background-
color: #0c0c0d33; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-cust...
...om-element::part(active) {
color: #0060df; border-
color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status comment shadow partsthe definition of '::part' in that specification.
:checked - CSS: Cascading Style Sheets
for="no">no</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt3">pears</option> </select> css div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label {
color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime;
color: red; } result toggling elements with a hidden checkbox this example utilizes the :chec...
...text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-
color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-
color: #ccc; } result image gallery you can use the :checked pseudo-class to build an image gallery with full-size ...
:dir() - CSS: Cascading Style Sheets
/* selects any element with right-to-left text */ :dir(rtl) { background-
color: red; } the :dir() pseudo-class uses only the semantic value of the directionality, i.e., the one defined in the document itself.
... formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">עִבְרִית</div> </div> </div> css :dir(ltr) { background-
color: yellow; } :dir(rtl) { background-
color: powderblue; } result specifications specification status comment html living standardthe definition of ':dir(ltr)' in that specification.
:enabled - CSS: Cascading Style Sheets
/* selects any enabled <input> */ input:enabled {
color: blue; } syntax :enabled examples the following example makes the
color of text and button <input>s green when enabled, and gray when disabled.
... html <form action="url_of_form"> <label for="firstfield">first field (enabled):</label> <input type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </form> css input:enabled {
color: #2b2; } input:disabled {
color: #aaa; } result specifications specification status comment html living standardthe definition of ':enabled' in that specification.
:first-child - CSS: Cascading Style Sheets
/* selects any <p> that is the first element among its siblings */ p:first-child {
color: lime; } note: as originally defined, the selected element had to have a parent.
... syntax :first-child examples basic example html <div> <p>this text is selected!</p> <p>this text isn't selected.</p> </div> <div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </div> css p:first-child {
color: lime; background-
color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li {
color: blue; } ul li:first-child {
color: red; font-weight: bold; } result specifications specification status comment selectors level 4the definition of ':first-child' in th...
:focus-within - CSS: Cascading Style Sheets
syntax :focus-within examples in this example, the form will receive special
coloring styles when either text input receives focus.
... html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <input id="given_name" type="text"> <br> <label for="family_name">family name:</label> <input id="family_name" type="text"> </form> css form { border: 1px solid;
color: gray; padding: 4px; } form:focus-within { background: #ff8;
color: black; } input { margin: 4px; } result specifications specification status comment selectors level 4the definition of ':focus-within' in that specification.
:focus - CSS: Cascading Style Sheets
/* selects any <input> when focused */ input:focus {
color: red; } note: this pseudo-class applies only to the focused element itself.
... syntax :focus examples html <input class="red-input" value="i'll be red when focused."><br> <input class="blue-input" value="i'll be blue when focused."> css .red-input:focus { background: yellow;
color: red; } .blue-input:focus { background: yellow;
color: blue; } result accessibility concerns make sure the visual focus indicator can be seen by people with low vision.
:host() - CSS: Cascading Style Sheets
tcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) {
color: gray; }' + ':host(.footer) {
color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host(.footer) {
color : red; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document that have the footer class set on them — we've used it to give instances of the element inside the <foote...
...r> a special
color.
:hover - CSS: Cascading Style Sheets
/* selects any <a> element when "hovered" */ a:hover {
color: orange; } styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :active) that has at least equal specificity.
... syntax :hover examples basic example html <a href="#">try hovering over this link.</a> css a { background-
color: powderblue; transition: background-
color .5s; } a:hover { background-
color: gold; } result image gallery you can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail.
:in-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is inside that range */ input:in-range { background-
color: rgba(0, 255, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.
... <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-
color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-
color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment html living standardthe definition of ':in-range' in that specification.
:last-child - CSS: Cascading Style Sheets
/* selects any <p> that is the last element among its siblings */ p:last-child {
color: lime; } note: as originally defined, the selected element had to have a parent.
... syntax :last-child examples basic example html <div> <p>this text isn't selected.</p> <p>this text is selected!</p> </div> <div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </div> css p:last-child {
color: lime; background-
color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li {
color: blue; } ul li:last-child { border: 1px solid red;
color: red; } result specifications specification status comment selectors level 4the definition of ':last-child' in tha...
:not() - CSS: Cascading Style Sheets
/* selects any element that is not a paragraph */ :not(p) {
color: blue; } the :not() pseudo-class has a number of quirks, tricks, and unexpected results that you should be aware of before using it.
... examples html <p>i am a paragraph.</p> <p class="fancy">i am so very fancy!</p> <div>i am not a paragraph.</div> css .fancy { text-shadow: 2px 2px 3px gold; } /* <p> elements that are not in the class `.fancy` */ p:not(.fancy) {
color: green; } /* elements that are not <p> elements */ body :not(p) { text-decoration: underline; } /* elements that are not <div> and not <span> elements */ body :not(div):not(span) { font-weight: bold; } /* elements that are not `.crazy` or `.fancy` */ /* note that this syntax is not well supported yet.
:nth-child() - CSS: Cascading Style Sheets
/* selects the second <li> element in a list */ li:nth-child(2) {
color: lime; } /* selects every fourth element among any group of siblings */ :nth-child(4n) {
color: lime; } syntax the nth-child pseudo-class is specified with a single argument that describes a pattern for matching element indices in a list of siblings.
...span> <em>this is an `em`.</em> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> </div> css html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-
color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-child' in that specification.
:nth-last-of-type() - CSS: Cascading Style Sheets
/* selects every fourth <p> element among any group of siblings, counting backwards from the last one */ p:nth-last-of-type(4n) {
color: lime; } note: this pseudo-class is essentially the same as :nth-of-type, except it counts items backwards from the end, not forwards from the beginning.
... formal syntax :nth-last-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples html <div> <span>this is a span.</span> <span>this is another span.</span> <em>this is emphasized.</em> <span>wow, this span gets limed!!!</span> <strike>this is struck through.</strike> <span>here is one last span.</span> </div> css span:nth-last-of-type(2) { background-
color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-last-of-type' in that specification.
:nth-of-type() - CSS: Cascading Style Sheets
/* selects every fourth <p> element among any group of siblings */ p:nth-of-type(4n) {
color: lime; } syntax the nth-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements.
... formal syntax :nth-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples basic example html <div> <div>this element isn't counted.</div> <p>1st paragraph.</p> <p>2nd paragraph.</p> <div>this element isn't counted.</div> <p>3rd paragraph.</p> <p class="fancy">4th paragraph.</p> </div> css /* odd paragraphs */ p:nth-of-type(2n+1) {
color: red; } /* even paragraphs */ p:nth-of-type(2n) {
color: blue; } /* first paragraph */ p:nth-of-type(1) { font-weight: bold; } /* this has no effect, as the .fancy class is only on the 4th p element, not the 1st */ p.fancy:nth-of-type(1) { text-decoration: underline; } result specifications specification status comment selectors level 4the definition of ...
:only-child - CSS: Cascading Style Sheets
/* selects each <p>, but only if it is the */ /* only child of its parent */ p:only-child { background-
color: lime; } note: as originally defined, the selected element had to have a parent.
... syntax :only-child examples basic example html <div> <div>i am an only child.</div> </div> <div> <div>i am the 1st sibling.</div> <div>i am the 2nd sibling.</div> <div>i am the 3rd sibling, <div>but this is an only child.</div></div> </div> css div:only-child {
color: red; } div { display: inline-block; margin: 6px; outline: 1px solid; } result a list example html <ol> <li>first <ul> <li>this list has just one element.</li> </ul> </li> <li>second <ul> <li>this list has three elements.</li> <li>this list has three elements.</li> <li>this list has three elements.</li> </ul> </li> </ol> css li li { list-style-type: disc; } li:only-child {
color:...
:only-of-type - CSS: Cascading Style Sheets
/* selects each <p>, but only if it is the */ /* only <p> element inside its parent */ p:only-of-type { background-
color: lime; } note: as originally defined, the selected element had to have a parent.
... <i>i am the only `i` child.</i> <em>i am `em` #1.</em> <em>i am `em` #2.</em> </div> </main> css main :only-of-type {
color: red; } result specifications specification status comment selectors level 4the definition of ':only-of-type' in that specification.
:out-of-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is outside that range */ input:out-of-range { background-
color: rgba(255, 0, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits.
...s html <form action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-
color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-
color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment html living standardthe definition of ':out-of-range' in that specificatio...
:placeholder-shown - CSS: Cascading Style Sheets
html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-
color: teal;
color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
...name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <input id="branch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"/> </form> css input { background-
color: #e8e8e8;
color: black; } input.studentid:placeholder-shown { background-
color: yellow;
color: red; font-style: italic; } result specifications specification status comment selectors level 4the definition of ':placeholder-shown' in that specification.
:where() - CSS: Cascading Style Sheets
to make selecting the links inside them simpler, but still distinct, we could use :is() or :where(), in the following manner: html { font-family: sans-serif; font-size: 150%; } :is(section.is-styling, aside.is-styling, footer.is-styling) a {
color: red; } :where(section.where-styling, aside.where-styling, footer.where-styling) a {
color: orange; } however, what if we later want to override the
color of links in the footers using a simple selector?
... footer a {
color: blue; } this won't work for the red links, because the selectors inside :is() count towards the specificity of the overall selector, and class selectors have a higher specificity than element selectors.
@document - CSS: Cascading Style Sheets
@document url("https://www.example.com/") { h1 {
color: green; } } syntax an @document rule can specify one or more matching functions.
...video"), regexp("https:.*") { /* css rules here apply to: - the page "http://www.w3.org/" - any page whose url begins with "http://www.w3.org/style/" - any page whose url's host is "mozilla.org" or ends with ".mozilla.org" - any standalone video - any page whose url starts with "https:" */ /* make the above-mentioned pages really ugly */ body {
color: purple; background: yellow; } } specifications initially in css conditional rules module level 3, @document has been postponed to level 4.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
.runbutton { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 12px; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; font: 14px "open sans", "arial", sans-serif; } @keyframes
colorchange { 0% { background: yellow } 100% { background: blue } } .box { width: 100px; height: 100px; border: 1px solid black; } .changing { animation:
colorchange 2s; } there are two classes here.
...the animation details are included in the "changing" class, which says that the @keyframes named "
colorchange" should be used over the course of two seconds to animate the box.
Using multiple backgrounds - CSS: Cascading Style Sheets
only the last background can include a background
color.
... specifying multiple backgrounds is easy: .myclass { background: background1, background 2, ..., backgroundn; } you can do this with both the shorthand background property and the individual properties thereof except for background-
color.
CSS Logical Properties and Values - CSS: Cascading Style Sheets
reference properties for sizing block-size inline-size max-block-size max-inline-size min-block-size min-inline-size properties for margins, borders and padding border-block border-block-
color border-block-end border-block-end-
color border-block-end-style border-block-end-width border-block-start border-block-start-
color border-block-start-style border-block-start-width border-block-style border-block-width border-
color (logical keyword) border-inline border-inline-
color border-inline-end border-inline-end-
color border-inline-end-style border-inline-end-width border...
...-inline-start border-inline-start-
color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-start-start-radius border-start-end-radius border-end-start-radius border-end-end-radius border-style (logical keyword) border-width (logical keyword) margin (logical keyword) margin-block margin-block-end margin-block-start margin-inline margin-inline-end margin-inline-start padding (logical keyword) padding-block padding-block-end padding-block-start padding-inline padding-inline-end padding-inline-start properties for floating and positioning clear (inline-end and inline-start keywords) float (inline-end and inline-start keywords) inset inset-block inset-block-end inset-block-start inset-inline inset-inline-e...
Using z-index - CSS: Cascading Style Sheets
b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #5</b> <br />no positioning <br />z-index: 8; </div> css div { padding: 10px; opacity: 0.7; text-align: center; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #900; background-
color: #fdd; } #rel1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #696; background-
color: #cfc; margin: 0px 50px 0px 50px; } #rel2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #696; background-
color: #cfc; margin: 0px 50px 0px 50px; } #abs2 { z-index: 1; position: absolute; width: 150p...
...x; height: 350px; top: 10px; right: 10px; border: 1px dashed #900; background-
color: #fdd; } #sta1 { z-index: 8; height: 70px; border: 1px dashed #996; background-
color: #ffc; margin: 0px 50px 0px 50px; } ...
Stacking with floated blocks - CSS: Cascading Style Sheets
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; bac...
...kground-
color: #cfc; } #abs2 { position: absolute; width: 150px; height: 100px; top: 130px; left: 100px; border: 1px dashed #990; background-
color: #fdd; } ...
Stacking context example 1 - CSS: Cascading Style Sheets
<br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position: relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></html> css .bold { font-weight: bold; font: 12px arial; } #div1, #div3 { height: 80px; position: relative; border: 1px dashed #669966; background-
color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-
color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; bor...
...der: 1px dashed #000099; background-
color: #ddddff; text-align: left; padding-left: 10px; } result ...
Stacking context example 3 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position: relative; border: 2px outset #669966; background-
color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 75px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position: relative; border: 2px outset #990000; background-
color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; position: absolute; top: 20px; left: 110px; } div.lev3 { z-index: 1...
...0; width: 100px; position: relative; border: 2px outset #000099; background-
color: #ddddff; padding-left: 5px; } </style></head> <body> <br /> <div class="lev1"> <span class="bold">level #1</span> <div id="container1"> <div class="lev2"> <br /><span class="bold">level #2</span> <br />z-index: 1; <div id="container2"> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> ...
Stacking without the z-index property - CSS: Cascading Style Sheets
d="rel2" class="relative"> <b>div #3</b><br />position: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br />position: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static { position: static; height: 80px; background-
color: #ffc; border-
color: #996; } .absolute { position: absolute; width: 150px; height: 350px; background-
color: #fdd; border-
color: #900; opacity: 0.7; } .relative { position: relative; height: 80px; background-
color: #cfc; border-
color: #696; opacity: 0.7; } #abs1 { top: 10px; left: 10px; } #rel1 { top: 30px; margin: 0px 50px 0px 50px; } #rel2 { top: 15px; le...
...ft: 20px; margin: 0px 50px 0px 50px; } #abs2 { top: 10px; right: 10px; } #sta1 { background-
color: #ffc; margin: 0px 50px 0px 50px; } ...
The stacking context - CSS: Cascading Style Sheets
x: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> css * { margin: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px; background-
color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px dashed #900; background-
color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px dashed #996; background-
color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10p...
...x 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px dashed #009; padding-top: 125px; background-
color: #ddf; text-align: center; } result ...
CSS Properties Reference - CSS: Cascading Style Sheets
css javascript background background background-attachment backgroundattachment background-
color background
color background-image backgroundimage background-position backgroundposition background-repeat backgroundrepeat border border border-bottom borderbottom border-bottom-
color borderbottom
color border-bottom-style borderbottomstyle border-bottom-width borderbottomwidth border-
color ...
... border
color border-left borderleft border-left-
color borderleft
color border-left-style borderleftstyle border-left-width borderleftwidth border-right borderright border-right-
color borderright
color border-right-style borderrightstyle border-right-width borderrightwidth border-style borderstyle border-top bordertop border-top-
color bordertop
color border-top-style bordertopstyle border-top-width bordertopwidth border-width borderwidth clear clear clip clip
color color cursor cursor display display filter filter float cssfloat font fon...
Pseudo-classes - CSS: Cascading Style Sheets
for example, :hover can be used to change a button's
color when the user's pointer hovers over it.
... /* any button over which the user's pointer is hovering */ button:hover {
color: blue; } pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
Universal selectors - CSS: Cascading Style Sheets
/* selects all elements */ * {
color: green; } beginning with css3, the asterisk may be used in combination with namespaces: ns|* - matches all elements in namespace ns *|* - matches all elements |* - matches all elements without any declared namespace syntax * { style properties } the asterisk is optional with simple selectors.
... examples css * [lang^=en] {
color: green; } *.warning {
color: red; } *#maincontent { border: 1px solid blue; } .floating { float: left } /* automatically clear the next sibling after a floating element */ .floating + * { clear: left; } html <p class="warning"> <span lang="en-us">a green span</span> in a red paragraph.
align-content - CSS: Cascading Style Sheets
baseline<content-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-content: center; /* can be changed in the live sample */ background-
color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-
color: #8cffa0; min-height: 30px; } #item2 { background-
color: #a0c8ff; min-heig...
...ht: 50px; } #item3 { background-
color: #ffa08c; min-height: 40px; } #item4 { background-
color: #ffff8c; min-height: 60px; } #item5 { background-
color: #ff8cff; min-height: 70px; } #item6 { background-
color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">align-content: </label> <select id="valu...
align-items - CSS: Cascading Style Sheets
baseline<overflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-items: center; /* can be changed in the live sample */ background-
color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-
color: #8cffa0; min-height: 30px; } #item2 { background-
color: #a0c8ff; min-heig...
...ht: 50px; } #item3 { background-
color: #ffa08c; min-height: 40px; } #item4 { background-
color: #ffff8c; min-height: 60px; } #item5 { background-
color: #ff8cff; min-height: 70px; } #item6 { background-
color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">align-items: </label> <select id="values"...
animation-timing-function - CSS: Cascading Style Sheets
"easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-
color: black; border: 1px solid red;
color: white; } 100% { width: 90vw; min-width: 24em; background-
color: magenta;
color: yellow; border: 1px solid orange; } } .ease { animation-timing-function: ease; } .easein { animation-timing-function: ease-in; } .easeout { animation-timing-function: ease-out; } .easeinout { animation-timing-functi...
...one</div> <div class="start">start</div> <div class="end">end</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-
color: black; border: 1px solid red;
color: white; } 100% { width: 90vw; min-width: 24em; background-
color: magenta;
color: yellow; border: 1px solid orange; } } .jump-start { animation-timing-function: steps(5, jump-start); } .jump-end { animation-timing-function: steps(5, jump-end); } .jump-none { animation-timing-function: steps(5, jump-...
animation - CSS: Cascading Style Sheets
%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-
color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s ...
...ansform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cylon eye <div class="view_port"> <div class="polling_message"> listening for dispatches </div> <div class="cylon_eye"></div> </div> .polling_message {
color: white; float: left; margin-right: 2%; } .view_port { background-
color: black; height: 25px; width: 100%; overflow: hidden; } .cylon_eye { background-
color: red; background-image: linear-gradient(to right, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .9) 75%);
color: white; height: 100%; width: 20%; -webkit-animation: 4s linear 0s infini...
backface-visibility - CSS: Cascading Style Sheets
neric face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; 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); transform: 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; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'backface-visibility' in that specification.
border-bottom-left-radius - CSS: Cascading Style Sheets
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
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-collapse - CSS: Cascading Style Sheets
formal definition initial valueseparateapplies totable and inline-table elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax collapse | separate examples a
colorful table of browser engines html <table class="separate"> <caption><code>border-collapse: separate</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td cla...
...s="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> css .collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 5px; } table th, table td { border: solid 3px; } .fx { border-
color: orange blue; } .gk { border-
color: black red; } .ed { border-
color: blue gold; } .tr { border-
color: aqua; } .sa { border-
color: silver blue; } .wk { border-
color: gold blue; } .ch { border-
color: red yellow green blue; } .bk { border-
color: navy blue teal aqua; } .op { border-
color: red; } result specifications specification status comment css level 2 (revision ...
border-left-style - CSS: Cascading Style Sheets
<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-style: ou...
... the other left-border-related properties: border-left, border-left-
color, and border-left-width.
border-right-style - CSS: Cascading Style Sheets
<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 {border-righ...
... the other bottom-border-related properties: border-right, border-right-
color, and border-right-width.
border-top-left-radius - CSS: Cascading Style Sheets
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
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.
clip-path - CSS: Cascading Style Sheets
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; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { display: inline-block; border: 1px dotted grey; position:relative; } .container:before { content: 'margin'; 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% 25%); } .shape4 { clip-p...
display - CSS: Cascading Style Sheets
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.
...>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.value;...
gap (grid-gap) - CSS: Cascading Style Sheets
examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } #flexbox > div { border: 1px solid green; background-
color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #grid { grid-gap: 20px 5px; } #grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid...
... > div { border: 1px solid green; background-
color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css <code>gap</code> property.
image-rendering - CSS: Cascading Style Sheets
in particular, scaling algorithms that "smooth"
colors are acceptable, such as bilinear interpolation.
... crisp-edges the image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth
colors or introduce blur to the image in the process.
inherit - CSS: Cascading Style Sheets
examples exclude selected elements from a rule /* make second-level headers green */ h2 {
color: green; } /* ...but leave those in the sidebar alone so they use their parent's
color */ #sidebar h2 {
color: inherit; } in this example the h2 elements inside the sidebar might be different
colors.
... div#current {
color: blue; } ...
left - CSS: Cascading Style Sheets
top: 200px; </pre> <p>absolute position with both left and right declared</p> </div> </div> </div> css #wrap { width: 700px; margin: 0 auto; background: #5c5c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px; background-
color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; background-
color: #c1ffdb; } #example_3 { width: 600px; height: 400px; position: relative; top: 20px; left: 20px; background-
color: #ffd7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-
color:#ffc7e4; } #example_5 { ...
... position: absolute; right: 0; left: 0; top: 100px; background-
color: #d7ffc2; } result specifications specification status comment css positioned layout module level 3the definition of 'left' in that specification.
mask-type - CSS: Cascading Style Sheets
vg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-
color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8"...
... height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-
color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
max-block-size - CSS: Cascading Style Sheets
both boxes share the standard-box class, which simply establishes
coloring, padding, and their respective values of max-block-size.
... .standard-box { padding: 4px; background-
color: #abcdef;
color: #000; font: 16px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160px; min-block-size: 100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } result specifications specification status comment css logical properties and values level 1the definition of 'max-block-size' in that s...
overscroll-behavior-block - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 3000px; width: 500px; background-
color: white; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; background-
color: yellow; background-image: repeating-linear-gradi...
...ent(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-
color: rgba(255,0,0,0.5); margin: 0; width: 340px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-block' in that specification.
overscroll-behavior-inline - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 400px; width: 3000px; background-
color: white; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px; background-
color: yellow; background-image: repeating-linear-gradi...
...ent(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-
color: rgba(255,0,0,0.5); margin: 0; width: 360px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-inline' in that specification.
paint() - CSS: Cascading Style Sheets
<li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { --box
color: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --box
color: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --box
color: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defin...
...ing a box
color.
perspective-origin - CSS: Cascading Style Sheets
, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .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); tr...
...ansform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: 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 specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification.
perspective - CSS: Cascading Style Sheets
*/ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { 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); transform: 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 specifications specification status comment css transforms level 2the definition of 'perspective' in that specification.
place-items - CSS: Cascading Style Sheets
examples placing items in a flex container div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-
color: #8cffa0; min-height: 30px; } #item2 { background-
color: #a0c8ff; min-height: 50px; } #item3 { background-
color: #ffa08c; min-height: 40px; } #item4 { background-
color: #ffff8c; min-height: 60px; } #item5 { background-
color: #ff8cff; min-height: 70px; } #item6 { background-
color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { ma...
...ument.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; width: 240px; place-items: center; /* you can change this value by selecting another option in the list */ background-
color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } result specifications specification status comment css box alignment module level 3the definition of 'place-items' in that specification.
right - CSS: Cascading Style Sheets
absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { width: 100px; height: 100px; background-
color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-
color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constraints prevent it from doing so.
... html <div id="parent">parent <div id="nowidth">no width</div> <div id="width">width: 100px</div> </div> css div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px; background-
color: #ffc7e4; position: relative; } /* declare both a left and a right */ #width, #nowidth { background-
color: #c2ffd7; position: absolute; left: 0; right: 0; } /* declare a width */ #width { width: 100px; top: 60px; } result specifications specification status comment css positioned layout module level 3the definition of 'right' in that specification.
Specified value - CSS: Cascading Style Sheets
examples html <p>my specified
color is given explicitly in the css.</p> <div>the specified values of all my properties default to their initial values, because none of them are given in the css.</div> <div class="fun"> <p>the specified value of my font family is not given explicitly in the css, so it is inherited from my parent.
... however, the border is not an inheriting property.</p> </div> css .fun { border: 1px dotted pink; font-family: fantasy; } p {
color: green; } result specifications specification status comment css level 2 (revision 2)the definition of 'cascaded value' in that specification.
matrix3d() - CSS: Cascading Style Sheets
: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px;
color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0...
...</div> css html { width: 100%; } body { height: 100vh; /* centering content */ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; } .foo { width: 50%; padding: 1em;
color: white; background: #ff8c66; border: 2px dashed black; text-align: center; font-family: system-ui, sans-serif; font-size: 14px; /* setting up animation for better demonstration */ animation: motionscale 2s alternate linear infinite; } @keyframes motionscale { from { /* identity matrix is used as basis here.
rotate() - CSS: Cascading Style Sheets
s 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...
scale() - CSS: Cascading Style Sheets
find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */ background-
color: pink; } result scaling x and y dimensions separately, and translating the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .scaled { transform: scale(2, 0.5); /* equal to scalex(2) scaley(0.5) *...
.../ transform-origin: left; background-
color: pink; } result specifications specification status comment css transforms level 1the definition of 'scale()' in that specification.
scale3d() - CSS: Cascading Style Sheets
sx000sy000sz sx0000sy0000sz00001 examples without changing the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); background-
color: pink; } result translating the origin of the transformation html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); tr...
...ansform-origin: left; background-
color: pink; } result specifications specification status comment css transforms level 2the definition of 'scale3d()' in that specification.
translate3d() - CSS: Cascading Style Sheets
100tx010ty001tz0001 examples using a single axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-
color: skyblue; } .moved { /* equivalent to perspective(500px) translatex(10px) */ transform: perspective(500px) translate3d(10px, 0, 0px); background-
color: pink; } result combining z-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-
color: skyblue; } .moved { transform: perspecti...
...ve(500px) translate3d(10px, 0, 100px); background-
color: pink; } result specifications specification status comment css transforms level 2the definition of 'translate3d()' in that specification.
transition-timing-function - CSS: Cascading Style Sheets
cubic-bezier examples <div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-
color: black; border: 1px solid red;
color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-
color: magenta;
color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[c...
...ep examples <div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> <div class="jump-none">jump-none</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-
color: black; border: 1px solid red;
color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-
color: magenta;
color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[cla...
unset - CSS: Cascading Style Sheets
examples
color html <p>this text is red.</p> <div class="foo"> <p>this text is also red.</p> </div> <div class="bar"> <p>this text is green (default inherited value).</p> </div> css .foo {
color: blue; } .bar {
color: green; } p {
color: red; } .bar p {
color: unset; } result border html <p>this text has a red border.</p> <div> <p>this text has a red border.</p> </div> <div class="bar...
..."> <p>this text has a black border (initial default, not inherited).</p> </div> css div { border: 1px solid green; } p { border: 1px solid red; } .bar p { border-
color: unset; } result specifications specification status comment css cascading and inheritance level 4the definition of 'unset' in that specification.
Block formatting context - Developer guides
t">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 float...
... 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; pa...
<button>: The Button element - HTML: Hypertext Markup Language
color contrast ratio is determined by comparing the luminosity of the button text and background
color values compared to the background the button is placed on.
...(large text is defined as 18.66px and bold or larger, or 24px or larger.) webaim:
color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 clicking and focus whether clicking on a <button> causes it to (by default) become focused varies by browser and os.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-
color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0 10px 10px; background-
color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.
... css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-
color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radius: 0 0 10px 10px; background-
color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where activating the tab expands and ope...
<dl>: The Description List element - HTML: Hypertext Markup Language
<dl> <dt>name</dt> <dd>godzilla</dd> <dt>born</dt> <dd>1952</dd> <dt>birthplace</dt> <dd>japan</dd> <dt>
color</dt> <dd>green</dd> </dl> tip: it can be handy to define a key-value separator in the css, such as: dt::after { content: ": "; } wrapping name-value groups in <div> elements whatwg html allows wrapping each name-value group in a <dl> element in a <div> element.
... <dl> <div> <dt>name</dt> <dd>godzilla</dd> </div> <div> <dt>born</dt> <dd>1952</dd> </div> <div> <dt>birthplace</dt> <dd>japan</dd> </div> <div> <dt>
color</dt> <dd>green</dd> </div> </dl> notes do not use this element (nor <ul> elements) to merely create indentation on a page.
<font> - HTML: Hypertext Markup Language
summary the html font element (<font>) defines the font size,
color and face for its content.
...
color this attribute sets the text
color using either a named
color or a
color specified in the hexadecimal #rrggbb format.
<input type="image"> - HTML: Hypertext Markup Language
in our above example, we could write server-side code that works out what
color was clicked on by the coordinates submitted, and keeps a tally of the favorite
colors people voted for.
...input id="image" type="image" src="/static/external/62/62ac2ecddbec0e0b540098c28451e57203e5cab46dfed7ab0115d5a659fcfb7b.png" alt="login" width="200" height="100"> </div> </form> css div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } #image { object-position: right top; object-fit: contain; background-
color: #ddd; } here, object-position is configured to draw the image at the top-right corner of the element, while object-fit is set to contain, which indicates that the image should be drawn at the largest size that will fit within the element's box without altering its aspect ratio.
<input type="radio"> - HTML: Hypertext Markup Language
rt; margin-bottom: 5px; } label { margin-right: 15px; line-height: 32px; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right: 5px; position: relative; top: 4px; } input:checked { border: 6px solid black; } button, legend {
color: white; background-
color: black; padding: 5px 10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus {
color: #999; } button:active { background-
color: white;
color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers).
...in addition, the style and
coloring of the legend and submit button are customized to have strong contrast.
<input type="text"> - HTML: Hypertext Markup Language
look at the following example: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" placeholder="lower case, all one word"> </div> <div> <button>submit</button> </div> </form> you can see how the placeholder is rendered below: the placeholder is typically rendered in a lighter
color than the element's foreground
color, and automatically vanishes when the user begins to enter text into the field (or whenever the field has a value set programmatically by setting its value attribute.
...div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size: 80%;
color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: examples you can see good examples of text inputs used in context in our your first html form and how to structure an html form articles.
HTML elements reference - HTML: Hypertext Markup Language
<basefont> the obsolete html base font element (<basefont>) sets a default font face, size, and
color for the other elements which are descended from its parent element.
... <font> the html font element (<font>) defines the font size,
color and face for its content.
Indexed collections - JavaScript
the simplest way to do this is as follows: let
colors = ['red', 'green', 'blue'] for (let i = 0; i <
colors.length; i++) { console.log(
colors[i]) } if you know that none of the elements in your array evaluate to false in a boolean context—if your array consists only of dom nodes, for example—you can use a more efficient idiom: let divs = document.getelementsbytagname('div') for (let i = 0, div; div = divs[i]; i++) { /* process div in som...
... the foreach() method provides another way of iterating over an array: let
colors = ['red', 'green', 'blue']
colors.foreach(function(
color) { console.log(
color) }) // red // green // blue alternatively, you can shorten the code for the foreach parameter with es2015 arrow functions: let
colors = ['red', 'green', 'blue']
colors.foreach(
color => console.log(
color)) // red // green // blue the function passed to foreach is executed once for every item in the array, with the array item passed as the argument to the function.
SyntaxError: illegal character - JavaScript
var
colors = ['#000', #333', '#666']; // syntaxerror: illegal character add the missing quote for '#333'.
... var
colors = ['#000', '#333', '#666']; hidden characters when copy pasting code from external sources, there might be invalid characters.
TypeError: "x" is not a function - JavaScript
var dog = function () { this.age = 11; this.
color = "black"; this.name = "ralph"; return this; } dog.prototype.name = function(name) { this.name = name; return this; } var mynewdog = new dog(); mynewdog.name("cassidy"); //uncaught typeerror: mynewdog.name is not a function use a different property name instead: var dog = function () { this.age = 11; this.
color = "black"; this.dogname = "ralph"; //using this.dogname instead of .name ...
... return this; } dog.prototype.name = function(name) { this.dogname = name; return this; } var mynewdog = new dog(); mynewdog.name("cassidy"); //dog { age: 11,
color: 'black', dogname: 'cassidy' } using brackets for multiplication in math, you can write 2 × (3 + 5) as 2*(3 + 5) or just 2(3 + 5).
Reflect - JavaScript
examples detecting whether an object contains certain properties const duck = { name: 'maurice',
color: 'white', greeting: function() { console.log(`quaaaack!
... my name is ${this.name}`); } } reflect.has(duck, '
color'); // true reflect.has(duck, 'haircut'); // false returning the object's own keys reflect.ownkeys(duck); // [ "name", "
color", "greeting" ] adding a new property to the object reflect.set(duck, 'eyes', 'black'); // returns "true" if successful // "duck" now contains the property "eyes: 'black'" specifications specification ecmascript (ecma-262)the definition of 'reflect' in that specification.
Web app manifests
click each one for more information about it: background_
colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_
color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_
color": "#fff", "description": "a simply readable hacker news app.", "icons":...
...this splashscreen is auto-generated from properties in the web app manifest, specifically: name background_
color the icon in the icons array that is closest to 128dpi for the device.
<mglyph> - MathML
mathbackground the background
color (if the image has transparency).
... you can use #rgb, #rrggbb and html
color names.
<mphantom> - MathML
mathbackground the background
color.
... you can use #rgb, #rrggbb and html
color names.
<mstyle> - MathML
examples using displaystyle and math
color to effect style changes in the layout of the whole sum.
... <math> <mstyle displaystyle="true" math
color="teal"> <mrow> <munderover> <mo stretchy="true" form="prefix">∑</mo> <mrow> <mi>i</mi> <mo form="infix">=</mo> <mn>1</mn> </mrow> <mi>n</mi> </munderover> <mstyle displaystyle="true"> <mfrac> <mn>1</mn> <mi>n</mi> </mfrac> </mstyle> </mrow> </mstyle> </math> specifications specification status comment mathml 3.0the definition of 'mstyle' in that specification.
Populating the page: how browsers work - Web Performance
building the cssom is very, very fast and is not displayed in a unique
color in current developer tools.
...painting involves drawing every visual part of an element to the screen, including text,
colors, borders, shadows, and replaced elements like buttons and images.
Add to Home screen - Progressive web apps (PWAs)
the fields needed for a2hs are as follows: background_
color: specifies a background
color to be used in some app contexts.
... the manifest for our sample app looks like this: { "background_
color": "purple", "description": "shows random fox pictures.
Media - Progressive web apps (PWAs)
this css (below) removes the navigation area when printing the document: @media print { #nav-area {display: none;} } some common media types are: screen
color device display print printed paged media projection projected display all all media (the default) more details there are other ways to specify the media type for a set of rules.
... example these rules specify styles for a button that changes dynamically as the user interacts with it: .green-button { background-
color:#cec;
color:#black; border:2px outset #cec; padding: 5px 10px; } .green-button[disabled] { background-
color:#cdc;
color:#777; } .green-button:active, .green-button.active { border-style: inset; } <table> <tbody> <tr> <td><button class="green-button" disabled>click me</button></td> <td><button class="green-button">click me</button></td> <td><button class="green-bu...
flood-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-
color="seagreen" flood-opacity="1" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-
color="seagreen" flood-opacity="0.3" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); transform: translatex(220px);" /> </...
... a number of 0 or a percentage of 0% represents a fully transparent
color, 1 or 100% represents a fully opaque
color.
fr - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-
color="white"/> <stop offset="100%" stop-
color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-
color="white"/> <stop offset="100%" stop-
color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fil...
...#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-
color="red"/> <stop offset="100%" stop-
color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="...
fx - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-
color="white"/> <stop offset="100%" stop-
color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-
color="white"/> <stop offset="100%" stop-
color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-
color="red"/> <stop offset="100%" stop-
color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="...
fy - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-
color="white"/> <stop offset="100%" stop-
color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-
color="white"/> <stop offset="100%" stop-
color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-
color="red"/> <stop offset="100%" stop-
color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="...
gradientTransform - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-
color="darkblue" /> <stop offset="50%" stop-
color="skyblue" /> <stop offset="100%" stop-
color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100" gradienttransform="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-
color="darkblue" /> <stop offset="50%" stop-
color="skyblue" /> <s...
...top offset="100%" stop-
color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system.
height - SVG: Scalable Vector Graphics
twenty five elements are using this attribute: <feblend>, <fe
colormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> ...
... value <length> | <percentage> default value 100% animatable yes fe
colormatrix for <fe
colormatrix>, height defines the vertical length for the rendering area of the primitive.
intercept - SVG: Scalable Vector Graphics
the intercept attribute defines the intercept of the linear function of
color component transfers when the type attribute is set to linear.
... four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-
color="#ff0000" /> <stop offset="0.5" stop-
color="#00ff00" /> <stop offset="1" stop-
color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0"/> <fefuncg type="linear" intercept="0"/> <fefuncb type="linear" intercept="0"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" wid...
mode - SVG: Scalable Vector Graphics
only one element is using this attribute: <feblend> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-
color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-
color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="
color-dodge"/> </filter> <image xlink:href="//developer.
...mozilla.org/files/6457/mdn_logo_only_
color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_
color.png" width="200" height="200" style="filter:url(#blending2); transform:translatex(220px);"/> </svg> usage notes value <blend-mode> default value normal animatable yes for a description of the values, see <blend-mode>.
pointer-events - SVG: Scalable Vector Graphics
to change the
color of the rect underneath you have to click outside the circle --> <rect x="0" y="0" height="10" width="10" fill="black" /> <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblepoint" /> <!-- the circle below will never catch a mouse event.
... the rect underneath will change
color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random
color between #000000 and #ffffff const
color = math.round(math.random() * 0xffffff) // let's format the
color to fit css requirements const fill = '#' +
color.tostring(16).padstart(6,'0') // let's apply our
color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, ...
r - SVG: Scalable Vector Graphics
two elements are using this attribute: <circle>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient r="0" id="mygradient000"> <stop offset="0" stop-
color="white" /> <stop offset="100%" stop-
color="black" /> </radialgradient> <radialgradient r="50%" id="mygradient050"> <stop offset="0" stop-
color="white" /> <stop offset="100%" stop-
color="black" /> </radialgradient> <radialgradient r="100%" id="mygradient100"> <stop offset="0" stop-
color="white" /> <stop offset="100%" stop-
color="black" /> </radialgradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> <re...
...a value of lower or equal to zero will cause the area to be painted as a single
color using the
color and opacity of the last gradient <stop>.
stroke - SVG: Scalable Vector Graphics
the stroke attribute is a presentation attribute defining the
color (or any svg paint servers like gradients or patterns) used to paint the outline of the shape; note: as a presentation attribute stroke can be used as a css property.
... as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple
color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-
color="green" /> <stop offset="100%" stop-
color="white" /> </lineargradient> </defs> <circle cx="15" cy="5" r="4" fill="none" stroke="url(#mygradient)" /> </svg> usage notes value <paint> defa...
text-decoration - SVG: Scalable Vector Graphics
>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-
color'> default value see individual properties animatable yes for a description of the values, please refer to the css text-decoration property.
... candidate recommendation defines the property as a shorthand for text-decoration-line, text-decoration-style, and text-decoration-
color.
width - SVG: Scalable Vector Graphics
twenty five elements are using this attribute: <feblend>, <fe
colormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> ...
... value <length> | <percentage> default value 100% animatable yes fe
colormatrix for <fe
colormatrix>, width defines the horizontal length for the rendering area of the primitive.
x - SVG: Scalable Vector Graphics
thirty seven elements are using this attribute: <altglyph>, <feblend>, <fe
colormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="6...
... value <length> | <percentage> default value 0% animatable yes fe
colormatrix for <fe
colormatrix>, x defines the minimum x coordinate for the rendering area of the primitive.
y - SVG: Scalable Vector Graphics
thirty seven elements are using this attribute: <altglyph>, <feblend>, <fe
colormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="6...
... value <length> | <percentage> default value 0% animatable yes fe
colormatrix for <fe
colormatrix>, y defines the minimum y coordinate for the rendering area of the primitive.
y1 - SVG: Scalable Vector Graphics
--> <lineargradient y1="0%" id="g0"> <stop offset="5%" stop-
color="black" /> <stop offset="50%" stop-
color="red" /> <stop offset="95%" stop-
color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at the bottom left corner of the bounding box of the shape it is applied to.
... --> <lineargradient y1="100%" id="g1"> <stop offset="5%" stop-
color="black" /> <stop offset="50%" stop-
color="red" /> <stop offset="95%" stop-
color="black" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'y1' in that specification.
y2 - SVG: Scalable Vector Graphics
--> <lineargradient y2="0%" id="g0"> <stop offset="5%" stop-
color="black" /> <stop offset="50%" stop-
color="red" /> <stop offset="95%" stop-
color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector end at the bottom right corner of the bounding box of the shape it is applied to.
... --> <lineargradient y2="100%" id="g1"> <stop offset="5%" stop-
color="black" /> <stop offset="50%" stop-
color="red" /> <stop offset="95%" stop-
color="black" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'y2' in that specification.
<defs> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-
color="gold" /> <stop offset="90%" stop-
color="red" /> </lineargradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#mygradient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes, document element event attributes, graph...
...ical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> ...
<foreignObject> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> div {
color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed html text into svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the context of svg embedded in an html document, the xhtml namespace could be omitted, but it is mandatory in the context of an svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing ...
... global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
<g> - SVG: Scalable Vector Graphics
25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
...ria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<line> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke
color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point.
... value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
<linearGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-
color="gold" /> <stop offset="95%" stop-
color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gr...
... value type: <length> ; default value: 0%; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitte...
<marker> - SVG: Scalable Vector Graphics
value type: <list-of-numbers> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
...a-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment svg markersthe definition of '<marker>' in that specification.
<mask> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 120%; animatable: yes global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule,
color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape ...
...elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment css masking module level 1the definition of '<mask>' in that specification.
<pattern> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title usage notes categoriescontainer elementpermi...
...tted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<pattern>' in that specification.
<radialGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="mygradient"> <stop offset="10%" stop-
color="gold" /> <stop offset="95%" stop-
color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient.
... value type: <iri> ; default value: none; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitte...
<svg> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
...ria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<symbol> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
...ria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> note: a <symbol> element itself is not meant to be rendered.
<text> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> <style> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } /* note that the
color of the text is set with the * * fill property, the
color property is for html only */ .rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heavy">cat</text> <text x="55" y="55" class="small">is</text> <text x="65" y="55" class="rrrrr">grumpy!</text> </svg> attributes x the x coordinate of the ...
...butes core attributes most notably: id, tabindex styling attributes class, style, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-a...
<textPath> - SVG: Scalable Vector Graphics
alue type: <length>|<percentage>|<number> ; default value: auto; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
...n, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animate
color>, <set>, <tref>, <tspan> specifications specification status comment scalable vector graphics (svg) 2the definition of '<textpath>' in that specification.
<tspan> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-a...
...a-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animate
color>, <set>, <tref>, <tspan> specifications specification status comment scalable vector graphics (svg) 2the definition of '<tspan>' in that specification.
Basic Transformations - SVG: Scalable Vector Graphics
<svg width="40" height="50" style="background-
color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0).
... <svg width="40" height="50" style="background-
color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> </svg> this example shows again the small square shown above that this time is also rotated by 45 degrees.
Filter effects - SVG: Scalable Vector Graphics
s="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <!-- litpaint --> <fespecularlighting in="blur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-
color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fecomposite in="specout" in2="sourcealpha" operator="in" result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litpaint"/> <!-- merge offsetblur + litpain...
... step 3 <fespecularlighting in="offsetblur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-
color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fespecularlighting> takes in "offsetblur", generates a lighting effect, and stores the result in the buffer "specout".
Texts - SVG: Scalable Vector Graphics
like with the shape elements text can be
colorized with the fill attribute and given a stroke with the stroke attribute.
... both may also refer to gradients or patterns, which makes simple
coloring text in svg very powerful compared to css 2.1.
Tutorials
how do i decorate my webpage with background images and
colors?
... css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font,
color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
XUL Migration Guide - Archive of obsolete content
this simple example modifies the selected tab's css to enable the user to highlight the selected tab: function highlightactivetab() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-
color')) { tab.style.setproperty('background-
color','','important'); } else { tab.style.setproperty('background-
color','rgb(255,255,100)','important'); } } require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", onclick: highlightactivetab }); security implications the sdk implements a security model in w...
page-mod - Archive of obsolete content
to supply multiple rules, pass an array of strings: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstyle: [ "div { padding: 10px;
color: red }", "img { display: none }" ] }); content styles specified by this option are loaded after those specified by the contentstylefile option.
Displaying annotations - Archive of obsolete content
annotation panel html <!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 media="all" type="text/css"> body { font: 100% arial, helvetica, sans-serif; background-
color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="annotation"> </div> </body> </html> save this in data/annotation as annotation.html.
Storing annotations - Archive of obsolete content
t.css" /> </head> <body> <div id="annotation-list"> </div> <div id="template"> <div class="annotation-details"> <a class="url"></a> <div class="selection-text"></div> <div class="annotation-text"></div> </div> </div> </body> </html> here's the corresponding css: #annotation-list .annotation-details { padding: 10px; margin: 10px; border: solid 3px #eee; background-
color: white; } #annotation-list .url, .selection-text, .annotation-text { padding: 5px; margin: 5px; } #annotation-list .selection-text,#annotation-list .annotation-text { border: solid 1px #eee; } #annotation-list .annotation-text { font-style: italic; } body { background-
color: #f5f5f5; font: 100% arial, helvetica, sans-serif; } h1 { font-family: georgia,serif;...
Display a Popup - Archive of obsolete content
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 try it out: "index.js" is saved in the top level, and the other five files go in your add-on's data directory: my-addon/ ...
Modifying the Page Hosted by a Tab - Archive of obsolete content
the content script now needs to look like this: // "self" is a global object in content scripts // listen for a "drawborder" self.port.on("drawborder", function(
color) { document.body.style.border = "5px solid " +
color; }); in the add-on script, we'll send the content script a "drawborder" message using the object returned from attach(): var self = require("sdk/self"); var tabs = require("sdk/tabs"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { v...
HTML in XUL for rich tooltips - Archive of obsolete content
var htmltip = { onload: function() { //at any point you can save an html string to a xul attribute for later injection into the tooltip document.getelementbyid("htmltip1").setattribute("tooltiphtml", "<font
color='red'>red foo</font>") document.getelementbyid("htmltip2").setattribute("tooltiphtml", "<font
color='green'>green foo</font>") }, onmousetooltip: function(event) { //get the html tooltip string assigned to the element that the mouse is over (which will soon launch the tooltip) var txt = event.target.getattribute("tooltiphtml"); // get the html div element that is inside the custom xul tool...
Scrollbar - Archive of obsolete content
so to make this work with osx, make an extra override: override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css change some
color values inside the app/chrome/skin/global/scrollbars.css to test that the css is used.
XUL Event Propagation - Archive of obsolete content
the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-
color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menui...
button - Archive of obsolete content
possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-
color, network.
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c checkbox caption
colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner...
tooltip - Archive of obsolete content
attributes crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, page, position properties accessibletype, label, popupboxobject, position, state methods hidepopup, moveto, openpopup, openpopupatscreen, showpopup, sizeto examples <tooltip id="moretip" orient="vertical" style="background-
color: #33dd00;"> <label value="click here to see more information"/> <label value="really!" style="
color: red;"/> </tooltip> <vbox> <button label="simple" tooltiptext="a simple popup"/> <button label="more" tooltip="moretip"/> </vbox> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be croppe...
treechildren - Archive of obsolete content
attributes alternatingbackground attributes alternatingbackground obsolete since gecko 2.0 type: boolean if true, the background of the tree's rows will alternate between two
colors.
Dialogs in XULRunner - Archive of obsolete content
on dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dialogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favorite fruit"/> <radiogroup> <radio id="1" label="oranges because they are fruity"/> <radio id="2" selected="true" label="strawberries because of
color"/> <radio id="3" label="bananna because it pre packaged"/> </radiogroup> </groupbox> </dialog> xul window elements have a special method to open dialogs, called window.opendialog().
2006-11-17 - Archive of obsolete content
this user want to add a filter to his tb, so that it could
color the mail that is for a particular recepient, however, the regular expression that he uses doesn't work and want suggestion from others.
2006-10-27 - Archive of obsolete content
discussions removal of the nn4.6 table border
color quirk discussion on removing the nn 4.6 table boarder
color quirk, which currently causes a specific markup to produce a green boarder instead of a gray one.
Syndicating content with RSS - Archive of obsolete content
(other sizes and
colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not required, support of this is recommended, especially for web sites and applications with high performance needs.
Making sure your theme works with RTL locales - Archive of obsolete content
instead, you should use the following start/end rules instead to ensure rtl compatibility: -moz-padding-start -moz-padding-end -moz-margin-start -moz-margin-end -moz-border-start -moz-border-start-
color -moz-border-start-style -moz-border-start-width -moz-border-end -moz-border-end-
color -moz-border-end-style -moz-border-end-width #urlbar-search-splitter { min-width: 8px; -moz-margin-start: -4px; border: none; background: transparent; } testing your theme testing your theme for rtl compatibility is easy, and you do not even have to go through the hassle of downloading a rtl loc...
Summary of Changes - Archive of obsolete content
proprietary or deprecated feature w3c feature or recommended replacement deprecated font html 4.01 span plus css1
color: ; font-family: ; font-size: ; deprecated center or align="center" css1 text-align: center; for in-line elements like text or image deprecated center or align="center" css1 margin-left: auto; margin-right: auto; for block-level elements deprecated bg
color css1 background-
color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01 div plus scripting ...
:-moz-system-metric(windows-default-theme) - Archive of obsolete content
</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.
CSSStyleRule.selectorText - Web APIs
syntax string = cssrule.selectortext example // for cssrule: body { background-
color: darkblue; } var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].selectortext); // body notes the implementation may have stripped out insignificant whitespace while parsing the selector.
CSSStyleRule.style - Web APIs
syntax styleobj = cssrule.style example function stilo() { alert(document.stylesheets[0].cssrules[0].style.csstext); } // displays "background-
color: gray;" notes the declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).
CSSValue.cssText - Web APIs
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("
color"); console.log(cssvalue.csstext); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.csstext' in that specification.
CSSValue.cssValueType - Web APIs
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("
color"); console.log(cssvalue.cssvaluetype); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.cssvaluetype' in that specification.
CSS Properties and Values API - Web APIs
examples the following uses css.registerproperty in javascript to type a css custom properties, --my-
color, as a
color, give it a default value, and not allow it to inherit its value: window.css.registerproperty({ name: '--my-
color', syntax: '<
color>', inherits: false, initialvalue: '#c0ffee', }); the same registration can take place in css using the following @property: @property --my-
color { syntax: '<
color>'; inherits: false; initial-value: #c0ffee; } specifications sp...
CanvasRenderingContext2D.createPattern() - Web APIs
javascript // create a pattern, offscreen const patterncanvas = document.createelement('canvas'); const patterncontext = patterncanvas.getcontext('2d'); // give the pattern a width and height of 50 patterncanvas.width = 50; patterncanvas.height = 50; // give the pattern a background
color and draw an arc patterncontext.fillstyle = '#fec'; patterncontext.fillrect(0, 0, patterncanvas.width, patterncanvas.height); patterncontext.arc(0, 0, 50, 0, .5 * math.pi); patterncontext.stroke(); // create our primary canvas and fill it with the pattern const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const pattern = ctx.createpattern(patterncanvas, 'repeat'...
CanvasRenderingContext2D.lineWidth - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40, 70, 70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and
color in the canvas tutorial.
CanvasRenderingContext2D.putImageData() - Web APIs
// draw content onto the canvas ctx.fillrect(0, 0, 100, 100); // create an imagedata object from it var imagedata = ctx.getimagedata(0, 0, 100, 100); // use the putimagedata function that illustrates how putimagedata works putimagedata(ctx, imagedata, 150, 0, 50, 50, 25, 25); result data loss due to browser optimization due to the lossy nature of converting to and from premultiplied alpha
color values, pixels that have just been set using putimagedata() might be returned to an equivalent getimagedata() as different values.
CanvasRenderingContext2D.save() - Web APIs
the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadow
color, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.
CanvasRenderingContext2D.strokeRect() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.shadow
color = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification.
A basic ray-caster - Web APIs
as the rays intersect walls, then they render a vertical sliver of canvas in the
color of the wall they've hit, blended with a darker version of the
color according to the distance to the wall.
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" crossorigin="anonymous"/>...
Compositing and clipping - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); ctx.translate(75, 75); // create a circular clipping path ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw background var lingrad = ctx.createlineargradient(0, -75, 0, 75); lingrad.add
colorstop(0, '#232256'); lingrad.add
colorstop(1, '#143778'); ctx.fillstyle = lingrad; ctx.fillrect(-75, -75, 150, 150); // draw stars for (var j = 1; j < 50; j++) { ctx.save(); ctx.fillstyle = '#fff'; ctx.translate(75 - math.floor(math.random() * 150), 75 - math.floor(math.random() * 150)); drawstar(ctx, math.floor(math.random() * 4) + 2); ctx.restore()...
Drawing text - Web APIs
« previousnext » after having seen how to apply styles and
colors in the previous chapter, we will now have a look at how to draw text onto the canvas.
Using images - Web APIs
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.
Canvas tutorial - Web APIs
in this tutorial basic usage drawing shapes applying styles and
colors drawing text using images transformations compositing and clipping basic animations advanced animations pixel manipulation hit regions and accessibility optimizing the canvas finale ...
Canvas API - Web APIs
the zim framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of
colorful tutorials.
DataTransfer.dropEffect - Web APIs
</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css content div { margin: 0em; padding: 2em; } #source {
color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript content function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdat...
DataTransfer.effectAllowed - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{dropeffect,effectallowed} properties</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> <script> function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdat...
DataTransfer.setData() - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer's setdata(), getdata() and cleardata()</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> <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"; // set the drag's format and data.
DataTransfer.setDragImage() - Web APIs
demo <!doctype html> <html lang=en> <title>example of datatransfer.setdragimage()</title> <meta name="viewport" content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source {
color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // set the drag's format and data.
DataTransferItem.webkitGetAsEntry() - Web APIs
#dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center;
color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
DataTransferItemList.DataTransferItem() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source {
color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'datatransferitem getter' in that specification.
DataTransferItemList.add() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source {
color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload dat...
DataTransferItemList.clear() - Web APIs
> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source {
color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag pay...
DataTransferItemList.length - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source {
color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'length' in that specification.
DataTransferItemList.remove() - Web APIs
<p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source {
color: blue; border: 1px solid black; } #target { border: 1px solid black; } specifications specification status comment html living standardthe definition of 'remove()' in that specification.
Document.getElementById() - Web APIs
example html <html> <head> <title>getelementbyid example</title> </head> <body> <p id="para">some text here</p> <button onclick="change
color('blue');">blue</button> <button onclick="change
color('red');">red</button> </body> </html> javascript function change
color(new
color) { var elem = document.getelementbyid('para'); elem.style.
color = new
color; } result usage notes the capitalization of "id" in the name of this method must be correct for the code to function; getelementbyid() is not valid and will not work, however natu...
Element: paste event - Web APIs
examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-
color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(do...
Element.scrollLeft - Web APIs
example html <div id="container"> <div id="content">click the button to slide right!</div> </div> <button id="slide" type="button">slide right</button> css #container { width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px; background-
color: #ccc; } javascript const button = document.getelementbyid('slide'); button.onclick = function () { document.getelementbyid('container').scrollleft += 20; }; result specifications specification status comment css object model (cssom) view modulethe definition of 'scrollleft' in that specification.
Element.setCapture() - Web APIs
<html> <head> <title>mouse capture example</title> <style type="text/css"> #mybutton { border: solid black 1px;
color: black; padding: 2px; box-shadow: black 2px 2px; } </style> <script type="text/javascript"> function init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("mouseup", mouseup, false); } else { document.getelementbyid("output").innerhtm...
Comparison of Event Targets - Web APIs
-ua-compatible" content="ie=edge"> <title>comparison of event targets</title> <style> table { border-collapse: collapse; height: 150px; width: 100%; } td { border: 1px solid #ccc; font-weight: bold; padding: 5px; min-height: 30px; } .standard { background-
color: #99ff99; } .non-standard { background-
color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> <td c...
Event.preventDefault() - Web APIs
html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-
color: #fbd8d4;
color: #3b3c40; } javascript and here's the javascript code that does the job.
EventTarget.addEventListener() - Web APIs
1, passive & preventdefault(which is not allowed) </a> <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> inner2, none-passive & preventdefault(not open new page) </a> </div> </div> css .outer, .middle, .inner1, .inner2 { display: block; width: 520px; padding: 15px; margin: 15px; text-decoration: none; } .outer { border: 1px solid red;
color: red; } .middle { border: 1px solid green;
color: green; width: 460px; } .inner1, .inner2 { border: 1px solid purple;
color: purple; width: 400px; } javascript const outer = document.queryselector('.outer'); const middle = document.queryselector('.middle'); const inner1 = document.queryselector('.inner1'); const inner2 = document.queryselector('.inner2'); const capture = { ...
EventTarget.removeEventListener() - Web APIs
const body = document.queryselector('body') const clicktarget = document.getelementbyid('click-target') const mouseovertarget = document.getelementbyid('mouse-over-target') let toggle = false; function makebackgroundyellow() { if (toggle) { body.style.background
color = 'white'; } else { body.style.background
color = 'yellow'; } toggle = !toggle; } clicktarget.addeventlistener('click', makebackgroundyellow, false ); mouseovertarget.addeventlistener('mouseover', function () { clicktarget.removeeventlistener('click', makebackgroundyellow, false ); }); specifications specification status comm...
FileSystemDirectoryReader.readEntries() - Web APIs
#dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center;
color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
Using the Geolocation API - Web APIs
body { padding: 20px; background-
color:#ffffc9 } button { margin: .5rem 0; } html <button id = "find-me">show my location</button><br/> <p id = "status"></p> <a id = "map-link" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { co...
Geolocation API - Web APIs
body { padding: 20px; background-
color:#ffffc9 } button { margin: .5rem 0; } html <button id = "find-me">show my location</button><br/> <p id = "status"></p> <a id = "map-link" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { co...
GlobalEventHandlers.oncontextmenu - Web APIs
pinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-
color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = pause; window.onpointerdown =...
GlobalEventHandlers.ondrag - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag 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 drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault();...
GlobalEventHandlers.ondragover - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag 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 drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault();...
GlobalEventHandlers.ondragstart - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag 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 drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault();...
HTMLTextAreaElement - Web APIs
nselend : nselstart) + sstarttag.length); omsginput.focus(); } css css to decorate the internal span to behave like a link: .intlink { cursor: pointer; text-decoration: underline;
color: #0000ff; } html: <form name="myform"> <p>[ <span class="intlink" onclick="insertmetachars('<strong>','<\/strong>');"><strong>bold</strong></span> | <span class="intlink" onclick="insertmetachars('<em>','<\/em>');"><em>italic</em></span> | <span class="intlink" onclick="var newurl=prompt('enter the full url for the link');if(newurl){insertmetachars('<a href=\u002...
Ajax navigation example - Web APIs
e.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; background-
color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer.
ImageData() - Web APIs
let imagedata = new imagedata(200, 100); // imagedata { width: 200, height: 100, data: uint8clampedarray[80000] } initializing imagedata with an array this example instantiates an imagedata object with pixel
colors defined by an array.
ImageData.data - Web APIs
let imagedata = new imagedata(100, 100); console.log(imagedata.data); // uint8clampedarray[40000] console.log(imagedata.data.length); // 40000 filling a blank imagedata object this example creates and fills a new imagedata object with
colorful pixels.
InputEvent.dataTransfer - Web APIs
<p><span style="font-weight: bold;
color: blue">whoa, bold blue text!</span></p> <p><span style="font-style: italic;
color: red">exciting: italic red text!</span></p> <p>boring normal text ;-(</p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = document.queryselector('...
KeyboardEvent.code - Web APIs
html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-
color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be using.
Location - Web APIs
em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;} [title]:hover:before, :target:before {background:black;
color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.loca...
MediaDevices.ondevicechange - Web APIs
ss="right"> <h2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </div> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; margin-right: 2% } .right { float:right; width: 48%; margin-left: 2% } .devicelist { border: 1px solid black; list-style-type: none; margin-top: 2px; padding: 6px; } javascript content other code below is other code which, while needed to make this example work, isn'tt ...
MediaQueryList.addListener() - Web APIs
examples var para = document.queryselector('p'); var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.background
color = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.background
color = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'addlistener' in that specification.
MediaQueryList.media - Web APIs
css .mq-value { font: 18px arial, sans-serif; font-weight: bold;
color: #88f; padding: 0.4em; border: 1px solid #dde; } result specifications specification status comment css object model (cssom) view modulethe definition of 'media' in that specification.
MediaQueryList.removeListener() - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.background
color = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.background
color = 'blue'; } } mql.addlistener(screentest); // later on, when it is no longer needed mql.removelistener(screentest); specifications specification status comment css object model ...
MediaQueryList - Web APIs
var para = document.queryselector('p'); var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.background
color = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.background
color = 'blue'; } } mql.addeventlistener('change', screentest); note: you can find this example on github (see the source code, and also see it running live).
MediaQueryListEvent.matches - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.background
color = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.background
color = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification.
MediaQueryListEvent.media - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.background
color = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.background
color = 'blue'; } console.log(e.media); } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'media' in t...
MediaQueryListEvent - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.background
color = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.background
color = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquerylistevent' in that specific...
MediaRecorder - Web APIs
aints = { audio: true }; var chunks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var mediarecorder = new mediarecorder(stream); visualize(stream); record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.
color = "black"; } stop.onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.
color = ""; } mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var clipname = prompt('enter a name for your sou...
Recording a media element - Web APIs
<div class="bottom"> <pre id="log"></pre> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; display: block; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; text-decoration: none; } h2 { margin-bottom: 4px; } .left { margin-right: 10px; float: left; width: 160px; padding: 0px; } .right { margin-left: 10px; float: left; width: 160px; padding: 0px; } .bottom { clear: both; padding-top: 10px; } javascript content now let's have a look at the javascript code; this is where the majority...
Capabilities, constraints, and settings - Web APIs
eo id="video" autoplay></video> <div class="button" id="stopbutton"> stop video </div> <div id="log"> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px;
color: white; background-
color: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .trackrow { height: 200px; } .leftside { float: left; width: calc(calc(100%/2) - 10px); } .rightside { float: right; width: calc(calc(100%/2) - 10px); } textarea { padding: 8px; } h3 { margin-bottom: 3px; } #supportedconstraints { column-count: 2; -moz-column-count: 2; } #log { ...
MouseEvent.pageX - Web APIs
.box { width: 400px; height: 250px; border: 2px solid darkblue; background-
color: blue;
color: white; font: 16px "zilla", "open sans", "helvetica", "arial", sans-serif; } result try this out here: specifications specification status comment css object model (cssom) view modulethe definition of 'pagex' in that specification.
Online and offline events - Web APIs
line"; status.classname = condition; status.innerhtml = condition.touppercase(); log.insertadjacenthtml("beforeend", "event: " + event.type + "; status: " + condition); } window.addeventlistener('online', updateonlinestatus); window.addeventlistener('offline', updateonlinestatus); }); a touch of css #status { position: fixed; width: 100%; font: bold 1em sans-serif;
color: #fff; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online { background: green; } .offline { background: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id="log"></div> <p>this is a test</p> here's the live result notes if the api ...
Node.parentElement - Web APIs
example if (node.parentelement) { node.parentelement.style.
color = "red"; } specifications specification status comment domthe definition of 'parentelement' in that specification.
OES_standard_derivatives - Web APIs
xamples enabling the extensions: gl.getextension('oes_standard_derivatives'); gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_frag
color = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status comment oes_standard_derivativesthe definition of 'oes_standard_derivatives' in that specification.
OES_texture_float - Web APIs
floating-point
color buffers this extension implicitly enables the webgl_
color_buffer_float extension (if supported), which allows rendering to 32-bit floating-point
color buffers.
OES_texture_half_float - Web APIs
half floating-point
color buffers this extension implicitly enables the ext_
color_buffer_half_float extension (if supported), which allows rendering to 16-bit floating point formats.
PaintWorklet.registerPaint - Web APIs
/* checkboardworklet.js */ class checkerboardpainter { paint(ctx, geom, properties) { // use `ctx` as if it was a normal canvas const
colors = ['red', 'green', 'blue']; const size = 32; for(let y = 0; y < geom.height/size; y++) { for(let x = 0; x < geom.width/size; x++) { const
color =
colors[(x + y) %
colors.length]; ctx.beginpath(); ctx.fillstyle =
color; ctx.rect(x * size, y * size, size, size); ctx.fill(); } } } } // register our class under a specific name regist...
PaintWorklet - Web APIs
class checkerboardpainter { paint(ctx, geom, properties) { // use `ctx` as if it was a normal canvas const
colors = ['red', 'green', 'blue']; const size = 32; for(let y = 0; y < geom.height/size; y++) { for(let x = 0; x < geom.width/size; x++) { const
color =
colors[(x + y) %
colors.length]; ctx.beginpath(); ctx.fillstyle =
color; ctx.rect(x * size, y * size, size, size); ctx.fill(); } } } } // register our class under a specific name regist...
Payment Request API - Web APIs
a browser could also adjust the font size or
color contrast of the payment sheet, making it more comfortable for the user to make a payment.
RadioNodeList.value - Web APIs
syntax value = radionodelist.value; radionodelist.value = string; example html <form> <label><input type="radio" name="
color" value="blue">blue</label> <label><input type="radio" name="
color" value="red">red</label> </form> javascript // get the form const form = document.forms[0]; // get the form's radio buttons const radios = form.elements['
color']; // choose the "red" option radios.value = 'red'; result specifications specification status comments html living standardthe defini...
SVGAnimationElement - Web APIs
the svganimationelement interface is the base interface for all of the animation element interfaces: svganimateelement, svgsetelement, svganimate
colorelement, svganimatemotionelement and svganimatetransformelement.
Advanced techniques: Creating and sequencing audio - Web APIs
if (lastnotedrawn != drawnote) { pads.foreach(function(el, i) { el.children[lastnotedrawn].style.border
color = 'hsla(0, 0%, 10%, 1)'; el.children[drawnote].style.border
color = 'hsla(49, 99%, 50%, 1)'; }); lastnotedrawn = drawnote; } // set up to draw again requestanimationframe(draw); } putting it all together now all that's left to do is make sure we've loaded the sample before we are able to play the instrument.
Example and tutorial: Simple synth keyboard - Web APIs
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; vertical-a...
Window: blur event - Web APIs
html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd;
color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
Window.devicePixelRatio - Web APIs
try it and watch what happens!</p> </div> <div class="pixel-ratio"></div> </div> css body { font: 22px arial, sans-serif; } .container { top: 2em; width: 22em; height: 14em; border: 2px solid #22d; margin: 0 auto; padding: 0; background-
color: #a9f; } .inner-container { padding: 1em 2em; text-align: justify; text-justify: auto; } .pixel-ratio { position: relative; margin: auto; height: 1.2em; text-align: right; bottom: 0; right: 1em; font-weight: bold; } result specifications specification status comment css object model (cssom) view modulethe definition of 'window.devicepixelrat...
Window: focus event - Web APIs
html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd;
color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
Window.getComputedStyle() - Web APIs
html <p>hello</p> css p { width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif; text-align: center; background: purple;
color: white; } javascript let para = document.queryselector('p'); let compstyles = window.getcomputedstyle(para); para.textcontent = 'my computed font-size is ' + compstyles.getpropertyvalue('font-size') + ',\nand my computed line-height is ' + compstyles.getpropertyvalue('line-height') + '.'; result description the returned object is the same cssstyledeclaration type as the obj...
window.location - Web APIs
document.documentelement.scrolltop = onode.offsettop; document.documentelement.scrollleft = onode.offsetleft; } function showbookmark (sbookmark, busehash) { if (arguments.length === 1 || busehash) { location.hash = sbookmark; return; } var obookmark = document.queryselector(sbookmark); if (obookmark) { shownode(obookmark); } } </script> <style> span.intlink { cursor: pointer;
color: #0000ff; text-decoration: underline; } </style> </head> <body> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
Window.matchMedia() - Web APIs
css .mq-value { font: 18px arial, sans-serif; font-weight: bold;
color: #88f; padding: 0.4em; border: 1px solid #dde; } result see testing media queries programmatically for additional code examples.
Window.screen - Web APIs
syntax let screenobj = window.screen; example if (screen.pixeldepth < 8) { // use low-
color version of page } else { // use regular,
colorful page } specifications specification status comment css object model (cssom) view modulethe definition of 'window.screen' in that specification.
XREnvironmentBlendMode - Web APIs
since the real world is being digitally presented, the brightness of each pixel can be controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its
color and brightness precisely controlled.
XRSession.environmentBlendMode - Web APIs
since the real world is being digitally presented, the brightness of each pixel can be controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its
color and brightness precisely controlled.
XRView.eye - Web APIs
gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); gl.clear
color(0,0, 0, 1.0); gl.cleardepth(1.0); gl.clear(gl.
color_buffer_bit, gl.depth_buffer_bit); for (let view of xrpose.views) { let skipview = false; if (view.eye == "left" && body.lefteye.injured) || skipview = updateinjury(body.lefteye); } else if (view.eye == "right" && body.righteye.injured) { skipview = updateinjury(body.righteye); } if (!skipview) { let viewport = gllayer.ge...
XRViewerPose.views - Web APIs
let pose = frame.getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); gl.clear
color(0, 0, 0, 1); gl.cleardepth(1); gl.clear(gl.
color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the webgl viewport to apply in order to cause the rendered...
XRViewerPose - Web APIs
let pose = frame.getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); gl.clear
color(0, 0, 0, 1); gl.cleardepth(1); gl.clear(gl.
color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the webgl viewport to apply in order to cause the rendered...
XRWebGLLayer.getViewport() - Web APIs
<<<--- add link to appropriate section in the cameras and views article --->>> function drawframe(time, frame) { let session = frame.session; let pose = frame.getviewerpose(mainreferencespace); if (pose) { let gllayer = session.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); gl.clear
color(0, 0, 0, 1.0); gl.cleardepth(1.0); gl.clear(gl.
color_buffer_bit, gl.depth_
color_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene now */ } } specifications specification status comment webxr device apithe definition of ...
XRWebGLLayerInit.ignoreDepthValues - Web APIs
each entry in the depth buffer corresponds to the depth of the fragment whose
color is at the same location in the
color buffer, and must have a value between 0.0 and 1.0, where 0.0 corresponds to the distance specified in the xrsession object's renderstate record's depthnear and 1.0 represents the distance given by depthfar.
Generating HTML - Web APIs
by setting the output to be html and not having a namespace on the resulting elements (
colored in blue), those elements will be treated as html elements.
ARIA annotations - Accessibility
</p> <div id="comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div> browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use some more interesting styling of your own, for example: ins, [role="insertion"] {
color: #0c0; text-decoration: underline; } del, [role="deletion"] {
color: red; text-decoration: line-through; } ins, [role="insertion"], del, [role="deletion"] { text-decoration-thickness: 2px; background-
color: #fee; padding: 2px 4px; margin: 0 1px; } comments online document applications also commonly feature commenting systems, and it would be nice to have a way to semantically as...
ARIA: switch role - Accessibility
x; height: 26px; border: 2px solid black; display: inline-block; margin-right: 0.25em; line-height: 20px; vertical-align: middle; text-align: center; font: 12px "open sans", "arial", serif; } button.switch span { padding: 0 4px; pointer-events: none; } [role="switch"][aria-checked="false"] :first-child, [role="switch"][aria-checked="true"] :last-child { background: #262;
color: #eef; } [role="switch"][aria-checked="false"] :last-child, [role="switch"][aria-checked="true"] :first-child {
color: #bbd; } label.switch { font: 16px "open sans", "arial", sans-serif; line-height: 20px; user-select: none; vertical-align: middle; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -o-user-select: none; } the most interesting part is pr...
ARIA: tab role - Accessibility
relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padding: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-radius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-
color: orange; outline: 1px solid orange; } there are two things we need to do with javascript: we need to change focus and tab index of our tab elements with the right and left arrows, and we need to change the active tab and tabpanel when we click on a tab.
ARIA: button role - Accessibility
html <h1>aria button example</h1> <ul id="namelist"></ul> <label for="newname">enter your name: </label> <input type="text" id="newname"> <span role="button" tabindex="0" onclick="handlecommand()" onkeydown="handlecommand()">add name</span> css [role="button"] { padding: 2px; background-
color: navy;
color: white; cursor: default; } [role="button"]:hover, [role="button"]:focus, [role="button"]:active { background-
color: white;
color: navy; } ul { list-style: none; } javascript function handlecommand(event) { // handles both mouse clicks and keyboard // activate with enter or space // get the new name value from the input element let newnameinput = do...
-moz-float-edge - CSS: Cascading Style Sheets
formal definition initial valuecontent-boxapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax border-box | content-box | margin-box | padding-box examples html <div class="box"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> css .box { display: block; height: 5px; margin: 0.5em auto 0.5em auto;
color: gray; -moz-float-edge: margin-box; box-sizing: border-box; } result specifications not part of any standard.
-webkit-text-stroke-width - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-
color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-wi...
:-moz-drag-over - CSS: Cascading Style Sheets
syntax :-moz-drag-over examples html <table border="1"> <tr> <td width="100px" height="100px">drag over</td> </tr> </table> css td:-moz-drag-over {
color: red; } result specifications not part of any standard.
grid - CSS: Cascading Style Sheets
neato!</p> css :not(.unknown) {
color: lightgray; } @media (grid: 0) { .unknown {
color: lightgray; } .bitmap {
color: red; text-transform: uppercase; } } @media (grid: 1) { .unknown {
color: lightgray; } .grid {
color: black; text-transform: uppercase; } } result specifications specification status comment media queries level 4the definition of 'grid' in th...
height - CSS: Cascading Style Sheets
examples html <div>watch this element as you resize your viewport's height.</div> css /* exact height */ @media (height: 360px) { div {
color: red; } } /* minimum height */ @media (min-height: 25rem) { div { background: yellow; } } /* maximum height */ @media (max-height: 40rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'height' in that specification.
light-level - CSS: Cascading Style Sheets
@media (light-level: normal) { p { background: url("texture.jpg");
color: #333; } } @media (light-level: dim) { p { background: #222;
color: #ccc; } } @media (light-level: washed) { p { background: white;
color: black; font-size: 2em; } } specifications specification status comment media queries level 5the definition of 'light-level' in that specification.
monochrome - CSS: Cascading Style Sheets
examples html <p class="mono">your device supports monochrome pixels!</p> <p class="no-mono">your device doesn't support monochrome pixels.</p> css p { display: none; } /* any monochrome device */ @media (monochrome) { p.mono { display: block;
color: #333; } } /* any non-monochrome device */ @media (monochrome: 0) { p.no-mono { display: block;
color: #ee3636; } } result specifications specification status comment media queries level 4the definition of 'monochrome' in that specification.
overflow-block - CSS: Cascading Style Sheets
sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css @media (overflow-block: scroll) { p {
color: red; } } result specifications specification status comment media queries level 4the definition of 'overflow-block' in that specification.
overflow-inline - CSS: Cascading Style Sheets
sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css p { white-space: nowrap; } @media (overflow-inline: scroll) { p {
color: red; } } result specifications specification status comment media queries level 4the definition of 'overflow-inline' in that specification.
pointer - CSS: Cascading Style Sheets
html <input id="test" type="checkbox" /> <label for="test">look at me!</label> css input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: solid; margin: 0; } input[type="checkbox"]:checked { background: gray; } @media (pointer: fine) { input[type="checkbox"] { width: 15px; height: 15px; border-width: 1px; border-
color: blue; } } @media (pointer: coarse) { input[type="checkbox"] { width: 30px; height: 30px; border-width: 2px; border-
color: red; } } result specifications specification status comment media queries level 4the definition of 'pointer' in that specification.
prefers-reduced-data - CSS: Cascading Style Sheets
-regular'), url('fonts/montserrat-regular.woff2') format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple
color emoji", "segoe ui emoji", "segoe ui symbol"; } result specifications specification status comment media queries level 5the definition of 'reduced-data' in that specification.
prefers-reduced-motion - CSS: Cascading Style Sheets
*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-
color: #306;
color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } ...
resolution - CSS: Cascading Style Sheets
examples html <p>this is a test of your device's pixel density.</p> css /* exact resolution */ @media (resolution: 150dpi) { p {
color: red; } } /* minimum resolution */ @media (min-resolution: 72dpi) { p { text-decoration: underline; } } /* maximum resolution */ @media (max-resolution: 300dpi) { p { background: yellow; } } result specifications specification status comment media queriesthe definition of 'resolution' in that specification.
scripting - CSS: Cascading Style Sheets
:-)</p> css p {
color: lightgray; } @media (scripting: none) { .script-none {
color: red; } } @media (scripting: initial-only) { .script-initial-only {
color: red; } } @media (scripting: enabled) { .script-enabled {
color: red; } } result specifications specification status comment media queries level 5the definition of 'scripting' in that specification.
width - CSS: Cascading Style Sheets
examples html <div>watch this element as you resize your viewport's width.</div> css /* exact width */ @media (width: 360px) { div {
color: red; } } /* minimum width */ @media (min-width: 35rem) { div { background: yellow; } } /* maximum width */ @media (max-width: 50rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'width' in that specification.
@supports - CSS: Cascading Style Sheets
spective: 10px)) { … /* css applied when 3d transforms, prefixed or not, are supported */ } testing for the non-support of a specific css property @supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) { … /* css to provide fallback alternative for text-align-last: justify */ } testing for the support of custom properties @supports (--foo: green) { body {
color: var(--varname); } } testing for the support of a selector (eg.
Adjacent sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that come immediately after any image */ img + p { font-weight: bold; } syntax former_element + target_element { style properties } examples css li:first-of-type + li {
color: red; } html <ul> <li>one</li> <li>two!</li> <li>three</li> </ul> result specifications specification status comment selectors level 4the definition of 'next-sibling combinator' in that specification.
Coordinate systems - CSS: Cascading Style Sheets
.outer { width: 1000px; height: 200px; background-
color: red; } .inner { position: relative; width: 500px; height: 150px; top: 25px; left: 100px; background-
color: blue;
color: white; cursor: crosshair; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .log { position: relative; width: 100%; text-align: center; } result here you can see the results in action.
border-block-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-style' in that specification.
border-block-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-width' in that specification.
border-block-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-style' in that specification.
border-block-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-block-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-style' in that specification.
border-block-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-width' in that specification.
border-bottom-style - CSS: Cascading Style Sheets
<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: 3px; background-
color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} .b10 {b...
border-end-end-radius - CSS: Cascading Style Sheets
heritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-
color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-
color: #fff; border-end-end-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-end-end-radius' in that specification.
border-end-start-radius - CSS: Cascading Style Sheets
etter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-
color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-
color: #fff; border-end-start-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-end-start-radius' in that specification.
border-image - CSS: Cascading Style Sheets
#bitmap { width: 200px; background-
color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this elemen...
border-inline-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-style' in that specification.
border-inline-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-style' in that specification.
border-inline-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-width' in that specification.
border-inline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div> css content div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-style' in that specification.
border-inline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-width' in that specification.
border-start-end-radius - CSS: Cascading Style Sheets
etter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-
color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-
color: #fff; border-start-end-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-start-end-radius' in that specification.
border-start-start-radius - CSS: Cascading Style Sheets
etter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-
color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-
color: #fff; border-start-start-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-start-start-radius' in that specific...
border-style - CSS: Cascading Style Sheets
<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: 3px; background-
color: #52e396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashed;} .b5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {border-style:outset;} result specifications specification statu...
border-top-style - CSS: Cascading Style Sheets
<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-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;} res...
break-after - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem;
color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification.
break-before - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem;
color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification.
calc() - CSS: Cascading Style Sheets
in this example, the css creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-
color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
ept on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green; background-
color: lime; flex: auto; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-column-gap: 20px; } #grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; column-gap: 20px; } #grid > div { border: 1px solid green; background-
color: lime; } result multi-column layout ...
<display-inside> - CSS: Cascading Style Sheets
html <div class="box"> <div class="float">i am a floated box!</div> <p>i am content inside the container.</p> </div> css .box { background-
color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flow-root; } .float { float: left; width: 200px; height: 150px; background-
color: white; border:1px solid black; padding: 10px; } result specifications specification status css display module level 3the definition of 'display-inside' in that specification.
element() - CSS: Cascading Style Sheets
00px; height:400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="mybackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(45deg);
color:white;">this text is part of the background.
fit-content() - CSS: Cascading Style Sheets
</div> <div>flexible item</div> </div> css #container { display: grid; grid-template-columns: fit-content(300px) fit-content(300px) 1fr; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-
color: #8cffa0; padding: 10px; } #container > div { background-
color: #8ca0ff; padding: 5px; } result specifications specification status comment css box sizing module level 3the definition of 'fit-content()' in that specification.
flex-basis - CSS: Cascading Style Sheets
ex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb;
color: white; font-size: 14px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%;
color: #333; font-size: 12px; } .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:after { content: 'max-content'; } .flex3 { flex-basis: min-...
flex-direction - CSS: Cascading Style Sheets
understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>this is a column-reverse</h4> <div id="content"> <div class="box" style="background-
color:red;">a</div> <div class="box" style="background-
color:lightblue;">b</div> <div class="box" style="background-
color:yellow;">c</div> </div> <h4>this is a row-reverse</h4> <div id="content1"> <div class="box1" style="background-
color:red;">a</div> <div class="box1" style="background-
color:lightblue;">b</div> <div class="box1" style="background-
color:yellow;">c</div> </div> css #conten...
flex-grow - CSS: Cascading Style Sheets
d and e are flex-grow:2 .</h5> <div id="content"> <div class="box" style="background-
color:red;">a</div> <div class="box" style="background-
color:lightblue;">b</div> <div class="box" style="background-
color:yellow;">c</div> <div class="box1" style="background-
color:brown;">d</div> <div class="box1" style="background-
color:lightgreen;">e</div> <div class="box" style="background-
color:brown;">f</div> </div> css #content { display: flex; justify-content: space-around; ...
flex-shrink - CSS: Cascading Style Sheets
d and e have flex-shrink:2 set</p> <p>the width of d and e is less than the others.</p> <div id="content"> <div class="box" style="background-
color:red;">a</div> <div class="box" style="background-
color:lightblue;">b</div> <div class="box" style="background-
color:yellow;">c</div> <div class="box1" style="background-
color:brown;">d</div> <div class="box1" style="background-
color:lightgreen;">e</div> </div> css #content { display: flex; width: 500px; } #content div { flex-basis: 120px; border: 3px solid rgba(0,0,0,.2); } .
flex-wrap - CSS: Cascading Style Sheets
> <h4>this is an example for flex-wrap:nowrap </h4> <div class="content1"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:wrap-reverse </h4> <div class="content2"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> css /* common styles */ .content, .content1, .content2 {
color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 300px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex...
flex - CSS: Cascading Style Sheets
/div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item initial">initial</div> <div class="item none">none</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item four">4</div> <div class="item two">2</div> <div class="item one">1</div> </div> * { box-sizing: border-box; } .flex-container { background-
color: #f4f7f8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-
color: #1b5385;
color: white; font-family: monospace; font-size: 13px; } .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex: 4; } .two { flex: 2; } .one { flex: 1; } ...
font-smooth - CSS: Cascading Style Sheets
for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-
color: black;
color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard.
font-variant-east-asian - CSS: Cascading Style Sheets
r> <th>normal/jis78:</th> <td>麹町</td> <td class="jis78">麹町</td> </tr> <tr> <th>normal/ruby:</th> <td>しんかんせん</td> <td class="ruby">しんかんせん</td> </tr> <tr> <th>normal/traditional:</th> <td>大学</td> <td class="traditional">大学</td> </tr> </tbody> </table> css td{ font-family:"yu gothic"; font-size:20px; } th{
color:grey; padding-right:10px; } .ruby { font-variant-east-asian: ruby; } .jis78 { font-variant-east-asian: jis78; } .traditional{ font-variant-east-asian: traditional; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-east-asian' in that specification.
font-weight - CSS: Cascading Style Sheets
) { weightlabel.textcontent = `font-weight: ${weightinput.value};`; sampletext.style.fontweight = weightinput.value; } weightinput.addeventlistener('input', update); update(); accessibility concerns people experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (thin/hairline) or 200 (extra light), especially if the font has a low contrast
color ratio.
font - CSS: Cascading Style Sheets
dy, input { font: 14px arial; overflow: hidden; } .propinputcont { float: left; text-align: center; margin-right: 5px; width: 80px; } .setpropcont { float: left; margin-right: 5px; width: 120px; } .propinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black; text-align: center; width: 80px; } .mandatory { border-bottom-
color: red; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .tar { width: 40px; text-align: right; } .fontfamily { display: inline-block; } javascript var textareas = document.getelementsbyclassname("curcss"), shorttext = "", getcheckedvalue, setcss, getproperties, injectcss; getproperties = function () { shorttext = get...
grid-area - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid areas html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; } #item1 { background-
color: lime; grid-area: 2 / 2 / auto / span 3; } #item2 { background-
color: yellow; } #item3 { background-
color: blue; } result specifications specification status comment css grid layoutthe definition of 'grid-area' in that specification.
grid-auto-columns - CSS: Cascading Style Sheets
th> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid column size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { height: 100px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div { background-
color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-columns' in that specification.
grid-auto-flow - CSS: Cascading Style Sheets
="column">column</option> <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-
color: lime; grid-row-start: 3; } #item2 { background-
color: yellow; } #item3 { background-
color: blue; } #item4 { grid-column-start: 2; background-
color: red; } #item5 { background-
color: aqua; } function changegridautoflow() { var grid = document.getelementbyid("grid"); var direction = document.getelementbyid("direction"); var dense = document.getelementbyid("dense"); var gri...
grid-auto-rows - CSS: Cascading Style Sheets
= <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid row size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div { background-
color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-rows' in that specification.
grid-column-end - CSS: Cascading Style Sheets
five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {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; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-
color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-end' in that...
grid-column-start - CSS: Cascading Style Sheets
five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {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; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-
color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-start' in th...
grid-column - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid column size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px; } #item1 { background-
color: lime; } #item2 { background-
color: yellow; grid-column: 2 / 4; } #item3 { background-
color: blue; grid-column: span 2 / 7; } result specifications specification status comment css grid layoutthe definition of 'grid-column' in that specification.
grid-row-end - CSS: Cascading Style Sheets
five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {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; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-
color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-end' in that sp...
grid-row-start - CSS: Cascading Style Sheets
five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {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; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-
color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-start' in that ...
grid-row - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid row size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(6, 1fr); } #item1 { background-
color: lime; } #item2 { background-
color: yellow; grid-row: 2 / 4; } #item3 { background-
color: blue; grid-row: span 2 / 7; } result specifications specification status comment css grid layoutthe definition of 'grid-row' in that specification.
grid-template-areas - CSS: Cascading Style Sheets
der>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> css #page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-
color: #8ca0ff; } #page > nav { grid-area: nav; background-
color: #ffa08c; } #page > main { grid-area: main; background-
color: #ffff64; } #page > footer { grid-area: foot; background-
color: #8cffa0; } result specifications specification status comment css grid layoutthe definition of 'grid-template-areas' in that specification.
grid-template-columns - CSS: Cascading Style Sheets
to<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa { background-
color: lime; } #areab { background-
color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-columns' in that specification.
grid-template-rows - CSS: Cascading Style Sheets
| auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa { background-
color: lime; } #areab { background-
color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specification.
grid-template - CSS: Cascading Style Sheets
| autowhere <length-percentage> = <length> | <percentage> examples defining a grid template css #page { display: grid; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } header { background-
color: lime; grid-area: head; } nav { background-
color: lightblue; grid-area: nav; } main { background-
color: yellow; grid-area: main; } footer { background-
color: red; grid-area: foot; } html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> result specifications specification status ...
grid - CSS: Cascading Style Sheets
/ <'grid-template-columns'> examples creating a grid layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-
color: #8ca0ff; width: 50px; height: 50px; } result specifications specification status comment css grid layoutthe definition of 'grid' in that specification.
<image> - CSS: Cascading Style Sheets
syntax the <image> data type can be represented with any of the following: an image denoted by the <url> data type a <gradient> data type a part of the webpage, defined by the element() function an image, image fragment or solid patch of
color, defined by the image() function a blending of two or more images defined by the cross-fade() function.
initial - CSS: Cascading Style Sheets
examples using initial to reset
color for an element html <p> <span>this text is red.</span> <em>this text is in the initial
color (typically black).</em> <span>this is red again.</span> </p> css p {
color: red; } em {
color: initial; } result specifications specification status comment css cascading and inheritance level 4the definition of 'initial' in that specification.
inline-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-
color: yellow; inline-size: 110px; } result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in that specification.
inset-block-end - CSS: Cascading Style Sheets
nitial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block-end' in that specification.
inset-block-start - CSS: Cascading Style Sheets
tial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-
color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'inset-block-start' in that specification.
inset-block - CSS: Cascading Style Sheets
applies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in that specification.
inset-inline-end - CSS: Cascading Style Sheets
initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-end' in that specification.
inset-inline-start - CSS: Cascading Style Sheets
tial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-start' in that specification.
inset-inline - CSS: Cascading Style Sheets
applies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in that specification.
inset - CSS: Cascading Style Sheets
pplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-
color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset' in that specification.
isolation - CSS: Cascading Style Sheets
o container elements, graphics elements, and graphics referencing elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | isolate examples forcing a new stacking context for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-
color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } result specifications specification status comment compositing and blending level 1the definition of 'isolation' in that specification.
justify-items - CSS: Cascading Style Sheets
html <article class="container" tabindex="0"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-
color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article span { background-
color: black;
color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result s...
justify-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-
color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } span:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span { background-
color: black;
color: white; margin: 1px; text-align: center; } article, span { paddin...
<length> - CSS: Cascading Style Sheets
html <div class="outer"> <div class="input-container"> <label>enter width:</label> <input type="text" id="length"> </div> <div class="inner"> </div> </div> <div class="results"> </div> css html { font-family: sans-serif; font-weight: bold; box-sizing: border-box; } .outer { width: 100%; height: 50px; background-
color: #eee; position: relative; } .inner { height: 50px; background-
color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); } .result { height: 20px; background-
color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); background-
color: orange; display: flex; al...
margin-block-end - CSS: Cascading Style Sheets
tial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block-end: 20px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-end' in that specification.
margin-block-start - CSS: Cascading Style Sheets
al value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-block-start: 20px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-start' in that specification.
margin-block - CSS: Cascading Style Sheets
es tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block: 20px 40px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block' in that specification.
margin-bottom - CSS: Cascading Style Sheets
's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bottom:-1.5em; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-
color:orange; width:320px; border:1px solid black; } div { width:320px; background-
color:gold; } result specifications specification status comment css basic box modelthe definition of 'margin-bottom' in that specification.
margin-inline-end - CSS: Cascading Style Sheets
ial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-end: 20px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-end' in that specification.
margin-inline-start - CSS: Cascading Style Sheets
l value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-start: 20px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-start' in that specification.
margin-inline - CSS: Cascading Style Sheets
s tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-inline: 20px 40px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline' in that specification.
margin-trim - CSS: Cascading Style Sheets
s specifiedanimation typediscrete formal syntax none | in-flow | all examples basic usage once support is implemented for this property, it will probably work like so: when you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: article { background-
color: red; margin: 20px; padding: 20px; display: inline-block; } article > span { background-
color: black;
color: white; text-align: center; padding: 10px; margin-right: 20px; } the problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it: span:last-child { margin-right: 0; } it is a pain having to write another rule t...
mask-border - CSS: Cascading Style Sheets
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; */ /* pr...
mask-clip - CSS: Cascading Style Sheets
ent and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-
color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <optio...
mask-composite - CSS: Cascading Style Sheets
ueaddapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-
color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="in...
mask-origin - CSS: Cascading Style Sheets
nheritednocomputed valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-
color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="m...
max-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-
color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
min-block-size - CSS: Cascading Style Sheets
efinition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-
color: yellow; min-block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-inline-size - CSS: Cascading Style Sheets
inition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-
color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.
min() - CSS: Cascading Style Sheets
let's look at some css: input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 400px); background-
color: pink; } form { margin: 4px; border: 1px solid black; padding: 4px; } here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width.
minmax() - CSS: Cascading Style Sheets
e> | <flex> | min-content | max-content | auto ] ) css properties minmax() function can be used within: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-
color: #8cffa0; padding: 10px; } #container > div { background-
color: #8ca0ff; padding: 5px; } html <div id="container"> <div> item as wide as the content, but at most 300 pixels.
object-position - CSS: Cascading Style Sheets
img { width: 300px; height: 250px; border: 1px solid black; background-
color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; } the first image is positioned with its left edge inset 10 pixels from the left edge of the element's box.
offset - CSS: Cascading Style Sheets
examples animating an element along a path html <div id="offsetelement"></div> css @keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetelement { width: 50px; height: 50px; background-
color: blue; offset: path("m 100 100 l 300 100 l 200 300 z") auto; animation: move 3s linear infinite; } result specifications specification status comment motion path module level 1the definition of 'offset' in that specification.
orphans - CSS: Cascading Style Sheets
it has a little bit more text than the first one.</p> </div> css div { background-
color: #8cffa0; height: 150px; columns: 3; orphans: 3; } p { background-
color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level 3the definition of 'orphans' in that specification.
padding-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-end' in that specification.
padding-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-start' in that specification.
padding-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block' in that specification.
padding-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-
color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-end' in that specification.
padding-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-
color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-start' in that specification.
padding-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-
color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-
color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that specification.
padding - CSS: Cascading Style Sheets
age as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3> css h4 { background-
color: lime; padding: 20px 50px; } h3 { background-
color: cyan; padding: 110px 50px 50px 110px; } result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10px; /* all sides: 10px padding */ padding: 10px 20px; /* top and bottom: 10px padding */ /* left and right: 20px padding */ ...
page-break-inside - CSS: Cascading Style Sheets
it has a little bit more text than the third one.</p> </div> css .page { background-
color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px; } .list, ol, ul, p { break-inside: avoid; } p { background-
color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block; background-
color: orange; } p:first-child { margin-top: 0; } result specifications specification status comment css paged media module level 3the...
<percentage> - CSS: Cascading Style Sheets
examples width and margin-left <div style="background-
color:navy;"> <div style="width:50%; margin-left:20%; background-
color:chartreuse;"> width: 50%, left margin: 20% </div> <div style="width:30%; margin-left:60%; background-
color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will output: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (9px)</span></p> ...
place-content - CSS: Cascading Style Sheets
("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap; background-
color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px; background-
color: #a0c8ff; } .small { font-size: 12px; height: 40px; } .large { font-size: 14px; height: 50px; } ...
place-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-
color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start center; } span:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-
color: black;
color: white; margin: 1px; text-align: center; } article, span { padding: 10px; bord...
repeat() - CSS: Cascading Style Sheets
</div> </div> css #container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-
color: #8cffa0; padding: 10px; } #container > div { background-
color: #8ca0ff; padding: 5px; } result specifications specification status comment css grid layoutthe definition of 'repeat()' in that specification.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
ge or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-
color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(3, 1fr); row-gap: 20px; } #grid > div { border: 1px solid green; background-
color: lime; } ...
scroll-margin-inline-end - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-
color: #663399;
color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-
color: #fff;
color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin-inline-start - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-
color: #663399;
color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-
color: #fff;
color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-margin-inline - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-
color: #663399;
color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-
color: #fff;
color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-
color: #663399;
color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-
color: #fff;
color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-snap-coordinate - CSS: Cascading Style Sheets
ory; font-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-snap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coordinate: 50px 0; } .scrollcontainer > div:nth-child(even) { background-
color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-
color: #87ccea; } result specifications not part of any standard.
scroll-snap-destination - CSS: Cascading Style Sheets
ination: 20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .scrollcontainer > div:nth-child(even) { background-
color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-
color: #87ccea; } result specifications not part of any standard.
scroll-snap-points-x - CSS: Cascading Style Sheets
</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-
color: #87ea87; } #container > div:nth-child(odd) { background-
color: #87ccea; } result specifications not part of any standard.
scroll-snap-points-y - CSS: Cascading Style Sheets
v> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-
color: #87ea87; } #container > div:nth-child(odd) { background-
color: #87ccea; } result specifications not part of any standard.
scroll-snap-stop - CSS: Cascading Style Sheets
: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 256px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /*
coloration */ .container > div:nth-child(even) { background-
color: #87ea87; } .container > div:nth-child(odd) { background-
color: #87ccea; } html <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>x mand.
scroll-snap-type - CSS: Cascading Style Sheets
e: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /*
coloration */ .container > div:nth-child(even) { background-
color: #87ea87; } .container > div:nth-child(odd) { background-
color: #87ccea; } results specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-type' in that specification.
shape-margin - CSS: Cascading Style Sheets
hem forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after this world is dead; and the inhabitant of mars, if he exists, probably knows its truth as we know it.</section> css section { max-width: 400px; } .shape { float: left; width: 150px; height: 150px; background-
color: maroon; clip-path: polygon(0 0, 150px 150px, 0 150px); shape-outside: polygon(0 0, 150px 150px, 0 150px); shape-margin: 20px; } result specifications specification status comment css shapes module level 1the definition of 'shape-margin' in that specification.
text-decoration-line - CSS: Cascading Style Sheets
line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax none | [ underline | overline | line-through | blink ] | spelling-error | grammar-error examples <p class="wavy">here's some text with wavy red underline!</p> <p class="both">this text has lines both above and below it.</p> .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-
color: red; } .both { text-decoration-line: underline overline; } specifications specification status comment css text decoration module level 3the definition of 'text-decoration-line' in that specification.
text-decoration-style - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax solid | double | dotted | dashed | wavy examples setting a wavy underline .example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-
color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-
color: red; } css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-
color: red; } html <p class="wavy">this text has a wavy red line beneath it.</p> results specifications specification status comment ...
text-decoration-thickness - CSS: Cascading Style Sheets
typeby computed value type formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-
color: red; text-decoration-thickness: 1px; } .thick { text-decoration-line: underline; text-decoration-style: solid; text-decoration-
color: red; text-decoration-thickness: 5px; } .shorthand { text-decoration: underline solid red 5px; } results specifications specification status comment css text decoration module level 4the definition of 'text-decoration-...
text-underline-offset - CSS: Cascading Style Sheets
only the bottom one is offset.</p> p { text-decoration: underline wavy red; text-underline-offset: 1em; } .twolines { text-decoration-
color: purple; text-decoration-line: underline overline; } specifications specification status comment css text decoration module level 4the definition of 'text-underline-offset' in that specification.
matrix() - CSS: Cascading Style Sheets
eous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80); background-
color: pink; } result specifications specification status comment css transforms level 1the definition of 'matrix()' in that specification.
perspective() - CSS: Cascading Style Sheets
100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-
color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-
color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front { background-
color: limegreen; transform: translate3d(0, 0, 50px); } result specifications specification status comment css transforms level 2the definition of 'perspective()' in that specification...
rotate3d() - CSS: Cascading Style Sheets
(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 examples rotating on the y-axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-
color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-
color: pink; } result rotating on a custom axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-
color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg); background-
color: pink; } result specificati...
rotateX() - CSS: Cascading Style Sheets
1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .rotated { transform: rotatex(45deg); background-
color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatex()' in that specification.
rotateY() - CSS: Cascading Style Sheets
cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .rotated { transform: rotatey(60deg); background-
color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatey()' in that specification.
rotateZ() - CSS: Cascading Style Sheets
cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .rotated { transform: rotatez(45deg); background-
color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatez()' in that specification.
scaleX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 s0 01 s00010001 s00010001 s000010000100001 [s 0 0 1 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .scaled { transform: scalex(0.6); background-
color: pink; } result specifications specification status comment css transforms level 1the definition of 'scalex()' in that specification.
scaleY() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10 0s 1000s0001 1000s0001 10000s0000100001 [1 0 0 s 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .scaled { transform: scaley(0.6); background-
color: pink; } result specifications specification status comment css transforms level 1the definition of 'scaley()' in that specification.
scaleZ() - CSS: Cascading Style Sheets
10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px); background-
color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) translatez(-100px); background-
color: pink; } result specifications specification status commen...
skew() - CSS: Cascading Style Sheets
ates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-
color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-
color: pink; } result specifications specification status ...
skewX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .skewed { transform: skewx(10deg); /* equal to skew(10deg) */ background-
color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewx()' in that specification.
skewY() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-
color: skyblue; } .skewed { transform: skewy(40deg); background-
color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewy()' in that specification.
translate() - CSS: Cascading Style Sheets
10tx01ty001 10tx01ty001 100tx010ty00100001 [1 0 0 1 tx ty] formal syntax translate(<length-percentage> , <length-percentage>?) examples using a single-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-
color: skyblue; } .moved { transform: translate(10px); /* equal to: translatex(10px) or translate(10px, 0) */ background-
color: pink; } result combining y-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-
color: skyblue; } .moved { transform: translate(10px, 10px); background-
color...
translateX() - CSS: Cascading Style Sheets
10t010001 10t010001 100t010000100001 [1 0 0 1 t 0] formal syntax translatex(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-
color: skyblue; } .moved { transform: translatex(10px); /* equal to translate(10px) */ background-
color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatex()' in that specification.
translateY() - CSS: Cascading Style Sheets
10001t001 10001t001 1000010t00100001 [1 0 0 1 0 t] formal syntax translatey(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-
color: skyblue; } .moved { transform: translatey(10px); background-
color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatey()' in that specification.
translateZ() - CSS: Cascading Style Sheets
html <div>static</div> <div class="moved">moved</div> css div { position: relative; width: 60px; height: 60px; left: 100px; background-
color: skyblue; } .moved { transform: perspective(500px) translatez(200px); background-
color: pink; } what really matters here is the class "moved"; let's take a look at what it does.
<transform-function> - CSS: Cascading Style Sheets
kground-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px;
color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0...
transform-style - CSS: Cascading Style Sheets
</code></label> <input type="checkbox" id="preserve" checked> </div> css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px;
color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0...
transition-property - CSS: Cascading Style Sheets
syntax /* keyword values */ transition-property: none; transition-property: all; /* <custom-ident> values */ transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically; /* multiple values */ transition-property: test1, animation4; transition-property: all, height,
color; transition-property: all, -moz-specific, sliding; /* global values */ transition-property: inherit; transition-property: initial; transition-property: unset; values none no properties will transition.
transition - CSS: Cascading Style Sheets
to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* property name | duration | timing function | delay */ transition: margin-right 4s ease-in-out 1s; /* apply to 2 properties */ transition: margin-right 4s,
color 1s; /* apply to all changed properties */ transition: all 0.5s ease-out; /* global values */ transition: inherit; transition: initial; transition: unset; the transition property is specified as one or more single-property transitions, separated by commas.
Used value - CSS: Cascading Style Sheets
the used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-
color or background-size) and with position and float.
var() - CSS: Cascading Style Sheets
examples :root { --main-bg-
color: pink; } body { background-
color: var(--main-bg-
color); } /* fallback */ /* in the component’s style: */ .component .header {
color: var(--header-
color, blue); /* header-
color isn’t set, and so remains blue, the fallback value */ } .component .text {
color: var(--text-
color, black); } /* in the larger application’s style: */ .component { --text-
color: #080; } specifications ...
white-space - CSS: Cascading Style Sheets
excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> .box { width: 300px; padding: 16px; border-radius: 10px; } #css-code { background-
color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #results { background-
color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var results = document.queryselector("#results p"); select.addeventlistener("change", funct...
widows - CSS: Cascading Style Sheets
it has a little bit more text than the first one.</p> </div> css div { background-
color: #8cffa0; columns: 3; widows: 2; } p { background-
color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level 3the definition of 'widows' in that specification.
width - CSS: Cascading Style Sheets
ion typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples default width p.goldie { background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> pixels and ems .px_length { width: 200px; background-
color: red;
color: white; border: 1px solid black; } .em_length { width: 20em; background-
color: white;
color: red; border: 1px solid black; } <div class="px_length">width measured in px</div> <div class="em_length">width measured in em</div> percentage .percent { width: 20%; background-
color: silver; border: 1px solid red; } <div class="percent">width in percentage</div> m...
writing-mode - CSS: Cascading Style Sheets
d class="example text5"><span>example text</span></td> <td class="example text5"><span>מלל ארוך לדוגמא</span></td> <td class="example text5"><span>1994年に至っては</span></td> </tr> </table> css some preparatory css just to make things look a little better: table { border-collapse:collapse; } td, th { border: 1px black solid; padding: 3px; } th { background-
color: lightgray; } .example { height:75px; width:75px; } the css that adjusts the directionality of the content looks like this: .example.text1 span, .example.text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example.text2 span, .example.text2 { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode...
zoom - CSS: Cascading Style Sheets
p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { background-
color: gold; zoom: normal; } div#b { background-
color: green; zoom: 200%; } div#c { background-
color: blue; zoom: 2.9; } result specifications not part of any standard.
CSS: Cascading Style Sheets
css first steps css (cascading style sheets) is used to style and layout web pages — for example, to alter the font,
color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
Cross-browser audio basics - Developer guides
dio> <div id="controls"> <span id="loading">loading</span> <button id="play" style="display:none">play</button> <button id="pause" style="display:none" >pause</button> </div> <div id="progress"> <div id="bar"></div> </div> styled like so: #controls { width: 80px; float: left; } #progress { margin-left: 80px; border: 1px solid black; } #bar { height: 20px; background-
color: green; width: 0; } now let's wire this thing up with javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); var loading = document.getelementbyid('loading'); var bar = document.getelementbyid('bar'); function displaycontrols() { loading.styl...
Media buffering, seeking, and time ranges - Developer guides
rce src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; background-
color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-
color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { ...
Making content editable - Developer guides
s[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc('fore
color',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>-
color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('back
color',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- backgro...
Printing - Developer guides
t; ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = surl; document.body.appendchild(ohiddframe); } </script> </head> <body> <p><span onclick="printpage('externalpage.html');" style="cursor:pointer;text-decoration:underline;
color:#0000ff;">print external page!</span></p> </body> </html> note: older versions of internet explorer cannot print the contents of a hidden <iframe>.
HTML attribute: minlength - HTML: Hypertext Markup Language
input { border: 2px solid current
color; } input:invalid { border: 2px dashed red; } input:invalid:focus { background-image: linear-gradient(pink, lightgreen); } specifications specification status html living standardthe definition of 'minlength attribute' in that specification.
HTML attribute: pattern - HTML: Hypertext Markup Language
e a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size: 80%;
color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must describe the pattern.
Block-level elements - HTML: Hypertext Markup Language
the following example demonstrates the block-level element's influence: block-level elements html <p>this paragraph is a block-level element; its background has been
colored to display the paragraph's parent element.</p> css p { background-
color: #8abb55; } usage block-level elements may appear only within a <body> element.
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
starting the download the code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let imageurl = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2fmdn_logo-only_
color.svg?1535749917189"; downloadedimg = new image; downloadedimg.crossorigin = "anonymous"; downloadedimg.addeventlistener("load", imagereceived, false); downloadedimg.src = imageurl; } we're using a hard-coded url here (imageurl), but that could easily come from anywhere.
<a>: The Anchor element - HTML: Hypertext Markup Language
<a href="" download="my_painting.png">download my painting</a> </p> <canvas width="300" height="300"></canvas> css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c;
color: #fff; padding: 5px 10px; } javascript var canvas = document.queryselector('canvas'), c = canvas.getcontext('2d'); c.fillstyle = 'hotpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlistener('mousemove', event => draw(event.offsetx, event.offsety) ); canvas.addeventlistener('mous...
<input type="checkbox"> - HTML: Hypertext Markup Language
>other</label> <input type="text" id="othervalue" name="other"> </div> <div> <button type="submit">submit form</button> </div> </fieldset> </form> css html { font-family: sans-serif; } form { width: 600px; margin: 0 auto; } div { margin-bottom: 10px; } fieldset { background: cyan; border: 5px solid blue; } legend { padding: 10px; background: blue;
color: cyan; } javascript var othercheckbox = document.queryselector('input[value="other"]'); var othertext = document.queryselector('input[id="othervalue"]'); othertext.style.visibility = 'hidden'; othercheckbox.addeventlistener('change', () => { if(othercheckbox.checked) { othertext.style.visibility = 'visible'; othertext.value = ''; } else { othertext.style.visibility = 'hidden';...
<input type="file"> - HTML: Hypertext Markup Language
margin: 0 auto; padding: 20px; border: 1px solid black; } form ol { padding-left: 0; } form li, div > p { background: #eee; display: flex; justify-content: space-between; margin-bottom: 10px; list-style-type: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left: 10px; } form label, form button { background-
color: #7f9ccb; padding: 5px 10px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto; } form label:hover, form button:hover { background-
color: #2d5ba3;
color: white; } form label:active, form button:active { background-
color: #0d3f8f;
color: white; } this is similar to what we've seen before — nothing special to comment on.
Object.prototype.toSource() - JavaScript
examples using tosource() the following code defines the dog object type and creates thedog, an object of type dog: function dog(name, breed,
color, sex) { this.name = name; this.breed = breed; this.
color =
color; this.sex = sex; } thedog = new dog('gabby', 'lab', 'chocolate', 'female'); calling the tosource() method of thedog displays the javascript source that defines the object: thedog.tosource(); // returns ({name:"gabby", breed:"lab",
color:"chocolate", sex:"female"}) specifications not part of any standard.
String - JavaScript
string.prototype.anchor() <a name="name"> (hypertext target) string.prototype.big() <big> string.prototype.blink() <blink> string.prototype.bold() <b> string.prototype.fixed() <tt> string.prototype.font
color() <font
color="
color"> string.prototype.fontsize() <font size="size"> string.prototype.italics() <i> string.prototype.link() <a href="url"> (link to url) string.prototype.small() <small> string.prototype.strike() <strike> string.prototype.sub() <sub> string.prototype.sup() <sup> examples string conversion it's possible to use string as a more reliable tostring() alternative, a...
in operator - JavaScript
let
color1 = new string('green') 'length' in
color1 // returns true let
color2 = 'coral' // generates an error (
color2 is not a string object) 'length' in
color2 using in with deleted or undefined properties if you delete a property with the delete operator, the in operator returns false for that property.
this - JavaScript
// when called as a listener, turns the related element blue function bluify(e) { // always true console.log(this === e.currenttarget); // true when currenttarget and target are the same object console.log(this === e.target); this.style.background
color = '#a5d9f3'; } // get a list of every element in the document var elements = document.getelementsbytagname('*'); // add bluify as a click listener so when the // element is clicked on, it turns blue for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler, its this i...
void operator - JavaScript
for example: <a href="javascript:void(0);"> click here to do nothing </a> <a href="javascript:void(document.body.style.background
color='green');"> click here for green background </a> note: javascript: pseudo protocol is discouraged over other alternatives, such as unobtrusive event handlers.
export - JavaScript
; // valid export defaultexport from 'bar.js'; // invalid the correct way of doing this is to rename the export: export { default as defaultexport } from 'bar.js'; examples using named exports in a module my-module.js, we could include the following code: // module "my-module.js" function cube(x) { return x * x * x; } const foo = math.pi + math.sqrt2; var graph = { options: {
color:'white', thickness:'2px' }, draw: function() { console.log('from graph draw function'); } } export { cube, foo, graph }; then in the top-level module included in your html page, we could have: import { cube, foo, graph } from './my-module.js'; graph.options = {
color:'blue', thickness:'3px' }; graph.draw(); console.log(cube(3)); // 27 console.log(foo); // 4.5558...
for...in - JavaScript
var triangle = {a: 1, b: 2, c: 3}; function
coloredtriangle() { this.
color = 'red'; }
coloredtriangle.prototype = triangle; var obj = new
coloredtriangle(); for (const prop in obj) { if (obj.hasownproperty(prop)) { console.log(`obj.${prop} = ${obj[prop]}`); } } // output: // "obj.
color = red" specifications specification ecmascript (ecma-262)the definition of 'for...in statement' in that specification.
Codecs used by WebRTC - Web media technologies
it's worth noting that the rfc covers a variety of video-related requirements, including
color spaces (srgb is the preferred, but not required, default
color space), recommendations for webcam processing features (automatic focus, automatic white balance, automatic light level), and so on.
Progressive web app structure - Progressive web apps (PWAs)
the app shell is everything outside the content section: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-
color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><...
Mobile first - Progressive web apps (PWAs)
i had to make sure both of these were not direct children of the <article>, otherwise the following would not work: #bottom, #top { font-size: 0.8em; position:absolute; right: 1em; text-decoration: none; } #top {
color: white; top: 0.5em; } #bottom { bottom: 0.5em; } i also set their parents to be positioned relatively, so they would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned relative to the <body> element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than abo...
The building blocks of responsive design - Progressive web apps (PWAs)
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.
Structural overview of progressive web apps - Progressive web apps (PWAs)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-
color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><...
accumulate - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animate
color>, <animatemotion>, and <animatetransform> usage notes value none | sum default value none animatable no sum specifies that each repeat iteration after the first builds upon the last value of the previous iteration.
additive - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animate
color>, <animatemotion>, and <animatetransform> usage notes value replace | sum default value replace animatable no sum specifies that the animation will add to the underlying value of the attribute and other lower priority animations.
attributeName - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animate
color>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value <name> default value none animatable no <name> this value indicates the name of the css property or attribute of the target element to be animated.
attributeType - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animate
color>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable.
begin - SVG: Scalable Vector Graphics
six elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, <discard>, and <set> animate, animate
color, animatemotion, animatetransform, set for <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set>, begin defines when the element should begin, i.e.
by - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animate
color>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributename="width" fill="freeze" by="50" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that will...
calcMode - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animate
color>, <animatemotion>, and <animatetransform> usage notes value discrete | linear | paced | spline default value linear animatable no discrete this specifies that the animation function will jump from one value to the next without any interpolation.
class - SVG: Scalable Vector Graphics
#cc0000; } ]]> </style> <rect class="rectclass" x="10" y="10" width="100" height="100"/> <circle class="circleclass" cx="40" cy="50" r="26"/> </svg> </body> </html> elements the following elements can use the class attribute: <a> <altglyph> <circle> <clippath> <defs> <desc> <ellipse> <feblend> <fe
colormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <feflood> <fegaussianblur> <feimage> <femerge> <femorphology> <feoffset> <fespecularlighting> <fetile> <feturbulence> <filter> <font> <foreignobject> <g> <glyph> <glyphref> <image> <line> <lineargradient> <marker> <mask> <missing-glyph> <path> <pattern> <polygon> <po...
dur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value specifi...
end - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set> usage notes default value none value <end-value-list> animatable no the <end-value-list> is a semicolon-separated list of values.
exponent - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-
color="#ff0000" /> <stop offset="0.5" stop-
color="#00ff00" /> <stop offset="1" stop-
color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="1"/> <fefuncg type="gamma" exponent="1"/> <fefuncb type="gamma" exponent="1"/> </fecomponenttransfer> ...
from - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animate
color>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100"> <animate attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact v...
kernelMatrix - SVG: Scalable Vector Graphics
0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_
color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_
color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <list of numbers> default value none animatable yes <list of number...
keyPoints - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="motionpath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemotion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calcmode="linear"> <mpath xlink:href="#motionpath"/> </animatemotion> </circle> <...
keySplines - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animate
color>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5...
keyTimes - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animate
color>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" repeatcount="indefinite" ...
max - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifies ...
min - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies the...
paint-order - SVG: Scalable Vector Graphics
example <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-
color="#888"/> <stop stop-
color="#ccc" offset="1"/> </lineargradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold"> <text x="200" y="75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke...
repeatCount - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="5"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none animatable no <number> this value specifies the numbe...
repeatDur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none animatable no <clock-value> this value specifies the ...
restart - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animate
color>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } a { fill: blue; text-decoration: underline; cursor: pointer; } <svg viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.get...
result - SVG: Scalable Vector Graphics
seventeen elements are using this attribute: <feblend>, <fe
colormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <f...
systemLanguage - SVG: Scalable Vector Graphics
35 elements are using this attribute: <a>, <altglyph>, <animate>, <animate
color>, <animatemotion>, <animatetransform>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47.
x1 - SVG: Scalable Vector Graphics
units attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-
color="black" /> <stop offset="100%" stop-
color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0" stop-
color="black" /> <stop offset="100%" stop-
color="red" /> </lineargradient> ...
x2 - SVG: Scalable Vector Graphics
ts attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-
color="black" /> <stop offset="100%" stop-
color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset="0" stop-
color="black" /> <stop offset="100%" stop-
color="red" /> </lineargradient> ...
xlink:arcrole - SVG: Scalable Vector Graphics
for example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animate
color>, <animatemotion>, <animatetransform>, <
color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, <use> usage notes value <iri> default value none animatable no <iri> this value specifies an iri reference that identifies some resou...
xlink:title - SVG: Scalable Vector Graphics
these elements are using this attribute: <a>, <altglyph>, <animate>, <animate
color>, <animatemotion>, <animatetransform>, <
color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage context value <anything> default value none animatable no <anything> this value specifies the title used to describe ...
xlink:type - SVG: Scalable Vector Graphics
twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animate
color>, <animatemotion>, <animatetransform>, <
color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage notes value simple default value simple animatable no simple this value specifies that the referred resource is a simple link.
<altGlyph> - SVG: Scalable Vector Graphics
type: <iri> ; default value: none; animatable: no global attributes core attributes most notably: id lang styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility xlink attributes xlink:href, xlink:type, xlink:role, xlink...
<circle> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
<clipPath> - SVG: Scalable Vector Graphics
value type: userspaceonuse|objectboundingbox ; default value: userspaceonuse; animatable: yes global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule,
color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<text...
<ellipse> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
<feBlend> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-
color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_
color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects modu...
<feImage> - SVG: Scalable Vector Graphics
example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_
color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feimage>' in that specification.
<fePointLight> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="80" lighting-
color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_
color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications ...
<feSpotLight> - SVG: Scalable Vector Graphics
example html content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="4" lighting-
color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_
color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result ...
<feTile> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_
color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fetile>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface.
<image> - SVG: Scalable Vector Graphics
example basic rendering of a png image in svg: svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_
color.png" height="200" width="200"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of '<image>' in that specification.
<missing-glyph> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <
color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgmissingglyphelement interface.
<path> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
<polygon> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
<polyline> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
<rect> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
<script> - SVG: Scalable Vector Graphics
uivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { function get
color () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fill = get
color() }) }) //...
<tref> - SVG: Scalable Vector Graphics
usage context categoriestext content element, text content child elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animate
color>, <set> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgtrefelement interface.
<use> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule,
color,
color-interpolation,
color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-che...
<view> - SVG: Scalable Vector Graphics
aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-
color="#8cffa0" /> <stop offset="100%" stop-
color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizeview"> <text x="5" y="20" font-size="20">half size</...
SVG animation with SMIL - SVG: Scalable Vector Graphics
smil allows you to: animate the numeric attributes of an element (x, y, ...) animate transform attributes (translation or rotation) animate
color attributes follow a motion path this is done adding an svg element like <animate> inside the svg element to animate.