"Obs.js is a tiny inline script that reads a handful of browser signals available to us and exposes them as: classes on the <html> element, and properties on a window.obs object. That means we can adapt our UI to the context in which it is being consumed: avoid web fonts on weak connections, serve lower resolution media when the browser signals caution, tone down motion when battery is low, or simply beacon that context off to analytics for later analysis."
"Obs.js is very simple to install, but intentionally very strict: it needs to be inlined in the <head> before any HTML, CSS, or JavaScript that might depend on it: It will auto-terminate if you attempt to include it via an external file, or run it asynchronously via type=module. That's not me being difficult for the sake of it; it is the whole point. If the script exists to inform early decisions about the page, it needs to be there early enough to influence those decisions."
"If it ran asynchronously, or too late, we'd likely end up doubling work and, ironically, making everything slower. Thankfully, Obs.js is under 1.5KB Gzipped and takes less than 5ms to run on a low-end device, so the inline cost is very small. What It Gives You At a glance, Obs.js gives you access to a number of CSS classes that are automatically added to the <html> element, and a window.obs object that exposes the same information via JavaScript."
"You may see classes along the lines of: <html class= "has-latency-high has-bandwidth-low has-connection-capability-weak has-conservation-preferen The same signals are also available in JavaScript via window.obs, letting you branch logic in scripts while keeping styling driven by the html classes."
Obs.js is a small inline script that reads browser signals and exposes them as CSS classes on the html element and as properties on a window.obs object. This enables UI adaptation to the context where content is consumed, such as avoiding web fonts on weak connections, serving lower-resolution media when signals indicate caution, reducing motion when battery is low, and sending context details to analytics. The script must run early by being inlined in the head before any dependent HTML, CSS, or JavaScript. It auto-terminates if included externally or executed asynchronously via type=module to prevent duplicated work and slowdowns. Its size is under 1.5KB gzipped and it runs in under 5ms on low-end devices.
Read at Csswizardry
Unable to calculate read time
Collection
[
|
...
]