TIL (Today I learned)
-
You can use the spellcheck attribute to instruct browsers that, if possible, an element should or should not be checked for spelling errors.
<textarea spellcheck="false">
Tis is jusst a test.
</textarea>
<div contenteditable spellcheck="false">
Tis is jusst a test.
</div> -
You can animate z-index.
div {
position: absolute;
top: 0;
left: 0;
transition: z-index 2.5s;
} -
You can make a link in an iframe open in its parent window, if you set target="_parent".
<!-- Parent File-->
<iframe src="https://codepen.io/matuzo/debug/YzGVXGV" frameborder="0"></iframe>
<!-- Embedded file -->
<ul>
<li>
<a href="https://a11yproject.com">no target</a>
</li>
<li>
<a href="https://a11yproject.com" target="_blank">target="_blank"</a>
</li>
<li>
<a href="https://a11yproject.com" target="_parent">target="_parent"</a>
</li>
</ul> -
Adding an i (or I) before the closing bracket in an attribute selector causes the value to be compared case-insensitively.
<button class="mybutton">Send</button> <!-- red border -->
<button class="myButton">Send</button> <!-- green border -->[class*="button" i] { /* matches mybutton and myButton */
border: 10px solid green;
}
[class*="button"] { /* matches only mybutton */
border-color: red;
} -
ol and ul accept the type attribute. You can use it to set a different numbering type in HTML.
<ol type="a">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>
<ol type="A">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>
<ol type="i">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>
<ol type="I">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>
<ul type="1">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul> -
The order in which transform functions in the transform shorthand property are defined matters.
-
You can use the nomodule attribute to run JavaScript code only in browsers that don’t support JS modules.
-
Using the background-origin property you can position background images relative to the inner border edge (default), outer border edge, or the content edge.
-
You can add the option { once: true } to an event listener to automatically remove it when has been invoked
-
The nullish coalescing operator (??) only returns its right-hand side operand when its left-hand side operand is null or undefined.
-
Optional chaining allows you to chain methods or properties, and conditionally continue down the chain if the value is not null or undefined.
-
You can use the removeProperty method to remove a specific inline CSS property defined in the style attribute.
-
There’s a space-separated syntax for values in functional color notations.
-
JSON.stringify takes 3 parameters. The third parameter can be used to pretty-print the output.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
-
There's native, CSS-only smooth scrolling.
-
You can target Inverted Colors Mode mode in CSS
https://a11yproject.com/posts/operating-system-and-browser-accessibility-display-modes/
-
You can use JavaScript (Vibration API) to vibrate devices
-
You can disable all form elements in a fieldset by setting the disabled attribute on the fieldset.
-
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.
https://templates.mailchimp.com/development/css/outlook-conditional-css/
-
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.
https://css-tricks.com/how-well-do-you-know-css-layout/#article-header-id-8
-
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.
https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
-
The grid-auto-flow property takes up to two values. row, column, dense, row dense, or column dense.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
-
You can pass an `options` object, which only has a single property, to the `focus()` method to prevent scrolling on focus.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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.
