Skip to Content
TIL (Today I learned)
You can list all pseudo elements of an element in the CSS pane in Firefox Developer Tools.
You can emulate dark mode and reduced motion in Chrome Dev Tools.
You can instruct browsers to print pages in landscape orientation (Chrome/Opera only).
You can change the filename of a downloadable file by defining a value in the download attribute.
The bullet or number of a list-item can be selected and styled with the ::marker pseudo-element.
If an input element has the attribute value autocomplete="new-password", browsers can suggest securely-generated passwords.
You can use the CSS Paint API to create background images in CSS.
You can search the elements panel in Developer Tools not only for strings but also selectors.
The webkitdirectory attribute allows users to select directories instead of files. (desktop browsers only)
You can do responsive preloading because preload link elements accept the media attribute like any other link element.
It's possible to identify how many separate fingers are touching the screen.
SVGs are focusable in Internet Explorer. We can set focusable="false" to prevent that.
macOS uses Papyrus as the default font when you define the generic font family “fantasy”.
text-decoration doesn't have to be a solid line. There's also dotted, dashed, double, and wavy.
text-decoration is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style.
Overflowing block-level elements with overflow set to scroll or auto are focusable in Firefox.
You can use conditional comments to target specific versions of Outlook.
You can turn the outline of an element to the _inside_ by setting the outline-offset property to a negative value. (Not supported in IE)
You can center a flex-item vertically and horizontally by applying margin: auto; to it.
If you press CMD/Ctrl and click on a property or property value in the style panel, @ChromeDevTools jumps directly to the respective css/scss file and line.
About the @at-root directive. It moves nested styles out from within a parent selector or nested directive.
IE 11 requires a unit to be added to the third argument (flex-basis) of the flex property.
You can use `navigator.connection` to get information about the connection like round-trip time, bandwidth, connection type (e.g. 3g, 4g) or if Data-Saver is enabled.
The grid-auto-flow property takes up to two values. row, column, dense, row dense, or column dense.
You can pass an `options` object, which only has a single property, to the `focus()` method to prevent scrolling on focus.
There's a tab-size property. It controls the width of the tab (U+0009) character.
How to get a random background-color (or any other value) each time I compile Sass.