Letem frontendovým světem, vol. 17

Už se vám někdy stalo, že jste potřebovali dočasně změnit cestu, odkud se budou stahovat všechny assety (javascript, obrázky, styly, …)? Mně zrovna nedávno. Díky <base> elementu není potřeba ručně upravovat každou cestu. Stačí dát do hlavičky následující html element, který určuje základní URL adresu pro všechny relativní cesty v dokumentu.

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

Nativní "cancel" tlačítko pro smazání obsahu inputu je téměř zde. Prozatím jeho používání brzdí ještě Firefox, ale nastudovat si implementaci už pomalu můžete. Touto nativní funkcí se zbavíme ovládacího Javascriptu a i pár řádků CSS.

See the Pen Youtube video glow effect - dominant color by Smashing Magazine (@smashingmag) on CodePen.

Pro ty z vás, kteří už někdy zavítali v DevTools do záložky Snippets, tu máme stránku webperf-snippets.nucliweb.net. Zde najdete několik připravených snippetů týkajících se optimalizace rychlosti webů. Můžete si tak vytvořit snippet, který vám bude do konzole logovat například LCP elementy, CLS, Long Tasky nebo jiné zajímavé informace.

Seznam nedávno oznámil, že a ukončuje podporu JS SDK pro Mapy.cz. Vyvíjet bude nadále pouze REST API a je potřeba na něj přejít do konce roku 2025. Od podzimu 2024 se bude v mapách zobrazovat hláška upozorňující na končící podporu.

Safari před dvěma měsíci přineslo několik zajímavých novinek do své poslední verze prohlížeče. Co nás zaujalo?

• nativní input s atributem switch a barvy pomocí CSS pravidla accent-color
• <hr> v selectu pro oddělení <options>
• podpora WebM kodeku, aneb trable s transparentními videi budou již brzy za námi 👏
• align-content pro blokové elementy

Zejména poslední pravidlo jsem neznala a začala jsem jej pro horizontální a vertikální centrování používat častěji. Dokáže ušetřit hned dva řádky kódu. A to se vyplatí.

Centrování pomocí flexu:

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

Centrování pomocí align-content:

text-align: center
align-content: center

Potřebujete rychlý AI tool na vygenerování regex výrazu, bez řečí a omáčky kolem? Zkuste autoregex.xyz.

Tato funkce, původně dostupná pouze přes nabídku CMD + Shift + P, si zasloužila nové místo v :hov záložce stylů. Snažili jste se někdy zkontrolovat element, jehož zobrazení bylo závislé například na focusu v inputu a element vám tak stále mizel pod rukama při snaze na něj kliknout? Tak právě pro vás je checkbox „Emulate a focused page“. Díky němu nebudete muset dočasně vypínat žádná pravidla pro zobrazení takového elementu.

Dočetli jste se až sem a chcete víc? Není problém. Máme tipy na novinky, které tu s námi už nějakou dobu jsou a ještě jsme se je nenaučili používat na denní bázi. Inspirujte se třeba příkladem těchto interaktivních článků pro :has selektor nebo pro container queries.