2

I'm wondering if there are APIs to know preferences users applied to browser, such as font-size, font-family, etc.

I wrote this question because I've been asked to apply browser preferences to my HTML page. For example, if user has poor sight and enlarged browser font size, I want to apply that size to my web page.

My goal is something like this:

document.getElementById("myBodyTag").style.fontSize = browser.getCurrentFont()

where 'browser' is the API I'm looking for.

EDIT: The real reason I'm looking for this API is because the client of my project, reading the technical reference of the European Union Accessibility Law, stated that my web application must inherit the platform settings, as you can read in the pic below. enter image description here

In my opinion they didn't get correctly what the document says, because there's an unclear bond between rules to be applied to web pages and rules to be applied to software.

Matt
  • 265
  • 4
  • 17
  • 1
    [this](https://www.chromium.org/developers/design-documents/extensions/proposed-changes/apis-under-development/preference-api/) is as close as I could find to what you're asking, but even then it doesn't look like it ever got implemented. I think there's a security concern in being able to access (more importantly store and manipulate) user browser preferences so I doubt anything like that would ever exist – Miss Skooter May 13 '23 at 08:42
  • 2
    I haven't looked, but I doubt it. Having an API to retrieve user preferences would be a great way to [fingerprint an user](https://pixelprivacy.com/resources/browser-fingerprinting/). The user community would not allow for such a feature to be implemented. Also, to increase the font size most browsers implement a "zoom" option. This should work on most websites, without those websites doing anything to accommodate this. – KIKO Software May 13 '23 at 08:46
  • 1
    Another way to let the user preferences affect the size of the font on your website is to use [relative font sizes](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) everywhere. The web page then starts with the font size the user prefers and you adapt it from there. – KIKO Software May 13 '23 at 08:56
  • 1
    Wouldn't `getComputedStyle(document.documentElement)` give you the information you need? – KooiInc May 13 '23 at 09:45
  • Thank you all, I edited my post in order to explain better why I was looking for that API – Matt May 13 '23 at 17:45

2 Answers2

1

Not sure if this is what you mean, but window.getComputedStyle for a (not in any way modified) document gives you the current preferences a user has set for his/her browser. Something like (try modifiying your browser font style settings and rerun the snippet):

const nativeStyle = getComputedStyle(document.documentElement);

console.log (`Document font: ${nativeStyle.fontFamily} ${
  nativeStyle.fontStyle} ${nativeStyle.fontSize}`);
KooiInc
  • 119,216
  • 31
  • 141
  • 177
  • Thank you for you help; I edited my post in order to explain better why I was looking for that API. Anyway your solution helped me :) – Matt May 13 '23 at 17:46
1

For many things you don't need to read user settings directly, but rather let them be applied implicitly where needed.

Let's take the font-size and the focus size (I guess you meant outline) as an example. If you define your text, and elements that should scale with text, in relative units, ideally rem, you are all set to adapt the font size that user picked in his browser settings. If he changes font size from 16px to 20px in settings, your text, and other elements' dimensions defined in rems, will scale with it.

Speaking of font-family and a11y, I am not sure it makes much sense for users to define it. You as the web author have to know which font makes sense in context of your site and works the best. If you wanna be accessible, just choose standard fonts like Times New Roman and Arial and you'll be fine.

That said, if you really want to apply user settings, you can do so:

font-family: initial;
font-size: initial;

This will apply the font and size configured in user's browser.

If you also want to find out programmatically about their defaults, you can create some dummy element, set some initial styles on it like:

font-family: initial;
font-size: initial;

and call:

getComputedStyle($0).fontFamily

Of course, the amount of browser settings you can read this way is limited.

PS: If you'd need more, then this turns into ethical (knowing too much about the user) and practical question (why would you even need it).

Dan Macak
  • 16,109
  • 3
  • 26
  • 43
  • Thank you for you help; I edited my post in order to explain better why I was looking for that API. Anyway your solution helped me :) – Matt May 13 '23 at 17:46