How to Use CSS Anchor Positioning TODAY

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. Welcome to another episode of Learn With Jason. We will be diving into new features of CSS and how we can use them today. This is exciting and a super practical episode. If you if joy this show, make sure to like it, leave a comment, subcribe to the channel. Let's go ahead and welcome in our guest for today. It is James Stuckey Weber. James, how are you doing today?

James: Doing great. Thanks for having me, Jason.

JASON: I am so happy to get to meet you. For folks that aren't familiar, want to give a bit of background?

James: I'm a front-end developer. I have been doing web stuff since back in the '90s discovering different HTMLal elements by typing into a text editor and that kind of thing. Over the years, nonprofit websites and a data analytics platform and now at OddBird I do a little bit of everything. Some client work with making websites for manufactures and still mills and things like that or whoever needs it. And doing CSS spec work is part of what we do. I have been contributing to sacks and the anchor fill poly fill which is fun to dive into.

JASON: Polyfill work is a special beast. It is one of the last places where you get that jQuery style development where you are digging into the inconsistencies. Are you doing things like sniffing bridget browser agents? We don't have to do too much of that. I think we put it on the user saying you can come up with your own if you need more specific granurlarity and we give the code to run on that.

JASON: Let's talk a little bit about just the context for what this is and why anybody would care. CSS anchoring position as I understand it is the ability to change where something relative to an item. Historically, I am going to run through my understanding of positioning in CSS and see where the disconnect is and why we needed this feature. Historically I would, if I needed to position something near an element, I would end up with a div and inside that maybe I have a button or a span that I want to be near it. I would end up needing to set the div to position relative and the contained element to say position absolute and I am sort of just doing math to figure out if I want it to go 10 pixels above this element I have to do the math for how tall this and and account for that. Then I would find myself trying to do something complicated like what if it is at the top or the bottom of the page or someone scrolled it off the page. My way is talking myself out of building it that way. If it opens at the top, it needs to open at the bottom, and I have written that JavaScript to detect that. It ends up being surprisingly complex. Is this going to save me from having to do all that work? I hope so, yes. You are absolutely right. I think that simple case of going absolute position to element inside of a relative parent that works sometimes. In many cases, that's what you need. But what if you can't put your content inside of that parent. What if it is a dialogue element? There are all these other edge cases where it doesn't quite work. The edges of the screen are a huge part of that. And yeah, it is, I think, you would going back and how I would do this for drop downs, it was often bringing in puffer JS or now floating UI, those are JavaScript libraries that handle this more commonly. I definitely have been within the last couple of weeks, I was with a client and we couldn't use the CSS anchoring positioning yet. I had to say we can't do this. It was a little bit of this is such a common pattern and it should be so easy and we couldn't. One of the huge benefits is it is moving ort of the JavaScript realm where you are having to do math or where some library is having to do heavy math for you into CSS where you are more declaratively saying this is what I want. Just describing what you want to have happen. And the browser takes care of it for you. So it is more performant, it is easier to use, you don't have to find a library, you don't have to think about math.

JASON: It seems like more importantly it doesn't split across two languages and files. Historically I would have CSS controlling parts of the tool tip and JavaScript controlling other parts, and even with just a few weeks between writing that and having to maintain it, you have to rebuild the entire mental context of how that was constructed which is a huge problem. I have code from years ago that does stuff like this. Like I wanted to pull mark downs up and I had this complicated feeling of where to put them so they were readable and they were multiine. I can't figure out how I did what I did and I don't have time to break it down line by line. So I have left it alone thinking some day I will fix that. I find myself whenever I have to do some kind of complicated workaround, I get resistant to updating that feature. A thing I am excited about with CSS anchoring positioning is it starts to eliminate the sprawl of the code required to implement feature sows you get to keep a simple context and things are done in a way that's predictable and it is in the docs. If you don't remember how you did it, you just read the mozilla page and you are back on track. This has been in the works I feel like I heard about it a year ago so it probably has been in the works far longer than that?

