Skip to main content
On better browsers: arbitrary media queries and browser UIs

On better browsers: arbitrary media queries and browser UIs

On better browsers: arbitrary media queries and browser UIsCSS & HTML, 14 September 2022, 3 minute readThis morning Kitty Giraudel tweeted about an imaginary media query that would indicate right- or left-handedness and it made me imagine a future where sites can register support for one or more media features through a browser API, and the browser would offer these options in the UI.Two years ago I requested something similar to the Chromium team: making it possible to emulate arbitrary media queries in the devtools. At the time I also wrote about that on this blog: I want my own media queries in browsersThat never went anywhere, but this is more or less a continuation of that thought. Combining it with Kitty’s imaginary “prefers-main-side”, and the idea that browsers should expose media query settings on a per-origin basis like page zoom, here’s an idea that would be even more amazing to have in browsers:What if a site could register a media feature:window.registerMediaFeature({ name: “prefers-main-side”, options: [‘right’, ‘left’], default: ‘right’, }); After which a browser would:Understand the media feature in your CSSMatch the default value and apply the CSSProvide an appropriate toggle UI in the address barThis doesn’t just give you more ways to offer a customized experience for your visitors, at the same time this frees up real estate on the site itself because it no longer has to reserve space to provide a fully custom UI.It should work both for known media features, like prefers-color-scheme, completely imagined ones like prefers-main-side, or not-yet-implemented features like prefers-reduced-transparency.Overwriting known media queriesFurthermore, it should allow overwriting the values of known media features to provide more options. For example, Twitter comes with two dark modes: “dim” and “lights out”. prefers-color-scheme only has “light” and “dark”, so they would extend prefers-color-scheme with a new value, and update the names to match their brand:window.registerMediaFeature({ name: “prefers-color-scheme”, options: { light: “Default”, dim: “Dim” dark: “Lights out”, } default: ‘light’, }); This way, a browser could still match the OS level setting (light or dark) to the options offered by Twitter as well as provide a UI to switch to “Dim”, allowing Twitter to get rid of a piece of custom in-page UI that does the same thing.UIThe browser UI could be exposed in a dropdown similar to how Polypane has been showing it for a while, with big toggles that make it easy to see both which options have been selected as well as which options there are.Browsers could automatically detect usage of regular media features and show those in the same UI, storing the selection per-origin. That way the choices a user made will get remembered next time they visit your site.To prevent abuse, a website could ask for permission before they’re allowed to register media features, or they could be limited to a fixed number of registered media features. Edit: Evan suggested explicitly mentioning that the options would be same-origin restricted to prevent them from being used for fingerprinting.But that’s getting ahead of myself. What do you think of the concept? Reply on Twitter with your thoughts!Update Looks like Kitty wrote about it themselves too: Dominant hand respecting design and they came up with a very similar API (though I think their use of the CSS global is better!):CSS.registerMedia({ name: ‘prefers-dominant-hand’,  » Read More

Like to keep reading?

This article first appeared on kilianvalkhof.com. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.