diff --git a/content/blog/wingingit/winging-it-07.md b/content/blog/wingingit/winging-it-07.md new file mode 100644 index 00000000..4b721bbc --- /dev/null +++ b/content/blog/wingingit/winging-it-07.md @@ -0,0 +1,59 @@ +--- +title: CSS Container Queries in Practice +episode: 7 +tags: + - Container Queries + - CSS +author: + - miriam + - stacy +date: 2024-05-16 +length: 45 mins +image: + src: winging-it/winging-it-7.jpg +media: + - youtube: Ci2DLDQYup0&t=1714s +summary: | + Miriam Suzanne and Stacy Kvernmo + talk about CSS Container Queries and the + unexpected things that happen + when you add containment. + Some elements completely collapse! + What's going on there? + We had questions and thought you might too. + So we talk through the issue + in our monthly live stream. +--- + +{% import "embed.macros.njk" as embed %} +{% import "utility.macros.njk" as utility %} + +{{ embed.figure( + data=media +) }} + +{{ utility.main_action( + 'Subscribe to Channel »', + subscribe_url +) }} + +## What we cover: + +- What are container queries and why you should use them +- How container queries differ from media queries +- Why some layouts collapse when you add containment +- Size containment with `contain-intrinsic-size` +- Why should we avoid adding containment on root +- Why a container can't query itself +- An opt-out strategy to remove containment + +## Links: + +- [Can We Query the Root Container?](https://www.oddbird.net/2023/07/05/contain-root/) +- [Ahmad Shadeed's Interactive Guide to CSS Container Queries](https://ishadeed.com/article/css-container-query-guide/) +- [Cascading Layouts Workshop](https://www.oddbird.net/workshops/cascading-layouts/) + +## Demos: + +- [Container Queries and Birds](https://codepen.io/stacy/pen/abrvZNL?editors=1100) +- [Reduced Test Case](https://codepen.io/miriamsuzanne/pen/YzbyeEx) diff --git a/content/blog/wingingit/winging-it-08.md b/content/blog/wingingit/winging-it-08.md new file mode 100644 index 00000000..d60b2d6d --- /dev/null +++ b/content/blog/wingingit/winging-it-08.md @@ -0,0 +1,65 @@ +--- +title: CSS Anchor Positioning in Practice +episode: 8 +sponsors: true +tags: + - Anchor Positioning + - CSS + - Polyfill +author: + - james + - miriam +date: 2024-05-30 +length: 53 mins +image: + src: winging-it/winging-it-8.jpg +media: + - youtube: 76hIB2L_vs4&t=1s +summary: | + What is Anchor Positioning? + Why is it exciting? + What can you use it for? + How does the polyfill work? + Join James Stuckey Weber and Miriam Suzanne + as they talk through these questions + and answer yours in our monthly live stream. +--- + +{% import "embed.macros.njk" as embed %} +{% import "utility.macros.njk" as utility %} + +{{ embed.figure( + data=media +) }} + +{{ utility.main_action( + 'Subscribe to Channel »', + subscribe_url +) }} + +## What we cover: + +- What is Anchor Positioning? +- Sizing based on the anchor element +- Anchoring Popovers to their trigger +- Scoping an anchor +- Setting up fallback positions when your element overflows +- Fun demos of what is now possible + +## Links: + +- [Inset Area](https://anchor-tool.com/) +- [Polyfill](https://github.com/oddbird/css-anchor-positioning) + +## Demos: + +- [Anchor Size CodePen 1](https://codepen.io/jamessw/pen/dyENqQz) +- [Anchor Size CodePen 2](https://codepen.io/jamessw/pen/OJYWorB) +- [Popover](https://codepen.io/jamessw/pen/MWdjjQj) +- [Anchor Scope](https://codepen.io/jamessw/pen/dyEXKeP) +- [Fallback options with `position-try`](https://codepen.io/jamessw/pen/abrZPQY) +- [More fallbacks](https://codepen.io/jamessw/pen/OJYbjyE) +- [Textarea box with direction](https://codepen.io/jamessw/pen/qBGNgdL) +- [Side note](https://codepen.io/jamessw/pen/gOJMyjN) +- [Anchor on slide thumb](https://codepen.io/jamessw/pen/KKLMJKm) +- [Multiple anchors](https://codepen.io/jamessw/pen/ZENpWao) diff --git a/src/images/winging-it/winging-it-7.jpg b/src/images/winging-it/winging-it-7.jpg new file mode 100644 index 00000000..2ea6dbeb Binary files /dev/null and b/src/images/winging-it/winging-it-7.jpg differ diff --git a/src/images/winging-it/winging-it-8.jpg b/src/images/winging-it/winging-it-8.jpg new file mode 100644 index 00000000..33aab1e7 Binary files /dev/null and b/src/images/winging-it/winging-it-8.jpg differ