Hasty Treat - Uses for CSS Variables

Hasty Treat - Uses for CSS Variables

In this Hasty Treat, Scott and Wes talk about CSS variables, a.k.a CSS Custom Properties - why you might want to use them, why they’re better than various preprocessor’s variables, and pitfalls to watch out for and avoid. Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off. Show Notes 3:25 - What --example-name, represent custom properties called using var() Overwrite with a more specific style Use JavaScript to append .style.setPropert( How are they scoped? Just like normal CSS Can be set on :root {} Can be set on any element down 9:10 - Why Uses: Can make more sense if used semantically var(–accent) vs var(–yellow) Independent values for things that can’t be broken up: box-shadow: 2px 2px 2px 2px red transform: rotate(var(–rotate)) scale(2); Inline properties can be picked up by regular CSS (color, size, etc.) hey Themes that can easily be changed at runtime for entire app 19:15 - Calculations You can use them inside of calc() Animations 20:10 - Bummers Not super well supported just yet (IE 11) No good fallback other than manual fallback Syntax - Old Browsers, Fallbacks and Polyfills series Part 1 Part 2 Part 3 PostCSS Custom Properties Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Episoder(998)

982: Bots Are Ruining the Internet

982: Bots Are Ruining the Internet

Wes and Scott talk about the latest dev news: Node enabling Temporal by default, OpenAI acquiring OpenClaw, TypeScript 6, new TanStack and Deno releases, the explosion of AI agent platforms, and more....

25 Feb 49min

981: Browsers Are Finally Catching Up (Interop 2026)

981: Browsers Are Finally Catching Up (Interop 2026)

Scott and Wes unpack Interop 2026 and the browser features finally aligning across engines, from container style queries and anchor positioning to scroll-driven animations and view transitions. They b...

23 Feb 51min

980: AI Coding Explained

980: AI Coding Explained

Wes and Scott talk about the state of AI coding in 2026—from editors and models to agents, skills, slash commands, MCPs, and more. They unpack what these things actually do, how they overlap, and how ...

18 Feb 52min

979: WebMCP: New Standard to Expose Your Apps to AI

979: WebMCP: New Standard to Expose Your Apps to AI

Scott and Wes unpack WebMCP, a new standard that lets AI interact with websites through structured tools instead of slow, bot-style clicking. They demo it, debate imperative vs declarative APIs, and s...

16 Feb 16min

978: Should A New Coder Use AI?

978: Should A New Coder Use AI?

Wes and Scott answer your questions about AI agents, learning to code with AI, pagination patterns, skilling up from outdated tech stacks, balancing side projects with family life, real-world hacking ...

11 Feb 1h 2min

977: We built a CSS Challenge platform

977: We built a CSS Challenge platform

Scott and Wes break down how they built SynHax, the real-time CSS Battle app powering the upcoming Mad CSS tournament. From SvelteKit and Zero to diffing algorithms, sync conflicts, and a last-minute ...

9 Feb 41min

976: Pi - The AI Harness That Powers OpenClaw W/ Armin Ronacher & Mario Zechner

976: Pi - The AI Harness That Powers OpenClaw W/ Armin Ronacher & Mario Zechner

Wes and Scott talk with Armin Ronacher and Mario Zechner about PI, a minimalist agent harness powering tools like OpenClaw. They unpack why Bash is “all you need,” the risks of agents, workflow adapta...

4 Feb 57min

975: What’s Missing From the Web Platform?

975: What’s Missing From the Web Platform?

Scott and Wes run through their wishlist for the web platform, digging into the UI primitives, DOM APIs, and browser features they wish existed (or didn’t suck). From better form controls and drag-and...

2 Feb 50min

Populært innen Politikk og nyheter

giver-og-gjengen-vg
aftenpodden
aftenpodden-usa
forklart
stopp-verden
popradet
dine-penger-pengeradet
det-store-bildet
rss-gukild-johaug
nokon-ma-ga
lydartikler-fra-aftenposten
fotballpodden-2
hanna-de-heldige
aftenbla-bla
rss-ness
rss-espen-lee-usensurert
e24-podden
rss-dannet-uten-piano
rss-penger-polser-og-politikk
rss-utenrikskomiteen-med-bogen-og-grasvik