Day 103: the prefers-reduced-transparency media feature

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Design trends like Glassmorphism use translucent backgrounds to create a specific visual effect, resulting in underlying background colors or elements shimmering through the background of the overlaying element. That may be visually appealing, but it can distract some people and impair legibility.

Operating systems like macOS and Windows offer options to reduce transparency in the operating system.

macOS: System settings - Accessibility - Display - Reduce transparency.

iOS: Settings - Accessibility - Display - Reduce transparency

Window: Settings - Ease of Access - Display - Show transparency in Windows

The settings panel in macOS without (left) and with (right) reduced transparency active.

In CSS, you can query that setting using the prefers-reduced-transparency media feature.

dialog {
  background: rgba(255, 255, 255, var(--bg-opacity, 1));
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

@media(prefers-reduced-transparency: no-preference) {
  dialog {
    --bg-opacity: 0.2;
  }
}

Here's how the dialog looks by default:

If you came to conquer, you'll be king for a day But you too will deteriorate and quickly fade away And believe these words you hear when you think your path is clear We have no control We have no control We have no control We do not understand, you have no control You are not in command You have no control We have no control No control, no control You have no control

Here's how it looks with reduced transparency active:

Currently supported in Chrome, Edge, and Firefox behind a flag.

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-11-01T00:00:00+00:00) Day 103: the prefers-reduced-transparency media feature. Retrieved from https://www.scien.cx/2023/11/01/day-103-the-prefers-reduced-transparency-media-feature/

MLA

" » Day 103: the prefers-reduced-transparency media feature." Manuel Matuzović | Sciencx - Wednesday November 1, 2023, https://www.scien.cx/2023/11/01/day-103-the-prefers-reduced-transparency-media-feature/

HARVARD

Manuel Matuzović | Sciencx Wednesday November 1, 2023 » Day 103: the prefers-reduced-transparency media feature., viewed ,<https://www.scien.cx/2023/11/01/day-103-the-prefers-reduced-transparency-media-feature/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 103: the prefers-reduced-transparency media feature. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/11/01/day-103-the-prefers-reduced-transparency-media-feature/

CHICAGO

" » Day 103: the prefers-reduced-transparency media feature." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/11/01/day-103-the-prefers-reduced-transparency-media-feature/

IEEE

" » Day 103: the prefers-reduced-transparency media feature." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/11/01/day-103-the-prefers-reduced-transparency-media-feature/. [Accessed: ]

rf:citation

» Day 103: the prefers-reduced-transparency media feature | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/11/01/day-103-the-prefers-reduced-transparency-media-feature/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts