26
You can mailto
multiple email addresses.
<!-- comma separated list without spaces and/or url encoded with %20 -->
<!-- or with ?to= parameter -->
25
Adding an i
before the closing bracket in CSS attribute selector causes the value to be compared case-insensitively.
<button class="mybutton">Send</button><!-- red border --><button class="myButton">Send</button><!-- green border -->
With the HTML above, we can do this:
[class*="button" i] { /* matches mybutton and myButton */ border: 10px solid green;}
[class*="button"] { /* matches only mybutton */ border-color: red;}
24
You can add the option { once: true }
to an event listener to automatically remove it when has been invoked.
btn.addEventListener("click", handleClick, { once: true });
23
JSON.stringify takes 3 parameters. The third parameter can be used to pretty-print the output.
JSON.stringify({ n: 4 }, null, 2);
22
You can use JavaScript Vibration API to vibrate devices.
// Vibrate for 200mswindow.navigator.vibrate(200);
// Vibrate for 200ms, pause for 100ms, vibrate for 300mswindow.navigator.vibrate([200, 100, 300]);
21
You can change the filename of a downloadable file by defining a value in the download attribute.
<a href="file_9081241377.pdf" download="report.pdf"> Download Report </a>
20
It’s possible to identify how many separate fingers are touching the screen.
document.body.addEventListener("touchstart", (e) => { document.body.textContent = `${e.touches.length} fingers`;});
19
You can use the (Network Information API)[https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation] to get information about the connection a device is using.
console.log(navigator.connection)
// PrintsNetworkInformation { downlink: 10, effectiveType: "4g", onchange: null, rtt: 250, saveData: false}
18
Target the button of an <input>
of <type="file">
using the ::file-selector-button
selector.
<label for="upload">Select file</label><br /><input type="file" id="upload" />
[type="file"]::file-selector-button { background-color: hotpink; padding: 0.5rem 1rem; border: 2px solid fuchsia; margin-block-end: 1rem; display: block; border-radius: 3px;}
[type="file"]::file-selector-button:hover { background-color: aqua;}
17
CSS: When an item is being hovered, select all the other items, but not the one that is being hovered.
.grid:has(.item:hover) .item:not(:hover) { mix-blend-mode: luminosity;}