James: I think it got released in chromium browsers in May of last year. That's when it hit prime time. I think this is something that's, I mean this of course, has been worked on longer than that, and it has been kind of a dream in many ways as long as there have been these JavaScript implementations of this is a common practice. But yeah, it has been in chromium, there has been some changes over the last year or so, in the naming conventions and things like that. But yeah. And the exciting thing is it is part of inter-op 2025 meaning Firefox and Samari are saying yes, this is important. We want to work on this and by the end of the year hopefully this is in Safari and Firefox for new browsers so still the 2-3 year before you can assume everyone has it but that's exciting that that's coming soon.

JASON: That is exciting. I want to pause here because I think there is a really useful sound byte that I want to get which is what -- I hear the name inter-op2025 but never asked what that is? What is it?

James: I am only tangentially involved but it is a process where all the major browsers get together every year and request input from the community and say what should we focus on this next year. They come together and say these are the things we will make sure we focus on that maybe its something like anchoring positioning where only one browser has it so far. I think another part is investigation on how we test game pads and how they interact with the web. They don't really have a way of testing that yet but they want to have some standards around that. What it boils down to in the end is there is a set of tests called the web platform tests which I don't know how many they are. But it is hundreds of thousands of little unit tests does this specific property work in this specific way? Can you parse, you know, we will get to this later but positionary top left or left top, do those both work the same? And so there is all these tests. The browsers commit to to trying to make these pass.

JASON: That makes it tangible. I understand the idea of had cross organizational and cross functional efforts where it is easy to say we will do this thing. But how you do that the devil is in the details so to speak. I know historically we would get pretty different ideas for implementation. You had to account for this one does it this way and this one does it that way and you have have to know or you get a browser hack. Knowing the way interop is working to is build out a swiss patience -- suite of tests and all run the same test suite is really cool. I am really happy to hear that's the path everybody took forward. That's super neat.

James: Yeah. I just pulled up the list of the other focus areas for 2025 and there is a lot of good things there. Core web vitals, detail element, navigation API, view transition API, WebAssembly, writing modes -- all these things are, I think, what those thing are specifically you can drill down on that. But it is a really fascinating list of here is what not just one browser but the web community as a whole says it is important to do.

JASON: Very cool stuff. I am super happy to hear about it. Let's see. We are about 13 minutes in here. I feel like all my questions about CSS anchoring are going to be easier to show than tell.

JASON: We will start with a blank CodePen if that's OK.

JASON: Let me do a little housekeeping first. Let me throw a link out to your website.

James: Work in progress.

JASON: Are people going to find your social stuff?

James: Yeah, you can find there. Or I am on blue sky or Mastodon. I think at the bottom.

JASON: And you are at OddBird. Want to talk about that for a quick second some

James: Sure. OddBird is a collective of people who work together on making web apps, design systems. We work with everything from, you know, working on how writing CSS specs. My coworker Miriam Susanne is on the CSS Working Group so some of my exciting work is to help her dive in on a subject that she is taking back to the CSS Working Group. We also do client work. If you are interested in building a web app, or something on the web platform, or needing designs, or design systems, we are great at that and very eager to help you.

JASON: We are talking about CSS anchoring positioning and this is a link to the docs. You said let's start with a blank CodePen. Apparently I got logged out. Let's do one of these and just get logged in here. Ge let's start a new one. Blank CodePen. Here we go.

James: Let's start with the very, very basic three lines of CSS is all you are going to need. We are actually going to do this with a pop over API which is newer. It is I think a little bit older than anchoring positioning but it is baseline newly available across all browsers. If you add a what's an element with type button and add a popover target.

JASON: It is all lowercase?

James: Yeah. And whatever ID we will give our popover. And just call it button or whatever text you want to put in there. And then let's make our popover and just a div.

JASON: It isn't an element any more. Was it ever and I made that up?

James: The dialogue is a but it does have a popover attribute.

JASON: And that's just a boolean attribute?

James: That's correct. This is the pop over. Perfect. This is apparently you can click open pop over. And it opens the pop over. No anchoring positioning yet put you might want to position it.

JASON: And can we call out how freaking cool it is that there is no CSS or JavaScript required for this to just work? We designed a pop over, you click a button and the pop over shows up centered in the middle of the screen just like you would expect a pop over or alert dialogue or anything like that. This is what you kind of want as a default behavior which is extremely cool. Now we have the button and pop over. What next?

