A blog about web development, HTML, CSS, JavaScript, and web accessibility.

TIL #49

You can style the file selector button of file upload elements.

<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;
}

https://codepen.io/matuzo/pen/MWqgmYq?editors=1100

TIL #48

You can use the :scope pseudo class to select direct children of an element with `.querySelectorAll()`.

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>D</p>
  console.log(document.body.querySelectorAll('*'))
  // NodeList(5) [ul, li, li, li, p]

  console.log(document.body.querySelectorAll(':scope > *'))
  // NodeList(2) [ul, p]

https://codepen.io/pen/?editors=1001

TIL #47

console.count() logs the number of times that this particular call to count() has been called.

const letters = "availabilities".split("");
letters.forEach(letter => {
  if (letter === 'i') {
    console.count(`Letter ${letter}`)
  }
})

/* Output:

Letter i: 1
Letter i: 2 
Letter i: 3 
Letter i: 4
*/

https://codepen.io/matuzo/pen/RwjgWQY?editors=0010

TIL #46

You can link to multiple e-mail addresses

<!-- comma separated list without spaces and/or url encoded with %20 -->
<a href="mailto:manuel@matuzo.at,manuel@webclerks.at">
 Contact me and me
</a>

<!-- or with ?to= parameter -->
<a href="mailto:manuel@matuzo.at?to=manuel@webclerks.at">
 Contact me and me
</a>

https://codepen.io/matuzo/pen/zYwRwzQ?editors=1000

TIL #45

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>

https://codepen.io/matuzo/pen/vYyeYxb?editors=1000

TIL #44

You can animate z-index.

div {
  position: absolute;
  top: 0;
  left: 0;
  transition: z-index 2.5s;
}

https://codepen.io/matuzo/pen/wvzRxKJ

TIL #43

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>

https://codepen.io/matuzo/pen/mdrmJOB?editors=1000

TIL #42

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;
}

https://codepen.io/matuzo/pen/jOMOQOq?editors=1100

TIL #41

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>

https://codepen.io/matuzo/pen/qBNBpgw?editors=1000

TIL #40

The order in which transform functions in the transform shorthand property are defined matters.

The order in which transform functions in the transform shorthand property are defined matters.

https://codepen.io/pawelgrzybek/pen/GRZbjdv

TIL #39

You can use the nomodule attribute to run JavaScript code only in browsers that don’t support JS modules.

You can use the nomodule attribute to run JavaScript code only in browsers that don’t support JS modules.

https://codepen.io/matuzo/pen/vYGzyKJ

TIL #38

Using the background-origin property you can position background images relative to the inner border edge (default), outer border edge, or the content edge.

Using the background-origin property you can position background images relative to the inner border edge (default), outer border edge, or the content edge.

https://codepen.io/matuzo/pen/vYLqoRM?editors=1100

TIL #37

You can add the option { once: true } to an event listener to automatically remove it when has been invoked

You can add the option { once: true } to an event listener to automatically remove it when has been invoked

https://codepen.io/matuzo/pen/wvMOpXp?editors=1010

TIL #36

The nullish coalescing operator (??) only returns its right-hand side operand when its left-hand side operand is null or undefined.

The nullish coalescing operator (??) only returns its right-hand side operand when its left-hand side operand is null or undefined.

https://codepen.io/matuzo/pen/YzwJRaN?editors=1012

TIL #35

Optional chaining allows you to chain methods or properties, and conditionally continue down the chain if the value is not 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.

TIL #34

You can use the removeProperty method to remove a specific inline CSS property defined in the style attribute.

You can use the removeProperty method to remove a specific inline CSS property defined in the style attribute.

https://codepen.io/matuzo/pen/OJyQgmr

TIL #33

There’s a space-separated syntax for values in functional color notations.

There’s a space-separated syntax for values in functional color notations.

TIL #32

JSON.stringify takes 3 parameters. The third parameter can be used to pretty-print the output.

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

TIL #31

There's native, CSS-only smooth scrolling.

There's native, CSS-only smooth scrolling.

https://codepen.io/matuzo/pen/yLNpKWm

TIL #30

You can target Inverted Colors Mode mode in CSS

You can target Inverted Colors Mode mode in CSS

https://a11yproject.com/posts/operating-system-and-browser-accessibility-display-modes/

TIL #29

You can use JavaScript (Vibration API) to vibrate devices

You can use JavaScript (Vibration API) to vibrate devices

https://codepen.io/matuzo/pen/rNaPOYJ

TIL #28

You can disable all form elements in a fieldset by setting the disabled attribute on the fieldset.

You can disable all form elements in a fieldset by setting the disabled attribute on the fieldset.

https://codepen.io/matuzo/pen/gObjOzj?editors=1000

TIL #27

