Manuel Matuzović - TILMy Blog about accessibility, performance, and CSS architecture and layout.2023-09-07T07:15:54Zhttps://matuzo.at/Manuel Matuzovićmanuel@matuzo.atYou can style the file selector button of file upload elements.2023-02-13T00:00:00+00:00https://www.matuzo.at/til/til49
<pre><code class="language-html"><label for="upload">Select file</label><br>
<input type="file" id="upload"></code></pre>
<pre><code class="language-css">[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;
}</code></pre><p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+style+the+file+selector+button+of+file+upload+elements.%E2%80%9D">blog@matuzo.at</a>.</p> You can use the :scope pseudo class to select direct children of an element with `.querySelectorAll()`.2022-08-23T00:00:00+00:00https://www.matuzo.at/til/til47
<pre><code class="language-html"><ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<p>D</p></code></pre>
<pre><code class="language-js"> console.log(document.body.querySelectorAll('*'))
// NodeList(5) [ul, li, li, li, p]
console.log(document.body.querySelectorAll(':scope > *'))
// NodeList(2) [ul, p]</code></pre><p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+use+the+%3Ascope+pseudo+class+to+select+direct+children+of+an+element+with+%60.querySelectorAll%28%29%60.%E2%80%9D">blog@matuzo.at</a>.</p> console.count() logs the number of times that this particular call to count() has been called.2022-02-16T00:00:00+00:00https://www.matuzo.at/til/til46
<pre><code class="language-js">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
*/</code></pre><p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9Cconsole.count%28%29+logs+the+number+of+times+that+this+particular+call+to+count%28%29+has+been+called.%E2%80%9D">blog@matuzo.at</a>.</p> You can link to multiple e-mail addresses2021-07-27T00:00:00+00:00https://www.matuzo.at/til/til45
<pre><code class="language-html"><!-- 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></code></pre><p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+link+to+multiple+e-mail+addresses%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/til44
<pre><code class="language-html"><textarea spellcheck="false">
Tis is jusst a test.
</textarea>
<div contenteditable spellcheck="false">
Tis is jusst a test.
</div></code></pre><p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+use+the+spellcheck+attribute+to+instruct+browsers+that%2C+if+possible%2C+an+element+should+or+should+not+be+checked+for+spelling+errors.%E2%80%9D">blog@matuzo.at</a>.</p> You can animate z-index.2020-12-17T00:00:00+00:00https://www.matuzo.at/til/til43
<pre><code class="language-css">div {
position: absolute;
top: 0;
left: 0;
transition: z-index 2.5s;
}</code></pre><p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+animate+z-index.%E2%80%9D">blog@matuzo.at</a>.</p> You can make a link in an iframe open in its parent window, if you set target="_parent".2020-12-16T00:00:00+00:00https://www.matuzo.at/til/til42
<pre><code class="language-html"><!-- 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></code></pre><p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+make+a+link+in+an+iframe+open+in+its+parent+window%2C+if+you+set+target%3D%22_parent%22.%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/til41
<pre><code class="language-html"><button class="mybutton">Send</button> <!-- red border -->
<button class="myButton">Send</button> <!-- green border --></code></pre>
<pre><code class="language-css">[class*="button" i] { /* matches mybutton and myButton */
border: 10px solid green;
}
[class*="button"] { /* matches only mybutton */
border-color: red;
}</code></pre><p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CAdding+an+i+%28or+I%29+before+the+closing+bracket+in+an+attribute+selector+causes+the+value+to+be+compared+case-insensitively.%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/ol-and-ul-accept-the-type-attribute-you-can-use-it-to-set-a-different-numbering-type-in-html
<pre><code class="language-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></code></pre><p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9Col+and+ul+accept+the+type+attribute.+You+can+use+it+to+set+a+different+numbering+type+in+HTML.%E2%80%9D">blog@matuzo.at</a>.</p> The order in which transform functions in the transform shorthand property are defined matters.2020-10-02T00:00:00+00:00https://www.matuzo.at/til/the-order-in-which-transform-functions-in-the-transform-shorthand-property-are-defined-matters
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CThe+order+in+which+transform+functions+in+the+transform+shorthand+property+are+defined+matters.%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/you-can-use-the-nomodule-attribute-to-run-javascript-code-only-in-browsers-that-don’t-support-js-modules
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+use+the+nomodule+attribute+to+run+JavaScript+code+only+in+browsers+that+don%E2%80%99t+support+JS+modules.%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/using-the-background-origin-property-you-can-position-background-images-relative-to-the-outer-border-edge-default-inner-border-edge-or-the-content-edge
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CUsing+the+background-origin+property+you+can+position+background+images+relative+to+the+inner+border+edge+%28default%29%2C+outer+border+edge%2C+or+the+content+edge.%E2%80%9D">blog@matuzo.at</a>.</p> You can add the option { once: true } to an event listener to automatically remove it when has been invoked2020-07-24T00:00:00+00:00https://www.matuzo.at/til/you-can-add-the-option-once-true-to-an-event-listener-to-automatically-remove-it-when-has-been-invoked
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+add+the+option+%7B+once%3A+true+%7D+to+an+event+listener+to+automatically+remove+it+when+has+been+invoked%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/the-nullish-coalescing-operator-only-returns-its-right-hand-side-operand-when-its-left-hand-side-operand-is-null-or-undefined
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CThe+nullish+coalescing+operator+%28%3F%3F%29+only+returns+its+right-hand+side+operand+when+its+left-hand+side+operand+is+null+or+undefined.%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/optional-chaining-allows-you-to-chain-methods-or-properties-and-conditionally-continue-down-the-chain-if-the-value-is-not-null-or-undefined
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9COptional+chaining+allows+you+to+chain+methods+or+properties%2C+and+conditionally+continue+down+the+chain+if+the+value+is+not+null+or+undefined.%E2%80%9D">blog@matuzo.at</a>.</p> You can use the removeProperty method to remove a specific inline CSS property defined in the style attribute.2020-05-06T00:00:00+00:00https://www.matuzo.at/til/you-can-use-the-removeproperty-method-to-remove-a-specific-inline-css-property-defined-in-the-style-attribute
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+use+the+removeProperty+method+to+remove+a+specific+inline+CSS+property+defined+in+the+style+attribute.%E2%80%9D">blog@matuzo.at</a>.</p> There’s a space-separated syntax for values in functional color notations.2020-04-19T00:00:00+00:00https://www.matuzo.at/til/theres-a-space-separated-syntax-for-values-in-functional-color-notations
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CThere%E2%80%99s+a+space-separated+syntax+for+values+in+functional+color+notations.%E2%80%9D">blog@matuzo.at</a>.</p> JSON.stringify takes 3 parameters. The third parameter can be used to pretty-print the output.2020-03-20T00:00:00+00:00https://www.matuzo.at/til/json-stringify-takes-3-parameters-the-third-parameter-can-be-used-to-pretty-print-the-output
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CJSON.stringify+takes+3+parameters.+The+third+parameter+can+be+used+to+pretty-print+the+output.%E2%80%9D">blog@matuzo.at</a>.</p> There's native, CSS-only smooth scrolling.2020-03-10T00:00:00+00:00https://www.matuzo.at/til/theres-native-css-only-smooth-scrolling
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CThere%27s+native%2C+CSS-only+smooth+scrolling.%E2%80%9D">blog@matuzo.at</a>.</p> You can target Inverted Colors Mode mode in CSS2020-01-29T00:00:00+00:00https://www.matuzo.at/til/you-can-target-inverted-colors-mode-mode-in-css
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+target+Inverted+Colors+Mode+mode+in+CSS%E2%80%9D">blog@matuzo.at</a>.</p> You can use JavaScript (Vibration API) to vibrate devices2020-01-22T00:00:00+00:00https://www.matuzo.at/til/you-can-use-javascript-vibration-api-to-vibrate-devices
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+use+JavaScript+%28Vibration+API%29+to+vibrate+devices%E2%80%9D">blog@matuzo.at</a>.</p> You can disable all form elements in a fieldset by setting the disabled attribute on the fieldset.2020-01-14T00:00:00+00:00https://www.matuzo.at/til/you-can-disable-all-form-elements-in-a-fieldset-by-setting-the-disabled-attribute-on-the-fieldset
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+disable+all+form+elements+in+a+fieldset+by+setting+the+disabled+attribute+on+the+fieldset.%E2%80%9D">blog@matuzo.at</a>.</p> You can list all pseudo elements of an element in the CSS pane in Firefox Developer Tools.2019-12-12T00:00:00+00:00https://www.matuzo.at/til/you-can-list-all-pseudo-elements-of-an-element-in-the-css-pane-in-firefox-developer-tools
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+list+all+pseudo+elements+of+an+element+in+the+CSS+pane+in+Firefox+Developer+Tools.%E2%80%9D">blog@matuzo.at</a>.</p> You can emulate dark mode and reduced motion in Chrome Dev Tools.2019-12-04T00:00:00+00:00https://www.matuzo.at/til/you-can-emulate-dark-mode-and-reduced-motion-in-chrome-dev-tools
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+emulate+dark+mode+and+reduced+motion+in+Chrome+Dev+Tools.%E2%80%9D">blog@matuzo.at</a>.</p> You can instruct browsers to print pages in landscape orientation (Chrome/Opera only).2019-11-27T00:00:00+00:00https://www.matuzo.at/til/you-can-instruct-browsers-to-print-pages-in-landscape-orientation-chrome-opera-only
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+instruct+browsers+to+print+pages+in+landscape+orientation+%28Chrome%2FOpera+only%29.%E2%80%9D">blog@matuzo.at</a>.</p> You can change the filename of a downloadable file by defining a value in the download attribute.2019-11-13T00:00:00+00:00https://www.matuzo.at/til/you-can-change-the-filename-of-a-downloadable-file-by-defining-a-value-in-the-download-attribute
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+change+the+filename+of+a+downloadable+file+by+defining+a+value+in+the+download+attribute.%E2%80%9D">blog@matuzo.at</a>.</p> The bullet or number of a list-item can be selected and styled with the ::marker pseudo-element.2019-11-05T00:00:00+00:00https://www.matuzo.at/til/the-bullet-or-number-of-a-list-item-can-be-selected-and-styled-with-the-marker-css-pseudo-element
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CThe+bullet+or+number+of+a+list-item+can+be+selected+and+styled+with+the+%3A%3Amarker+pseudo-element.%E2%80%9D">blog@matuzo.at</a>.</p> If an input element has the attribute value autocomplete="new-password", browsers can suggest securely-generated passwords.2019-10-29T00:00:00+00:00https://www.matuzo.at/til/if-an-input-element-has-the-attribute-value-autocomplete-new-password-browsers-can-suggest-securely-generated-passwords
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CIf+an+input+element+has+the+attribute+value+autocomplete%3D%22new-password%22%2C+browsers+can+suggest+securely-generated+passwords.%E2%80%9D">blog@matuzo.at</a>.</p> You can use the CSS Paint API to create background images in CSS.2019-09-25T00:00:00+00:00https://www.matuzo.at/til/you-can-use-the-css-paint-api-to-create-background-images-in-css
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+use+the+CSS+Paint+API+to+create+background+images+in+CSS.%E2%80%9D">blog@matuzo.at</a>.</p> You can search the elements panel in Developer Tools not only for strings but also selectors.2019-08-21T00:00:00+00:00https://www.matuzo.at/til/you-can-search-the-elements-panel-in-developer-tools-not-only-for-strings-but-also-selectors
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+search+the+elements+panel+in+Developer+Tools+not+only+for+strings+but+also+selectors.%E2%80%9D">blog@matuzo.at</a>.</p> The webkitdirectory attribute allows users to select directories instead of files. (desktop browsers only)2019-07-24T00:00:00+00:00https://www.matuzo.at/til/the-webkitdirectory-attribute-allows-users-to-select-directories-instead-of-files-desktop-browsers-only
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CThe+webkitdirectory+attribute+allows+users+to+select+directories+instead+of+files.+%28desktop+browsers+only%29%E2%80%9D">blog@matuzo.at</a>.</p> It's possible to identify how many separate fingers are touching the screen.2019-07-19T00:00:00+00:00https://www.matuzo.at/til/its-possible-to-identify-how-many-separate-fingers-are-touching-the-screen
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CIt%27s+possible+to+identify+how+many+separate+fingers+are+touching+the+screen.%E2%80%9D">blog@matuzo.at</a>.</p> You can do responsive preloading because preload link elements accept the media attribute like any other link element.2019-07-19T00:00:00+00:00https://www.matuzo.at/til/you-can-do-responsive-preloading-because-preload-link-elements-accept-the-media-attribute-like-any-other-link-element
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+do+responsive+preloading+because+preload+link+elements+accept+the+media+attribute+like+any+other+link+element.%E2%80%9D">blog@matuzo.at</a>.</p> SVGs are focusable in Internet Explorer. We can set focusable="false" to prevent that.2019-06-13T00:00:00+00:00https://www.matuzo.at/til/svgs-are-focusable-in-internet-explorer-we-can-set-focusable-false-to-prevent-that
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CSVGs+are+focusable+in+Internet+Explorer.+We+can+set+focusable%3D%22false%22+to+prevent+that.%E2%80%9D">blog@matuzo.at</a>.</p> macOS uses Papyrus as the default font when you define the generic font family “fantasy”.2019-05-23T00:00:00+00:00https://www.matuzo.at/til/macos-uses-papyrus-as-the-default-font-when-you-define-the-generic-font-family-“fantasy”
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CmacOS+uses+Papyrus+as+the+default+font+when+you+define+the+generic+font+family+%E2%80%9Cfantasy%E2%80%9D.%E2%80%9D">blog@matuzo.at</a>.</p> text-decoration doesn't have to be a solid line. There’s also dotted, dashed, double, and wavy.2019-05-22T00:00:00+00:00https://www.matuzo.at/til/text-decoration-doesnt-have-to-be-a-solid-line-theres-also-dotted-dashed-double-and-wavy
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9Ctext-decoration+doesn%27t+have+to+be+a+solid+line.+There%E2%80%99s+also+dotted%2C+dashed%2C+double%2C+and+wavy.%E2%80%9D">blog@matuzo.at</a>.</p> text-decoration is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style.2019-05-22T00:00:00+00:00https://www.matuzo.at/til/text-decoration-is-a-shorthand-property-for-text-decoration-line-text-decoration-color-and-text-decoration-style
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9Ctext-decoration+is+a+shorthand+property+for+text-decoration-line%2C+text-decoration-color%2C+and+text-decoration-style.%E2%80%9D">blog@matuzo.at</a>.</p> Overflowing block-level elements with overflow set to scroll or auto are focusable in Firefox.2019-03-18T00:00:00+00:00https://www.matuzo.at/til/overflowing-block-level-elements-with-overflow-set-to-scroll-or-auto-are-focusable-in-firefox
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9COverflowing+block-level+elements+with+overflow+set+to+scroll+or+auto+are+focusable+in+Firefox.%E2%80%9D">blog@matuzo.at</a>.</p> You can use conditional comments to target specific versions of Outlook.2019-02-19T00:00:00+00:00https://www.matuzo.at/til/you-can-use-conditional-comments-to-target-specific-versions-of-outlook
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+use+conditional+comments+to+target+specific+versions+of+Outlook.%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/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
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+turn+the+outline+of+an+element+to+the+_inside_++by+setting+the+outline-offset+property+to+a+negative+value.+%28Not+supported+in+IE%29%E2%80%9D">blog@matuzo.at</a>.</p> You can center a flex-item vertically and horizontally by applying margin: auto; to it.2019-02-11T00:00:00+00:00https://www.matuzo.at/til/you-can-center-a-flex-item-vertically-and-horizontally-by-applying-margin-auto-to-it
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+center+a+flex-item+vertically+and+horizontally+by+applying+margin%3A+auto%3B+to+it.%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/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
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CIf+you+press+CMD%2FCtrl+and+click+on+a+property+or+property+value+in+the+style+panel%2C+%40ChromeDevTools+jumps+directly+to+the+respective+css%2Fscss+file+and+line.%E2%80%9D">blog@matuzo.at</a>.</p> About the @at-root directive. It moves nested styles out from within a parent selector or nested directive.2019-01-29T00:00:00+00:00https://www.matuzo.at/til/about-the-at-root-directive-it-moves-nested-styles-out-from-within-a-parent-selector-or-nested-directive
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CAbout+the+%40at-root+directive.+It+moves+nested+styles+out+from+within+a+parent+selector+or+nested+directive.%E2%80%9D">blog@matuzo.at</a>.</p> IE 11 requires a unit to be added to the third argument (flex-basis) of the flex property.2019-01-27T00:00:00+00:00https://www.matuzo.at/til/ie-11-requires-a-unit-to-be-added-to-the-third-argument-flex-basis-of-the-flex-property
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CIE+11+requires+a+unit+to+be+added+to+the+third+argument+%28flex-basis%29+of+the+flex+property.%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/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
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+use+%60navigator.connection%60+to+get+information+about+the+connection+like+round-trip+time%2C+bandwidth%2C+connection+type+%28e.g.+3g%2C+4g%29+or+if+Data-Saver+is+enabled.%E2%80%9D">blog@matuzo.at</a>.</p> The grid-auto-flow property takes up to two values. row, column, dense, row dense, or column dense.2019-01-25T00:00:00+00:00https://www.matuzo.at/til/the-grid-auto-flow-property-takes-up-to-two-values-row-column-dense-row-dense-or-column-dense
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CThe+grid-auto-flow+property+takes+up+to+two+values.+row%2C+column%2C+dense%2C+row+dense%2C+or+column+dense.%E2%80%9D">blog@matuzo.at</a>.</p> 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:00https://www.matuzo.at/til/you-can-pass-an-options-object-which-only-has-a-single-property-to-the-focus-method
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CYou+can+pass+an+%60options%60+object%2C+which+only+has+a+single+property%2C+to+the+%60focus%28%29%60+method+to+prevent+scrolling+on+focus.%E2%80%9D">blog@matuzo.at</a>.</p> There’s a tab-size property. It controls the width of the tab (U+0009) character.2019-01-23T00:00:00+00:00https://www.matuzo.at/til/theres-a-tab-size-property-which-controls-the-width-of-a-tab-u-0009-character
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CThere%E2%80%99s+a+tab-size+property.+It+controls+the+width+of+the+tab+%28U%2B0009%29+character.%E2%80%9D">blog@matuzo.at</a>.</p> How to get a random background-color (or any other value) each time I compile Sass.2019-01-22T00:00:00+00:00https://www.matuzo.at/til/how-to-get-a-random-background-color-or-any-other-value-each-time-i-compile-sass
<p>My blog doesn't support comments yet, but you can reply via <a href="mailto:blog@matuzo.at?subject=Comment+on+%E2%80%9CHow+to+get+a+random+background-color+%28or+any+other+value%29+each+time+I+compile+Sass.%E2%80%9D">blog@matuzo.at</a>.</p>