James: We will remove a little pop over style sheet. Just the waste style sheet. If you add an ID pop over selector there. Just do margin initial. And this will remove where the spacing is. We are going to just add a position dash area. And let's do end. That's it.

JASON: Just to drive this point home, if I take my button and I say we are going to make this -- probably be easier if I did it with the body, right? I can just do a display flex and place items center. If you change position area to start, it will jump over there. We will get more into positionary in a little bit but I think if we pop over button wack up in the corner, so just, yeah, take that out for now. We ran into that overflow issue for short. Then what we can do is you can add position try fallbacks, position-try-fallbacks and do end. If it overflows put it at the end we are saying. Yup. If you --

JASON: The amount of code I have written to do just this is unbelievable.

James: Yup.

JASON: B instead of H because that's the right call. Font size. You got it. Not on this one. Let's do it on this one. And if you move your button down -- we are moving back up. No matter, I mean, it is fairly common where you have a drop down button I think there is four in the corner. You don't know how that is working or where it will be on the page. This provide you with a really easy way of placing your content around something, anything. Pop over has an implicit anchor. By default it assumes you are probably going to want to position that pop over close to whatever triggered it. That's not always the case. We can clear this out and just make two divs and one anchor and give that ID anchor and now I think the body is putting it in line. The first thing we need to do on our anchor element is say this is an anchor. We do that by naming it. Call it anchor-name and then it is dash-dash anchor. Similar to a CSS variable. This is just a CSS variable name essentially. Just make sure it is separated from CSS actual values.

JASON: This is helpful because this is something that gets me about grid. There are a couple places where you just have magic words in grid because you define an area but reference it without quotes. I dig this because it makes it clear I am defining what this is. First we need to say this is position absolute. That one thing to note for anchoring position. It is for absolute or fixed elements. It is for floating content. Things that are removed from the flow of your page. Not normal content. Now I will refer to it with position-anchor and here is where we refer back to that dash-dash anchor. Now they are connected. We need to position that. Position area end. And now because the anchor is a div and taking up the full width, if you change the anchor to display in line, it won't take up the width of the page.

JASON: Very cool.

James: This is how you take two elements and make sure they see and talk to each other. They don't have to be next to each other. They can be in different parts of the DOM. There are rules on how that relates to prevent cycles. The anchor has to be laid out before your positioned element --

JASON: Like I can't throw this up above it?

James: You cannot currently put your position element inside the anchor if the anchor is relative. Because it creates a containing block for the positioned element, currently, the spec is written that you can't refer to that. It gets deep. I don't know that I want to get too far into troubleshooting how all those hinges have to work. There is an auricle that goes into some of those rules about how exactly those have to work. I have found if they are siblings and the anchor is first and it works most of the time. If the anchor is absolute positioned and the position element is absolute positioned it has to go -- or the anchor has to go first. It is lots of if-cases that make it messy.

JASON: You can see it is flowing as we expect which is good. What are my -- just going to throw borders on things. This is how I think about CSS. I just have to fine of make everything have a border so I can see what's going on with it. So is the pop over or the anchor in this point, is it pushing down? Or is this coincidentally the margin of the paragraph?

James: I would expect it to be the margin of the paragraph.

JASON: That was just a perfect coincidence to be the height it looked like it was pushing down. This is pushing over. So if we were doing this for real, we would have a background on this and whatever color that is. Then we have our pop over living over the space which is really, really cool. Yeah. If we wanted to make this work you had a lot to show. But if we hover over this, we could make that work all in CSS?

James: We have been using position area which is what you probably want to use most of the time. It is very helpful. But you can also use anchor functions is what they are called. If you remove position area end there you can use the anchor function -- for instance, we want to place the top of the positioned element at the bottom of the anchor. So here you can do logical priorities and anchor and then bottom. And that will position that right there. And you can do left anchor right. Essentially you want to do the same thing as the position area. This is cool and resolves to a CSS length. It is a number. You need to wrap it in a calc.

JASON: This isn't one of the ones that auto calcs?

James: The calc would be outside of anchor. Anchor bottom and yup like that.

JASON: Now if I want to put it above the containing element I can do that now with math instead of magic numbers like I know when the font is this size and the line height I have to do roughly 2M or something. We know the bottom of the positioned element is exactly 10 pixels above this particular thing which is fabulous for when you have strict layout requirements and things.

James: This is the anchor function which gets an edge of the anchor and you can also do anchor size. Let's set the width or blocker in line size. Let's do width and let's do a calc as well. Anchor best size. Try width and times two. Then you are now getting the width of the anchor.

JASON: We are able to use the width of this element. So the dynamic width of this element to set the width of this thing?

James: Yeah.

JASON: Oh, that's really cool.

James: Again you don't have to rely on it being on the DOM a certain way. You can really connect and refer to pretty much any element on your page and size based on that. That's another great trick.

JASON: Would this work I didn't set these and I want it to flow but I want it to have the same width or height?

James: It still need to be absolute.

JASON: What I want is to say I need everything here to be the same height but it is all height auto. You are trying to pull the tallest element to get it to work. I am trying to remember the specific example and I I think the answer was you can't. It is not currently solvable in CSS. This is really cool because it gives control in a way that's relative to other elements on the page which a lot of times is easy and in certain cases it is just impossible. So to see this is coming in, that we have got some functions that can get the dynamic width and height or positions of these other elements on the page is like I am already kind of buzzing on some ideas for different ways we can use this and what it makes possible. This is really cool.

James: People share I did this fun thing in CSS and I am like I can do this with anchor positioning. There is a lot of, yeah, a lot of new things that you can really unlock with angering positioning that's really cool.

JASON: I know you had a couple ideas getting away from this tool tip idea.

James: Before we to that, I will jump back opon that a little bit. There is a website anchor-tool.com that Lenny Kravitz put out. This is super helpful for visioning how this works. If you click on the items on the left side here, you can see top span left. You are saying I want it at the top. I want it to span two columns or span all. And it will just work. You don't need the span. You can just do top. The idea here is there is a grid around the element that you can place around the nine blocks and the anchor because most of the time that's what you want to do -- put it around there. And yeah, if you check that show IMCB, that is the modified containing block. How this works under the hood is similar to what you were talking about earlier with an absolute positioned box, inside of a relative parent, that it moves around relative to that, or the absolute element moves around relative to the relative parent because it is containing block. This is the 00 point at the top left of that element. Position area creates a new containing block based on the space around the anchor. And then it uses justify and align content to move the element. So instead of being centered within that containing block it hugs the anchor. I think one of the things in CSS that can be tough to wrap your head around is it feels like there is a lot going on and properties. But when you start to peel back what they are doing, all the positioning ones at least, they are creating boxes and they are deciding which boxes are connected to which boxes. And so when you set this you are saying I want the bounding box of this thing, which is the square that goes around our little guy, I want that to be the box that all my other boxes are tied to, and then we are saying like OK, now I want to center this position thing inside this box I am attaching to this box, as opposed to what I was maybe thinking before was some kind of on the fly calculation to determine what the pixel values. All of that is true but in the more abstract sense we are saying this is your home. This is where things live. This box right here. Now you are going to add another box somewhere around this box. It can be attached in a lot of different ways and you can see these all here. All of them are just a box next to a box. If you just draw a rectangle around whatever it is on the screen and start thinking of everything as boxes being relative to other boxes and they are either next to or contained within other boxes it starts to feel a little less daunting because it is like if I can get the boxes to go in the places they are supposed to be, then I can get rid of the borders and the illusion of roundness or stacking or whatever it is, all just emerges from things being in the right place but I don't have to -- I am not trying to build this complex context of, you know, here is all the stacked magic that makes CSS work. It is boxes within and next to other boxes and that is the entirety of CSS if we break it down.

