Letem frontendovým světem, vol. 12

CSS:
@property

CSS at-rule @property umožňuje explicitne definovať CSS Custom Property.
S podporou to ešte nie je najlepšie, ale čo s tým dokážeme si ukázať môžeme:

Môžeme animovať CSS gradient:

Viac v článku We can finally animate CSS gradient od Temani Afif.

Môžeme používať s Style Queries:

CSS:
zabudnite na clearfixy

Ak používate na webu floatované prvky musíte riešiť pretečenie obsahu. To sa dlho riešilo použitím clearfixov. Teraz vám nato stačí vlastnosť:

display: flow-root;

Viac si o tom môžete prečítať v článku Solving Media Object Float Issues With CSS Block Formatting Contexts na Smashing Magazine.

CSS:
box-decoration-break

Pridanim tejto CSS vlastnosti na inline element umožníte pri zalomení textu dediť niektoré iné vlastnosti medzi začiatkom a koncom riadku: background, border, border-image, box-shadow, clip-path, margin, padding.

box-decoration-break: clone;
-webkit-box-decoration-break: clone;

Ukážka z MDN.

Blur Effect
na videu

Celkom jednoduchý kód, ktorý pridá pod video canvas a do neho zrkadlí video.

Celý článok Recreating YouTube’s Ambient Mode Glow Effect opäť na Smashing Magazine a ukážka tu:

VS Code:
snippety

Kopírujete niektoré časti kódu stále dookola? Skončite s tým a začnite používať snippety: pridanie nového vám zaberie necelých 30 sekúnd. Snippety môžete definovať pre rôzne projekty, alebo rôzne jazyky. Pri jazykových snippetoch si buď vyberiete single-language definíciu snippetu, kde pre každy jazyk máte vlastný JSON súbor kde vkladáte snippety, alebo multi-language definíciu kde si môžete pridať vlastnosť scope ktorá definuje v akom jazyku budete daný snippet používať, inak je dostupný všade.

Vlastnosti, ktoré definujeme:

"snippet name": {
	"prefix": "hello",
	"body": ["<h1>Hello, World!</h1>"],
	"scope": "html",
	"description": "Main heading."
}

Kompletný manuál nájdete tu.

Konference

Po .css-day, ktorú sme tento rok sledovali online a neskutočne nás nadchla sa 4.9. chystáme do Freiburg im Breisgau na SmashingConf a o zážitky sa určite čoskoro podelíme.
P.s.: Spomínané .css-day prednášky sú už dostupné na YoutubeExterní odkaz 😉