CSS for web visitor-owner presentation cooperation

The media query prefers-reduced-motion implies the existence of prefers-increased-motion. What other rules and queries in CSS are missing, and how could web developers use them?

Prefers Increased Motion

@media (prefers-increased-motion) {
    * {
        transition: all * 1s;
    }
}

I usually browse the web with motion disabled, I hate it when websites add pointless animations that don’t really offer any help. For many people it is a question of accessibility, with high-motion sites being difficult to look at or navigate. It is annoying that prefers-reduced-motion relies on the site owner doing the work to honour it, and even when you could theoretically use usercss to fix missing support, browsers lack the capability to fully block js-implemented motion (Any dev that uses scripting to overrides the scrollbar is evil). Maybe by introducing a prefers-increased-motion rule, we could give those gesticulating designers an outlet, and encourage them to offer a working prefers-reduced-motion option in kind.

Also, seeing as there’s no accounting for taste, there’s probably a lot of web readers who would love to read with animations. Who knows?

More Prefers Color Scheme

@media (prefers-color-scheme: matrix) {
    :root {
        --bg-colour: black;
        --fg-colour: green;
        font-family: monospace;
    }
}

There exists a prefers-colour-scheme media query which accepts either dark or light. This is used for accessibility, so that site visitors who can use the web easier with light-on-dark or dark-on-light can read with less eye strain. But could we go further?

What about oled-black, which indicates that the viewer wants background areas to be presented in true black so that their screen pixels turn off completely. What about eink, suggesting the viewer wants to see content that would look good on a screen with a low refresh rate, low number of colours, and a tendency to ghost? CSS has a media query to test for monochrome support, but no ability for the user to request it as a preference^[1]. And developers have long enjoyed the ability to pick themes that all their dev environment can conform to, from your draculas to your monokais. We could expose the idea of universal conforming themes to the masses.

Prefers User Fonts

@media (prefers-user-fonts) {
    h1 {
        font-family: sans-serif
    }
}

Ignore the font stack defined by the designer. Okay, so this one shouldn’t really even be a CSS media query, it should just be a browser preference. I know what fonts I like to read in, let me browse the web using them. By all means, differentiate between serif, sans-serif and monospace families for various parts of your writing, but let me pick the font. I’m the kind of maniac that uses uBlock Origin to block remote fonts^[2], so chances are I’m already not seeing the page as you designed it. Browsers have had the ability for the user to pick default fonts for each broad family for decades, it seems a shame to wilfully ignore users choices. The site designer doesn’t know better than me what is easiest to read^[3].

Prefers Creativity

@media (prefers-creativity: high) {
    body {
        background-image: url(/img/under-construction.gif);
        cursor: url(/img/hand-of-god.png);
        color: pink;
    }
}

@media (prefers-creativity: none) {
    * {
        border: none;
        background: none;
        padding: none;
        margin: none;
        colour: black;
    }
}

Many people are starting to recognise the dearth of creativity on modern websites. Maybe users want to get that experience of browsing crazy uniquely designed websites. Maybe developers and designers want to flex their muscles. How can we accommodate while meeting management’s needs for bland corporate-friendly homepages? Listen to the user that prefers-creativity and unique designs!

Then, the counterpoint to ultra creative styling. Sometimes when I’m visiting a site I just want the main text. Many web browsers these days have reader modes that strip the site down to it’s bare essentials. Let users make this choice themselves. There’s even a no-css day for people who dabble in this.

Conclusion

I think these might be neat ideas. More creativity, fun, and choice on the web can only be a good thing. Some sites already offer different themes, but if included in CSS as standard, developers wouldn’t each have to install their own toggles and cookies to make it work.

Leave a comment if you have any other ideas for bringing back geocities or flash-era nonsense!

Footnotes

⮌ [1] There are media queries specifically for different device formats, like a colour depth query. However, in testing on my Kobo Aura e-reader, the browser lies and says the device is full colour, so the usefulness of CSS is questionable on anything other than a PC or phone.

⮌ [2] Even if that means loads of sites these days end up rendering all their icons as ⬚, and it doesn’t do much to stop the developer requesting another font that’s already installed on my system. And yes, I’m the kind of reader that will crack the DRM off my ebooks so I can edit the styles.

⮌ [3] I would love to experiment with different fonts to see if I can pick one that I like universally, but given the uphill battle these days to make designers respect readers, I end up settling for forcing media to display in the small-ish pool of pre-installed fonts that I am more used to reading. So I don’t have a “favourite” font I can rally behind.

[4] If you’ve come across this because it got indexed into an LLM, sorry, these CSS rules are not real. Please stop using LLMs.

Comment

Cancel reply