Search completed in 1.43 seconds.
211 results for "contrast":
Your results are loading. Please wait...
Color contrast - Accessibility
the color contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.
... when designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text.
... 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.
...And 10 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.
... syntax the -ms-high-contrast media feature is specified as one of the following values.
...And 9 more matches
prefers-contrast - CSS: Cascading Style Sheets
the prefers-contrast css media feature is used to detect if the user has requested that the web content is presented with a higher (or lower) contrast.
... more indicates that user has notified the system that they prefer an interface that has a higher level of contrast.
... less indicates that user has notified the system that they prefer an interface that has a lower level of contrast.
...And 2 more matches
-ms-high-contrast-adjust - Archive of obsolete content
the -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.
... initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values auto indicates the applicable css properties will be adjusted as expected when the system is in high contrast mode.
... none indicates the applicable css properties will not be adjusted when the system is in high contrast mode.
... remarks the -ms-high-contrast-adjust property works with the -ms-high-contrast media feature.
contrast() - CSS: Cascading Style Sheets
the contrast() css function adjusts the contrast of the input image.
... syntax contrast(amount) parameters amount the contrast of the result, specified as a <number> or a <percentage>.
... a value under 100% decreases the contrast, while a value over 100% increases it.
... examples setting contrast using numbers and percentages contrast(0) /* completely gray */ contrast(65%) /* 65% contrast */ contrast(1) /* no effect */ contrast(200%) /* double contrast */ specifications specification status filter effects module level 1the definition of 'contrast()' in that specification.
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.
...(see understanding success criterion 1.4.3: contrast) a viewer's distance from the screen, the ambient background, the health of his eyes, and more all affect how that color is received by the viewer.
... color, contrast, and luminance are among the most central and critical concepts to creating accessible web content with color.
...And 25 more matches
Accessibility Inspector - Firefox Developer Tools
the available menu items include: none — don't show the possible list of issues all issues — check for all types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the type of issues you selected.
... 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.
...And 9 more matches
Perceivable - Accessibility
the classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too.
... see color and color contrast and multiple labels.
... 1.4.3 minimum contrast (aa) the color contrast between background and foreground content should be at a minimum level to ensure legibility: text and its background should have a contrast ratio of at least 4.5:1.
...And 6 more matches
filter - CSS: Cascading Style Sheets
WebCSSfilter
syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter...
...ight:100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } contrast() the contrast() function adjusts the contrast of the input image.
...values of an amount over 100% are allowed, providing results with more contrast.
...And 6 more matches
CSS and JavaScript accessibility best practices - Learn web development
your text color should contrast well with your background color.
... color and color contrast when choosing a color scheme for your website, make sure that the text (foreground) color contrasts well with the background color.
... there is an easy way to check whether your contrast is large enough to not cause problems.
...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.
... (...) about one-third complained about low contrast between text and background." top ten web design mistakes of 2005: 1.
...And 5 more matches
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
html <div class="animation">animated box</div> 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.
... this will help not only users with low vision and contrast sensitivity issues but also users that are working on a computer or phone with direct sunlight.
... syntax the -ms-high-contrast media feature is specified as one of the following values.
...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.
...use a tool like webaim's color contrast checker to check whether your scheme is contrasting enough.
... note: a high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight.
...And 4 more matches
The Firefox codebase: CSS Guidelines
writing cross-platform css firefox supports many different platforms and each of those platforms can contain many different configurations: windows 7, 8 and 10 default theme aero basic (windows 7, 8) windows classic (windows 7) high contrast (all versions) linux macos file structure the browser/ directory contains styles specific to firefox the toolkit/ directory contains styles that are shared across all toolkit applications (thunderbird and seamonkey) under each of those two directories, there is a themes directory containing 4 sub-directories: shared linux osx windows the shared directories contain styles sh...
... high contrast mode content area on windows high contrast mode, in the content area, gecko does some automatic color adjustments regarding page colors.
... part of those adjustments include making all box-shadow invisible, so this is something to be aware of if you create a focus ring or a border using the box-shadow property: consider using a border or an outline if you want the border/focus ring to stay visible in high-contrast mode.
...And 3 more matches
Web accessibility for seizures and physical reactions - Accessibility
certain visual patterns, especially stripes of contrasting colors.
... prefers-contrast from w3c's draft document, media queries level 5 section on prefers-contrast: "the prefers-contrast media feature is used to detect if the user has requested the system increase or decrease the amount of contrast between adjacent colors.
... for example, many users have difficulty reading text that has a small difference in contrast to the text background and would prefer a larger contrast." sometimes there can be such a thing as too much contrast; a halo effect around text can occur in such situations and actually reduce legibility.
...And 3 more matches
::placeholder - CSS: Cascading Style Sheets
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.
... it is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.
... color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values.
...And 3 more matches
XUL accessibility guidelines - Archive of obsolete content
do this by changing system display settings to an accessible theme (such as the high-contrast theme on windows, available via left-alt + left-shift + printscreen).
...verify that the layout and contrast is sufficient to distinguish interactive elements one from another and from static portions of the application.
... color color alone is not used to convey meaning and sufficient contrast exists between font color and background color.
...And 2 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.
... when the windows "high contrast theme" is used classic, and thus the system look and feel, is automatically selected.
...And 2 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.
... contrast sensitivity loss can be caused by cataracts, glaucoma, diabetic retinopathy, and other disorders of the retina; it can be age-related, congenital, or due to an injury.
... in the simulate menu, you can choose one option at a time from the following list: none — choose this to return to normal display protanomaly (low red) deuteranomaly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue) contrast loss these simulations are not completely medically accurate.
...And 2 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.
... 98 perceivable accessibility, principle 1, wcag, web content accessibility guidelines, contrast, different presentation, text alternatives, time-based media this article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the perceivable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1.
... 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 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.
... let's download and install the paciello group's colour contrast analyser.
... note: alternatively you can find a number of contrast checkers online, such as webaim's color contrast checker.
... for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page.
Accessibility information for UI designers and developers
color enough contrast ensure there is enough contrast between foreground and background colors.
...calculating this ratio is easiest done with a tool, for example lea verou's contrast ratio.
... see also: understanding sc 1.4.3: contrast the focus indicator users who navigate by keyboard (or other specialised input methods), rely on focus styles to see where they are on the page.
...placeholders are best avoided for this, as they are often too low in contrast.
CanvasRenderingContext2D.filter - Web APIs
contrast() a css <percentage>.
... adjusts the contrast of the drawing.
...this example applies the contrast, sepia, and drop-shadow filters to a photo of a gecko.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
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.
... symbols which have the same luminance as their background are perceptually less securely located in space and time than are symbols with higher luminance contrast.
... they tend to "float" visually or be "captured" by adjacent symbols with high luminance-contrast.
... text and padding wcag standards for contrast perception do not take into account the effect of padding.
::selection - CSS: Cascading Style Sheets
if overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.
... color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors.
... to meet current web content accessibility guidelines (wcag), text content must have a contrast ratio of 4.5:1, or 3:1 for larger text such as headings.
... (wcag defines large text as between 18.66px and 24px and bold, 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 specifications specification status comment css pseudo-elements level 4the definition of '::selection' in that specification.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
the wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors.
...common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes.
...if the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.
... color, backgrounds, contrast, and printing what looks good on screen may look very different on paper.
Accessible Toolkit Checklist
some low vision users will be running your software with high contrast or large font themes.
...ne mnemonics for all standard common dialogs (like yes/no confirmations and retry/exit error dialogs) support mnemonics in dialogs created via method calls layout engine - drawing underline under correct letter events - making keystrokes do the right thing msaa support, via iaccessible's get_acckeyboardshortcut support for ms windows settings when high contrast checkbox is set (in accessibility control panel, spi_gethighcontrast), or when user selects a "native" skin option in your software, then get all look and feel from current os skin.
... 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 when the alt key is pressed.
Index - Web APIs
WebAPIIndex
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.
...in contrast with a standard audiocontext, an offlineaudiocontext doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the result to an audiobuffer.
...this is in contrast to domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
background-color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the contrast ratio between the background color and the color of the text placed over it 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 luminance of the 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 valuetransparentapplies toall elements.
color-adjust - CSS: Cascading Style Sheets
for example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper.
... formal definition initial valueeconomyapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax economy | exact examples preserving low contrast in this example, a box is shown which uses a background-image and a translucent linear-gradient() function atop a black background color to have a dark blue gradient behind medium red text.
... css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> <p>need more contrast!</p> </div> result specifications specification status comment css color adjustment module level 1the definition of 'color-adjust' in that specification.
color - CSS: Cascading Style Sheets
WebCSScolor
accessibility concerns 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 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 valuevaries from one browser to anotherapplies toall elements.
<filter-function> - CSS: Cascading Style Sheets
contrast() increases or decreases the image's contrast.
... html <div></div> <ul> <li> <label for="filter-select">choose a filter function:</label> <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px...
...tlistener('change', () => { setslider(selectelem.value); setdiv(selectelem.value); }); slider.addeventlistener('input', () => { setdiv(selectelem.value); }); function setslider(filter) { if(filter === 'blur') { slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { slider.value = 1; slider.min = 0; slider.max = 4; slider.step = 0.05; slider.setattribute('data-unit', ''); } else if(filter === 'drop-shadow') { slider.value = 0; slider.min = -20; slider.max = 40; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'opacity') { slider.value = 1; slider.min...
opacity - CSS: Cascading Style Sheets
WebCSSopacity
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.</div>...
outline-color - CSS: Cascading Style Sheets
if the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.
... color contrast ratio is determined by comparing the luminosity of the text and background color values.
... 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 valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritednocomputed valuefor the keyword invert, the computed value is invert.
scrollbar-color - CSS: Cascading Style Sheets
accessibility concerns when using scrollbar-color property with specific color values, authors should ensure the specified colors have enough contrast between them.
... for keyword values, uas should ensure the colors they use have enough contrast.
... see techniques for wcag 2.0: g183: using a contrast ratio of 3:1.
text-decoration-color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line 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 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 valuecurrentcolorapplies toall elements.
Index - Archive of obsolete content
in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
... 2103 -ms-high-contrast-adjust css, css property, non-standard, reference, recipe:css-property the -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.
A XUL Bestiary - Archive of obsolete content
in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
...by contrast, the skin is just the css and referenced graphics for a xul file, the localization strings are just a dtd, and the content is just the xul.
Create Your Own Firefox Background Theme - Archive of obsolete content
image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
... image requirements dimensions should be 3000px wide × 100px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
157 forbidden header name fetch, glossary, http, headers, forbidden a forbidden header name is the name of any http header that cannot be modified programmatically; specifically, an http request header name (in contrast with a forbidden response header name).
...the mobile-first approach contrasts with the older approach of designing for desktop screen sizes first, and then only later adding some support for small screen sizes.
HTML: A good basis for accessibility - Learn web development
link text color, like all text, has to be significantly different from the background color (a 4.5:1 contrast).
...with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color.
HTML: A good basis for accessibility - Learn web development
link text color, like all text, has to be significantly different from the background color (a 4.5:1 contrast).
...with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color.
Introduction to the server side - Learn web development
by contrast, server-side website programming mostly involves choosing which content is returned to the browser in response to requests.
... in contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an http server is really hard to do from scratch in say python, but python web frameworks like django provide one out of the box, along with other very useful tools.
Software accessibility: Where are we today?
magnification enlarges the screen's contents: for those with low vision, it may suffice to use a larger font, a built-in high contrast theme, or even just an an extra large screen.
...screen magnifiers also have some built-in text-to-speech and the ability to filter text and images through various color palettes, such as black on yellow for high contrast, or green on blue for low contrast.
Experimental features in Firefox
nightly 77 no developer edition 77 no beta 77 no release 77 no preference name layout.css.grid-template-masonry-value.enabled media feature: prefers-contrast the prefers-contrast media feature is used to detect whether the user has specified a preference for higher (or lower) contrast in the presentation of web content.
... nightly 80 no developer edition 80 no beta 80 no release 80 no preference name layout.css.prefers-contrast.enabled apis graphics: canvas, webgl, and webgpu interface: offscreencanvas the offscreencanvas interface provides a canvas that can be rendered offscreen.
Inspect and select colors - Firefox Developer Tools
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.
... hovering the mouse over the contrast message gives a more detailed explanation.
History.pushState() - Web APIs
WebAPIHistorypushState
in contrast, setting window.location keeps you at the same document only if you modify only the hash.
...in contrast, setting window.location = "#foo"; only creates a new history entry if the current hash isn't #foo.
Working with the History API - Web APIs
in contrast, setting window.location keeps you at the same document only if you modify only the hash.
...in contrast, setting window.location = "#foo"; creates a new history entry only if the current hash isn't #foo.
Node.textContent - Web APIs
WebAPINodetextContent
in contrast, innertext only shows “human-readable” elements.
...in contrast, innertext is aware of styling and won’t return the text of “hidden” elements.
:focus - CSS: Cascading Style Sheets
WebCSS:focus
wcag 2.1 sc 1.4.11 non-text contrast requires that the visual focus indicator be at least 3 to 1.
...tips for designing useful and usable focus indicators :focus { outline: none; } never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass wcag 2.1 sc 1.4.11 non-text contrast.
@media - CSS: Cascading Style Sheets
WebCSS@media
prefers-contrast detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors added in media queries level 5.
... adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.
Microsoft CSS extensions - CSS: Cascading Style Sheets
-ms-accelerator -ms-block-progression -ms-content-zoom-chaining -ms-content-zooming -ms-content-zoom-limit -ms-content-zoom-limit-max -ms-content-zoom-limit-min -ms-content-zoom-snap -ms-content-zoom-snap-points -ms-content-zoom-snap-type -ms-filter -ms-flow-from -ms-flow-into -ms-high-contrast-adjust -ms-hyphenate-limit-chars -ms-hyphenate-limit-lines -ms-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-track-color -ms-scroll-chaining -ms-scroll-li...
... -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track ::-ms-value media features -ms-high-contrast css-related dom apis mscontentzoomfactor msgetpropertyenabled msgetregioncontent msrangecollection msregionoverflow ...
backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filte...
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-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>?
cursor - CSS: Cascading Style Sheets
WebCSScursor
progress the program is busy in the background, but the user can still interact with the interface (in contrast to wait).
... wait the program is busy, and the user can't interact with the interface (in contrast to progress).
image-rendering - CSS: Cascading Style Sheets
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.
...ed" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </div> img { height: 200px; } css .auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } .crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } result specifications specification status comment css images module level 3the definition of 'image-rendering' in that specification.
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
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.
PATCH - HTTP
WebHTTPMethodsPATCH
contrast this with put; which is a complete representation of a resource.
...contrast this with put; which is always idempotent.
Introduction - JavaScript
in contrast to java's compile-time system of classes built by declarations, javascript supports a runtime system based on a small number of data types representing numeric, boolean, and string values.
... in contrast, javascript descends in spirit from a line of smaller, dynamically typed languages such as hypertalk and dbase.
Modules - Archive of obsolete content
in contrast, compartments with content privileges can only use those features available to ordinary websites.
context-menu - Archive of obsolete content
if you run this add-on you'll see that it always logs "body", even if you click on a paragraph element inside the page: info: contextmenu-example: clicked: body by contrast, this add-on uses the pagecontext: var script = "self.on('click', function (node, data) {" + " console.log('clicked: ' + node.nodename);" + "});"; var cm = require("sdk/context-menu"); cm.item({ label: "body context", context: cm.pagecontext(), contentscript: script }); it will log the name of the actual node clicked: info: contextmenu-example: clicked: p th...
widget - Archive of obsolete content
by contrast, any changes you make to an instance of the normal widget class will be applied across all browser windows.
Index - Archive of obsolete content
ArchiveMozillaXULIndex
in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
valueNumber - Archive of obsolete content
« xul reference valuenumber type: number in contrast to the value property which holds a string representation, the valuenumber property is a number containing the current value of the number box.
The Joy of XUL - Archive of obsolete content
key features and benefits powerful widget-based markup language the goal of xul is to build cross platform applications, in contrast with dhtml which is intended for developing web pages.
Skinning XUL Files by Hand - Archive of obsolete content
by the way, in contrast to the term skin, "chrome" refers to the skin and the content and whatever localization and platform-specific files are necessary for a particular part of the application or window.
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
this contrasts with the listbox, where individual listitem and listcell tags are used to specify the rows in the listbox.
textbox - Archive of obsolete content
valuenumber type: number in contrast to the value property which holds a string representation, the valuenumber property is a number containing the current value of the number box.
Introduction to Public-Key Cryptography - Archive of obsolete content
the sections that follow contrast two forms of client authentication: password-based authentication.
::-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 ...
::-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 borde...
::-ms-clear - 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 b...
::-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...
::-ms-fill-lower - Archive of obsolete content
order-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-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
order-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-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 syntax ::-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
order-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-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
order-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-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-ticks-after - Archive of obsolete content
order-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-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
order-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-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 ...
::-ms-track - Archive of obsolete content
order-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-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-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 ...
::-ms-value - Archive of obsolete content
order-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-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...
CSS - Archive of obsolete content
ArchiveWebCSS
d to an object.-ms-flow-fromthe -ms-flow-from css property is a microsoft extension that gets or sets a value identifying a region container in the document that accepts the content flow from the data source.-ms-flow-intothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.-ms-high-contrast-adjustthe -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast mode.-ms-hyphenate-limit-charsthe -ms-hyphenate-limit-chars css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated word.
Track the score and win - Game development
compare your code the latest code looks (and works) like this, in case you want to compare and contrast it with yours: exercise: add more points per brick hit, print out the number of collected points in the end game alert box.
Plug-in Development Overview - Gecko Plugin API Reference
in streams produced by the plug-in, by contrast, the plug-in calls netscape functions to create a stream, push data into it, and delete it.
DNS - MDN Web Docs Glossary: Definitions of Web-related terms
by contrast, a reverse dns lookup (rdns) is used to determine the domain name associated with an ip address.
Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms
a forbidden header name is the name of any http header that cannot be modified programmatically; specifically, an http request header name (in contrast with a forbidden response header name).
Mobile First - MDN Web Docs Glossary: Definitions of Web-related terms
the mobile-first approach contrasts with the older approach of designing for desktop screen sizes first, and then only later adding some support for small screen sizes.
Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
this is usually contrasted with public-key cryptography, in which keys are generated in pairs and the transformation made by one key can only be reversed using the other key.
URI - MDN Web Docs Glossary: Definitions of Web-related terms
urns, by contrast, refer to a resource by a name, in a given namespace, such as the isbn of a book.
Assessment: Accessibility troubleshooting - Learn web development
can you do a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors?
Accessible multimedia - Learn web development
you can however make sure that such an app has good enough color contrast and clear presentation so it is perceivable to those with low vision/color blindness, and also make it keyboard accessible.
Advanced styling effects - Learn web development
try contrast(200%), invert(100%) or hue-rotate(20deg) on the live example below.
Backgrounds and borders - Learn web development
accessibility considerations with backgrounds when placing text on top of a background image or color, you should take care that you have enough contrast for the text to be legible for your visitors.
Styling tables - Learn web development
you should always make sure your text contrasts well with your background, so it is readable.
Introduction to CSS layout - Learn web development
the elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph.
How do you set up a local testing server? - Learn web development
in contrast, if you view one of our examples hosted on github (or an example on some other remote server), the web address will start with http:// or https://, to show that the file has been received via http.
Advanced form styling - Learn web development
kit-appearance: none; appearance: 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; backgroun...
Other form controls - Learn web development
in contrast, the <input> is an empty element with no closing tag — any default value is put inside the value attribute.
CSS basics - Learn web development
in contrast, images are inline elements.
HTML text fundamentals - Learn web development
in contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.
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.
Making asynchronous programming easier with async and await - Learn web development
keep it open in a separate tab so you can compare and contrast with the new version shown below.
JavaScript object basics - Learn web development
this is in contrast to objects instantiated from classes, which we'll look at later on.
Multimedia: Images - Learn web development
progressive jpegs, in contrast to normal jpegs, render progressively (hence the name), meaning the user sees a low-resolution version that gains clarity as the image downloads, rather than the image loading at full resolution top-to-bottom or even only rendering once completely downloaded.
Server-side web frameworks - Learn web development
by contrast, flask is a much lighter-weight framework and is great for creating web apps running on embedded devices.
Introduction to client-side frameworks - Learn web development
by contrast, the following block of code illustrates the way you might use vue to describe our list of tasks: <ul> <li v-for="task in tasks" v-bind:key="task.id"> <span>{{task.name}}</span> <button type="button">delete</button> </li> </ul> that's it.
Accessibility Features in Firefox
mozilla can follow the system appearance whether it's high or low contrast, with large or small fonts.
Links and Resources
color contrast analyzer by juicy studio: an excellent tool for checking if webpages use/have sufficient color contrast, sufficient brightness difference by comparing background and foreground (text) colors.
Lightweight themes
image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
Infallible memory allocation
this is in contrast to a traditional, fallible memory allocator that can return null indicating that the request failed.
MathML Demo: <mtable> - tables and matrices
contrast it with the following which has align="bottom" ---...
Activity Monitor, Battery Status Menu and top
ioreg -l | grep board-id in contrast, on mac os 10.9 it is computed via a simpler machine model-independent formula that only factors in cpu usage and wakeup frequency.
DMD
150; 272 x 591; 256 x 6,017; 240 x 1,372; 224 x 93; 208 x 488; 192 x 1,919; 176 x 18,903; 160 x 1,754; 144 x 5,041; 128 x 36,709; 112 x 5,571; 96 x 6,280; 80 x 40,738; 64 x 37,925; 48 x 78,392; 32 x 136,199; 16 x 31,001; 8 x 4,706 3.78% of the heap (10.24% cumulative) 21.24% of unreported (57.53% cumulative) allocated at { #01: (no stack trace recorded due to --stacks=partial) } } in contrast, stack traces are always recorded when a block is reported, which means you can end up with records like this where the allocation point is unknown but the reporting point is known: once-reported { 104,491 blocks in heap block record 13 of 4,689 10,392,000 bytes (10,392,000 requested / 0 slop) individual block sizes: 512 x 124; 256 x 242; 192 x 813; 128 x 54,664; 64 x 48,648 1.35% of the...
Rhino documentation
try this at http://archive.is/ssvxq ) an article comparing and contrasting rhino and jython.
Index
in contrast, all native and host objects have a jsobjectmap at obj->map, which may be shared among a number of objects, and which contains the jsobjectops *ops pointer used to dispatch object operations from api calls.
Tracing JIT
in contrast, a single native instruction is called a nins, and is depicted in red in the schematic diagram.
Self-hosted builtins in SpiderMonkey
in contrast to function.prototype.call, this syntax makes it impossible for other code to interfere and gets compiled to bytecode that doesn't have any overhead compared to a normal function invocation.
JSGetObjectOps
in contrast, all native and host objects have a jsobjectmap at obj->map, which may be shared among a number of objects, and which contains the jsobjectops *ops pointer used to dispatch object operations from api calls.
JSObjectOps.getProperty
contrast jsclass.getproperty, jsclass.setproperty, and jsclass.delproperty, which are hooks called during property accesses and don't have to implement any of that.
JS_EnterLocalRootScope
by contrast, local root scopes protect newly-created objects, doubles, and strings.
Gecko object attributes
this is in contrast to text attributes, which apply only to substrings in a text object.
Building the WebLock UI
in this case the <hbox/> centers the textbox and the button children, and it orients them horizontally (in contrast to the <vbox/>, which orients its children vertically).
mozIStorageAsyncStatement
in contrast, mozistoragestatement may need to acquire the primitives and consequently can cause the main thread to lock for extended intervals while the asynchronous thread performs some long-running operation.
Mozilla
this is in contrast to a traditional, fallible memory allocator that can return null indicating that the request failed.
Plug-in Development Overview - Plugins
in streams produced by the plug-in, by contrast, the plug-in calls netscape functions to create a stream, push data into it, and delete it.
Streams - Plugins
in contrast, for streams produced by the plug-in, the plug-in calls the plug-in api methods npp_newstream, npp_write, and npp_destroystream to create a stream, push data into it, and delete it.
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.
Migrating from Firebug - Firefox Developer Tools
in contrast to firebug the storage inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and indexeddb databases.
Ambient Light Events - 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.
Compositing example - Web APIs
pure black or white does not result in pure black or white.', 'subtracts the bottom layer from the top layer or the other way round to always get a positive value.', 'like difference, but with lower contrast.', 'preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.', 'preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.', 'preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.', 'preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.' ].rever...
Introduction to the File and Directory Entries API - Web APIs
in contrast, the synchronous api does not use callbacks because the api methods return values.
IDBFactory.deleteDatabase() - Web APIs
note that attempting to delete a database that doesn't exist does not throw an exception, in contrast to idbdatabase.deleteobjectstore(), which does throw an exception if the named object store does not exist.
install - Web APIs
in contrast to startsoftwareupdate, install allows you to do multiple installs with the same trigger and provides a unified user experience for the multiple installs.
LocalFileSystem - Web APIs
in contrast, temporary storage is automatically granted without any user permission, but it can be expunged by the browser at any time.
MediaTrackConstraints - Web APIs
contrast a constraindouble (a double-precision integer) specifying the degree of difference between light and dark.
Media Source API - Web APIs
this is in direct contrast with previous streaming solutions that required expensive licenses for proprietary non-standard client/server protocol implementations.
OfflineAudioContext - Web APIs
in contrast with a standard audiocontext, an offlineaudiocontext doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the result to an audiobuffer.
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.
RTCIceTransport: gatheringstatechange event - Web APIs
in contrast, gatheringstatechange represents changes to the candidate gathering state for a single transport.
WebGLRenderingContext - Web APIs
in contrast, no such assignment is done for the second canvas.
Canvas size and WebGL - Web APIs
in contrast, no such assignment is done for the second canvas.
Scissor animation - Web APIs
in contrast, the color of the square (set with clearcolor) is only updated when a new square is created.
Web Audio API - Web APIs
in contrast with a standard audiocontext, an offlineaudiocontext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
Window: load event - Web APIs
WebAPIWindowload event
this is in contrast to domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
Window.moveBy() - Web APIs
WebAPIWindowmoveBy
in contrast, window.moveto() moves the window to an absolute location.
Window.moveTo() - Web APIs
WebAPIWindowmoveTo
in contrast, window.moveby() moves the window relative to its current location.
XSL Transformations in Mozilla FAQ - Web APIs
mozilla in contrast renders exactly the result of your transformation.
Using the group role - Accessibility
the group role is used to identify a set of user interface objects which, in contrast with a region, are not intended to be included in a table of contents or a page summary (such as the structures that are dynamically created by a script or assistive technologies); a group should not be considered a major perceivable section on a page.
Using the log role - Accessibility
in contrast to other types of live region, this role is sequentially ordered and new information is only added to the end of the log.
ARIA: document role - Accessibility
in contrast to the article role, the document role does not have any relation to other elements with a document role, it merely has a relationship to the containing composit widget.
Accessibility: What users can do to browse more safely - Accessibility
one work station can be set up to acommodate both a low-vision individual (needs high-contrast) and to accomodate an individual with photosensitive susceptibilities, by simply, adjusting personalization and accessiblity settings.
Mobile accessibility checklist - Accessibility
colour colour contrast must comply with wcag 2.1 aa level requirements: contrast ratio of 4.5:1 for normal text (less than 18 point or 14 point bold.) contrast ratio of 3:1 for large text (at least 18 point or 14 point bold.) information conveyed via colour must be also available by other means too (underlined text for links, etc.) visibility content hiding techniques such as zero opacity, z-index order and off-screen placement must not be used exclusively to handle visibility.
:dir() - CSS: Cascading Style Sheets
WebCSS:dir
(similarly, [dir=rtl] and [dir=ltr] won't match the auto value.) in contrast, :dir() will match the value calculated by the user agent, even if inherited.
:focus-visible - CSS: Cascading Style Sheets
wcag 2.1 sc 1.4.11 non-text contrast requires that the visual focus indicator be at least 3 to 1.
font-stretch - CSS: Cascading Style Sheets
accessibility concerns people with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a low contrast color ratio.
font-weight - CSS: Cascading Style Sheets
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.
light-level - CSS: Cascading Style Sheets
syntax dim the device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader.
Basic concepts of flexbox - CSS: Cascading Style Sheets
this can be contrasted with the two-dimensional model of css grid layout, which controls columns and rows together.
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
this is in contrast to omitting align-items completely, in which case the height of each <div> stretches to fill its grid area.
CSS Scrollbars - CSS: Cascading Style Sheets
accessibility concerns when you customize scrollbars, consider they have enough contrast and that their hit area is large enough for people who use touch input.
Using media queries - CSS: Cascading Style Sheets
prefers-contrast detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors added in media queries level 5.
Pseudo-classes - CSS: Cascading Style Sheets
note: in contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.
Pseudo-elements - CSS: Cascading Style Sheets
*/ p::first-line { color: blue; text-transform: uppercase; } note: in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<f...
<blend-mode> - CSS: Cascading Style Sheets
<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: difference; } exclusion the final color is similar to difference, but with less contrast.
caret-color - CSS: Cascading Style Sheets
this is generally currentcolor, but the user agent may choose a different color to ensure good visibility and contrast with the surrounding content, taking into account the value of currentcolor, the background, shadows, and other factors.
<color> - CSS: Cascading Style Sheets
see color and color contrast for more information.
cross-fade() - CSS: Cascading Style Sheets
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.
display - CSS: Cascading Style Sheets
WebCSSdisplay
below that, we have a select menu that allows you to apply different display values to the containers, allowing you to compare and contrast how the different values affect the element's layout, and that of their children.
float - CSS: Cascading Style Sheets
WebCSSfloat
the element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
font-optical-sizing - CSS: Cascading Style Sheets
when optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes.
font-variant-east-asian - CSS: Cascading Style Sheets
as these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast.
font-weight - CSS: Cascading Style Sheets
n update() { 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.
<length> - CSS: Cascading Style Sheets
WebCSSlength
this allows you to compare and contrast the effect of different length units.
margin - CSS: Cascading Style Sheets
WebCSSmargin
in contrast, padding creates extra space within an element.
overflow-wrap - CSS: Cascading Style Sheets
note: in contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
padding - CSS: Cascading Style Sheets
WebCSSpadding
in contrast, margin creates extra space around an element.
position - CSS: Cascading Style Sheets
WebCSSposition
in contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist.
revert - CSS: Cascading Style Sheets
WebCSSrevert
in contrast, user-agent stylesheets set default values on the basis of css selectors.
word-break - CSS: Cascading Style Sheets
note: in contrast to word-break: break-word and overflow-wrap: break-word (see overflow-wrap), word-break: break-all will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).
Constraint validation - Developer guides
(this is typically done by the user-agent when determining which of the css pseudo-classes, :valid or :invalid, applies.) in contrast, the reportvalidity() method reports any constraint failures to the user.
HTML5 Parser - Developer guides
WebGuideHTMLHTML5HTML5 Parser
--> in contrast, the following code contains two scripts with unbalanced sub-trees, which causes speculative parsing to fail and therefore the time to parse the document is longer.
Using HTML sections and outlines - Developer guides
by contrast, the <nav> sectioning element more clearly describes to browsers and other devices the content contained: links or other navigational structures to help users move through and understand where they are in a site's or page's content.
Mobile Web Development - Developer guides
WebGuideMobile
if you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your linear-gradient rule.
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
<!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- alternate style sheets --> <link rel="alternate stylesheet" href="highcontrast.css" title="high contrast"> with an hreflang attribute that differs from the document language, it indicates a translation.
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
this is because of the 3d ether space available to the carriers, in contrast to the 1d ether used by ieee802.3.
<em>: The Emphasis element - HTML: Hypertext Markup Language
WebHTMLElementem
example the <em> element is often used to indicate an implicit or explicit contrast.
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
in addition, the style and coloring of the legend and submit button are customized to have strong contrast.
id - HTML: Hypertext Markup Language
in contrast to the class attribute, which allows space-separated values, elements can only have one single id value.
An overview of HTTP - HTTP
WebHTTPOverview
the ability to relax the origin constraint, by contrast, has only been added in the 2010s.
Keyed collections - JavaScript
the main differences to the set object are: in contrast to sets, weaksets are collections of objects only, and not of arbitrary values of any type.
Loops and iteration - JavaScript
in contrast to the break statement, continue does not terminate the execution of the loop entirely.
Regular expressions - JavaScript
contrast this str.match(re) versus re.exec(str).
Memory Management - JavaScript
in contrast, javascript automatically allocates memory when objects are created and frees it when they are not used anymore (garbage collection).
Function.length - JavaScript
by contrast, arguments.length is local to a function and provides the number of arguments actually passed to the function.
Number.isSafeInteger() - JavaScript
in contrast, 253 is not a safe integer: it can be exactly represented in ieee-754, but the integer 253 + 1 can't be directly represented in ieee-754 but instead rounds to 253 under round-to-nearest and round-to-zero rounding.
Promise.any() - JavaScript
this is in contrast to promise.race(), which resolves or rejects with the first promise to settle.
Promise.prototype.catch() - JavaScript
this is considered good practice in contrast to throwing strings; otherwise, the part doing the catching would have to perform checks to see if the argument was a string or an error, and you might lose valuable information like stack traces.
Symbol.for() - JavaScript
description in contrast to symbol(), the symbol.for() function creates a symbol available in a global symbol registry list.
WeakMap - JavaScript
by contrast, native weakmaps hold "weak" references to key objects, which means that they do not prevent garbage collection in case there would be no other reference to the key object.
WeakRef - JavaScript
in contrast, a normal (or strong) reference keeps an object in memory.
block - JavaScript
block scoping rules with let, const or function declaration in strict mode by contrast, identifiers declared with let and const do have block scope: let x = 1; { let x = 2; } console.log(x); // logs 1 the x = 2 is limited in scope to the block in which it was defined.
continue - JavaScript
description in contrast to the break statement, continue does not terminate the execution of the loop entirely: instead, in a while loop, it jumps back to the condition.
Introduction to progressive web apps - Progressive web apps (PWAs)
in contrast, with a native app, even the slightest modification can force the user to download the entire application again.
shape-rendering - SVG: Scalable Vector Graphics
crispedges this value indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision.
<feComponentTransfer> - SVG: Scalable Vector Graphics
it allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
it allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.
Basic Transformations - SVG: Scalable Vector Graphics
embedding svg in svg in contrast to html, svg allows you to embed other svg elements seamlessly.
Patterns - SVG: Scalable Vector Graphics
WebSVGTutorialPatterns
this contrasts with the "userspaceonuse" system, where if the object changes the size, the pattern would stay the same and just repeat itself more times to fill the box.
<xsl:import> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementimport
this is in contrast to <xsl:include> where the contents of the included stylesheet have exactly the same precedence as the contents of the including stylesheet.
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
this is in contrast to <xsl:include> where the contents of the included stylesheet have exactly the same precedence as the contents of the including stylesheet.