Manuel Matuzović - TIL

My Blog about accessibility, performance, and CSS architecture and layout.

Latest posts

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; } My blog doesn t support comments yet, but you can reply via blog@matuzo.at .

Feb 13, 2023

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] My blog doesn t support comments yet, but you can reply via blog@matuzo.at .

Aug 23, 2022

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 */ My blog doesn t support comments yet, but you can reply via blog@matuzo.at .

Feb 16, 2022

You can link to multiple e-mail addresses

<a href="mailto:manuel@matuzo.at,manuel@webclerks.at"> Contact me and me </a>  <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 .

Jul 27, 2021

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> My blog doesn t support comments yet, but you can reply via blog@matuzo.at .

Feb 21, 2021

You can animate z-index.

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 .

Dec 17, 2020

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

<iframe src="https://codepen.io/matuzo/debug/YzGVXGV" frameborder="0"></iframe>  <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…

Dec 16, 2020

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>  <button class="myButton">Send</button>  [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 .

Nov 27, 2020

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> My blog doesn t…

Oct 7, 2020