Every few years the web standards community decides the browser is not over-engineered enough. The latest proposal to reach the drafts is the CSS Olfactive API, a system for “immersive smells.” I am all for the web growing new capabilities. After 14 years of debugging race conditions and broken layouts, though, this one reads like a skyscraper going up on sand.
The hardware bottleneck
Start with the hardware. Disney World has run 4D movies for decades, but getting that down to a consumer-grade wafter plugged into your MacBook is a different order of problem. I have watched enough “consumer-ready” startups fail to ship a stable API for a basic Bluetooth peripheral, never mind an aromatic dispenser. Until hardware support is general, the CSS Olfactive API is dead code for 99% of your users.
For CSS you can actually ship, I wrote up my take on Modern CSS Features: Interop 2026, which sticks to things that will not break your site today.
Inside the scent() function
The technical side of the spec is where it gets strange. The working group proposes a scent-profile property that takes a new scent() function, built around 15 fragrance categories borrowed from the classic Scent Wheel. You mix identifiers such as wo (Woody), ho (Water) and fu (Fruity) into a custom aroma.
/* The Naive Approach: Just mixing smells */
.orchard-element {
scent-profile: scent(wo, ho, fu);
}Listing the categories on their own gives you mud. The spec adds a unit for potency, the whf, capped at 100 per element. Go past 100 and the browser drops the trailing values without saying anything, which is the sort of silent failure you spend an hour hunting.
/* The Correct Approach: Precision mixing */
.refined-scent {
scent-profile: scent(wo 20whf, ho 13whf, fu 67whf);
}Aromatic accessibility
The accessibility media queries are the part they got right. Some aromas trigger migraines or sensory issues, so prefers-reduced-pungency has to be in there. I spend a lot of my time on web accessibility, and this is the only section of the draft I would defend.
@media (prefers-reduced-pungency: reduce) {
.reeks {
scent-profile: scent(fl 10whf, fa 10whf, fu 10whf);
}
}
@media (prefers-reduced-pungency: remove) {
.reeks {
scent-profile: none;
}
}The sibling selector trap
So that nobody gasses their users by accident, the browser allows one scent-profile per parent element’s sub-tree. Set a scent on a wrapper and its children cannot carry their own. It is a blunt instrument against “aromatic pollution,” and legacy code with greedy selectors like * { ... } will trip over it before a site ever gets to smell like anything.
If this CSS Olfactive API stuff is eating your dev hours, I can take it off your hands. I have been working with WordPress and odd frontend specs since the 4.x days.
Wait for browser support
Unless you are targeting the KaiOS Browser, there is nothing here you can test. Chrome has not touched it, and Safari probably will not for another decade. The CSS Olfactive API is an interesting look at where the web might go, and for now it is one more file in the draft folder. Keep building fast, accessible sites that make no attempt to smell like “watered-down applesauce.”
