Alle afleveringen
100 afleveringen, van nieuw naar oud
-
50: inherit, initial, unset, and revert
13 juli 2021 · 12 min
This episode is about the very available CSS values inherit, initial, unset and revert. We'll help explain what they are, what they do and when to use them. Lees meer
Links
CSS Tricks Article → https://goo.gle/2U5PxJw
Quirksmode Article → https://goo.gle/2TY80rz
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
-
49: Accessibility
6 juli 2021 · 32 min
Today we are breaking down accessibility related styling choices to ensure a better user experience for all of your users. These include focus visibility, keyboard navigation, and more! Lees meer
Links
#lintHTMLwithCSS - https://goo.gle/3dSMIlU
CSS Speech Level 1 - https://goo.gle/3xrg3vc
Media Queries Level 5 - https://goo.gle/3qUcBXz
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
-
48: Touch interaction
29 juni 2021 · 26 min
Today we touch on touch interaction. Covering CSS's ability to change a user's touch experience with properties like touch-action, scroll-behavior, user-select and more. Lees meer
Links
MDN - https://goo.gle/3y8My14
Spec - https://goo.gle/3dm4opF
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
-
47: :is(), :where(), & nesting
22 juni 2021 · 33 min
In this episode, Adam and Una explore some CSS syntactic sugar! They discuss the :is and :where functions, how they differ, and how they're paving the way for nesting. Lees meer
Links
Adam's post on web.dev → https://goo.gle/3qhYifl
MDN :is() → https://goo.gle/3qgU0Vf
Forgiving selector parsing → https://goo.gle/3xLTYHL
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
-
46: Custom properties
15 juni 2021 · 27 min
Custom properties, aka CSS variables, are runtime dynamic variables which allow you to store loose or typed values. They're free, super fast, improve code legibility, unlock powers, are reachable with JavaScript, animateable, overall super fun and, well, kind of complex. Lees meer
Links
Module Level 1 → https://goo.gle/3wtADL1
82% of developers get this 3 line CSS quiz wrong → https://goo.gle/2U8oTPR
A user's guide to CSS variables → https://goo.gle/3zlmscV
Locally Scoped CSS Variables: What, How, and Why → https://goo.gle/2KGESwR
GitHub → https://goo.gle/3iOiVOa
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
-
45: Scroll timeline
8 juni 2021 · 22 min
In this episode we deep dive the experimental Scroll Animations spec to bring you the breakdown on @scroll-timeline powered CSS animation. Learn about scroll-linked animations vs scroll-triggered animations and how to orchestrate scroll interactions with elements of the page. Lees meer
Links
Scroll animations level 1 draft →https://goo.gle/3pvWX49
Polyfill → https://goo.gle/3x8CQvw
GUI Challenges - Tabs → https://goo.gle/34YYl5J
Bramus's talk → https://goo.gle/2TPs7HU
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
-
44: Transitions
1 juni 2021 · 26 min
In this episode it's all about transitions. What you can and can't transition, it's limits, and it's super powers. We'll finish up with ways to trigger transitions and a few tips and tricks. Lees meer
Links
CSS Transitions https://goo.gle/3vIDi31
Cont. https://goo.gle/3pcpueY
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
-
43: Containment
26 mei 2021 · 15 min
The CSS contain property can give you some serious performance gains by adjusting how and when the browser renders elements. In this episode, we go over all the different types of containment, and where you might use them. Lees meer
Links
MDN doc on containment → https://goo.gle/3fRejEd
Content-visibility → https://goo.gle/3wBMB52
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
-
42: Snap points
11 mei 2021 · 17 min
In this episode we're guiding scroll areas into their peaceful resting places, maintaining alignment, keeping visual harmony, and improving the overall experience with the content. Lees meer
Links
Scroll Snap Level 1 draft → https://goo.gle/2R9hUow
overscroll-behavior → https://goo.gle/3o7vLYE
scroll-behavior → https://goo.gle/3uKvkWU
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
-
41: Transforms
4 mei 2021 · 30 min
In this episode we enter the 3rd dimension with CSS, placing and manipulating objects in 3D space with the transform property. 2D and 3D transforms are spectacular ways to animate and create a sense of depth in a design, follow along for how it all works. Lees meer
Links
CSS Transforms Module Level 1 → https://goo.gle/2RsETdW
CSS Transforms Module Level 2 → https://goo.gle/3tdGeCF
Chaining transforms → https://goo.gle/3nKMKQp
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
-
40: @font-face
27 april 2021 · 24 min
In this episode Una and Adam talk about font adjustments when being used within @font-face. When fonts are loaded, there's an opportunity to provide default values and fine tunings. Lees meer
Links
@font-face on MDN → https://goo.gle/2S3DAmp
CSS Fonts Level 4 → https://goo.gle/3sGwO2sThe CSS Podcast
#CSSpodcast -
39: Paths, shapes, clipping and masking
20 april 2021 · 33 min
Paths, shapes, clipping, masking, oh my! There's so much you can do with CSS shapes—from creating transition effects to creating interesting and organic typographic layouts. In this episode we dive in to how to wrangle shape effects in CSS. Lees meer
Shapes Level 1 → https://goo.gle/3gkJAkG
Shapes Level 2 → https://goo.gle/3amJLIk
Masking Level 1 → https://goo.gle/3nb6Bb5
Clippy tool → https://goo.gle/3sIM0w9
clip-path transitions → https://goo.gle/3tGx96I
CSS Masking → https://goo.gle/3goEcNt
The CSS Podcast
#CSSpodcast
-
38: N-match Notation
13 april 2021 · 16 min
Welcome back to The CSS Podcast, where we cover all things CSS from accessibility to c-index. Today, Una and Adam will discuss a micro syntax for pseudo class notification when working with nth-child. Lees meer
Selectors level 3 → https://goo.gle/3dWB48G
Useful nth-child recipes → https://goo.gle/3e102DE
Nth-child syntax → https://goo.gle/328nA4b
Quantity queries → https://goo.gle/3a4NPwT
Solved with CSS! Nth-tricks → https://goo.gle/3g65Wq0
The CSS Podcast
#CSSpodcast
-
37: Cursors and Pointers
6 april 2021 · 17 min
What do mouse pointers, potatoes, and your fingers have in common? They can all interact with a screen! With CSS we can define how active our web boxes are, which areas are interactive, and what style the cursor should be. Maybe that means your mouse arrow becomes an animated magic wand, or maybe not. Get ready for a fun episode, where things get a bit goofy. Lees meer
Links
Pointer events → https://goo.gle/39HFYF8
A Mind-Bending Discovery → https://goo.gle/31Rm3iAThe CSS Podcast
#CSSpodcast -
36: Text and Typography
30 maart 2021 · 30 min
In this episode we cover typography on the web from your CSS. From font properties to word breaking. Also, Adam gets thrown off and amazed at how dynamic the text underline property is and revels in the difference between small caps and petite caps. Lees meer
Links
MDN Text Fundamentals → https://goo.gle/2O4Fh13
Text Decoration 3 → https://goo.gle/3u7M2yKThe CSS Podcast
#CSSpodcast -
35: Background
23 maart 2021 · 25 min
In this episode we cover all the ways to style an element's background: using images, colors, gradients and more. Lees meer
Links
CSS backgrounds-3 → http://goo.gle/2P0DGJE
CSS Tricks on backgrounds → http://goo.gle/2ODPCRY
The CSS Podcast
#CSSpodcast
-
34: Overflow
16 maart 2021 · 18 min
In today's episode we cover overscroll and all the ways to handle content that's bursting at the seams. The web has a natural tendency to show overflowing content, so let's study our options when it comes to wrangling those pesky misbehavers. Lees meer
Links
Text-overflow → http://goo.gle/38uDGbX
CSS Overflow Module → http://goo.gle/2N7KsNgThe CSS Podcast
#CSSpodcast -
33: Preference Media
11 maart 2021 · 16 min
In this episode we narrow our focus on user-preference-based media queries, which enable you to create personalized experiences based on your users custom settings and needs. Lees meer
Links
Media Queries 5 → https://goo.gle/306lZeaThe CSS Podcast
#CSSpodcast -
32: Page Media
2 maart 2021 · 22 min
In this episode we talk about page media queries and all the ways you can pivot your styles based on device capabilities, viewport size, etc. Lees meer
Links
Media Queries → http://goo.gle/2MhYfR2
Scripting → http://goo.gle/2Mdan5E
The 'display-mode' media feature → http://goo.gle/2NoFr3c
Prefers-* Security and Privacy → http://goo.gle/3kfwUM0
CSS Color Adjustment → http://goo.gle/3qLkduJ
The CSS Podcast
#CSSpodcast
-
31: @rules
23 februari 2021 · 21 min
In this episode we talk about CSS @rules and all the different customizations you can make to fonts, encoding, animations, Houdini, and more. Lees meer
Links
At-rules → http://goo.gle/3uvvRwb
CSS Conditional Rules Module → http://goo.gle/37Bgf02
@property → https://goo.gle/3upuMpB
Media Queries → https://goo.gle/2Nl2VGp
CSS Fonts → http://goo.gle/3dB2uSUThe CSS Podcast
#CSSpodcast -
30: Lists
16 februari 2021 · 16 min
In this Season 2 kickoff episode we talk about lists; their bullets/markers, styleability and overall featureset. List-en closely 🤓 Lees meer
Links
CSS Lists and Counters Module → http://goo.gle/2LlRhtS
Custom bullets with CSS → http://goo.gle/3rol0BL
CSS Lists, Markers, And Counters→ http://goo.gle/3cHa5yP
CSS Counter Grid → https://goo.gle/3awKJkpThe CSS Podcast
#CSSpodcast -
29: Houdini Series: Layout
9 december 2020 · 17 min
In this episode, we get a little more experimental as we continue the Houdini series and discuss the Layout Worklet, also sometimes referred to as the Houdini Layout API. The Layout API enables developers to write their own layout algorithms. Lees meer
For more about Houdini worklets, check out our last episode on the Paint Worklet for an overview → https://goo.gle/3mG6BPc
Links
The Layout API → https://goo.gle/3gspEdI
Masonry Layout Example by @iamvdo → https://goo.gle/37pRint
-
28: Houdini Series: Paint
2 december 2020 · 29 min
In this episode, we continue the Houdini series and enter worklet land! We go over the Paint Worklet, an API that enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more. Lees meer
Links
CSS Paint API → https://goo.gle/39bWvBV
MDN Docs on CSS Painting API → https://goo.gle/3m3e1M1
Worklet Reference → https://goo.gle/3980Equ
-
27: Houdini Series: Typed OM
18 november 2020 · 21 min
In this episode we go over the TypedOM, a new API for parsing, converting, creating and managing CSS. It's typed, as the name suggests, and these typings not only help developers find bugs, they can make properties animateable natively in the engine. Lees meer
Links
MDN Typed OM Reference → https://goo.gle/3n2FrC9
Spec → https://goo.gle/32fq94O
caniuse attributeStyleMap → https://goo.gle/3leR0Fu
caniuse computedStyleMap → https://goo.gle/3p40ENy
-
26: Houdini Series: Properties & Values
11 november 2020 · 21 min
In this episode we introduce Houdini! We start by talking about our hooks into the layout engine and CSS parser, so we can connect our custom functionality with some CSS authored by a designer or developer. These hooks are called Houdini Properties & Values. Lees meer
Links
Properties and Values Spec → https://goo.gle/2HZ6Aad
Value Definitions Spec → https://goo.gle/2HZCCTy
Houdini @property → https://goo.gle/3eyFimW
-
25: Season 1 Wrap Up
16 september 2020 · 53 min
In this closing episode, we do a whirlwind recap of our entire first season! We go over every episode, from the box model to z-index to animations and functions and color. Listen as we recount our favorite tips and tricks and discuss what we learned in the process of making this podcast. Lees meer
-
24: Blend Modes
9 september 2020 · 18 min
Today we are talking about CSS blend modes! Blend modes are super fun and allow you to specify how you want elements to interact in terms of their overlapping pixel values on the page. Lees meer
Links:
mix-blend-mode → https://goo.gle/3m5L9mP
Isolation: Cascading Style Sheets → https://goo.gle/2GIDjiX
-
23: Filters
2 september 2020 · 26 min
In this episode, we're talking about CSS filters! We can alter the pixels of our web apps in similar ways to our favorite design tools. From recreating Instagram filter effects, to blurring background for better legibility, we dive deep into what CSS and filters can do. Lees meer
Links:
Filter Effects Module Level 1 → https://goo.gle/34SPJ1D
Backdrop Filter → https://goo.gle/3hJTMRz
CSSGram → https://goo.gle/2EPDOad
Custom & Instagram photo filters → https://goo.gle/31PhaYi
Contrast Swap technique → https://goo.gle/2G9LpRh
feColorMatrix → https://goo.gle/34UKw9u
Shaders → https://goo.gle/32PJ2uR
-
22: Animation
26 augustus 2020 · 39 min
In this episode, we're talking about CSS animations. With CSS animations a developer creates a set of keyframes, and then uses a variety of animation properties to describe how the element moves through each of the possible keyframes. Lees meer
Links:
Animations Level 1 Spec → https://goo.gle/2DhV0V2
Easing Level 1 Spec → https://goo.gle/3kWoWap
Scroll-Linked Animations Draft Spec → https://goo.gle/39VQV4N
Cubic-Bezier Tool → https://goo.gle/2Q5xj5i
Debugging Animations → https://goo.gle/3ayI2yD
Rainbow Button → https://goo.gle/3214e0t
Complete Easing Functions → https://goo.gle/3gaaiJ4
-
21: Gradients
19 augustus 2020 · 31 min
In this episode gradients take the stage as we share syntax secrets, tips and tricks, and probably teach you about repeating-conic-gradient. By the end, you'll be savvy with color stops, transition hints, and all the ways to interpolate color in your design. Lees meer
Links:
Spec Level 3 → https://goo.gle/3h8cRN7
Spec Draft Level 4 → https://goo.gle/3iPmDUE
Lea's Pattern Gallery → https://goo.gle/3j4XEwX
Lea's Cicada Principle Article → https://goo.gle/2FyeWnr
-
20: Functions
12 augustus 2020 · 40 min
In this episode we talk about the runtime dynamic side of CSS, commonly recognized as a CSS function. Today, in similar fashion to other episodes, we'll be doing a massive overview of all the CSS functions, to be later deep dived. Lees meer
Links:
CSS Tricks Guide to CSS Functions → https://goo.gle/2XRb7Ah
CSS Variables → https://goo.gle/2XRb2fX
Functional Notations Spec → https://goo.gle/3gJwavQ
Cubic Bezier Generator → https://goo.gle/30LiDhG
Billion Laughs Attack → https://goo.gle/2XUxjtg
-
19: Z-Index and Stacking Context
5 augustus 2020 · 20 min
In today's episode, we're talking about z-index and stacking context. This is a pretty in-depth topic, but it's something that we see all the time and it can definitely bite if you aren't aware of what's going on. Lees meer
Links:
CSS Animations Level 1 → https://goo.gle/2DhV0V2
Scroll-linked Animations 1 → https://goo.gle/39VQV4N
15 thoughts on What's the Maximum Z-Index? → https://goo.gle/31ipKxh
What No One Told You About Z-Index → https://goo.gle/3fqTLjl
-
18: Focus
30 juli 2020 · 19 min
Today we discuss: focus! Focus is something we regularly deal with when writing styles and is also very tied to markup and attributes like tabindex, so we'll be discussing all of those things in this episode! Lees meer
Links:
User Action Pseudo-classes → https://goo.gle/3jNSHcL
HTML Standard → https://goo.gle/3g7FzNr
Keyboard control → https://goo.gle/2X1rNEE
Roving tabindex -- A11 → https://goo.gle/3jOZenQ
-
17: Shadows
22 juli 2020 · 22 min
Today we're talking about shadows! Box shadows, drop shadows, text shadows, and everything in between. Shadows can exist all over our UIs without us even realizing it because sometimes, they just look like borders. Lees meer
box-shadow spec → https://goo.gle/32JVdL4
text-shadow spec → https://goo.gle/2ZMdiGo
Sass pixel art → https://goo.gle/3hsjQjp
Any image to CSS → https://goo.gle/2WKnm0L
Easing Box Shadows → https://goo.gle/2BjU6qh
Codepen → https://goo.gle/2ZLUDL2
3D Text → https://goo.gle/2ZNO8ar
-
16: Borders
15 juli 2020 · 25 min
Today we're talking about borders! And while this sounds relatively simplistic, borders in CSS can actually get pretty complex very quickly. It's not just color and style that you can adjust, but also also border images, where you control how the image repeats itself and what slice of the image you want to show. Lees meer
Links:
CSS backgrounds and borders → https://goo.gle/3hbosdZ
CSS logical properties and values → https://goo.gle/308szAl
Fancy border radius generator → https://goo.gle/3fH3SBT
-
15: Pseudo Selectors
1 juli 2020 · 37 min
In this episode we break down functional and regular pseudo selectors, CSS's special hook into encapsulated element states. We can't control them, but we can leverage them to provide rich interactive feedback from our interfaces. Lees meer
Links:
Selectors Level 4 → https://goo.gle/2ZiJLmt
a:link vs. a styling demo → https://goo.gle/2NGwWgd
Hacking Visited for Una's Blog → https://goo.gle/3eIo0TC
:focus-within from Next Generation Web Styling → https://goo.gle/3gaXSRE
:focus-visible explainer → https://goo.gle/2VslHMA
Una's Pure CSS Whackamole → https://goo.gle/2VxfhvX
Una's Pure CSS Tick Tack Toe → https://goo.gle/2ZzTCob
Pure CSS Games Post → https://goo.gle/2VslTvi
Empty Demo with Custom Properties → https://goo.gle/31tUlJS
:blank naming → https://goo.gle/2Vukm81
-
14: Pseudo Elements
24 juni 2020 · 20 min
::after and ::before? Pssh, do you know about ::first-letter, ::spelling-error, and ::backdrop? In this episode, we dive into the world of pseudo-elements and discuss how to use these unique declarations that enable styling specific parts of some selected HTML. Lees meer
Links
CSS Pseudo-Elements Module Level 4 → https://goo.gle/2BxRB3q
CSS Shadow Parts → https://goo.gle/2NqjYmM
CSS Text Decoration Module Level 3 → https://goo.gle/2zXWYsd
The ::cue pseudo-element → https://goo.gle/2Z0E6kF
CSS Scoping Module Level 1 → https://goo.gle/3hXj9jt
Part and theme explainer → https://goo.gle/2YqsJn2
-
13: Spacing
17 juni 2020 · 24 min
In this episode we do our best to cover the many ways to create space on the web. From techniques like HTML entities nbsp; to gap, we cover the clever, hacky and clean ways you can create spatial relationships on the web. Lees meer
Links
CSS Logical Properties and Values Level 1 → https://goo.gle/3gw7FTp
HTML Entities → https://goo.gle/36Soqnd
Everything You Should Know About Collapsing Margins → https://goo.gle/2MwOuLr
Adam's video: flex gap and internationalization → https://goo.gle/3gIuB1w
-
12: Logical Properties
27 mei 2020 · 20 min
The days of euro-centric spacing like `margin-top` are limited: instead, say hello to `margin-block-start` to define space that works within any linguistic context based on your layout needs.In this episode we shake the physical and lean into the logical as we break down CSS logical properties. Lees meer
Links:
https://goo.gle/3gw7FTp
Flow-relative syntax for margin - like shorthands -
https://goo.gle/2ZLoS4W
-
11: Grid
20 mei 2020 · 32 min
Tracks, gaps, areas and flow are hot topics in this full coverage episode on CSS grid. We don't leave anything out, so you're bound to pick up something new. We talk about functions like min, max, and minmax, and how to combine all of the powers of CSS Grid to create explicit and auto layouts. This episode will set you up to reach for the right parts of grid at the right time. Lees meer
Links
Grid Spec → https://goo.gle/3bLLfcW
3 CSS Grid Features Una Loves → https://goo.gle/2LGJAL8
Grid to Flex → https://goo.gle/2ThGBx0
-
10: Flexbox
13 mei 2020 · 24 min
In this episode we flex our flexbox knowledge and dive deep into CSS layout using the flexible box model. We talk about content axis', flex flow, wrapping, order, justification, alignment, and more! Lees meer
Links
Flexbox Spec - https://www.w3.org/TR/css-flexbox-1/
Flow-flow with writing mode - https://codepen.io/argyleink/pen/mdeedye
Grid to Flex: https://gridtoflex.com
-
9: Layout
6 mei 2020 · 26 min
In this episode we provide an overview and slight history of laying things out on the web, starting from blocks and framesets, ending with Grid and Houdini. Lees meer
Links
A History of CSS through 15 years of 24 ways → https://goo.gle/3fnrBXI
Holy Grail Layout → https://goo.gle/2ynld2l
Complete Guide to Flexbox → https://goo.gle/2A2Wtg9
Grid Guide → https://goo.gle/2SEldBM
-
8: Sizing Units
29 april 2020 · 26 min
We're sizing up sizing in CSS in this episode as we break down all the different lengths and measurements in CSS. CSS makes using these things seamless, it's great, but let's study some of the intricacies here; how it works and what that means for your day to day usage. Lees meer
Links
CSS Spec Values and Units Level 4 → https://goo.gle/2KKdttw
Sizing and Units on MDC → https://goo.gle/2VMkros
Speech Module → https://goo.gle/2YbLISJ
All About Ems → https://goo.gle/3bMViiV
-
7: Color Part 2 - Perception
22 april 2020 · 22 min
Explore perceptual, human-centered, color in this episode as we review latest specs, latest syntaxes, theories and strategies for color on the web in 2020. Lees meer
Links:
Spec CSS color level-4 → https://goo.gle/3cFCaDr
Draft Spec CSS color level-5 → https://goo.gle/3cL4CUF
How Color Gamut & Display Technology Can Affect Your Content → https://goo.gle/3eIH5p3
WICG Contrast Ratio → https://goo.gle/2XWxZyZ
Lea Verou LCH color picker→ https://goo.gle/2VvVopn
Webkit Working on Color Level 4 → https://goo.gle/353yf0D
-
6: Color Part 1 - Usage
15 april 2020 · 31 min
In this part 1 episode, we dive deep into using CSS color. We discuss ways to write and code colors, places they can go, functions you can use on them, and then we top it off with a hex color challenge. As always, you'll learn new jargon, pick up a trick or two, and learn something new. Lees meer
#C55 is #ace not #5ad
Links
The Evolution of Color - Chris Lilley
Read color hex codes - Dave DeSandro
CSS color level 3
"flavor" system color
Web Almanac 2019: CSS Chapter -- https://almanac.httparchive.org/en/2019/css
Nerds Guide to Web Color -> https://css-tricks.com/nerds-guide-color-web/
HSL hue turn rotate codepen
-
5: Inheritance
8 april 2020 · 8 min
Inheritance and its effects in CSS are found all over your styles, almost invisibly, until further investigation through devtools or docs. In today's episode, we illuminate the aspects of inheritance, how they're useful, things to watch out for, and of course tips, tricks and vocabulary. Lees meer
Links
Spec: css-cascade-3 → https://goo.gle/39KZPR6
List of inherits or not → https://goo.gle/2wn0yKF
-
4: The Cascade
1 april 2020 · 12 min
The "C" in CSS stands for the cascade! And that's what today's show is all about. Learn how the styles you write are affected by other styles, and how it all boils down to what the user sees. Lees meer
4 Phases Of The Cascade:
› Position
› Specificity
› Origin
› Importance
Links
MDN on the Cascade and Inheritance → https://goo.gle/39jAEES
CSS Cascade Interactive Article → https://goo.gle/2UhqIHV
Una's Doodle → https://goo.gle/2QKTy13
-
3: Specificity
25 maart 2020 · 13 min
In this episode we talk about how the browser resolves multiple selectors targeting the same subjects and how it determines which style to actually apply. Turns out, lots of code from many different locations is trying to style your elements, learning about specificity will help you debug and understand why or why not certain styles are winning over others. Lees meer
Links
Diagram by Estelle Weyl → http://specifishity.com
Specificity Calculator → https://specificity.keegan.st
-
2: Selectors
18 maart 2020 · 15 min
Get ready to learn some new CSS vocabulary! In this episode we talk about selectors, a syntax used to find elements (subjects) in a tree. CSS uses selectors to bind styles to subjects, and it's quite powerful. We go over universal selectors, type selectors, class selectors, ID selectors, attribute selectors, pseudo selectors, complex and compound selectors, and various combinators. A lot of things! Lees meer
Links
CSS selectors level 3 →https://goo.gle/39MHdRp
CSS - Tricks: How Selectors Work → https://goo.gle/3cUSb9y
-
1: The Box Model
12 maart 2020 · 12 min
Where do scrollbars go, inside or outside the box? In this episode Una and Adam answer that and much more in their discussion of the CSS box model. Everything in CSS starts as a box, and while that's a straight forward concept to initially think about, it can get complex quite quickly. Not only do boxes surround elements, but letters in a sentence each have a box too. How many boxes are there!? Lots. Lots of boxes. Lees meer
Links
Box Model CSS Spec: https://goo.gle/39KwDud
Adam's Box Model CodePen: https://goo.gle/38JFZ8n
CSS Tricks on the Box Model: https://goo.gle/3aM4a7p
Check out the Instagram: https://goo.gle/2W97OEg