A devtools extension for toggling CSS features allowing developers to see how pages/apps render in browsers that don't support modern CSS features
This devtools extension provides the ability to toggle-off CSS features, allowing developers to see how their pages and applications render and fallback in browsers that don't support modern CSS features.
Available for Chrome via the Chrome Web Store.
This extension uses devtools API features that aren't supported in Firefox yet:
devtools.inspectedWindow.getResources()
devtools.inspectedWindow.onResourceAdded
resource.getContent()
resource.setContent()
Toggling CSS features isn't supported everywhere yet so you should be aware of these caveats:
<div style="...">
) will not be disabled.manifest.json
)In the /tests/browser
directory you'll find a test page which can be opened in a supported browser. The page contains one or more tests for each toggle. If you make changes and want to submit a pull request, please ensure the tests behave first. If you're adding a new toggle, please try to update the page with relevant tests or ask for assistance in your pull request.
The extension uses browser.devtools.inpectedWindow.getResources()
to fetch the content of stylesheet and document resources loaded in the current window. For stylesheet resources, resource.getContent()
is used to extract the style content. For document resources, a script is injected into the document which extracts the CSS content from <style>
elements.
Extracted style content is passed through a series of regular expressions that rename the feature property/value/identifiers. The original content is then replaced with the modified CSS using either resource.setContent
, for stylesheets or - for document styles - by injecteding a script to update the relevant <style>
elements. For example:
display: flex
becomes display: -disabled-flex
@supports (...) {}
becomes @-disabled-supports (...) {}
transform: ...
becomes @-disabled-transform: ... {}
width: calc(...)
becomes width: -disabled-calc(...)