James: I recently talked in a stream and it was about how this exposes thing under the hood of CSS that don't always get exposed like position especially but anchoring positioning in general is going to expose and that's like pealing back a little bit of behind the curtain of what you might need to understand some of these things. I think it does get complex. But it also really powerful. It is worth learning. I don't think you need to -- there is a line in the spec about these containing blocks and they are rectangles but they are not boxes. Because a box in CSS is a specific thing and this is not one of those things. You don't need to understand that nuance necessarily. You do need to understand OK, I am placing my position element somewhere around here. One of the interesting parts of that or clearest ways that you see this play out is when you are using the position area because you are modifying the containing block, any percentage values are calculated against that containing block. If you have like I want it to be five % or the margin to be 5%, it is not 5% of the gray area, but it is 5% of the width of that checker box area. But that's probably what you want. -- it seems that's more likely what you want. But for the most part you are not going to need to think about the containing block behind what you are doing.

JASON: What next?

James: The idea here is that anchor positioning will unlock a lot of new possibilities. We want to build a high school layout where you have a bunch of pictures on one side and then their names all go down the side. You might have three in a row or four in a row and three or four names next to it. Here we just a generated content so that we don't have to do that. Anyone in the HTML I don't think. But, yeah, it is a series of list items that have content inside and images. You can see inside of each list item, you have an image, and you have an H2. They are right there next to each other. Our trick here is we will need to pull those out of the flow and put them in a completely different area. Is the end goal clear enough?

JASON: Our end goal here is we want a grid of images and then a list of names that appear to be two separate things on the page.

James: We will want the names aligned or like in the same row as their image if we pretend each of the images is a different picture of someone. We want those names lined up. And yeah. We also don't want them overlapping. The first thing we will do is do that photo grid -- I would do this on the UL doing display flex. And then justify content space between just so that --

JASON: Do you sing the Dave Matthews song whenever you set this property as well? Not allowed to fork?

James: I will make that public. I am sorry. You should be able to fork it now.

JASON: It did it. Good. Good.

James: Thank you, CodePen. They are great. This is now taking up 100% of the width. I think there is probably better ways of doing this but we will just hit the in line size to 70% of the screen. Then as you resize that will pop over and things like that. And at one or more. You could probably see if you could zoom out on the HTML part but not your text. First we want to get the are names into that 30% left on the right side. Just pull those out of flow. On that UL we first need to say this is our anchor. We will refer to that UL as the anchor. We want to place the names relative to that box. Anchor name and list items. On that we will do position absolute to pull it out of flow. We want to do left. 1 M to the right of the yearbook right. So we will do calc and then anchor and then we will refer to it by name because we didn't declare a position anchor. So dash-dash yearbook. Do yearbook right. We are referring to the right side of it.

JASON: Now we have some chaos.

James: And the names are still below the row they should be in. But that anchor function, if you do declare that, that sets the default for the element. That will say this is the default thing if you want to grab on to. We are using a couple different anchors in this case so that's why we will be explicit about it. We now want to line up the top of the name with the top of its photo. You add an anchor -- let's see. Add an anchor name to the list item. So we will do that first. Anchor name and then top. We will do right on anchor image top. And what happened? This is -- because how the DOM is here, every list item has that anchor name. It just find the last one which is useful sometimes but also very unuseful for this. You give every list item a different anchor name and chaos ensues. Let's not do that. What we can do is tell the positioned element, when you are looking for an anchor name, don't go outside of this part of the DOM tree. On the list items, we can do anchor-scope, and we give that the same name as the anchor name. This says do not look outside of this area when you are looking for an anchor name

JASON: No we have the problem because they are together in a grid the top is the same for both of them?

James: Yeah. This is where things get crazier. What we will do now is take the H2 and make it an anchor. We will get it the anchor name. We don't want to scope here because --

JASON: Because it is already scoped to the containing list item?

James: No, the list item, the only thing that's scoped there is the image anchor name. If we could scope the H2 anchor name name by doing anchor scope dash-dash image comma dash-dash name it would scope both of them. But what we want to do, we don't want to scope it. We want the H2 or that anchor name to be referring to the last in the DOM before it because it has to be an anchor before it. We want the second one to be referring to the one right before it. The third to be referring to the one before it. In the top declaration for H2, instead of anchor image top, we will keep that but wrap it in a max, and we will say the max of image top and anchor, name bottom.

