|
| 1 | +--- |
| 2 | +number: 957 |
| 3 | +title: "CSS: Advanced and Obscure" |
| 4 | +date: 1763985600000 |
| 5 | +url: https://traffic.megaphone.fm/FSI8931380710.mp3 |
| 6 | +youtube_url: https://www.youtube.com/watch?v=GQnhkUIPq9Q |
| 7 | +--- |
| 8 | + |
| 9 | +Scott and Wes face off in a CSS-themed round of STUMP’d, quizzing each other on shape functions, scroll snap types, obscure functions, and long-forgotten spec history. From ray() to cross-fade() to print-color quirks, this episode is packed with rapid-fire frontend trivia guaranteed to sharpen your CSS brain. |
| 10 | + |
| 11 | +### Show Notes |
| 12 | + |
| 13 | +* **[00:00](#t=00:00)** Welcome to Syntax! |
| 14 | +* **[00:54](#t=00:54)** Which of the following are valid [CSS Shape Functions](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape)? |
| 15 | +* **[02:03](#t=02:03)** CSS Selectors 4 specification demo. |
| 16 | +* **[03:20](#t=03:20)** How many [functions](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/Functions) are there in CSS? |
| 17 | +* **[04:22](#t=04:22)** Brought to you by [Sentry.io](https://sentry.io/syntax). |
| 18 | +* **[04:47](#t=04:47)** Explain the 3 [CSS Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type) types. |
| 19 | +* **[06:38](#t=06:38)** What does the [xywh()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/xywh) do? |
| 20 | +* **[09:15](#t=09:15)** What about [ray()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/ray)? |
| 21 | +* **[11:25](#t=11:25)** What do [CSS Namespaces](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@namespace) do? |
| 22 | +* **[14:37](#t=14:37)** What year was [CSS paint() bug tracker](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API) introduced in Firefox? |
| 23 | +* **[17:34](#t=17:34)** What does [print-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust) do? |
| 24 | +* **[20:26](#t=20:26)** What is [cross-fade()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/cross-fade)? |
| 25 | +* **[23:54](#t=23:54)** Name 3 reasons you might use [CSS @property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property). |
| 26 | +* **[27:36](#t=27:36)** List all 10 [CSS Filter Functions](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/filter). |
| 27 | +* **[32:41](#t=32:41)** Name 5 [font properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font). |
| 28 | + |
| 29 | +### Hit us up on Socials! |
| 30 | + |
| 31 | +Syntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm) |
| 32 | + |
| 33 | +Wes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos) |
| 34 | + |
| 35 | +Scott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski) |
| 36 | + |
| 37 | +Randy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor) |
0 commit comments