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

Jump to bottom

CSS opacity based on prefers-reduced-transparency media query #30999

Merged
merged 4 commits into from
Dec 21, 2023
Merged

CSS opacity based on prefers-reduced-transparency media query #30999

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7fba0ff
CSS `opacity` based on `prefers-reduced-transparency` media query
ramiy Dec 14, 2023
abbf9b9
Apply suggestions from code review
ramiy Dec 15, 2023
79d165b
update
ramiy Dec 15, 2023
0c437bd
Merge branch 'main' into patch-1
ramiy Dec 15, 2023
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
25 changes: 24 additions & 1 deletion files/en-us/web/css/opacity/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")}}

Expand Down Expand Up @@ -61,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}}
Expand Down Expand Up @@ -151,10 +153,31 @@ 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}}

## Browser compatibility

{{Compat}}

## See also

- [`prefers-reduced-transparency`](/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query
- [CSS color](/en-US/docs/Web/CSS/CSS_colors) module