JASON: Is the list item -- that would be block? There is probably a very interesting reason on this but I don't know what it is.

James: I am curious to dive in and figure out what that is also. Why don't you make Bernie Load-in's name extra long because this is the fun part. Content always changes. Something happens. It just moves the next one down. We are just saying below the one above it. If you resize the screen show three show up, it automatically works.

JASON: This is the kind of stuff where if you told me to do this I would just say no, we aren't doing it that way. We are doing something else.

James: Up. This unlocks a bunch of fun things where like these are probably going to be links. You want to have, you know, shared hover state. If you add an LI hover -- oh, my God. Yes. Oh, no. I am so excited right now. Add a color for the text.

JASON: This is beautiful. How hard would this be without using this particular method?

James: I have it issues if it is really big DOM. But if you H2 the name, and add a transition, transition top .2 seconds. This is where it might hurt a little bit. But if you resize your view, you can see it move up. I would highly recommend not doing this in production. But it is a helpful way of seeing and what's going on. It is helpful to see how they stack on the one above them.

JASON: Some of this is causing a huge amount of recalculation and with lots of elements we might end up regretting this quite a bit.

James: And visually it hurts especially when you are down at the bottom. You know, things are slowing -- that's the yearbook play out example.

JASON: This is one of those things where somebody who likes to abuse code as art is going to come up with a great way to make that glitchyness into something amazing. This is super cool. That took us all of 20 minutes maybe.

James: I was intrigued about the comment about foot notes. I think I shared the final beautiful one. Not the

JASON: You want me to just knock out the CSS?

James: I think that should work. Again, here, we are trying to basically use a side note. You might throw it in footnote but you don't want someone clicking and go to the bottom and come back up. You just kind of want it off to the side. I have paragraphs of Lauren Ipsom and I have some asides and apologies for getting you the one that has a little bit of a cheat sheet in there. But I think here we have those items co-located. If you are using a screen reader or something you are still getting this flow.

JASON: This is something I struggled with. The way I implemented it wasn't great. I was trying to solve this problem but I wanted it to be hidden so I think I put it in a details element which is wrong. I shouldn't have done that.

James: Yeah.

JASON: So this is a little more logical. We have got the flow of the context and then here as an aside is additional information. If you turn off the styling, this doesn't look broken. Mine would have looked broken because this would be a details element that would then like completely blow out the nowhere -- flow. This is our side and this is the content being expanded upon. If you were reading a book, this is how that would be done. I am already pretty optimistic about this.

James: We will just throw some styles and anchors so we can see what they are. Anchor and I think the asides are just plain aside elements. On that anchor let's just give it a background color. Lavender or coral. We can style the body or the article itself. Max width 70%. Sorry for using physical properties here. And place item center. We are just positioning stuff around so we can see the effect here. Then what we want to do is pull those asides out of the flow with position absolute. I just added anchor name to each of the anchors. And down here there is another one. And then the aside. I am setting that default anchor with the position anchor declaration. Then we want to position the top of the aside. Do I just do this now? Anchor and in parenthesis. Now we want to move those over to the side. One helpful way that I remember is on the position element itself that's where you put all the position declaration. Position, position, anchor, position area, everything that starts with position. Now we have this sort of feel of things coming true. Little bit of chaos with the side note staying visible as the rest of the content stays off. On the side, we will put position dash visability.

JASON: Is this something you will mention casually that's about to change my whole life?

James: And then anchors-visible. We are saying when the anchor is visible, show it. It is not just living on forever way out of your view port.

JASON: You can see how I am responding and continuing to work and the layout is continuing to make sense. We are all in. 25 lines of CSS. That's massively improved over the ways we would have had to do this prior to CSS anchoring and anchoring positioning.

James: And maybe you want a word count at the bottom. So I just saw a comment -- can you make it fade in or out or is that not possible yet? That is not possible yet. I think that might be in a future level of anchoring positioning where they figure out how to do that but I don't think you can.

