Letem frontendovým světem, vol. 12

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 Externí odkaz od  Temani Afif Externí odkaz .

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

See the Pen Style Queries & Computed Values by Miriam Suzanne (@miriamsuzanne) on CodePen.

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 Externí odkaz na Smashing Magazine.

Zajímají tě novinky ze světa Frontendu?

Přihlas se k našemu newsletteru nebo nás sleduj na  sociálních sítích Externí odkaz .

Přihlásit

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 Externí odkaz .

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

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

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

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 Externí odkaz .

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