You can list all pseudo elements of an element in the CSS pane in Firefox Developer Tools.

You can list all pseudo elements of an element in the CSS pane in Firefox Developer Tools.

TIL #26

You can emulate dark mode and reduced motion in Chrome Dev Tools.

You can emulate dark mode and reduced motion in Chrome Dev Tools.

https://umaar.com/dev-tips/211-media-query-simulation/

TIL #25

You can instruct browsers to print pages in landscape orientation (Chrome/Opera only).

You can instruct browsers to print pages in landscape orientation (Chrome/Opera only).

TIL #24

You can change the filename of a downloadable file by defining a value in the download attribute.

You can change the filename of a downloadable file by defining a value in the download attribute.

TIL #23

The bullet or number of a list-item can be selected and styled with the ::marker pseudo-element.

The bullet or number of a list-item can be selected and styled with the ::marker pseudo-element.

https://codepen.io/matuzo/pen/abbqMEZ?editors=1100

TIL #22

If an input element has the attribute value autocomplete="new-password", browsers can suggest securely-generated passwords.

If an input element has the attribute value autocomplete=

https://codepen.io/matuzo/pen/WNNEKVE

TIL #21

You can use the CSS Paint API to create background images in CSS.

You can use the CSS Paint API to create background images in CSS.

TIL #20

You can search the elements panel in Developer Tools not only for strings but also selectors.

You can search the elements panel in Developer Tools not only for strings but also selectors.

TIL #19

The webkitdirectory attribute allows users to select directories instead of files. (desktop browsers only)

The webkitdirectory attribute allows users to select directories instead of files. (desktop browsers only)

https://codepen.io/matuzo/pen/KOdpmq?editors=1111

TIL #18

It's possible to identify how many separate fingers are touching the screen.

It's possible to identify how many separate fingers are touching the screen.

https://codepen.io/matuzo/debug/NQPRvN

TIL #17

You can do responsive preloading because preload link elements accept the media attribute like any other link element.

You can do responsive preloading because preload link elements accept the media attribute like any other link element.

https://codepen.io/matuzo/debug/NQPRvN

TIL #16

SVGs are focusable in Internet Explorer. We can set focusable="false" to prevent that.

SVGs are focusable in Internet Explorer. We can set focusable=

https://codepen.io/matuzo/pen/vqOdVv?editors=1100

TIL #15

macOS uses Papyrus as the default font when you define the generic font family “fantasy”.

macOS uses Papyrus as the default font when you define the generic font family “fantasy”.

https://codepen.io/matuzo/pen/joZQwm

TIL #14

text-decoration doesn't have to be a solid line. There’s also dotted, dashed, double, and wavy.

text-decoration doesn't have to be a solid line. There’s also dotted, dashed, double, and wavy.

https://codepen.io/matuzo/pen/WBXBvb

TIL #13

text-decoration is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style.

text-decoration is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style.

https://codepen.io/matuzo/pen/wbrwpJ

TIL #12

Overflowing block-level elements with overflow set to scroll or auto are focusable in Firefox.

Overflowing block-level elements with overflow set to scroll or auto are focusable in Firefox.

https://codepen.io/matuzo/pen/RdJoqE?editors=1100

TIL #11

You can use conditional comments to target specific versions of Outlook.

You can use conditional comments to target specific versions of Outlook.

https://templates.mailchimp.com/development/css/outlook-conditional-css/

TIL #10

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 turn the outline of an element to the _inside_  by setting the outline-offset property to a negative value. (Not supported in IE)

https://codepen.io/matuzo/pen/VgGpBE?editors=1100

TIL #9

You can center a flex-item vertically and horizontally by applying margin: auto; to it.

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

TIL #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.

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.

TIL #7

About the @at-root directive. It moves nested styles out from within a parent selector or nested directive.

About the @at-root directive. It moves nested styles out from within a parent selector or nested directive.

https://codepen.io/matuzo/pen/aXmzYd

TIL #6

IE 11 requires a unit to be added to the third argument (flex-basis) of the flex property.

IE 11 requires a unit to be added to the third argument (flex-basis) of the flex property.

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673531%28v%3dvs.85%29#setting-the-flexibility-of-a-child-element

TIL #5

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.

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

TIL #4

The grid-auto-flow property takes up to two values. row, column, dense, row dense, or column dense.

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

TIL #3

You can pass an `options` object, which only has a single property, to the `focus()` method to prevent scrolling on focus.

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

TIL #2

There’s a tab-size property. It controls the width of the tab (U+0009) character.

There’s a tab-size property. It controls the width of the tab (U+0009) character.

https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size

TIL #1

How to get a random background-color (or any other value) each time I compile Sass.

How to get a random background-color (or any other value) each time I compile Sass.

https://codepen.io/matuzo/pen/oJyEVO?editors=1100