Media Queries Test Page

May contain traces of Media Queries Level 5.

Code

I talked about “High Contrast Mode” at the CSS-in-Graz meetup last week. While preparing slides for the event, I created a test page to see how changing operating system settings affect browsers’ media queries.

Media queries? Responsive and stuff? No, this ain’t about size queries, but see for yourself. It is available on CodePen for you to explore, because I thought this may be useful for people other than myself.

Spoiler alert, here’s one interesting observation: Turning on Windows High Contrast Mode (a.k.a. choosing a Contrast Theme in Windows 11) changes …

  • forced-colors,
  • prefers-color-scheme, and
  • prefers-contrast

… all at once.

Showcase

Visit CodePen to see this example in action.