JASON: That will be the sort of thing where maybe you wanted a transition that would act the same way as display block versus display none where it would sort of fade in and out based on its visability. That would be nice. It doesn't like solve-solve the problem but it makes it feel like less janky. Exactly. It gets you close but -- yeah. Not fully there, I guess. At the moment, that would not be supported. We could not throw a transition on that and get there. I don't think so. I am trying to think. Yeah. I am trying to remember if you can -- can you animate between -- I think it is probably just display none or essentially -- can you animate doing display none and display block? It is not doing it here.

JASON: Not in a way that is immediately apparent to me. That would be a nice feature.

James: If we want to add a word count to the bottom, there is a border in there. Let's throw in word count 250 words or whatever. If we want that to stick to our element, this element is not currently inside the article.

JASON: Make it yellow.

James: If we want it to relate to the article anchor, if we give it a position absolute, then position, anchor article which would be if we do positionary bottom -- it wouldn't be block. That's not block end. Including if you resize the article size itself it sticks there. And then we can use anchor size as well to refer to thad width.

JASON: We can do anchor size width. There it goes.

James: You could do height and in that case for the width we would not have to specify the width. It knows to pull in the axis it is referring to. If we want to refer to the other one --

JASON: So we can do something chaotic.

James: Yeah, you can do calc on that and make it 1M wider than the height of the div. It is a flexible tool for whatever you want to do there.

JASON: That's nice because I will want the figure to be wider than the body copy because I want it to stand out but I don't want the text wider. It is nice type graphically so specifying that kind of stuff in the flow of things is really nice.

James: I like that it is super declarative. You can say I want this to relate to this thing or I want this to be 1M larger. I can say refer to this element and size based on that.

JASON: This is really powerful stuff. We have about 10 minutes left. Anything you want to show or do you want to run through resources?

James: I would say run through resources.

JASON: There was a good idea of from Eric to try starting style. Let's leave that as an exercise for the viewer and if you get it working tag us. That would be super cool. You can find James here as a reminder. There is links to GitHub and Mastodon here. You can find me on BlueSky. Wherever. I am around. You will know where I am. And let's see James at OddBird. You need any help building this stuff for your company, hit up OddBird. What else?

James: If you go search for anchoring positioning on our posts, we have a bunch of different articles I have written. Here is the debugging CSS anchoring positioning winging it which is a show we did on anchoring positioning which Akins Bitner. We have a CSS anchoring positioning repo where we are collecting the best of demos. There is some people who are --

JASON: Where does one find that repo?

James: It is OddBird awesome positioning. The anchor tool.com is a great resource. And another key point is currently in chromium browser. But we serve users who aren't just using chromium browsers. There is a polyfill.

JASON: I forgot we didn't talk about this. Here is the poly fill in action.

JASON: In theory, if you open this up in Firefox, it should work. This should import the anchoring positioning polyfill and just put it into there. Yeah, we have the polyfill there. It is under active development as much as we can. I am currently working on implementing positionary resources for that if anyone wants to use this at their company and can find a way for their company to fund it would be incredible. I am close to getting that over the finish line and want it out there in the world. You can definitely find out more about that there. And also if you are interested in digging more into it, we do offer like an office hours type of setup and really enjoy doing this with clients. Lets you book time with the birds for coaching and let's dive into your setup and figure out what is happening. We are open to figuring out how we can help you solve your problems.

JASON: I am super happy with that. I love we were able to get so much done. I love how approachable this is. As a reminder to everybody, this episode like every episode has been live captioned and I have apparently broken that website. Let's go over to the code TV website. We have had Maggie with us today from White Coat Captioning. Thank you, Maggie, for making this show more accessible. You can always find the captioning at LWJ/captions. We have more stuff coming up on Learn With Jason. Next week we will dive into how to build a game engine with TypeScript learning from Will King who is building a game engine in gleam. We will go through things like the game and render loop and all the stuff that will go into building a game. We are also going to be learning about how to use live get toolio to build a phone agent. It will be interesting to see how those pieces work together. We are actively scheduling more right now. If there is something you want to see on the show, make sure you leave a comment, like the video, subscribe and do all the things that let people know we are out here and having fun and learning. James, anything else you want to say before we wrap this one up?

James: No, it has been a pleasure. Make great things.

JASON: Thank you all for hanging out with us. We will see you all next time.