12 |
13 |
18 |
19 |
20 | How does it work?
21 | It works by negating the feature query condition to give you the oppposite result. For example, it will turn the following feature query condition...
22 | @supports (display: flex) { /* styles here */ }
23 | Into the following...
24 | @supports not ((display: flex)) { /* styles here */ }
25 |
26 |
27 |
28 | Demo
29 | Note: You need to install the Feature Queries Manager in your browser for this to work. Once installed, open up the "FQM" panel in devtools and toggle on/off the following styles:
30 |
31 |
32 |
33 | 1. Positive Condition
34 |
35 |
40 | I'm #example1
41 |
42 |
43 |
44 | 2. Negative Condition
45 |
46 |
51 | I'm #example2
52 |
53 |
54 |
55 | 3. Conjunction (and)
56 |
57 |
62 | I'm #example3
63 |
64 |
65 |
66 | 4. Disjunction (or)
67 |
68 |
73 | I'm #example4
74 |
75 |
76 |
77 |
More test examples....
78 |
79 |
80 |
81 | 5. Positive Condition with failure
82 |
83 |
88 | I'm #example5
89 |
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/images/icon-white@128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ireade/feature-queries-manager/1ea4595174ce3f6b892a85843ac73b241ea83939/images/icon-white@128.png
--------------------------------------------------------------------------------
/images/icon-white@16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ireade/feature-queries-manager/1ea4595174ce3f6b892a85843ac73b241ea83939/images/icon-white@16.png
--------------------------------------------------------------------------------
/images/icon-white@48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ireade/feature-queries-manager/1ea4595174ce3f6b892a85843ac73b241ea83939/images/icon-white@48.png
--------------------------------------------------------------------------------
/images/icon-white@64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ireade/feature-queries-manager/1ea4595174ce3f6b892a85843ac73b241ea83939/images/icon-white@64.png
--------------------------------------------------------------------------------
/images/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |