Bölümler
-
I can’t believe we’re already at the end of season 4! This season, we’ve been focusing on CSS gotchas and resolving these common CSS pitfalls. And alas, on our last episode of the season, we’re going to take a look back at all of those tips and tricks and pick some of our favorites to highlight in this recap episode.
Links:
Why isn’t percentage working → https://goo.gle/418EnBG
Why isn’t my element stuck → https://goo.gle/3uSX7Jk
Why isn’t my custom property the value I expect → https://goo.gle/47BcZPj
How do I center a div → https://goo.gle/3RiOBLA
Why isn’t my animation glitching → https://goo.gle/4a5fzPh
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs -
In this episode, Una and Adam talk about percentage resolution for various properties like font-size, padding height and width. They break down and explain why percentages may not work or may not be what you expected.
Links
→ https://goo.gle/47XtWU1
Understanding CSS Percentage → https://goo.gle/3RhLJzG
CSS Box Sizing Module Level 3 → https://goo.gle/46FRF9T
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs -
Eksik bölüm mü var?
-
In this episode Una and Adam help you uncover moments where a sticky element isn't sticking. There are a couple of gotcha around implementing a sticky element and by the end of the show you'll know what they are and a few ways to work around them.
Links:
sticky stack - https://goo.gle/3QICxTz
sticky desperado - https://goo.gle/3sC3OPj
sticky slide - https://goo.gle/47bcRGb
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Subscribe to Chrome for Developers YouTube → https://goo.gle/ChromeDevs -
In this episode, Una and Adam discuss common gotchas with custom properties, which often feel fully reactive during use, but their limits and implementation details can popup at unexpected times and create a headache. They'll cover these situations and their solutions!
Links:
Value stages → https://goo.gle/3FDo7yA
How custom property values are computed →https://goo.gle/49cOUiQ
A complete guide to custom properties → https://goo.gle/40gtVb8
The big gotcha with custom properties → https://goo.gle/45VwUHe
CodePen → https://goo.gle/3SdMnyY
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
-
In this episode we tackle one of the most asked questions of all CSS history.. how do I center this div? We'll cover multiple strategies that each have tradeoffs and super powers over each other.
Links:
Centering in CSS → https://goo.gle/3RRki02
Comparing grid and flex place-items and place-content → https://goo.gle/3ZE3NGM
Centering in CSS: A Complete Guide → https://goo.gle/46xudw7
Centering examples from Una → https://goo.gle/3rF7lvR
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
-
On this episode of the #CSSpodcast, we’re diving into how to deal with glitchy animations in your code base!
Links:
MDN transform-style - https://goo.gle/45YFu8B
MDN backface-visibility - https://goo.gle/46mPvfE
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs -
In this episode, we tackle the issues around getting undesirable gradient results. Sometimes it's you, sometimes it's the color space. We'll help you identify, assess and remedy muddy gradients.
Links:
HD color guide - https://goo.gle/3RhyvmP
various gradients in color spaces - https://goo.gle/3Pc02TV
modern css gradient tool - https://goo.gle/3P4KxNI
try color mix - https://goo.gle/3r2toML
color-mix() with white hover codepen - https://goo.gle/3Pw6mHm
interpolation visualizer - https://goo.gle/45GwS6t
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
The CSS Podcast
#CSSpodcast
-
In this episode we're shifting the topic to layout shift, that moment where you watch the page adapt to something lazily loaded which has impacted the layout in some way where you see content shift around.
Links:
CLS - https://goo.gle/3kle3AW
Optimizing CLS - https://goo.gle/3fxu6IE
CSS for Web Vitals - https://goo.gle/3E98gY9
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs -
Too small? Too big? Learn how to make your images just right and all the reasons they might be looking a little funky when you’re adding media to your interface.
Links:
CSS for Web Vitals → https://goo.gle/3E98gY9
Learn Responsive Images → https://goo.gle/45EFuds
Aspect Ratio → https://goo.gle/3PdyjDS
Demos → https://goo.gle/3qJuQ6z & https://goo.gle/45uDvZB
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
-
In this episode we're overjoyed to overexplain why you may be having overflow in your page. somewhere over the rainbow, an overheating developer overcooked the inline sizes and ended up oversleeping for work the next day. Now let's overanalyze and overshare about CSS overflow.
Links:
The rules of Margin Collapse → https://goo.gle/441OGaH
Everything you need to know → https://goo.gle/4434Ctj
Check out → https://goo.gle/3YrJDiw
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs
The CSS Podcast
#CSSpodcast
-
In this episode we explore why margin may not be working for you. We’ll teach you about block formatting contexts and margin collapsing! We'll make you the space you want in your designs!
Links:
The Rules of Margin Collapse → https://goo.gle/441OGaH
CSS Margins → https://goo.gle/4434Ctj
Learn more → https://goo.gle/3YrJDiw
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs
-
In this episode we explore why z-index isn’t working for you. We’ll teach you about stacking context and how to make sure you’ve set yourself up for layering success! Join us on this journey through positioning, variable architecture, tools, and more, to bring those elements to light.
Links:
Stacking context → https://goo.gle/43It8jl
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs
-
Listen to Adam and Una recap all of the exciting landings they talked about in 2022 in this end-of-season recap. If you missed the others, don’t miss this one!
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes on YouTube→ https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs
The CSS Podcast
#CSSpodcast
-
In this episode Una and Adam talk about CSS Nesting, per the current 2022 spec draft. They'll cover the syntax basics, some gotchas and of course a bunch of examples.
Links
Nesting 1 Spec - https://goo.gle/3VgnoJR
Adam exploring the prototype implementation in Canary - https://goo.gle/3UGsMpv
@scope and @layer and nesting - https://goo.gle/3EyJ3Hq
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs
The CSS Podcast
#CSSpodcast
-
In this episode Una and Adam discuss subgrid, a special value for grid-template-rows or grid-template-columns. Learn the general details of usage, use cases, tips, tricks and gotchas, so you can use the feature with confidence.
Links
CSS Grid Spec - https://goo.gle/3EfjoDq
MDN - https://goo.gle/3tbooTx
Smashing Magazine - https://goo.gle/3DUb7Ds
Ahmad Shadeed on Subgrid - https://goo.gle/3EeStaP
State of CSS (subgrid) - https://goo.gle/3fQDvP4
Full Bleed Subgrid demo - https://goo.gle/3TkZ1Jv
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs
The CSS Podcast
#CSSpodcast
-
Media query range syntax is a really nice addition.
Links
Polyfill: https://goo.gle/3TXcyYD New syntax for range media queries: https://goo.gle/3DQlHg0Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes on YT → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
The CSS Podcast
#CSSpodcast
-
In this episode Una and Adam cover changes to the color level 5 and new color level 6 specs, so you can stay HD on the topic. Plus, a dive into CSS color functions for manipulating colors.
Links
CSS Color Module Level 5 → https://goo.gle/3f8BgpT
CSS Color Module Level 6 → https://goo.gle/3TIsPAI
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
The CSS Podcast
#CSSpodcast
-
:has() is a new CSS selector which allows developers to query for the presence of a child or state. It has been called the “parent selector”, but it’s much more than that! Using :has() you can style up and down a DOM tree, making this an incredible powerful feature. Learn how to take advantage of this new API with lots of examples in this episode.
Links
Blog → https://goo.gle/3CIs1EF Selectors → https://goo.gle/3EQsPde Pseudo-classes → https://goo.gle/3SgvH69 Creative CSS Layout → https://goo.gle/3yRv4sZ Quantity Queries for CSS → https://goo.gle/3a4NPwTUna Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
The CSS Podcast
#CSSpodcast
-
In this episode Una and Adam explain a non-CSS property, but very relevant front-end UI property, called inert. It's a way to have a visually guarded part of the UI also be guarded for keyboard and screen reader users.
Links
Inert spec - https://goo.gle/3SXid0C
MDN - https://goo.gle/3rK1Ybd
Chrome Developers: Introducing Inert - https://goo.gle/3CLygZE
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
The CSS Podcast
#CSSpodcast
-
Container queries (also known as @container) are a new entrypoint for truly component-based responsive design. In this episode, Adam and Una will walk you through how to use them, what browser support looks like, and upcoming features that will give you even more control over your responsive interfaces!
Links
CQ + :has() → https://goo.gle/3ymiwJS MDN Docs → https://goo.gle/3ogyIrpUna Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
The CSS Podcast
#CSSpodcast
- Daha fazla göster