From 7fba0ff93a31a0e3c9cf1932718bc94be2fc1b05 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Thu, 14 Dec 2023 03:15:17 -0800 Subject: [PATCH 1/3] CSS `opacity` based on `prefers-reduced-transparency` media query --- files/en-us/web/css/opacity/index.md | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/opacity/index.md b/files/en-us/web/css/opacity/index.md index 9035478a5e90c0e..4cc30d0fc9916e1 100644 --- a/files/en-us/web/css/opacity/index.md +++ b/files/en-us/web/css/opacity/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.opacity {{CSSRef}} -The **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. +The **`opacity`** [CSS](/en-US/docs/Web/CSS) property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. {{EmbedInteractiveExample("pages/css/opacity.html")}} @@ -51,6 +51,8 @@ To change the opacity of a background only, use the {{cssxref("background")}} pr background: rgba(0, 0, 0, 0.4); ``` +Various operating systems provide a preference for reducing transparency. To set the `opacity` based on the user's operating systems transparency preferences, use the [`prefers-reduced-transparency`](/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query. + ## 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. @@ -151,6 +153,22 @@ img.opacity:hover { {{EmbedLiveSample('Setting_opacity_on_hover', '150', '200')}} +### Styling based on user preferences + +To style elements based on user's operating systems transparency preferences, use the [`prefers-reduced-transparency`](/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query. The following example demonstrates how to use the `prefers-color-scheme` media query to specify the desired `opacity` based on the user's preferences. + +```css +.element { + opacity: 0.5; +} + +@media (prefers-reduced-transparency) { + .element { + opacity: 1; + } +} +``` + ## Specifications {{Specifications}} @@ -158,3 +176,7 @@ img.opacity:hover { ## Browser compatibility {{Compat}} + +## See also + +- [`prefers-reduced-transparency`](/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query to detect user preferences for transparency. From abbf9b9911a8f2f541129b9f1cf2d853d337e646 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Fri, 15 Dec 2023 04:16:48 -0800 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: Estelle Weyl --- files/en-us/web/css/opacity/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/opacity/index.md b/files/en-us/web/css/opacity/index.md index 4cc30d0fc9916e1..5179066d2aa1119 100644 --- a/files/en-us/web/css/opacity/index.md +++ b/files/en-us/web/css/opacity/index.md @@ -179,4 +179,5 @@ To style elements based on user's operating systems transparency preferences, us ## See also -- [`prefers-reduced-transparency`](/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query to detect user preferences for transparency. +- [`prefers-reduced-transparency`](/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query +- [CSS color](/en-US/docs/Web/CSS/CSS_colors) module From 79d165b7adcadc40c44955e81a48b618935b828f Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Fri, 15 Dec 2023 04:18:25 -0800 Subject: [PATCH 3/3] update --- files/en-us/web/css/opacity/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/opacity/index.md b/files/en-us/web/css/opacity/index.md index 5179066d2aa1119..1f8e4ea55507554 100644 --- a/files/en-us/web/css/opacity/index.md +++ b/files/en-us/web/css/opacity/index.md @@ -51,8 +51,6 @@ To change the opacity of a background only, use the {{cssxref("background")}} pr background: rgba(0, 0, 0, 0.4); ``` -Various operating systems provide a preference for reducing transparency. To set the `opacity` based on the user's operating systems transparency preferences, use the [`prefers-reduced-transparency`](/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query. - ## 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. @@ -63,6 +61,8 @@ Color contrast ratio is determined by comparing the luminosity of the opacity-ad - [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) - [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) +Various operating systems provide a preference for reducing transparency. To set the `opacity` based on the user's operating systems transparency preferences, use the [`prefers-reduced-transparency`](/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query. + ## Formal definition {{cssinfo}}