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;}
16
You can type ”.” when you’re in a Github repo and Github will open the repo in VSCode web for you
15
There exist a binary search algorithm to easily manage text-wrapping. Useful for page header.
14
The grid-auto-flow
property takes up to two values. row, column, dense, row dense, or column dense.
.grid { grid-auto-flow: row dense;}
13
You can pass an options
object, which only has a single property, to the focus()
method to prevent scrolling on focus.
document.querySelector("#anchor").focus({ preventScroll: true,});
12
Apparently fireEvent
in Svelte Testing Library is async because it’s calling tick() under the hood
11
You can delete forward using “fn + delete” in macOS
10
We can use the :empty selector in CSS to hide empty DOM element without JS.
.classname:empty { display: none;}
9
The theme-color
value for the name attribute of the element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface.
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />