Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change 'colour' to American spelling. #3004

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@ <h3 id="Color_contrast">Color contrast</h3>

<p>The {{Glossary("W3C")}} defines a good color mix with an algorithm that calculates luminosity ratio between foreground and background. The calculation may seem pretty complicated, but we can rely on tools to do the job for us.</p>

<p>Let's download and install the Paciello Group's <a href="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a>.</p>
<p>Let's download and install the Paciello Group's <a href="http://www.paciellogroup.com/resources/contrastanalyser/">color Contrast Analyser</a>.</p>

<div class="note">
<p>Note: Alternatively you can find a number of contrast checkers online, such as WebAIM's <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a>. We suggest a local checker because it comes packaged with an on-screen color picker to find out a color value.</p>
</div>

<p>For instance, let's test the colors on this page and see how we fare in the Colour Contrast Analyser:</p>
<p>For instance, let's test the colors on this page and see how we fare in the color Contrast Analyser:</p>

<p><img alt="Colour contrast on this page: excellent!" src="colour-contrast.png"></p>
<p><img alt="color contrast on this page: excellent!" src="color-contrast.png"></p>

<p>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.</p>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ <h2 id="Properties_and_values">Properties and values</h2>
</div>

<div class="warning">
<p><strong>Important</strong>: In CSS (and other web standards), it has been agreed that US spelling is the standard where there is language variation or uncertainty. For example, <code>color</code> should be spelled <code>color</code>, as <code>colour</code> will not work.</p>
<p><strong>Important</strong>: In CSS (and other web standards), it has been agreed that US spelling is the standard where there is language variation or uncertainty. For example, <code>color</code> should be spelled <code>color</code>, as <code>color</code> will not work.</p>
</div>

<h3 id="Functions">Functions</h3>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ <h2 id="What_happens_if_a_browser_encounters_CSS_it_doesnt_understand">What happ

<pre class="brush: css">p {
font-weight: bold;
colour: blue; /* incorrect spelling of the color property */
color: blue; /* incorrect spelling of the color property */
font-size: 200%;
}</pre>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -579,7 +579,7 @@ <h3 id="Preferred_style_guides">Preferred style guides</h3>

<h3 id="Preferred_dictionary">Preferred dictionary</h3>

<p>For questions of spelling, please refer to <a href="http://www.dictionary.com/">Dictionary.com</a>. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use <em>color</em> rather than <em>colour</em>).</p>
<p>For questions of spelling, please refer to <a href="http://www.dictionary.com/">Dictionary.com</a>. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use <em>color</em> rather than <em>color</em>).</p>

<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please post them on the <a href="https://discourse.mozilla.org/c/mdn">MDN discussion forum</a>, so we know what should be added.</p>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ <h2 id="Learn_more">Learn more</h2>
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></li>
<li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/bookmark-it">Bookmark it!</a></li>
<li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a></li>
<li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/favourite-color">favourite-color</a></li>
<li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button">open-my-page-button</a></li>
</ul>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>

<h2 id="Examples">Examples</h2>

<p>In the following snippet, we are making a call to get all of the cookies the browser currently has stored that have a name of "favourite-colour". When the result is returned, we are printing the value of each result to the console.</p>
<p>In the following snippet, we are making a call to get all of the cookies the browser currently has stored that have a name of "favourite-color". When the result is returned, we are printing the value of each result to the console.</p>

<pre class="brush: js">function logCookies(cookies) {
for (let cookie of cookies) {
Expand All @@ -74,7 +74,7 @@ <h2 id="Examples">Examples</h2>
}

var gettingAll = browser.cookies.getAll({
name: "favourite-colour"
name: "favourite-color"
});
gettingAll.then(logCookies);</pre>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>

<h2 id="Examples">Examples</h2>

<p>This example tries to remove the cookie named "favourite-colour", whose URL matches the URL of the document hosted by the currently active tab:</p>
<p>This example tries to remove the cookie named "favourite-color", whose URL matches the URL of the document hosted by the currently active tab:</p>

<pre class="brush: js">function onRemoved(cookie) {
console.log(`Removed: ${cookie}`);
Expand All @@ -71,7 +71,7 @@ <h2 id="Examples">Examples</h2>
function removeCookie(tabs) {
var removing = browser.cookies.remove({
url: tabs[0].url,
name: "favourite-colour"
name: "favourite-color"
});
removing.then(onRemoved, onError);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ <h2 id="Examples">Examples</h2>
function setCookie(tabs) {
browser.cookies.set({
url: tabs[0].url,
name: "favourite-colour",
name: "favourite-color",
value: "red"
});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ <h2 id="Learn_more">Learn more</h2>
<li>open the settings page directly from your extension using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage">runtime.openOptionsPage()</a></code> API</li>
<li>Settings page example:
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a></li>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-color">favourite-color</a></li>
</ul>
</li>
</ul>
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ <h2 id="Localized_string_selection">Localized string selection</h2>
<ul>
<li>messages.json
<ul>
<li><code>{ "colorLocalised": { "message": "colour", "description": "Color." }, ... }</code></li>
<li><code>{ "colorLocalised": { "message": "color", "description": "Color." }, ... }</code></li>
</ul>
</li>
</ul>
Expand Down Expand Up @@ -286,7 +286,7 @@ <h2 id="Localized_string_selection">Localized string selection</h2>
<p>Suppose the <code>default_locale</code> is set to <code>fr</code>, and the browser's current locale is <code>en_GB</code>:</p>

<ul>
<li>If the extension calls <code>getMessage("colorLocalised")</code>, it will return "colour".</li>
<li>If the extension calls <code>getMessage("colorLocalised")</code>, it will return "color".</li>
<li>If "colorLocalised" were not present in <code>en_GB</code>, then <code>getMessage("colorLocalised")</code>, would return "color", not "couleur".</li>
</ul>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -150,20 +150,20 @@ <h2 id="Managed_storage_manifests">Managed storage manifests</h2>
<p>For example:</p>

<pre class="brush: json line-numbers language-json">{
&quot;name&quot;: &quot;favourite-colour-examples@mozilla.org&quot;,
&quot;name&quot;: &quot;favourite-color-examples@mozilla.org&quot;,
&quot;description&quot;: &quot;ignored&quot;,
&quot;type&quot;: &quot;storage&quot;,
&quot;data&quot;:
{
&quot;colour&quot;: &quot;management thinks it should be blue!&quot;
&quot;color&quot;: &quot;management thinks it should be blue!&quot;
}
}</pre>

<p>Given this JSON manifest, the <code>favourite-colour-examples@mozilla.org</code> extension could access the data using code like this:</p>
<p>Given this JSON manifest, the <code>favourite-color-examples@mozilla.org</code> extension could access the data using code like this:</p>

<pre class="brush: js line-numbers language-js">let storageItem = browser.storage.managed.get('colour');
<pre class="brush: js line-numbers language-js">let storageItem = browser.storage.managed.get('color');
storageItem.then((res) =&gt; {
console.log(`Managed colour is: ${res.colour}`);
console.log(`Managed color is: ${res.color}`);
});</pre>

<h2 id="PKCS_11_manifests">PKCS #11 manifests</h2>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

<h2 id="Specifying_the_options_page">Specifying the options page</h2>

<p>To create an options page, write an HTML file defining the page. This page can include CSS and JavaScript files, like a normal web page. This page, from the <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favorite-colour</a> example, includes a JavaScript file:</p>
<p>To create an options page, write an HTML file defining the page. This page can include CSS and JavaScript files, like a normal web page. This page, from the <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-color">favorite-color</a> example, includes a JavaScript file:</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;

Expand Down Expand Up @@ -60,4 +60,4 @@ <h2 id="Options_content_design">Options content design</h2>

<h2 id="Examples">Examples</h2>

<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository on GitHub includes the <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favorite-colour</a> example which implements options page features.</p>
<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository on GitHub includes the <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-color">favorite-color</a> example which implements options page features.</p>
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/54/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h3 id="CSS">CSS</h3>
<li>Previously, an element styled with {{cssxref("display")}}:<code> inline-block</code> with a child element of type {{domxref("HTMLInputElement")}} styled with <code>display:block</code> had a wrong baseline ({{bug(1330962)}}). This is now fixed.</li>
<li>When Mozilla introduced dedicated content threads to Firefox (through the Electrolysis or e10s project), support for styling {{HTMLElement("option")}} elements was removed temporarily. Starting in Firefox 54, you can apply foreground and background colors to <code>&lt;option&gt;</code> elements again, using the {{cssxref("color")}} and {{cssxref("background-color")}} attributes. See {{bug(910022)}} for more information. Note that this is still disabled in Linux due to lack of contrast (see {{bug(1338283)}} for progress on this).</li>
<li><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> now send the {{event("animationcancel")}} event as expected when an animation aborts prematurely ({{bug(1302648)}}).</li>
<li>Transparent colors (i.e. those with an alpha channel of 0) were being serialized to the <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code> color keyword</a> in <a href="https://www.fxsitecompat.com/en-CA/docs/2017/transparent-rgba-colour-values-are-no-longer-serialized-to-transparent-keyword/">certain situations</a>; this has been fixed so that Firefox follows the spec (as well as other browsers' implementations). See ({{bug("1339394")}} for further information.</li>
<li>Transparent colors (i.e. those with an alpha channel of 0) were being serialized to the <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code> color keyword</a> in <a href="https://www.fxsitecompat.com/en-CA/docs/2017/transparent-rgba-color-values-are-no-longer-serialized-to-transparent-keyword/">certain situations</a>; this has been fixed so that Firefox follows the spec (as well as other browsers' implementations). See ({{bug("1339394")}} for further information.</li>
<li>The proprietary <code>:-moz-table-border-nonzero</code> pseudo-class is no longer available to web content; it is now restricted to Firefox's internal UA stylesheet ({{bug(1341925)}}).</li>
<li>[css-grid] Intrinsic content with overflow:auto overlaps in grid ({{bug(1348857)}}).</li>
<li>[css-grid] Transferred min-size contribution of percentage size grid item with an intrinsic ratio ({{bug(1349320)}}).</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h2 id="Examine_CSS_rules">Examine CSS rules</h2>

<h3 id="Invalid_value_warnings">Invalid value warnings</h3>

<p>A warning icon appears next to unsupported CSS properties or rules that have invalid values. This can help you understand why certain styles are not being applied. In the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid:</p>
<p>A warning icon appears next to unsupported CSS properties or rules that have invalid values. This can help you understand why certain styles are not being applied. In the following example, a spelling error, "background-color" instead of "background-color" has made the rule invalid:</p>

<p><img alt="" src="invalid_property.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>

Expand Down Expand Up @@ -233,7 +233,7 @@ <h3 id="View_media_rules_for_prefers-color-scheme">View @media rules for prefers
<p>Note that if the operating system mode is set to a particular mode, then simulating that mode will not change page rendering (i.e. simulating dark mode when the operating system is using dark mode will not change the display).</p>

<div class="notecard note">
<h4>Note</h4>
<h4>Note</h4>
<p>If <code>privacy.resistFingerprinting</code> has been set <strong>true</strong>, the <code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> preference is forced to <code>light</code>. You must set <code>privacy.resistFingerprinting</code> to <strong>false</strong> in order to use this feature.</p>
</div>

Expand Down Expand Up @@ -309,7 +309,7 @@ <h3 id="Track_changes">Track changes</h3>
<div class="notecard note">
<h4>Note</h4>
<p>You can view changes made to the rules view only. If you edit the CSS using the Style Editor, the changes will not be shown in the changes pane.</p>

<p>Also remember, as noted above, that changes you make to the CSS rules are temporary and will be reset if you reload the page.</p>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ <h4 id="Math_2">Math</h4>
<h4 id="Scientific_Literature"><strong>Scientific Literature</strong></h4>

<ul>
<li><a href="https://jov.arvojournals.org/article.aspx?articleid=2192799">Colour constancy in context: Roles for local adaptation and levels of reference</a></li>
<li><a href="https://jov.arvojournals.org/article.aspx?articleid=2192799">color constancy in context: Roles for local adaptation and levels of reference</a></li>
<li><a href="https://www.sciencedirect.com/science/article/pii/S0960982217304062?via%3Dihub">Gamma oscillations and photosensitive epilepsy</a></li>
<li><a href="https://onlinelibrary.wiley.com/doi/epdf/10.1111/j.1528-1167.2005.01405.x">Characterizing the Patterned Images That Precipitate Seizures and Optimizing Guidelines To Prevent Them</a>  Arnold Wilkins, John Emmett, and Graham Harding</li>
</ul>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ <h2 id="Required_and_invalid_fields">Required and invalid fields</h2>
var valid = emailValid(formData.email); // returns true if valid, false otherwise

emailElement.setAttribute("aria-invalid", !valid);
setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
setElementBordercolor(emailElement, valid); // sets the border to red if second arg is false
};
</pre>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h3 id="Automated_Checking_Repair">Automated Checking &amp; Repair</h3>

<p>The HTML advanced validator may also be downloaded from <a href="https://addons.mozilla.org/firefox/addon/249">Firefox Add-ons: HTML Validator</a>.</p>
</li>
<li><a class="ex-ref" href="http://juicystudio.com/services/colourcontrast.php#contrast">Color contrast analyzer</a> by Juicy Studio
<li><a class="ex-ref" href="http://juicystudio.com/services/colorcontrast.php#contrast">Color contrast analyzer</a> by Juicy Studio
<blockquote cite="https://msdn.microsoft.com/en-us/library/bb263947(VS.85).aspx">
<p>"Contrast is the perceived difference between two adjacent colors. (...) Contrast is extremely important in Web design."</p>

Expand All @@ -67,7 +67,7 @@ <h3 id="Automated_Checking_Repair">Automated Checking &amp; Repair</h3>
<address><a class="ex-ref" href="http://www.useit.com/alertbox/designmistakes.html">Top Ten Web Design Mistakes of 2005: 1. Legibility Problems</a></address>
</blockquote>

<p>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? <a class="ex-ref" href="http://juicystudio.com/services/colourcontrast.php#contrast">Color contrast analyzer</a> is an excellent tool for such task. Effective color contrast and effective color brightness difference have a <strong>decisive importance for reading</strong>, furthermore for people with partial color deficiency (see the excellent examples in <a class="ex-ref" href="http://www.lighthouse.org/accessibility/effective-color-contrast/">Effective Color Contrast</a> by Lighthouse International). A study has established that <a class="ex-ref" href="https://msdn.microsoft.com/en-us/library/bb263953.aspx">about 8 percent of all men have some form of color deficiency</a>. Color contrast analyzer algorithm is based on the formula provided in <a class="ex-ref" href="https://www.w3.org/TR/AERT#color-contrast">Techniques For Accessibility Evaluation And Repair Tools</a> from W3C.</p>
<p>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? <a class="ex-ref" href="http://juicystudio.com/services/colorcontrast.php#contrast">Color contrast analyzer</a> is an excellent tool for such task. Effective color contrast and effective color brightness difference have a <strong>decisive importance for reading</strong>, furthermore for people with partial color deficiency (see the excellent examples in <a class="ex-ref" href="http://www.lighthouse.org/accessibility/effective-color-contrast/">Effective Color Contrast</a> by Lighthouse International). A study has established that <a class="ex-ref" href="https://msdn.microsoft.com/en-us/library/bb263953.aspx">about 8 percent of all men have some form of color deficiency</a>. Color contrast analyzer algorithm is based on the formula provided in <a class="ex-ref" href="https://www.w3.org/TR/AERT#color-contrast">Techniques For Accessibility Evaluation And Repair Tools</a> from W3C.</p>

<p>The <a class="ex-ref" href="http://juicystudio.com/services/csstest.php">Juicy Studio CSS analyzer</a> will also analyze and report the color contrast and color brightness differences involved in your stylesheets.</p>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<p><span class="seoSummary">This document provides a concise checklist of accessibility requirements for mobile app developers. It is intended to continuously evolve as more patterns arise.</span></p>
</div>

<h2 id="Colour">Color</h2>
<h2 id="color">Color</h2>

<ul>
<li>Color contrast must comply with <a href="https://www.w3.org/TR/WCAG/#contrast-minimum">WCAG 2.1 AA level requirements</a>:
Expand Down
Loading