Manuel Matuzović - TIL

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

2023-02-13T00:00:00+00:00

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

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2022-08-23T00:00:00+00:00

<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]

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2022-02-16T00:00:00+00:00

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
*/

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

You can link to multiple e-mail addresses

2021-07-27T00:00:00+00:00

<!-- 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>

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

You can use the spellcheck attribute to instruct browsers that, if possible, an element should or should not be checked for spelling errors.

2021-02-21T00:00:00+00:00

<textarea spellcheck="false">
  Tis is jusst a test.
</textarea>

<div contenteditable spellcheck="false">
  Tis is jusst a test.
</div>

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

You can animate z-index.

2020-12-17T00:00:00+00:00

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

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

You can make a link in an iframe open in its parent window, if you set target="_parent".

2020-12-16T00:00:00+00:00

<!-- 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>

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

Adding an i (or I) before the closing bracket in an attribute selector causes the value to be compared case-insensitively.

2020-11-27T00:00:00+00:00

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

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

ol and ul accept the type attribute. You can use it to set a different numbering type in HTML.

2020-10-07T00:00:00+00:00

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

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2020-10-02T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2020-10-02T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2020-07-31T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2020-07-24T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2020-07-17T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

Optional chaining allows you to chain methods or properties, and conditionally continue down the chain if the value is not null or undefined.

2020-06-30T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2020-05-06T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2020-04-19T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2020-03-20T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

There's native, CSS-only smooth scrolling.

2020-03-10T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

You can target Inverted Colors Mode mode in CSS

2020-01-29T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

You can use JavaScript (Vibration API) to vibrate devices

2020-01-22T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2020-01-14T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-12-12T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-12-04T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-11-27T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-11-13T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-11-05T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-10-29T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-09-25T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-08-21T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-07-24T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-07-19T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-07-19T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-06-13T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-05-23T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-05-22T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-05-22T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-03-18T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-02-19T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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)

2019-02-14T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-02-11T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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.

2019-02-07T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-01-29T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-01-27T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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.

2019-01-26T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-01-25T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-01-24T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-01-23T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

2019-01-22T00:00:00+00:00

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.