Preview Mode Links will not work in preview mode

Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.

Jul 11, 2024

In this episode Una and Adam talk about text wrap, a great modern improvement to typography on the web platform. Learn how you can create logical layout rules for your headings and other copy with just one line of code.

Resources:
text-wrap on MDN → https://goo.gle/3zvwixd 

soft breaks → https://goo.gle/4cXKLAq 

 


Jul 3, 2024

In this episode Una and Adam expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS.

Resources:
Ep 61 → https://goo.gle/4cID6pE 

Piccali → https://goo.gle/4ePKJMG 

Ahmad Shadeed → https://goo.gle/4bsk85F 

The Looper...


Jun 27, 2024

In this episode Una and Adam provide a color update, covering changes to the specs and new functions. 

Links
RCS calc() tool → https://goo.gle/4cRRJHt 

Apple Annie CSS Color Modules and Changes, Part I → https://goo.gle/3xtTr2A 

Lea verou article on RCS for contrast → https://goo.gle/3L3x5YF

Una Kravets (co-host)


Jun 20, 2024

In this episode Una and Adam share practical use cases, syntax and strategies for all the new math functions in CSS. From trig to algebra, they'll help you get a good idea on where and how these fit into your UI toolbelt.

Links
Ana Tudor tests your browser for CSS math function support → https://goo.gle/4cmBm5r 

Great...


Jun 13, 2024

In this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations. 

Links:
top-layer CSS...