{"name":"Style Observer: Run JavaScript When CSS Properties Change","description":"Style Observer is a robust, production-ready JavaScript library designed to detect and respond to changes in any CSS property. It allows developers to run custom JavaScript code when a CSS property changes, offering a powerful way to create dynamic and reactive web interfaces. The library handles browser inconsistencies and provides a lightweight, dependency-free solution for observing styles.","github":"https://github.com/LeaVerou/style-observer","url":"https://osrepos.com/repo/leaverou-style-observer","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/leaverou-style-observer","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/leaverou-style-observer.md","json":"https://osrepos.com/repo/leaverou-style-observer.json","topics":["css","observer","style-observer","javascript","frontend","web development","library"],"keywords":["css","observer","style-observer","javascript","frontend","web development","library"],"stars":null,"summary":"Style Observer is a robust, production-ready JavaScript library designed to detect and respond to changes in any CSS property. It allows developers to run custom JavaScript code when a CSS property changes, offering a powerful way to create dynamic and reactive web interfaces. The library handles browser inconsistencies and provides a lightweight, dependency-free solution for observing styles.","content":"## Introduction\n\nStyle Observer is a robust, production-ready JavaScript library by Lea Verou and Dmitry Sharabin, designed to detect and respond to changes in any CSS property. It provides a powerful mechanism to run JavaScript code whenever a CSS property on an element changes, offering a solution for dynamic web interfaces. The library is lightweight, dependency-free, and meticulously tested to ensure compatibility across various browsers, even detecting and working around known browser bugs.\n\nKey features include:\n\n*   Observe changes to custom properties\n*   Observe changes to standard properties (except `transition` and `animation`)\n*   Observe changes on any element (including those in Shadow DOM)\n*   Lightweight, ESM-only code, with no dependencies\n*   200+ unit tests you can run in your browser of choice\n*   Throttling per element\n*   Does not overwrite existing transitions\n\n## Installation\n\nThe quickest way to get started is by including Style Observer directly from a CDN:\n\njs\nimport StyleObserver from \"https://observe.style/index.js\";\n\n\nFor more controlled environments, you can install it via npm:\n\nsh\nnpm install style-observer\n\n\nThen, if you use a bundler like Rollup or Webpack:\n\njs\nimport StyleObserver from \"style-observer\";\n\n\nAnd if you don’t use a bundler:\n\njs\nimport StyleObserver from \"node_modules/style-observer/dist/index.js\";\n\n\n## Examples\n\nStyle Observer's API is similar to other browser observers. You can create an observer instance and then observe elements and properties.\n\nObserving a single property on a single element:\n\njs\nconst observer = new StyleObserver(records => console.log(records));\nobserver.observe(document.querySelector(\"#my-element\"), \"--my-custom-property\");\n\n\nYou can also observe multiple properties on multiple elements:\n\njs\nconst observer = new StyleObserver(records => console.log(records));\nconst properties = [\"color\", \"--my-custom-property\"];\nconst targets = document.querySelectorAll(\".my-element\");\nobserver.observe(targets, properties);\n\n\nAlternatively, you can provide targets and properties directly when creating the observer:\n\njs\nimport StyleObserver from \"style-observer\";\n\nconst observer = new StyleObserver(callback, {\n\ttargets: document.querySelectorAll(\".my-element\"),\n\tproperties: [\"color\", \"--my-custom-property\"]\n});\n\n\nEach record passed to the callback contains `target`, `property`, `value`, and `oldValue`, providing detailed information about the change.\n\n## Why Use Style Observer?\n\nStyle Observer stands out as a sophisticated solution for monitoring CSS changes, addressing a long-standing challenge in web development. Unlike earlier attempts that relied on polling, this library leverages modern browser capabilities and innovative techniques to provide a highly efficient and accurate observation mechanism. It is built from scratch to extend browser support and robustness, ensuring reliable performance across different environments.\n\nKey advantages include its ability to observe both custom and standard CSS properties, comprehensive browser compatibility (as detailed in its documentation), and a lightweight footprint with no external dependencies. The project boasts over 200 unit tests, highlighting its commitment to stability and bug detection. For developers needing precise control over UI reactions to style changes, Style Observer offers a production-ready and thoroughly vetted tool.\n\n## Links\n\n*   [GitHub Repository: LeaVerou/style-observer](https://github.com/LeaVerou/style-observer)\n*   [npm Package: style-observer](https://www.npmjs.com/package/style-observer)\n*   [Official Blog Post by Lea Verou](https://lea.verou.me/2025/style-observer/)","metrics":{"detailViews":2,"githubClicks":5},"dates":{"published":null,"modified":"2026-01-10T16:01:01.000Z"}}