Letem frontendovým světem, vol. 6
Rok 2023 je v plném proudu a my vám přinášíme další nálož novinek z našich frontendových porad.
Podpora Container Queries míří do Firefox
Container Queries je velmi očekávaná věc. Jediné, co brání plnému využití, je prozatím podpora prohlížečů. Za ostatními velkými prohlížeči zaostal Firefox, který podporu této novinky přidá až v dalším releasu, tj 14. února 2023. Držte si klobouky a připravte Container Queries na vašich projektech.
HTML tag <meter>
Jedná se o starší a poměrně neznámý nebo spíš málo používaný tag. K čemu ho tedy můžeme využít? Jedná se o element, který představuje buď skalární hodnotu ve známém rozsahu, nebo zlomkovou hodnotu.
Pojďme se podívat jak ho lze využít konkrétně a jaké atributy používá:
- value — aktuální číselná hodnota
- min — nejnižší hodnota měřeného rozsahu
- max — nejvyšší hodnota, která (nečekaně) musí být vyšší než minimální
- low — určuje rozsah, ve kterém hodnotu považujeme za nízkou
- high — rozsah určený pro vysokou hodnotu
- optimum — optimální hodnota
Často se setkáváme se srovnáním tohoto tagu s elementem <progress>, ale ten slouží pouze pro zobrazení průběhu dokončení úkolu. To se dá využít zase v jiných případech, například u hodnocení produktu nebo zobrazení vytížení call centra.
Kouzelník z CSS, to je display: contents
Představte si, že máte nakódovat boxík, kde je nadpis, stručný popis, odkaz na detail a samozřejmě obrázek. Ten je na desktopu vedle obsahu. Říkáte si, pohoda a použijete na to flex, nebo grid.
Zádrhel ale přichází v responzivní verzi, kde chcete vložit obrázek mezi nadpis a text, což už není tak snadné. K tomu lze využít CSS vlastnost display: contents. Tato kouzelná hodnota zajistí, že kontejner okolo elementu “zmizí”, takže podřízené prvky budou potomky v DOMU o jednu úroveň výše. Lépe bude situaci ilustrovat náš CodePen s ukázkou:
ChatGPT: Opravdu nahradí kodéry?
Tak a jsme bez práce! Jasně trochu přeháním, ale s lehkou nadsázkou a mírnou panikou musím uznat, že ChatGPT toho zvládne opravdu hodně. Lze jej využít na vytvoření základní HTML struktury, pro komponenty, jednoduché úkony v JavaScriptu, Reactu… Prakticky na cokoliv, co máte zrovna na mysli.
Samozřejmě jsme ho reálně vyzkoušeli a ověřili si jak je “dobrej”. Na ukázky se můžete mrknout níže:
