interestfor 1.0.11 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
A polyfill for the
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
# The Interest Invokers Polyfill
|
|
2
|
+
|
|
3
|
+
A polyfill for the [Interest Invokers
|
|
4
|
+
API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using_interest_invokers),
|
|
5
|
+
including the `interestfor` attribute, the `:interest-source` and
|
|
6
|
+
`:interest-target` pseudo classes, the `::interest-button` pseudo element, and
|
|
7
|
+
the `interest-delay` CSS properties. All of the API except the
|
|
8
|
+
`::interest-button` pseudo element have been
|
|
9
|
+
[shipped](https://chromestatus.com/feature/4530756656562176) in Chromium
|
|
10
|
+
browsers (e.g. Chrome, Edge), since version 142 (October 2025). The
|
|
11
|
+
`::interest-button` pseudo element is planned to be shipped soon in Chromium
|
|
12
|
+
also.
|
|
9
13
|
|
|
10
14
|
## Usage
|
|
11
15
|
To use this polyfill, simply load it:
|
|
@@ -17,6 +21,12 @@ To use this polyfill, simply load it:
|
|
|
17
21
|
<div popover id=foo>Popover</div>
|
|
18
22
|
```
|
|
19
23
|
|
|
24
|
+
## Browser Compatibility
|
|
25
|
+
|
|
26
|
+
This polyfill uses all standard APIs, and is therefore compatible with all
|
|
27
|
+
modern browsers, including Safari and Firefox. It supports mobile touchscreen
|
|
28
|
+
operation also, as much as [is possible](#touchscreen-support).
|
|
29
|
+
|
|
20
30
|
## Behavior Summary
|
|
21
31
|
|
|
22
32
|
Adding the `interestfor` attribute to a button or link (the "interest
|
|
@@ -46,14 +56,16 @@ A few more details:
|
|
|
46
56
|
- The `interestForElement` property is available on `HTMLButtonElement`,
|
|
47
57
|
`HTMLAnchorElement`, `HTMLAreaElement`, and `SVGAElement`. It reflects the
|
|
48
58
|
`interestfor` attribute as an element reference.
|
|
59
|
+
- The `:interest-source` and `:interest-target` pseudo classes match the
|
|
60
|
+
interest invoker and its target element while interest is shown.
|
|
61
|
+
- The `interest-delay`, `interest-delay-start`, and `interest-delay-end` CSS
|
|
62
|
+
properties control the delays before showing and losing interest.
|
|
49
63
|
- The optional `::interest-button` pseudo element provides a button that shows
|
|
50
64
|
interest immediately when clicked or tapped. See below.
|
|
51
65
|
|
|
52
66
|
Again, this is a quick summary. For the complete details, please [read the
|
|
53
|
-
OpenUI explainer](https://open-ui.org/components/interest-invokers.explainer)
|
|
54
|
-
the [
|
|
55
|
-
specs for [the pseudo classes](https://drafts.csswg.org/selectors-5/#interest-pseudos)
|
|
56
|
-
and [CSS properties](https://drafts.csswg.org/css-ui-4/#interest).
|
|
67
|
+
OpenUI explainer](https://open-ui.org/components/interest-invokers.explainer) or
|
|
68
|
+
the [specifications](#standards).
|
|
57
69
|
|
|
58
70
|
## The `::interest-button` pseudo element
|
|
59
71
|
|
|
@@ -227,10 +239,20 @@ load and tests the polyfill (either `src/interestfor.js` or
|
|
|
227
239
|
`src/interestfor.min.js`). You can run the tests directly from this repo,
|
|
228
240
|
[here](https://mfreed7.github.io/interestfor/test/test.html).
|
|
229
241
|
|
|
230
|
-
##
|
|
231
|
-
|
|
232
|
-
This
|
|
233
|
-
|
|
242
|
+
## Standards
|
|
243
|
+
|
|
244
|
+
This is a recently-developed API, and the specs are in various states of
|
|
245
|
+
standardization:
|
|
246
|
+
- The `::interest-button` CSS pseudo-element is defined here:
|
|
247
|
+
https://drafts.csswg.org/css-pseudo-4/#selectordef-interest-button
|
|
248
|
+
- The `:interest-source` and `:interest-target` CSS pseudo-classes are defined
|
|
249
|
+
here:
|
|
250
|
+
https://drafts.csswg.org/selectors-5/#interest-pseudos
|
|
251
|
+
- The `interest-delay-*` CSS properties are defined here:
|
|
252
|
+
https://drafts.csswg.org/css-ui-4/#interest
|
|
253
|
+
- The HTML spec PR is located here:
|
|
254
|
+
https://github.com/whatwg/html/pull/11006
|
|
255
|
+
(Add a Thumbs Up 👍 to support landing it!)
|
|
234
256
|
|
|
235
257
|
## Improvements / Bugs
|
|
236
258
|
|
package/package.json
CHANGED