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.

Sign up for GitHub

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

Fixable flaws on the color_value page #2930

Merged
merged 15 commits into from
Mar 11, 2021
Merged

Fixable flaws on the color_value page #2930

Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4b83ba4
Fixable flaws on the color_value page
rachelandrew Mar 8, 2021
232ed2f
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
e9fb4ef
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
44c48c1
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
cd74dd2
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
d33455f
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
40b739a
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
b05a8bb
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
0e18704
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
7d980b5
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
101e78d
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
a5981d2
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
e3c602d
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
6192045
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
b963950
Update files/en-us/web/css/color_value/index.html
rachelandrew Mar 9, 2021
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
34 changes: 15 additions & 19 deletions files/en-us/web/css/color_value/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1105,11 +1105,11 @@ <h3 id="Mozilla_System_Color_Extensions">Mozilla System Color Extensions</h3>
</dd>
<dt>-moz-Combobox</dt>
<dd>
<p>{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes. Should be used with the <code>-moz-ComboboxText</code> foreground color. In versions prior to 1.9.2, use <code>-moz-Field</code> instead.</p>
<p>Background color for combo-boxes. Should be used with the <code>-moz-ComboboxText</code> foreground color. In versions prior to 1.9.2, use <code>-moz-Field</code> instead.</p>
</dd>
<dt>-moz-ComboboxText</dt>
<dd>
<p>{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the <code>-moz-Combobox</code> background color. In versions prior to 1.9.2, use <code>-moz-FieldText</code> instead.</p>
<p>Text color for combo-boxes. Should be used with the <code>-moz-Combobox</code> background color. In versions prior to 1.9.2, use <code>-moz-FieldText</code> instead.</p>
</dd>
<dt>-moz-Dialog</dt>
<dd>
Expand All @@ -1122,15 +1122,15 @@ <h3 id="Mozilla_System_Color_Extensions">Mozilla System Color Extensions</h3>
<dt>-moz-dragtargetzone</dt>
<dt>-moz-EvenTreeRow</dt>
<dd>
<p>{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-OddTreeRow</code>.</p>
<p>Background color for even-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-OddTreeRow</code>.</p>
</dd>
<dt>-moz-html-CellHighlight</dt>
<dd>
<p>{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>.</p>
<p>Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>.</p>
</dd>
<dt>-moz-html-CellHighlightText</dt>
<dd>
<p>{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlight</code> background color. Prior to Gecko 1.9, use <code>-moz-CellHighlightText</code>.</p>
<p>Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlight</code> background color. Prior to Gecko 1.9, use <code>-moz-CellHighlightText</code>.</p>
</dd>
<dt>-moz-mac-accentdarkestshadow</dt>
<dt>-moz-mac-accentdarkshadow</dt>
Expand All @@ -1141,11 +1141,9 @@ <h3 id="Mozilla_System_Color_Extensions">Mozilla System Color Extensions</h3>
<dt>-moz-mac-accentregularshadow</dt>
<dt>-moz-mac-chrome-active</dt>
<dd>
<p>{{Gecko_minversion_inline("1.9.1")}}</p>
</dd>
<dt>-moz-mac-chrome-inactive</dt>
<dd>
<p>{{Gecko_minversion_inline("1.9.1")}}</p>
</dd>
<dt>-moz-mac-focusring</dt>
<dt>-moz-mac-menuselect</dt>
Expand All @@ -1161,37 +1159,35 @@ <h3 id="Mozilla_System_Color_Extensions">Mozilla System Color Extensions</h3>
</dd>
<dt>-moz-MenuBarText</dt>
<dd>
<p>{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to <code>MenuText</code>. Should be used on top of <code>Menu</code> background.</p>
<p>Text color in menu bars. Often similar to <code>MenuText</code>. Should be used on top of <code>Menu</code> background.</p>
</dd>
<dt>-moz-MenuBarHoverText</dt>
<dd>
<p>Color for hovered text in menu bars. Often similar to <code>-moz-MenuHoverText</code>. Should be used on top of <code>-moz-MenuHover</code> background.</p>
</dd>
<dt>-moz-nativehyperlinktext</dt>
<dd>
<p>{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.</p>
<p>Default platform hyperlink color.</p>
</dd>
<dt>-moz-OddTreeRow</dt>
<dd>
<p>{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-EvenTreeRow</code>.</p>
<p>Background color for odd-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-EvenTreeRow</code>.</p>
</dd>
<dt>-moz-win-communicationstext</dt>
<dd>
<p>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, should this stay -moz-appearance?

<p> Should be used for text in objects with <code>{{cssxref("appearance")}}: -moz-win-communications-toolbox;</code>.</p>
</dd>
<dt>-moz-win-mediatext</dt>
<dd>
<p>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</p>
<p> Should be used for text in objects with <code>{{cssxref("appearance")}}: -moz-win-media-toolbox</code>.</p>
</dd>
<dt>-moz-win-accentcolor</dt>
<dd>
<p>{{gecko_minversion_inline("56")}}<br>
Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.</p>
</dd>
<dt>-moz-win-accentcolortext</dt>
<dd>
<p>{{gecko_minversion_inline("56")}}<br>
Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.</p>
<p>Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.</p>
</dd>
</dl>
</div>
Expand All @@ -1205,11 +1201,11 @@ <h3 id="Mozilla_Color_Preference_Extensions">Mozilla Color Preference Extensions
</dd>
<dt>-moz-default-background-color</dt>
<dd>
<p>{{Gecko_minversion_inline("5.0")}} User's preference for the document background color.</p>
<p>User's preference for the document background color.</p>
</dd>
<dt>-moz-default-color</dt>
<dd>
<p>{{Gecko_minversion_inline("5.0")}} User's preference for the text color.</p>
<p>User's preference for the text color.</p>
</dd>
<dt>-moz-hyperlinktext</dt>
<dd>
Expand All @@ -1223,11 +1219,11 @@ <h3 id="Mozilla_Color_Preference_Extensions">Mozilla Color Preference Extensions

<h2 id="Interpolation">Interpolation</h2>

<p>In animations and <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">gradients</a>, <code>&lt;color&gt;</code> values are interpolated on each of their red, green, and blue components. Each component is interpolated as a real, floating-point number. Note that interpolation of colors happens in the <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">alpha-premultiplied sRGBA color space</a> to prevent unexpected gray colors from appearing. In animations, the interpolation's speed is determined by the <a href="/en-US/docs/Web/CSS/single-transition-timing-function">timing function</a>.</p>
<p>In animations and <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">gradients</a>, <code>&lt;color&gt;</code> values are interpolated on each of their red, green, and blue components. Each component is interpolated as a real, floating-point number. Note that interpolation of colors happens in the <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">alpha-premultiplied sRGBA color space</a> to prevent unexpected gray colors from appearing. In animations, the interpolation's speed is determined by the <a href="/en-US/docs/Web/CSS/easing-function">timing function</a>.</p>

<h2 id="Accessibility_considerations">Accessibility considerations</h2>

<p>Some people have difficulty distinguishing colors. The <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> for more information.</p>
<p>Some people have difficulty distinguishing colors. The <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast">Color and color contrast</a> for more information.</p>

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

Expand Down