Around the Frontend World, vol. 17

The base element

Have you ever needed to temporarily change the path all your assets (JavaScript, images, styles, …) are loaded from? I did, just recently. Thanks to the <base> element, you don't need to manually update every single path. Just add the following HTML element to the head, which sets the base URL for all relative paths in the document.

<base href="https://www.example.com/" />

::-webkit-search-cancel-button

A native "cancel" button for clearing an input's content is almost here. For now, Firefox is still holding things back, but you can already start looking into the implementation. This native feature lets us get rid of some controlling JavaScript as well as a few lines of CSS.

DevTools Snippets
& Web Performance

For those of you who've ever visited the Snippets tab in DevTools, here's a site for you: webperf-snippets.nucliweb.net. Here you'll find several ready-made snippets for optimizing website speed. You can create a snippet that logs things like LCP elements, CLS, Long Tasks, or other useful information to the console.

End of JS SDK support
in Seznam Maps

Seznam recently announced it is ending support for the Mapy.cz JS SDK. Going forward, only the REST API will be developed, and you'll need to migrate to it by the end of 2025. Starting in autumn 2024, the maps will display a notice warning that support is ending.

Safari 17.4 news

Two months ago, Safari brought several interesting additions to its latest browser version. What caught our eye?

• native input with the switch attribute, and colors via the CSS accent-color
• <hr> inside a select to separate <options>
• WebM codec support, meaning trouble with transparent videos will soon be behind us 👏
• align-content for block elements

I didn't know about that last rule in particular, and I've started using it more often for horizontal and vertical centering. It can save you a full two lines of code. And that's worth it.

Centering with flex:

display: flex
align-items: center
justify-content: center
text-align: center // centrování textu, pokud se zalamuje na více řádku

Centering with align-content:

text-align: center
align-content: center

AI auto-regex generator

Need a quick AI tool for generating a regex, no fuss or extra frills? Try autoregex.xyz.

Emulate a focused page

This feature, originally available only through the CMD + Shift + P menu, has earned itself a new home in the :hov styles tab. Ever tried to inspect an element whose display depended on something like an input's focus, and the element kept slipping away every time you tried to click on it? Well, the "Emulate a focused page" checkbox is exactly for you. Thanks to it, you won't need to temporarily disable any display rules for an element like that.

Repetition is
the mother of wisdom

Made it this far and want more? No problem. We've got tips on things that have been around for a while now but that we still haven't gotten into the habit of using daily. Get some inspiration from these interactive articles on the :has selector or on container queries.