đź› Toggle CSS styles within @supports blocks
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
content Update UI and Demo page Apr 26, 2018
devtools Working on Firefox Apr 11, 2018
docs Change example folder to docs Apr 26, 2018
images Add white icons and example page Apr 25, 2018
panel Update UI and Demo page Apr 26, 2018
.gitignore Initial commit Apr 3, 2018
PRIVACY.md Create PRIVACY.md Apr 11, 2018
README.md Update height of browser logos in readme Apr 26, 2018
background.js Correct error in Chrome Apr 11, 2018
browser-polyfill.js Use browser-polyfill Apr 3, 2018
manifest.json Update version number Apr 26, 2018

README.md

@ sign

Feature Queries Manager

Manage and toggle CSS on a page behind a @supports Feature Query

How does it work?

It works by negating the feature query condition to give you the oppposite result. For example, it will turn the following feature query condition...

@supports (display: flex) { /* styles here */ }

... Into the following...

@supports not((display: flex)) { /* styles here */ }

How to use

1. Install the Feature Queries Manager

(Other browsers TBA)

2. Open DevTools and see a new panel labelled "FQM"

Screenshot of FQM

This page will display all the feature queries on the page (on the left) and any styles within those Feature Queries (on the right).

3. Toggle Feature Queries

On the left panel, you will see the list of feature query conditions on the page, and a checkbox beside each condition.

  • Uncheck the checkbox to negate the feature query condition
  • Check the checkbox to re-instate the original feature query condition

Example of FQM toggle on and off