10 New CSS and HTML APIs - CourtneyR.dev's 2nd Brain

10 New CSS and HTML APIs ![rw-book-cover](https://img.youtube.com/vi/unqPqGeJMck/maxresdefault.jpg) 🔗 **Source:** [10 New CSS and HTML APIs](https://www.youtube.com/watch?v=unqPqGeJMck) > [!note]+ Document Notes > tags: #css #html #web-apis #frontend #canvas #masonry #container-queries > author: Syntax > source: YouTube > reference: https://www.youtube.com/watch?v=unqPqGeJMck > date created: 2024-12-30 14:30 > > # 🏷️ Title: 10 New CSS and HTML APIs >  ## 🧰 Action Inbox - [H1] Experiment with CSS masonry layout for photo galleries — available in Safari 26.4 #css #masonry - [H1] Test HTML in canvas API for interactive effects — behind Chrome flag #html #canvas - [H2] Implement name-only container queries for better CSS scoping — Chrome 148+ #css #container-queries ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [WebKit CSS Masonry Post](https://webkit.org) - [HTML in Canvas Demos](https://github.com) - [CSS Tricks Border Image Examples](https://css-tricks.com) ## 📝 Summary - Scott and Wes cover 10 new CSS and HTML APIs, ranging from production-ready features to experimental capabilities - Key highlights include CSS masonry layout, HTML in canvas API, and enhanced container queries - Many features are browser-specific or behind flags, representing the cutting edge of web development - Focuses on both practical implementations and creative possibilities for modern web interfaces - Demonstrates how web platform continues evolving beyond current framework limitations ## 📖 Main Content The hosts discuss emerging web platform features that expand creative and functional possibilities. CSS masonry layout (`display: grid-lanes`) finally provides native Pinterest-style layouts without the limitations of CSS columns or complex grid workarounds. The experimental HTML in canvas API represents a breakthrough for interactive effects, allowing regular HTML elements inside canvas with full accessibility while enabling pixel-level manipulation through shaders and effects. Container queries receive an upgrade with name-only syntax, enabling better CSS scoping without complex selectors. Additional improvements include enhanced sticky positioning, multicolumn layout fixes, and new pseudo-selectors for search highlighting. The discussion emphasizes how these APIs solve longstanding web development pain points while opening new creative possibilities. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/unqPqGeJMck?t=0) — [H1] Introduction to new CSS and HTML features - Key idea: Major additions to web platform capabilities across browsers - Evidence: "There has been some big things added and some small things added, some nice quality of life things" #### ⏱️ [02:15](https://youtu.be/unqPqGeJMck?t=135) — [H1] CSS Masonry API with display grid-lanes - Key idea: Native Pinterest-style layouts without fixed heights or column limitations - Evidence: "display grid lanes. Can it get any more simple than that?" #### ⏱️ [04:30](https://youtu.be/unqPqGeJMck?t=270) — [H1] HTML in canvas API for interactive effects - Key idea: Regular HTML elements inside canvas with full accessibility and pixel manipulation - Evidence: "You cannot draw HTML to canvas and the other problem is that when you make UI in canvas it's very hard to make accessible" #### ⏱️ [07:45](https://youtu.be/unqPqGeJMck?t=465) — [H2] Canvas effects demonstrations - Key idea: Live HTML forms with pixelization, blur, and distortion effects - Evidence: "This is literally a canvas element. And then inside of that, you can just put regular HTML" #### ⏱️ [12:20](https://youtu.be/unqPqGeJMck?t=740) — [H2] Name-only container queries for CSS scoping - Key idea: Container queries without size conditions, enabling native CSS scoping - Evidence: "You would give your container name property a name. So container name sidebar" #### ⏱️ [15:10](https://youtu.be/unqPqGeJMck?t=910) — [H3] Safari haptic feedback removal - Key idea: Programmatic vibration through checkbox switches was fixed as regression - Evidence: "It was only ever supposed to be associated with a user interaction" #### ⏱️ [16:45](https://youtu.be/unqPqGeJMck?t=1005) — [H2] CSS random function for dynamic values - Key idea: Native randomness in CSS without JavaScript seed management - Evidence: "CSS random random 0 10 1002 will choose an even number between 0 and 100" #### ⏱️ [18:30](https://youtu.be/unqPqGeJMck?t=1110) — [H3] Search text pseudo-selector styling - Key idea: Custom styling for browser search highlights and current matches - Evidence: "Search text is allowing you to style the when you do command F in a browser" #### ⏱️ [21:15](https://youtu.be/unqPqGeJMck?t=1275) — [H3] Sticky positioning per-axis improvements - Key idea: Sticky elements now work in both horizontal and vertical directions - Evidence: "Sticky positioning now works on a per axis basis" #### ⏱️ [22:40](https://youtu.be/unqPqGeJMck?t=1360) — [H3] Multicolumn layout wrapping - Key idea: Column layouts now wrap to new lines when height constraints are met - Evidence: "If you have too much text for the amount of columns you specify, if you specify a height, it puts them on the next line" #### ⏱️ [24:20](https://youtu.be/unqPqGeJMck?t=1460) — [H2] Border shape insets and outsets - Key idea: Custom border shapes with focus outline following the shape - Evidence: "Border shape can handle both insets and outsets" #### ⏱️ [27:30](https://youtu.be/unqPqGeJMck?t=1650) — [H3] Element-scoped view transitions - Key idea: Better organization of view transition animations with grouping - Evidence: "You can have tightly scoped view transitions where in the past like if you wanted to do the automatic view transition movement" ## 📚 References - [WebKit CSS Masonry Documentation](https://webkit.org) - [HTML in Canvas API Specification](https://github.com) - [CSS Border Shape Examples](https://css-tricks.com) - [View Transitions API Documentation](https://developer.mozilla.org) ## 🗣️ Paraphrase - CSS masonry layout finally provides native Pinterest-style grids without the limitations of previous approaches like CSS columns or complex grid hacks - HTML in canvas API allows developers to place regular HTML inside canvas elements while maintaining accessibility and enabling advanced visual effects through pixel manipulation - Container queries now support name-only syntax for better CSS scoping, plus various quality-of-life improvements across sticky positioning, multicolumn layouts, and search styling ## 📰 Newsletter The web platform continues its rapid evolution with exciting new APIs that solve longstanding development challenges. CSS masonry layout brings native Pinterest-style grids through simple `display: grid-lanes` syntax, while the experimental HTML in canvas API opens possibilities for advanced visual effects without sacrificing accessibility. These features represent significant progress in web capabilities, from practical layout solutions to creative interactive possibilities. The HTML in canvas demos showing live form effects and pixel manipulation hint at a future where web apps can achieve native-like visual polish while maintaining web platform advantages. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer advocacy: Create demos showcasing new CSS/HTML APIs, present at conferences - Education: Develop tutorials for masonry layout and container query scoping - Developer experience: Update documentation with browser support matrices - Developer marketing: Promote experimental features through blog posts and videos - Community management: Gather feedback on API usability and edge cases #### Community - Contributors: Test experimental APIs and report bugs to browser vendors - Sponsors: Support cross-browser compatibility testing infrastructure - Ecosystem: Create polyfills and progressive enhancement strategies #### WordPress - Core: Evaluate masonry layout for block editor and theme layouts - Design: Explore HTML in canvas for enhanced block animations - Documentation: Update CSS guidelines with new layout capabilities - Themes: Provide examples of modern CSS API usage in default themes ## 🧪 Hypotheses - CSS masonry layout will significantly reduce JavaScript dependencies for complex grid layouts - HTML in canvas API will enable web apps to achieve native-like visual effects while maintaining accessibility - Name-only container queries will improve CSS architecture and reduce specificity conflicts - Border shape API will replace many SVG-based design patterns with pure CSS solutions ### 📊 Methodology - Study design: A/B test masonry vs JavaScript grid performance across devices - Data sources: Browser usage analytics and performance metrics for new APIs - Experiments: Progressive enhancement strategies comparing fallback complexity ### ❓ Questions - How will these new APIs affect framework adoption and CSS-in-JS usage patterns? - What accessibility considerations emerge when mixing HTML and canvas rendering contexts? - How do these features impact bundle sizes compared to current JavaScript solutions? ### 🔮 Future Research - Cross-browser compatibility testing for experimental APIs - Performance impact analysis of HTML in canvas vs traditional approaches - Developer adoption patterns for new CSS layout capabilities ### 💡 Implications - Practice: Reduced dependency on JavaScript for complex layouts and animations - Policy: Browser feature parity considerations for web platform advancement - Security: Canvas-based rendering implications for content security policies - Education: Updated curriculum needed for modern CSS capabilities - Funding: Investment in browser compatibility and polyfill development ### 🧠 Learning Styles Assessment Reading level estimate: 10th grade #### 👀 Visual learners - Present: Multiple live demo screenshots and code examples - Improve: Interactive CodePen examples and visual API comparison charts #### 🔊 Aural learners - Present: Full audio podcast format with detailed explanations - Improve: Timestamped audio summary highlighting key APIs #### 🗣️ Verbal learners - Present: Clear analogies (Pinterest-style, CRT TV effects) and technical definitions - Improve: Glossary of new CSS terms and browser support explanations #### 🧩 Kinesthetic learners - Present: Step-by-step implementation examples with immediate results - Improve: Interactive playground for testing new APIs with real code #### 🧠 Logical learners - Present: Browser support timelines and feature comparison tables - Improve: Decision trees for choosing between traditional and new approaches #### 🧑‍🤝‍🧑 Social learners - Present: Podcast discussion format with multiple perspectives - Improve: Community challenges using new APIs and shared examples #### 🧘‍♀️ Solitary learners - Present: Detailed technical explanations suitable for independent study - Improve: Self-assessment questions about API applicability #### 🌿 Naturalistic learners - Present: Evolution metaphors for web platform development - Improve: Ecosystem thinking about how APIs interact and mature ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear headings and content structure in examples - Improve: Explicit discussion of accessibility benefits in HTML canvas API #### Keyboard navigation - Present: Emphasis on maintaining HTML functionality in canvas - Improve: Specific keyboard interaction examples with new APIs #### Contrast and readability - Present: Clear code examples and explanations - Improve: High contrast demos for visual effect examples #### Text resizing and reflow - Present: Responsive design considerations mentioned - Improve: Specific guidance on responsive behavior with new layouts #### Media and captions - Present: Full transcript available for video content - Improve: Visual descriptions of demonstration effects #### Forms and interactions - Present: Strong emphasis on maintaining form functionality in canvas - Improve: Specific examples of accessible custom form styling ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal web platform improvements affecting global audience - Improve: Examples from different cultural design patterns and layouts #### Inclusive language - Present: Clear technical explanations without exclusionary jargon - Improve: Define all technical terms for broader accessibility #### Neurodiversity support - Present: Well-structured content with clear headings - Improve: Alternative text descriptions for visual effects demonstrations #### Representation - Present: Focus on technical capabilities rather than specific demographics - Improve: Diverse use case examples beyond Western design patterns #### Psychological safety - Present: Encouraging tone about experimental features - Improve: Clear guidance about production readiness and fallbacks ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear progression from browser support to practical implications - Inductive strength: Multiple examples supporting broader platform evolution trends - Causal reasoning: Direct connections between API capabilities and developer benefits - Analogical strength: Effective comparisons to familiar concepts (Pinterest, CRT TVs) #### Fallacies - Appeal to novelty: Occasional excitement about new features without considering downsides - Hasty generalization: Some conclusions about developer adoption based on limited examples #### Tone of voice - Overall tone: Enthusiastic and informative, with appropriate technical depth and practical focus ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on accusers present - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Positive excitement about platform progress without manipulation ## 🎯 Conclusion These 10 new CSS and HTML APIs represent significant progress in web platform capabilities, from long-awaited layout solutions like CSS masonry to revolutionary possibilities with HTML in canvas. While many features are still experimental or have limited browser support, they point toward a future where web development becomes more powerful and expressive while maintaining accessibility and web standards. Developers should begin experimenting with stable features while preparing for broader adoption of experimental APIs as browser support improves. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] CSS masonry enables native Pinterest layouts > [!quote] [10 New CSS and HTML APIs](https://www.youtube.com/watch?v=unqPqGeJMck) by [[Syntax]] via [[YouTube]]. Published 2024. Accessed 2024-12-30. > "display grid lanes. Can it get any more simple than that?" Native masonry without JavaScript dependencies or height constraints. [view highlight](https://youtu.be/unqPqGeJMck?t=135#H1) #xref #articleseed ID:rw_001 ### [H2] HTML in canvas preserves accessibility > [!quote] [10 New CSS and HTML APIs](https://www.youtube.com/watch?v=unqPqGeJMck) > "You cannot draw HTML to canvas and the other problem is that when you make UI in canvas it's very hard to make accessible" Experimental API solves canvas accessibility limitations through regular HTML elements. [view highlight](https://youtu.be/unqPqGeJMck?t=270#H2) #xref ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Container queries enable CSS scoping patterns - Name-only syntax provides alternative to complex CSS-in-JS solutions - Pointer to 12:20 timestamp - Links: [[CSS-Architecture]] [[Component-Scoping]] #### [Z2] Border shape API replaces SVG design patterns - Native CSS solution for custom border effects and focus outlines - Pointer to 24:20 timestamp - Links: [[CSS-Borders]] [[SVG-Alternatives]] --- ### ✏️ Fleeting Queue Purpose: Capture quick actions for Fleeting notes. - [F1] Test CSS masonry browser support timeline — Safari 26.4 current #fleeting #inbox - [F2] Experiment with HTML canvas accessibility patterns — behind Chrome flags #fleeting #inbox - [F3] Evaluate framework --- ## Full Transcript [00:00] Welcome to syntax. Today we are talking [00:02] about a bunch of new stuff in CSS and [00:05] HTML. There has been some big things [00:08] added and some small things added, some [00:10] nice quality of life things and some [00:13] really exciting things that you cannot [00:15] use just yet, but you can play around [00:18] with. There is just like an onslaught of [00:20] new stuff. So, we've collected a handful [00:23] of these things and are going to be [00:24] sharing with you today. My name is Scott [00:27] Tolinsky. I'm a developer from Denver. [00:28] With me as always is Wes Boss. What's [00:30] up, Wes? [00:30] >> I can't wait to talk about the HTML and [00:33] canvas thing. Honestly, [00:36] >> I didn't even know that this was going [00:37] to be a thing. I didn't even know this [00:38] was an option. And now the world has [00:41] opened up to me. Yeah. [00:42] >> Yeah. [00:44] >> My brain has been opened up by some of [00:45] these demos for this. So, I'm stoked to [00:47] get into that, too. So, stay tuned, [00:49] folks. We're going to be talking about [00:50] what the heck HTML in canvas is and why [00:53] it's going to allow for [00:56] crazy stuff going on on the web. though. [00:58] So, the very first one I want to get [00:59] into is something that has been long [01:01] awaited in CSS, which is the CSS masonry [01:04] API, aka the actual name for this thing [01:07] is CSS grid lanes. There's a display [01:10] property, display grid lanes, and then [01:13] you can specify using grid template [01:15] columns, those types of things, and GAP, [01:17] the CSS properties that we know and [01:19] love. The only difference is is that the [01:22] content actually filters in in the [01:24] classic masonry Pinterest style layout. [01:28] Uh, this can be useful for all kinds of [01:30] things beyond just your classic photo [01:32] grids or things like that. I saw it [01:33] being used for like footer uh links to [01:37] have the footer links all shuffled [01:38] correctly. This is kind of the the best [01:42] possible thing we could be adding as an [01:44] implementation for the masonry style [01:47] layouts in CSS. It's going to allow for [01:50] the shuffling of elements in such a [01:52] great way where uh in the past we had [01:55] CSS columns that where things went like [01:57] 1 2 3 down a vertically before going [02:01] into the next column. This is actually [02:03] going to do the opposite where things [02:05] will fill in kind of where they fit in [02:07] left to right. They will just kind of [02:09] fit and and you can actually do it right [02:11] to left or uh up to down, left to right. [02:13] You could you can change all of that as [02:14] well. But I if you just want a straight [02:16] up masonry style layout, man, display [02:20] grid lanes. Can it like get any more [02:22] simple than that? It is really super [02:25] cool. That's it. There's nothing to [02:27] learn here. It's simply just display [02:30] grid lanes. And now you can have [02:33] multiple like like a Pinterest style [02:35] layout, which is something that we have [02:37] been trying to do forever. And we had [02:40] like in we had what like box pack fit in [02:44] CSS grid but it never was perfect and [02:46] and it it didn't go the way you wanted [02:48] and it had to have a fixed height. There [02:50] was always gotas with this type of thing [02:52] and now we have it and I am so happy [02:56] >> that we can finally have this type of [02:58] layout. It's going to make doing these [03:00] types of websites so much easier and [03:03] like also like it opens up new creative [03:05] use cases as well. [03:07] >> Yeah. Yeah. Super cool stuff. So, we [03:09] we'll we'll link up a WebKit post. This [03:11] is available right now in the uh as of [03:15] Safari version 26.4 [03:18] and it it's behind a flag in Chrome and [03:21] Firefox. So, not long off here. Really [03:24] stoked about this one. All right. Next, [03:26] we have this HTML in canvas API. And I [03:30] had zero idea that this was coming. It's [03:33] an experimental API meaning that like it [03:36] might not ever come but it sort of [03:38] solves one problem we have with canvas [03:42] which is you you cannot draw HTML to [03:45] canvas and the other problem is that [03:47] when you make UI in canvas if if you [03:51] want to like add effects or whatever [03:52] with canvas then it's it's very hard to [03:55] make accessible. So, this new UI will [03:59] allow you to simply just put elements [04:03] inside of a canvas. Like I'm I got my [04:05] dev tools open right here. This is [04:06] literally a canvas element. And then [04:08] inside of that, you can just put regular [04:12] HTML. And then there are some JavaScript [04:14] APIs that will allow you to paint that [04:17] HTML to the canvas. Now, why would you [04:19] want to do that? Well, there are so many [04:22] different effects that you can do with [04:24] canvas that you you can put a canvas in [04:28] front of HTML. Um, you can use SVG where [04:32] there's some tricks where you can put [04:34] HTML inside of an SVG and now it's an [04:36] image and then you can paint that to [04:38] canvas. But there's a whole bunch of [04:39] limitations. That's actually how we use [04:41] on the Synhax platform. But this is [04:43] simply just you can put most HTML inside [04:47] of a canvas element and then apply any [04:50] shaders or any any whatever things that [04:54] you want to the canvas element. So here [04:56] I've got pixelization and I can just go [04:58] ahead and like type in it. Right? Like [05:01] this demo is totally unreadable for [05:03] people who are not watching this. Uh [05:06] it's completely pixelated form input [05:08] >> HTML [05:10] >> in here. Yeah, it's it's obviously a [05:11] stupid example, but it's just showing [05:13] how like this is live HTML and like I [05:16] don't know like if you backed it off a [05:18] little bit, that kind of looks kind of [05:20] cool, right? I got a question about [05:22] that, Wes. If you just had the HTML [05:24] inside of the canvas, would it just [05:25] render as normally or do you have to uh [05:29] tell it to render the HTML? [05:31] >> There is a like a request drawing API on [05:36] it where you have to explicitly tell it [05:38] to to draw. I'm curious about [05:44] what would happen if you're not I have a [05:46] whole bunch of demos in here, but I I [05:49] assume it would probably fall back, but [05:51] maybe not. Um because maybe that's not [05:53] what you want. [05:54] >> Yeah, I need some handholding sometimes [05:56] in these demos. I look through them and [05:58] I'm like, what is required here and what [05:59] is not required? [06:00] >> Yeah. So, here here's another example [06:02] where I made a magnifying glass for a [06:04] website. Um, and because the HTML is is [06:08] being drawn to it, right? Like you can [06:10] see I'm I'm just typing into this input [06:12] here, [06:13] >> but and I'm I'm using a magnifying glass [06:16] to to make that bigger and and slightly [06:18] distort it, right? [06:19] >> Um, another one is frosted. Um, so here [06:23] you can see like this is just text. I'm [06:25] >> Can you describe what you're doing, Wes? [06:27] For the [06:27] >> audio. Sorry. This is uh creating like a [06:31] a frosted effect on a window. you know, [06:34] if you're blow on a window on like a a [06:36] cold warm day and then use your finger [06:39] to wipe the frost away. Um, I'm I'm [06:43] doing that. And in this again, you could [06:45] have kind of done this before where you [06:47] could put a canvas in front of the HTML, [06:50] but what I'm doing here is I'm literally [06:52] um I'm blurring the stuff that is behind [06:55] the canvas, you know, and then as you [06:58] use your finger to move the frost out of [06:59] the way, it becomes less blurred. is a [07:02] little random every single time. There's [07:04] some other really cool demos from Here [07:07] we go. Matt Rothenberg had a cool demo [07:10] where [07:12] he's Look at this. And if you pause it [07:15] really quickly, you'll see [07:16] >> what is happening now, Wes, for the [07:18] >> Oh my gosh, I'm so sorry audio [07:20] listeners. He has a two things. One is [07:23] when you have an input, you have like a [07:25] kind of a cool box that's following [07:27] around the currently focused input. Um, [07:30] and that is just rendering out a cool [07:32] border hover effect around each of the [07:35] inputs, which you could have done that [07:37] previously with canvas and some work, [07:38] but I think it's a lot easier now. Um, [07:41] and then the other thing is that when [07:42] you submit it, this like scan line goes [07:45] down through the form and sort of like [07:49] like wipes it off the page, right? But [07:52] part of the wipe is you'll see that the [07:55] the wording is getting slightly [07:58] stretched and blurred as it's being [08:00] wiped off. Um, and I thought that was [08:03] such a cool effect. Even like, you know, [08:05] on iOS when you bring up like Siri on [08:08] iOS where you [08:11] >> it slightly does like um a gradient [08:14] border around your phone or when you do [08:17] your volume up and down on iOS, it [08:20] actually pushes in the content that is [08:22] on the screen. It's not just overlapping [08:24] the volume slider. The volume slider is [08:27] literally pushing the content over and [08:29] it slightly warps it. And I think like [08:31] that kind of stuff is so cool that you [08:34] can have control over how the pixels are [08:37] painted in the DOM, right? Whatever is [08:40] simply falling behind this volume [08:42] slider. I want to simply push that over. [08:45] And that is something that you have not [08:47] been able to do. you've been able to [08:49] like have SVG filters on top of things, [08:52] but in actually having full control over [08:55] how the pixels are rendered on the [08:57] screen without having to give up or move [09:00] to something or give up a whole bunch of [09:01] accessibility and whatnot. You just [09:03] regular HTML inside of a canvas element. [09:06] >> Yeah. [09:07] >> So, it's [09:07] >> I don't know if this will make it or [09:09] not. [09:10] >> So cool, though. [09:11] >> It's so cool. Yeah. [09:14] >> This jelly slider right here. Like we [09:17] saw this demo on on Twitter a couple [09:19] years ago or a couple weeks ago. [09:21] >> Yeah, a couple it feels like a years ago [09:22] at this point. Yeah. [09:24] >> If I inspect element on this jelly [09:25] slider, it is simply just an input, [09:28] right? [09:29] >> Input. That's the best part, folks, [09:31] because people who might not know is the [09:32] moment you get into any of this canvas [09:34] stuff, you're you're having to write so [09:37] much uh interactivity code or in the [09:40] case of inputs, forget about it, you [09:42] know, like so [09:44] >> having the actual DOM elements and then [09:48] you don't lose accessibility in canvas [09:50] based sites, too. It's it's really just [09:53] what a what a powerhouse of an API this [09:56] is. So, here's another one from Jake [09:59] Archerald where like if you wanted like [10:02] like a old CRT TV where things are [10:04] slightly what do you call that shape [10:06] that the CRT TV has, you know, where [10:09] it's it's not perfectly square but [10:11] there's a bit of an arch to it. [10:13] >> Yeah, it's con kind of [10:15] >> convex something like that. Woo! So [10:19] cool. And like again, this is just [10:21] regular old HTML. I can inspect element [10:24] on it, you know, I can change some of [10:26] the text inside of that. I can use all [10:28] of the stuff that I'm used to [10:30] >> in HTML and it's just updated any any [10:34] effects you have. So, I'm going to I'm [10:35] building out some more demos with this [10:37] because this is right down my alley. [10:39] >> Yeah, it you know what it kind of feels [10:41] like it would give the uh the stuff that [10:44] we wanted to do with Houdini. Now, now [10:46] you could kind of do you could do all [10:47] kinds of custom rendering. Uh [10:49] >> yes. [10:50] >> Yeah. Really stoked. I think like a lot [10:52] of the Houdini stuff like never panned [10:54] out. We and it ended up making its way [10:56] via things like like text align center [10:59] or or what is it? Text wrap balance, you [11:01] know. [11:02] >> Absolutely. [11:02] >> But I think that this is another one of [11:04] those APIs where yeah, just render out [11:07] the HTML to a canvas element and then [11:09] you've got the pixels. You can do [11:11] whatever you want. You can put shaders [11:12] on it. You can tweak it. You can morph [11:15] it. Whatever you want. So, I hope this [11:17] works in. It's behind a flag in Chrome [11:20] right now. So obviously you can't use [11:22] this on any website but everybody who [11:24] saw this is like yes I absolutely need [11:26] this thing for uh making nextg [11:29] interfaces. [11:30] >> Nice. I have a one that you might not [11:32] have seen here and this one kind of flew [11:35] underneath the radar. Firefox 149, [11:37] Chrome 148 and uh the same version of [11:42] Safari that brings was it 26.4 before [11:44] that brought grid lanes are are bringing [11:48] container queries that you don't have to [11:51] specify the actual query part of the [11:53] container query. You can just specify [11:56] the name. So the way you would do this [11:59] is you would on a wrapper you would give [12:02] your container name property a name. So [12:04] container name sidebar. Then you could [12:06] just use the at@ container sidebar and [12:09] that would scope the CSS to that [12:12] container specifically. giving you [12:14] basically another way of doing uh scoped [12:19] CSS that is baked into the platform [12:22] because right now all the scope CSS [12:24] solutions are adding a bunch of classes [12:25] to scope and this is again just another [12:28] way that we could have native scoping in [12:30] CSS because uh typically with container [12:33] queries you're specifying like a style [12:34] query okay apply this CSS when this [12:37] value is equal to this or apply this CSS [12:40] when the container width or size is this [12:42] or this but this is basically just [12:44] apply this CSS inside of this container, [12:48] but it does scope it. So that way you [12:50] could use more generic specifiers inside [12:53] of that and scope it to that container [12:56] itself. Oh [12:59] man, I think that that is awesome [13:03] because like we have at scope in CSS now [13:08] and I I ended up I tried using this for [13:11] uh a project I was working on the other [13:13] day and like it just didn't feel right [13:16] >> um [13:16] >> really. [13:17] >> And you can at scope you can give it a [13:20] selector but and then you can also donut [13:23] scope which is really cool. So you can [13:25] start the scope and you can tell it to [13:26] end at a specific thing which that's [13:28] great as well. And this is this is [13:30] widely supported as well. But the [13:34] ability to make like named scopes like [13:36] sidebar [13:38] that's great and you're simply just [13:40] using container queries for that. And [13:43] very likely you also want to do things [13:45] with your container queries as well. And [13:48] then those are not two separate APIs. [13:49] This is simply just the container spec. [13:52] And now then there's style queries as [13:54] well coming to container queries. [13:56] I am in that that is awesome. So that's [14:00] just called name only container queries. [14:04] >> Yeah, it's hard to actually find [14:05] anything about this. I saw it because [14:07] Chris Koyer had a tweet and then um [14:10] >> uh front-end masters had a post on it [14:12] and then I'm start looking for what the [14:14] support is and I could only find it in [14:16] GitHub issues and stuff. So, uh, one of [14:18] those things that was hard to track down [14:19] what the support is, but really neat. [14:22] According to Anthony Ferner on Blue Sky, [14:26] he says it's in Firefox 149, Chrome 148, [14:30] and now Safari 24 or 26.4, 24.6, one of [14:35] the 26.4. Yes, there we go. [14:37] >> Okay. [14:37] >> And if you want to see all of the errors [14:39] in your application, you'll want to [14:41] check out Sentry at centry.io/sintax. [14:46] You don't want a production application [14:47] out there that well, you have no [14:49] visibility into in case something is [14:51] blowing up and you might not even know [14:53] it. So, head on over to centry.io/sax. [14:56] Again, we've been using this tool for a [14:58] long time and it totally rules. All [15:00] right, [15:02] man. I am in. There's so much of CSS [15:06] that doesn't get the like props that it [15:08] needs to. Um, and I attribute that to [15:12] people [15:13] being obsessed with AI right now. You [15:15] know, there's there's not a lot of time [15:17] to to spend on new CSS stuff or like [15:20] everybody's just cranking out Tailwind [15:22] left and right. And like a lot of this [15:24] new stuff is not supported in Tailwind [15:26] at all. [15:26] >> So, it's kind of hard, but there's so [15:29] much cool stuff added to CSS that is [15:31] super powerful. [15:33] >> Yeah. [15:34] >> Couple other ones. Safari again cranking [15:36] on all of these things. First of all, a [15:39] couple episodes ago, we talked about the [15:41] ability to use haptic feedback in the [15:43] browser in in iOS now, which means like [15:45] if you have your phone and you want to [15:47] like slightly vibrate it to the user to [15:50] tell them that something has happened, [15:51] there was a a trick where if you have an [15:54] input type of checkbox and you give it a [15:57] switch attribute, which is only [15:59] supported in Safari, it will when you [16:02] you turn a switch on and off, [16:04] >> it would do a little vibration. So, [16:06] people figured out that you can [16:07] programmatically turn a switch on and [16:08] off many times and you'd be able to get [16:11] haptic feedback in the web. Apparently, [16:13] I went back in the like WebKit GitHub [16:15] repo in in the WebKit docs. Apparently, [16:19] it was only ever supposed to be [16:22] associated with a user interaction. [16:24] Like, same thing like opening up a popup [16:26] window or playing audio. Those things [16:29] always have to be associated with like a [16:31] click or some sort of user interaction. [16:33] you just can't fire them off [16:35] willy-nilly. And I think I think that [16:37] was just a regression in Safari for one [16:40] version that people figured out. You can [16:42] do that because it's been fixed and you [16:43] can no longer use haptic feedback on the [16:45] web. So, [16:46] >> thanks Safari. [16:48] >> Sorry. But it's one of those APIs that [16:50] like the navigator.vibrate like Safari. [16:54] It's just one of those ones that like [16:55] adds more fuel to the fire that uh Apple [16:58] intentionally [17:00] like limits the browser APIs because [17:04] what they don't want people abusing [17:05] >> they don't want people abusing it. [17:08] >> But you're not going to tell that to the [17:10] native developers. We don't want you [17:11] abusing it. Like come on. [17:13] >> Yeah. [17:14] >> Instagram abuses it. If you scroll [17:16] through people's stories every time like [17:17] a friend likes that story as well. It [17:20] goes it's so annoying. So I I see why. [17:24] But that shouldn't that shouldn't stop [17:26] us. You should be able to turn it off [17:27] like like webcam access or anything [17:29] else, right? Do you want this page to be [17:31] able to vibrate? [17:35] I don't know if that requires permission [17:37] or not, but that's frustrating. One cool [17:39] thing Safari did give us is random. So [17:43] CSS random random 0 10 1002 will choose [17:46] an even number between 0 and 100. This [17:49] is so cool because I every time I need [17:53] randomness in CSS, I have to go into my [17:57] like my view layer and like pass in a [18:00] CSS variable that has been [18:02] programmatically [18:03] calculated as random. Um, and then I [18:06] also have to make something seated [18:08] random because if you're doing server [18:10] client rehydration, it needs to be the [18:13] same amount of random um on the server [18:15] and on the client. So then you have to [18:17] get into seated random. So it's, you [18:20] know, it's it's not as random, right? [18:22] It's the same amount of same value you [18:24] get on both sides. But this is something [18:26] is a straight up CSS API where you can [18:29] randomize your values, which is going to [18:31] be great for [18:32] >> awesome. [18:32] >> I don't know it even just like rotating [18:35] values on a page. I very often will [18:37] rotate cards and I'll have to like on [18:40] the Mad CSS website, I have to [18:42] programmatically go in and give every [18:44] single value a random random one. [18:47] I'm in. [18:49] >> Yeah. Yeah. Neat. I have a one here [18:52] which is search text which is a new [18:54] pseudo selector. So colon search text or [18:59] there's a what do they call it when [19:00] there's a double uh pseudo selector cuz [19:03] you can do colon search text colon [19:07] current as well. So it's like a second [19:10] layer to it. I guess that's pseudo [19:12] class. [19:13] >> Those are just that's just stacking [19:14] pseudo classes, right? That's no [19:16] different than active and hover. Yeah. [19:19] >> Yeah. Yeah. It's so funny to see that in [19:21] action. It looks like something entirely [19:23] new, but it's not at all. So, there's [19:25] search search text in current. So, [19:27] search text is allowing you to style [19:30] like the when you do command F in a [19:33] browser and you start searching, it [19:35] allows you to style the way that that [19:37] text is highlighted on the page matching [19:41] the rest of your CSS for for searching. [19:43] But the coolest thing is the the colon [19:45] current on here because [19:47] >> you can uh the you know when you do like [19:51] next or next and next to find the [19:53] current iteration, you can now style [19:54] that however the heck you want. [19:56] >> Oh, [19:56] >> which is really super neat. So you could [19:58] have some uh really to to really match [20:01] the the theme of your site to make the [20:03] current one look interesting, you know. [20:06] I think I think there's all kinds of [20:08] different ways you could make that look [20:09] nicer than just putting a stupid [20:11] highlight on it, right? That's great. I [20:13] like that a lot because yeah, how how [20:15] does a browser know that yellow or [20:18] whatever is going to be the best version [20:21] for you. So, this will allow you to [20:23] highlight them. That's such a simple API [20:25] and I'm so glad we have it. I do wish [20:27] you know what I one thing that grinds my [20:29] gears is that if you have like a search [20:31] going and this is on tweets as well [20:33] where I'm looking for a specific reply [20:35] or a specific word in like people [20:39] replying to a tweet. So I'll search for [20:40] like syntax and then I'll scroll through [20:43] some replies and as Twitter loads in [20:45] more you know it's lazy loading the [20:46] values the browser search doesn't [20:49] update. So I have to like go back to my [20:51] search like push space and then push [20:53] backspace and then it uh then it applies [20:55] to the markup on the page. I wish that [20:57] the browser would say ah I have changed [21:00] the markup on the page therefore I will [21:03] rehighlight what is going on on the [21:06] page. Do you think it's a just a [21:07] virtualization issue or is it like [21:10] always just the DOM not having the [21:13] >> Well, like in that case like it would be [21:15] nice if the browser like if the website [21:18] would just use like the there's there is [21:20] native APIs that allow you to like not [21:23] render things but still maintain the [21:26] search and that way you can you can find [21:28] it. But in many cases like Twitter [21:31] doesn't want to send a thousand replies [21:34] on a single endpoint to to the thing. So [21:38] you need to be like live searching every [21:40] single time the DOM updates. [21:42] >> Yeah. Word [21:44] >> sticky both ways. [21:46] >> Uh Una had a post the other day where [21:50] Chrome 148 sticky positioning now works [21:52] on a peraxis basis. So sticky headers in [21:57] CSS, when you scroll, you're able to [22:00] stick them to the top or or offset them [22:02] certain amount, but it previously has [22:05] only worked in one access, meaning that [22:07] like you can scroll left to right or top [22:08] to bottom. Um, and now they work in in [22:11] both directions, which is awesome for [22:14] specifically for uh like conference [22:17] layouts. Uh or if you've got like a big [22:20] tournament where there's I don't know [22:22] three different places that people are [22:24] playing, you want to figure out where [22:25] they are, tables is one of the hardest [22:27] things to do well on mobile and this [22:29] will certainly improve that. [22:31] >> Yeah. Yeah. I I think this is dope. [22:34] Again, just more more stuff that we uh [22:37] more stuff that we need here. [22:39] >> It's just little paper cuts that are are [22:41] being [22:42] >> paper cuts. [22:43] >> Yeah. Uh, another one with little paper [22:45] cuts here is this multicolumn fixes. So, [22:50] we all know multicolumn CSS sucks. U, [22:53] but there is new column wrap properties [22:57] as well as a new column height that now [23:00] basically even if you were to specify [23:02] how many columns before it would just [23:04] continue to make them horizontal. But [23:07] now what it does is if you have too much [23:10] text for the amount of columns you [23:12] specify, if you specify a height, it [23:15] puts them on the next line. The reason [23:18] why you would use this over something [23:19] like flexbox is because this is breaking [23:21] up a single like paragraph full of text [23:24] instead of like [23:25] >> okay [23:25] >> having divs where you're se uh [23:29] segmenting the text into different divs. [23:31] So this would be long one long paragraph [23:33] full of text and you want it to be in [23:35] three columns and then if there's too [23:37] much text for three columns then it's [23:39] going to wrap onto another line. So just [23:42] giving you that flexibility and freedom. [23:44] Uh this is an API again that I I I [23:47] pretty much avoid using uh but it [23:49] definitely has its use case and and [23:51] happy to see that it does in fact uh [23:53] exist uh and and like working in a way [23:56] that probably should have worked from [23:58] the start. [23:59] >> Yeah. Yeah, I agree. the columns has [24:02] always been like kind of not great. You [24:05] know, it it works okay, but here and [24:07] there. And you have to think like a lot [24:10] anytime we show any demos like this, [24:11] people are always like, "Oh, I don't see [24:13] where you would want to use that." And [24:14] like I guarantee there's somebody who is [24:16] like, "Oh, I work in publishing and we [24:18] lay everything out in HTML and CSS [24:21] >> and uh we need like this weird print [24:24] stylesheet hack to make it work and like [24:26] finally this is going to going to work [24:28] well for you." So just because your [24:30] single one website doesn't need this [24:33] doesn't mean that it doesn't it [24:34] shouldn't be added to the web platform [24:36] because people use the web in many [24:38] different ways in many weird ways. [24:41] Border shape. Another one from Una. [24:42] Border shape can handle both insets and [24:45] outsets. So you can do this is so cool. [24:48] Um you can [24:50] >> make like breadcrumbs that are like [24:52] chevrons and then the focus wrap will [24:55] follow that along which is super cool. [24:58] The border shape stuff has been so fun [25:02] to work with. On the Mad CSS website, I [25:06] used it for both for these ones right [25:09] here. You see these little cutouts? [25:10] >> Yeah. [25:11] >> On the the tickets. So, I like I [25:13] replicated like what a ticket would look [25:15] like and then I used border shape to cut [25:18] out the corners. And and that's been [25:19] doable before with um you could use like [25:22] a mask image, right? And that's what I'm [25:24] falling back to. But this like where the [25:28] border follows the border shape that was [25:30] not really doable with with masking [25:33] previously. So this the red inset value [25:36] here looks so cool. It's not really [25:39] something you could have done previously [25:40] unless you like had like an image [25:43] programmatically generated or you use [25:44] like an SVG to sort of draw it and now [25:47] you can simply just use regular CSS [25:49] borders and it will just bite right into [25:51] them. Yeah, there's so many cool things [25:53] about this API Gest Man. Not everybody [25:57] when it first came out, everybody's [25:58] like, "It's Squirles." And I was one of [26:00] those people. It's Squirles. But it's [26:02] more than squirles. We got all kinds of [26:04] uh what's it? Scoop. I We did one of [26:06] these for our live We did a live CSS [26:08] show and I had a fake corner shape [26:11] property in there. Uh just to be a [26:14] little [26:14] >> small right now. [26:15] >> Uh let me try. Let me try. Let me try. [26:18] Okay. I'm not going to look at your [26:19] screen. Uh, squirle super ellipse. My [26:23] god. Scoop. [26:26] I'm like blanking whether or not the one [26:27] that I had in there was fake or not. [26:29] Bevel. [26:31] >> Yep. [26:33] >> Am I missing one? [26:34] >> Yeah. [26:34] >> Super. Squirrel. Bevel. [26:37] >> Oh, I am missing one. I just saw it. I'm [26:40] missing notch [26:42] >> and round. But although I think round's [26:43] the default one, [26:44] >> which probably the default. scoop, [26:46] bevel, notch, square, [26:49] >> squirle, and super ellipse. So, [26:53] >> all of these values, bevel, scoop, [26:54] whatever, or whatever, those are just [26:56] like nice short hands, and then you can [26:59] literally make anything with a super [27:00] ellipse. So, it has a squirle is just a [27:03] super ellipse with custom values preset [27:06] on them. Big fan, man. One thing about [27:09] MDN is they got to make their demos look [27:13] cooler. Yeah, [27:14] >> it's so hard to make a cool demo and not [27:16] add a bunch of CSS that is unrelated [27:20] >> and that's probably what they need to [27:21] do. But then also like I was looking up [27:24] border image the other day where like [27:26] CSS has this thing where you can add [27:29] images for borders and let me show you [27:32] border image CSS. [27:35] This all looks awful, [27:37] >> you know, and like I I don't think I've [27:39] any ever seen anybody use border image [27:41] before [27:42] >> and I was looking it up. I was like, [27:44] "Oh, maybe I could use this type of [27:45] thing." And all all of them was look [27:48] like see that maybe is one good. But [27:50] that's not even that's not even the API. [27:52] >> It's not even good. I It's so funny [27:55] because it's always been like that. And [27:56] and then what the problem is is that [27:58] like I think people don't reach for some [28:00] of these tools because they don't see it [28:02] in action as being like good-looking or [28:06] useful. [28:06] >> This is the cool one that I did find. So [28:09] this guy on CSS tricks [28:14] made a [28:15] >> Oh yeah. [28:16] >> Right here. Oh yeah. [28:18] >> Yeah. Paper scroll tombstone. [28:21] >> Yeah. Video game style repeating border [28:23] images. So this next one is something [28:27] that's really neat for animations in the [28:29] browser, which is element scoped view [28:32] transitions. So you uh you are able to [28:37] basically give a view element name [28:40] something that uh is scoped to that [28:43] element specifically. And then you can [28:46] have something called a view transition [28:48] group contain and then a uh view [28:51] transition class where you can then [28:54] style things for that individual [28:56] animation. Basically with this API you [29:00] can have tightly scoped view transitions [29:03] where in the past like if you wanted to [29:05] do the automatic view transition [29:07] movement kind of stuff Wes you're giving [29:10] everything a unique name you are giving [29:12] everything a unique view transition name [29:15] but here you're able to have it [29:17] >> yes [29:18] >> yes you're able to have them be grouped [29:20] and and scoped essentially it's very [29:24] just like one of those quality of life [29:26] things. Uh again, a lot of people are [29:27] reaching for JavaScript for animations [29:30] and this gives you the ability to really [29:33] control them a bit more. I did this like [29:36] if you have any sort of UI where you are [29:38] adding and removing cards like that's a [29:41] very common thing to do. You know, you [29:43] got a like a a to-do list and you're [29:44] adding and removing elements from it. [29:46] Previously, you've had to give every [29:48] single one like a unique name. Um, and [29:51] now you can simply just say anything [29:53] that is like an LI element, give it a [29:56] view transition name. [29:57] >> Um, and then you can animate those in [30:00] and out or or reorder them or anything [30:02] like that. It's it's true cuz I remember [30:04] like the first time I got into like view [30:05] transitions, I was just like, ah, this [30:08] is a little bit limited in terms of what [30:11] I wanted to do. But now this has been [30:13] out for like a while now, I'm pretty [30:16] sure. for element scope view [30:18] transitions. It's in Chrome 147. I'm not [30:21] sure about the other browsers though. [30:23] >> Okay, so that is this is new. Maybe I [30:25] was using it in in Chrome Canary for a [30:28] while [30:29] >> and just living in La La Land [30:32] for me, but it was just a just a fun [30:34] demo. So I hopefully soon we'll be able [30:36] to use this with [30:37] >> it says stable by the end of March. Um [30:40] so I believe it is stable by the time [30:42] you're listening to this in Chrome [30:43] specifically. So, I hope you learned [30:46] something new today and got excited [30:48] about something. There are so many neat [30:50] stuff in CSS, stuff you can use, stuff [30:52] you can't use, stuff you can [30:54] progressively enhance in your codebase [30:56] today. Which of these APIs are you the [30:57] most excited about? Which of them has [30:59] tickled your fancy? What kind of crazy [31:01] stuff are you going to do with HTML and [31:03] canvas? Because this one, wow. Uh, very [31:06] stoked about this. Let us know down [31:07] below what you think. Peace.  📄 **Full text:** ![[Full Document Contents/Articles/10 New CSS and HTML APIs.md|10 New CSS and HTML APIs by YouTube]] ## Highlights - like also like it opens up new creative use cases as well. >> Yeah. Yeah. Super cool stuff. So, we we'll we'll link up a WebKit post. This is available right now in the uh as of Safari version 26.4 and it it's behind a flag in Chrome and Firefox. So, not long off here. Really stoked about this one. All right. Next, we have this HTML in canvas API. And I ([View Highlight](https://read.readwise.io/read/01kp8jk45h58vp0njb23yz6n8g)) - Tags: 👻 ai highlighted - had zero idea that this was coming. It's an experimental API meaning that like it might not ever come but it sort of solves one problem we have with canvas which is you you cannot draw HTML to canvas and the other problem is that when you make UI in canvas if if you want to like add effects or whatever with canvas then it's it's very hard to make accessible. So, this new UI will allow you to simply just put elements ([View Highlight](https://read.readwise.io/read/01kp8jk45xzdmsy81ash0h5pnn)) - Tags: 👻 ai highlighted - accessibility and whatnot. You just regular HTML inside of a canvas element. >> Yeah. >> So, it's >> I don't know if this will make it or not. >> So cool, though. >> It's so cool. Yeah. >> This jelly slider right here. Like we saw this demo on on Twitter a couple years ago or a couple weeks ago. >> Yeah, a couple it feels like a years ago at this point. Yeah. >> If I inspect element on this jelly slider, it is simply just an input, right? >> Input. That's the best part, folks, ([View Highlight](https://read.readwise.io/read/01kp8jk47eaj7jjhhdv5peyhdh)) - Tags: 👻 ai highlighted - know. >> Absolutely. >> But I think that this is another one of those APIs where yeah, just render out the HTML to a canvas element and then you've got the pixels. You can do whatever you want. You can put shaders on it. You can tweak it. You can morph it. Whatever you want. So, I hope this works in. It's behind a flag in Chrome right now. So obviously you can't use this on any website but everybody who saw this is like yes I absolutely need this thing for uh making nextg interfaces. ([View Highlight](https://read.readwise.io/read/01kp8jk48c94twr9jh1ac03spn)) - Tags: 👻 ai highlighted - border image CSS. This all looks awful, >> you know, and like I I don't think I've any ever seen anybody use border image before >> and I was looking it up. I was like, "Oh, maybe I could use this type of thing." And all all of them was look like see that maybe is one good. But that's not even that's not even the API. >> It's not even good. I It's so funny because it's always been like that. And and then what the problem is is that like I think people don't reach for some ([View Highlight](https://read.readwise.io/read/01kp8jk4bb4wntd2n6s0he225s)) - Tags: 👻 ai highlighted - of these tools because they don't see it in action as being like good-looking or useful. >> This is the cool one that I did find. So this guy on CSS tricks made a >> Oh yeah. >> Right here. Oh yeah. >> Yeah. Paper scroll tombstone. >> Yeah. Video game style repeating border images. So this next one is something that's really neat for animations in the browser, which is element scoped view ([View Highlight](https://read.readwise.io/read/01kp8jk4h30jzqpcw9g6zr3qek)) - Tags: 👻 ai highlighted