#oddbird

[funhaversclub]

Super OddBird?

Friends of mine own a pizza place and have a few arcade machines in there. Years ago I built a tabletop “arcade” and haven't done anything with it...

https://funhaversclub.tumblr.com/post/35130939687/this-is-part-1-of-2-ive-been-somewhat-shadowing

I figured I’d donate it to them... But I couldn’t just let them have any normal game! I waned to give them something special! Before the pizza place they started their bar OddBird so I wanted to make a video game for that. After pulling my hair out trying to program a game from scratch I decided to just take Super Mario World and make the characters look like a sketch I had done for them:

The old title screen and first level rough layout:

I Have most of the Small Mario sprites done. In Super OddBird you start as a little chick!

Ideally Mario and Luigi will look something like this. (These were from the custom game before I kiboshed that)

(sorry for the potato quality gif)

Remaking the Logo was a bit nutty...

...Hopefully I’ll finish this sooner than later. In the meantime if you’re in the area defiantly check out their establishments. 

PS: If you bring your own eggs and ask for a “Low Key Triggered” you’ll receive one of the best eggs benedict I’ve ever tasted... But that’s a secret... So good I had to sketch it.

PS2: I almost forgot... I also painted one of their washrooms with this neat animal theme!

[abeautifulmindapeacefulsoul]

Wednesday, November 23, ‘22

I apologize 

for these wild antics heard while

I’m jamming my jaw. 

-DMRoberts-

[sallygcronin]

Smorgasbord Blogger Spotlight 2023 - #Sisters Judith Barrow, #Health D.G. Kaye, #Reviews Jacquie Biggar, #Peace Rebecca Budd, #NewYear Liz Gauffreau, #OddBirds Cindy Knoke

Smorgasbord Blogger Spotlight 2023 – #Sisters Judith Barrow, #Health D.G. Kaye, #Reviews Jacquie Biggar, #Peace Rebecca Budd, #NewYear Liz Gauffreau, #OddBirds Cindy Knoke

A small selection of posts I have enjoyed recently and I hope you will head over to enjoy in full. Judith Barrow shares the fascinating and often tragic lives of three sisters, two of whom were also incredibly talented Virginia Woolf and her sister, the artist, Vanessa Bell, the daughters of the historian Sir Leslie Stephen and Julia Prinsep Duckworth. Head over discover the complex relationship…

[smorgasbordinvitation]

Smorgasbord Blogger Spotlight 2023 - #Sisters Judith Barrow, #Health D.G. Kaye, #Reviews Jacquie Biggar, #Peace Rebecca Budd, #NewYear Liz Gauffreau, #OddBirds Cindy Knoke

Smorgasbord Blogger Spotlight 2023 – #Sisters Judith Barrow, #Health D.G. Kaye, #Reviews Jacquie Biggar, #Peace Rebecca Budd, #NewYear Liz Gauffreau, #OddBirds Cindy Knoke

A small selection of posts I have enjoyed recently and I hope you will head over to enjoy in full. Judith Barrow shares the fascinating and often tragic lives of three sisters, two of whom were also incredibly talented Virginia Woolf and her sister, the artist, Vanessa Bell, the daughters of the historian Sir Leslie Stephen and Julia Prinsep Duckworth. Head over discover the complex relationship…

[lemonlyman-dotcom]

This Infinite Love

~Fic Fully Posted~

Hello! It is my honor and pleasure to kick off this year’s @tarlos-santa Secret Santa Event!! I’ve got a seven chapter fic for my giftee @emsprovisions, so I’ll be posting a chapter a day til Friday. Seven Days of Tarlos Christmas & Hanukkah joy! Note for Em: I hope you enjoy this one! I tried to incorporate all the soft holiday feels you wanted 🎁

T | 30k | Canon Compliant

Three years after adopting TK’s little brother, the Strand Reyes family has settled into a happy life. But when Jonah gets sick and is devastated to miss his big class Christmas party, his extended family rallies together to throw him a holiday party he’ll never forget. Join Carlos, TK & Jonah as they celebrate the holidays, reflect on the life they’ve built as a family and navigate some big life decisions along the way.

Chapter One: Baby, This Love I Have | Chapter Two: Love Is… | Chapter Three: LOVE. | Chapter Four: Melody of Love | Chapter Five: Get Down (With My Love) | Chapter Six: Sunshine of Your Love | Chapter Seven: The Sun Will Never Set on Our Love

Infinite thanks to @tarlos-santa for organizing and for allowing me to kick off the event! And to @bonheur-cafe for being an amazing beta! Thanks to the people who have encouraged me, let me bounce ideas off them, answered questions like what is the hot snack amongst the first graders and what Pokémon game Nancy and Mateo would play with a bunch of six year olds: @chicgeekgirl89 @shes-an-oddbird @carlos-in-glasses @guardian-angle22 @thisbuildinghasfeelings @laelipoo 💕

🎧 Playlist here!

Read on ao3

[lonestar-s5countdown]

We have a bit of a different game this week to help us all engage in some final season 5 speculation! Send some asks with emojis to get the speculation conversation going:

3️⃣ What are three things you’re hoping to see in season 5?

👬 What Tarlos moments are you most looking forward to?

🤗 Which character are you most excited to see in season 5?

🤏Which minor character(s) will we see again?

🍭 What new terms of endearment do you think we might hear from TK and Carlos?

💔 Which couple is most in danger of breaking up?

💒 Who is most likely to get married?

🔫 Who murdered Gabriel?

🔍 How will Grace’s absence be explained?

👩‍🚒 Who is going to take Judd’s lieutenant position?

🩹 How is Robert’s death going to impact Owen?

🚑 How does Nancy become captain?

🤠 What are your thots on the two belts and the rest of Carlos’ Ranger uniform?

💍 How will TK and Carlos celebrate their anniversary?

🧑‍🍼 What is going to happen with Jonah and Enzo?

👶 How old is Jonah?

🗻 How do you think Tommy and Trevor’s relationship will progress?

☎️ How will Wyatt do as the new dispatcher?

🕺 How does Judd make it back to the firehouse?

⚰️ Will anyone die this season?

Tagging some people who might be interested to help get us started:

@lemonlyman-dotcom @strandnreyes @she-walked-away @ladytessa74 @herefortarlos

@thisbuildinghasfeelings @paperstorm @heartstringsduet @alrightbuckaroo @happilylovingchaos

@fifthrideroftheapocalypse @literateowl @birdclowns @nancys-braids @emsprovisions

@tellmegoodbye @ironheartwriter @bonheur-cafe @tkslittlesway @theghostofashton

@goldenskykaysani @toomanycupsoftea @carlos-in-glasses @guardian-angle22 @reyesstrand

@welcometololaland @rmd-writes @lightningboltreader @tinyluminaryzombie @sugdenlovesdingle

@shes-an-oddbird @decafdino @butchreyes @corsage @the-126-family

[annoyingcloudearthquake]

WIP Wednesday!

I have something to share for this week! And again it’s from what is technically chapter 1 of the time loop fic lol Here yall go!

Mateo shot up out of bed, heart racing. His eyes darted around the room trying to process the trauma he experienced the night before. How did he end up here? Wasn’t he in the park? What happened to the woman? The young man attempted to calm his breathing, air soon rushing into his lungs. 

He distantly realized his alarm was still going off, music filling the room. He grabbed it with clumsy fingers but when the screen lit up he realized the date was wrong. Yesterday was Thursday so how was today Sunday? He stood there, mind racing trying to come up with solutions. Did he dream the entire week? Was that even possible? 

No pressure tagging @lemonlyman-dotcom, @shes-an-oddbird, @the-126-family, @bonheur-cafe, @she-walked-away, @whatsintheboxmh, @thisbuildinghasfeelings, @ladytessa74, @butchreyes, @morganaspendragonss, @guardian-angle22, @marjansmarwani, @tellmegoodbye and anyone else who’d like to join!

if anybody wants to be removed from this list please let me know, I’m new to this and am not sure who wishes to be tagged 😅

also @vulcanmourns bc you’re complaining right next to me

[xxgoblin-dumplingxx]

Okay wait I’m so excited about oddbird???? I’d love to see her infodumping about something she’s excited about and catches herself and kindly quietly apologizes but Bruce is like “???? Keep going? I was enjoying it”

"Clark they're perfect," Lois hissed, "look at him-"

Clark frowned, Bruce was hardly someone he'd want you dating- even if he couldn't really stop you- Or Lois from encouraging you to do it- his Ma would kill him.

Ever since you were kids, she's pounded into his head that you were fragile- a lot more fragile than him. And that it was his job, if he was going to take you with him adventuring, to keep you safe. And letting you get involved with the Batman, was not safe.

Still. As he listened to you, patiently explaining the importance of books on cookery written in the 1500's- specifically Philippine Welser, and watched the World's Greatest detective actively fascinated. He couldn't deny that you could always do with another friend.

He felt guilty, sometimes. Having a wife and a whole double life and less time to spend with you. You'd just been there. As long as he could remember. And the last time you'd moved, he hadn't even known until you'd emailed him a list of new addresses and places he could reach you whle you were working.

"Y/N this is all great but what does this-" Lois started, now flummoxed by what Philippine and her Cook book had to do with... anything.

You break off with a cough and look down, giving them a sheepish smile. "Sorry- I- rabbit holes. One thing runs into the next and-"

"No," Bruce interjected, "It's fascinating, really, Doctor- the common herbs and the ways they were used for medicine and Alchemy- it's not much of a leap." "Alchemy?" Lois asked, "Trying to turn Lead to gold now, Y/N?"

"No," you snort, "Nothing so ambitious. But. The Hapsburg line does have deep roots with the Golden Fleece."

"Still looking for that?" Clark asked, "Why-"

"Why not?" you ask, "If Atlantis and Amazons can exist, maybe this isn't just a fairy tale either."

In the back of his head, he can still see you. Beaming at him. A new book on something clutched against your chest. Bought with money from your birthday and endless hours looking for cans and bottles to recycle. You'd read it until every detail was in your mind. And he tried not to hear Bruce's heart rate kick up a notch when you turned to go back to what you'd been sketching out for them. A roadmap to what they were looking for- A way to stop the end of the world. Cobbled together from a lifetime of falling into rabbit holes.

"See?" Lois murmured, patting his arm, "he's hooked-"

"Stop," Clark said abruptly. Cutting you off mid sentence, wincing internally when you look confused. Thinking you'd wandered off topic again. "Y/N thank you. You don't have to stay you can-"

"Of course," you murmur. Looking down at the papers on the table. "If you need anything else-"

"We'll call," Clark said firmly. Trying not to squirm as you shoulder your bag. Making yourself smaller. Pulling your enthusiasm back and tucking it away. Like he'd seen you do anytime you didn't feel like being noticed anymore. Because being noticed was dangerous. "You go with her Lois-"

"Clark!" She looked at you for back up but before she can get her protests out, or before you can have to watch your friends do a whole dramatic good bye make out- you're gone. Winding your way back the way you came, out the the university archives and into the hall. Burying yourself in plans for books on Philippine and Jepp and other figures that tended to be overlooked. Stories that still felt like they needed to be told. Properly.

[airsllides]

Airsllide No. 10138: N510DA, Boeing 727-232 Adv., Delta Air Lines, San Diego, February 6, 1994.

Take a second look at this Delta Boeing 727 - did you notice the winglets? N510DA was one of two 727s the carrier fitted with winglets in 1993 in order to test the effects in terms of fuel savings. Given the short service period left, the benefits compared to the investment did obviously not justify re-fitting the rest of the fleet, and N510DA together with her sister N511DA remained the only two oddbirds in Delta's 196 units strong Boeing 727 fleet.

[enchantedchocolatebars]

Hc: In terms of children's books, I think Kid Caleb would like "Oddbird" (the birds are so pretty and colorful + he likes the ending) and "Giggle, Giggle, Quack" (it's super silly + he finds the duck funny) and Kid Philip would like "The Artist Who Painted A Blue Horse" (the book features a blue horse and other colored animals) and "Where the Wild Things Are" (the boy is feral and so is he).

[djangogirls]

OddBird joins as Django Girls Global Partner!

Happy New Year!

We are excited to start the year by announcing a great company joining us as a global partner - OddBird!

OddBird collaborates with teams at mid-size and large companies to plan, design, and develop custom web applications and design systems. As thoughtful experts, they love to help their clients improve team workflow, lower maintenance costs, and solve problems with technology that help people. They provide the full range of services from brand design, user research, and project management, to Python on the backend, CSS/Sass on the frontend, and JavaScript.

OddBird was founded in 2008 by three siblings with a vision for human-centered software design and development on the web, especially focused on accessibility, performance, integrated design systems, and long-term sustainability. Since then, OddBird has become an industry leader – from our work on Django, Sass, and Susy, to the W3C, Mozilla Developer Channel, Object-Oriented UX, and in-depth conference talks on front-end architecture, workflow, component libraries, testing, and documentation. 

Their clients get to know their tight-knit team on a first-name basis. OddBird is intentionally small, enabling them to move nimbly and integrate with teams at larger companies like Adobe, Google, Mozilla, and SRAM for a big impact. They all learn what makes each project special, and strategize together – keeping the backend, frontend, and design integrated for a shared understanding of each company's goals and user needs.

OddBird staff frequently give conference talks and workshops, write articles and speak on podcasts to teach people how to create more resilient web applications and design systems – improving team processes, communication, site performance, and accessibility.

OddBird has supported us in the past for years through Patreon and we are excited to have them back as our Silver sponsor. 

Thank you OddBird!

Django Girls Foundation is looking for more corporate sponsors to join as global partners. For more information on our corporate sponsorships, please see our sponsorship deck or email fundraising@djangogirls.org. You can also visit our Patreon page for monthly donations. 

[jcmarchi]

One of Those “Onboarding” UIs, With Anchor Positioning

New Post has been published on https://thedigitalinsider.com/one-of-those-onboarding-uis-with-anchor-positioning/

One of Those “Onboarding” UIs, With Anchor Positioning

Welcome to “Anchor Positioning 101” where we will be exploring this interesting new CSS feature. Our textbook for this class will be the extensive “Anchor Positioning Guide” that Juan Diego Rodriguez published here on CSS-Tricks.

I’m excited for this one. Some of you may remember when CSS-Tricks released the “Flexbox Layout Guide” or the “Grid Layout Guide” — I certainly do and still have them both bookmarked! I spend a lot of time flipping between tabs to make sure I have the right syntax in my “experimental” CodePens.

I’ve been experimenting with CSS anchor positioning like the “good old days” since Juan published his guide, so I figured it’d be fun to share some of the excitement, learn a bit, experiment, and of course: build stuff!

CSS Anchor Positioning introduction

Anchor positioning lets us attach — or “anchor” — one element to one or more other elements. More than that, it allows us to define how a “target” element (that’s what we call the element we’re attaching to an anchor element) is positioned next to the anchor-positioned element, including fallback positioning in the form of a new @position-try at-rule.

The most hand-wavy way to explain the benefits of anchor positioning is to think of it as a powerful enhancement to position: absolute; as it helps absolutely-positioned elements do what you expect. Don’t worry, we’ll see how this works as we go.

Anchor positioning is currently a W3C draft spec, so you know it’s fresh. It’s marked as “limited availability” in Baseline which at the time of writing means it is limited to Chromium-based browsers (versions 125+). That said, the considerate folks over at Oddbird have a polyfill available that’ll help out other browsers until they ship support.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Firefox IE Edge Safari 125 No No 125 No

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari 131 No 131 No

Oddbird contributes polyfills for many new CSS features and you (yes, you!) can support their work on Github or Open Collective!

Tab Atkins-Bittner, contributing author to the W3C draft spec on anchor positioning, spoke on the topic at CSS Day 2024. The full conference talk is available on YouTube:

Here at CSS-Tricks, Juan demonstrated how to mix and match anchor positioning with view-driven animations for an awesome floating notes effect:

Front-end friend Kevin Powell recently released a video demonstrating how “CSS Popover + Anchor Positioning is Magical”.

And finally, in the tradition of “making fun games to learn CSS,” Thomas Park released Anchoreum (a “Flexbox Froggy“-type game) to learn about CSS anchor positioning. Highly recommend checking this out to get the hang of the position-area property!

The homework

OK, now that we’re caught up on what CSS anchor positioning is and the excitement surrounding it, let’s talk about what it does. Tethering an element to another element? That has a lot of potential. Quite a few instances I can remember where I’ve had to fight with absolute positioning and z-index in order to get something positioned just right.

Let’s take a quick look at the basic syntax. First, we need two elements, an anchor-positioned element and the target element that will be tethered to it.

<!-- Anchor element --> <div id="anchor"> Anchor </div> <!-- Target element --> <div id="target"> Target </div>

We set an element as an anchor-positioned element by providing it with an anchor-name. This is a unique name of our choosing, however it needs the double-dash prefix, like CSS custom properties.

#anchor anchor-name: --anchor;

As for our target element, we’ll need to set position: absolute; on it as well as tell the element what anchor to tether to. We do that with a new CSS property, position-anchor using a value that matches the anchor-name of our anchor-positioned element.

#anchor anchor-name: --anchor; #target position: absolute; position-anchor: --anchor;

May not look like it yet, but now our two elements are attached. We can set the actual positioning on the target element by providing a position-area. To position our target element, position-area creates an invisible 3×3 grid over the anchor-positioned element. Using positioning keywords, we can designate where the target element appears near the anchor-positioned element.

#target position: absolute; position-anchor: --anchor; position-area: top center;

Now we see that our target element is anchored to the top-center of our anchor-positioned element!

Anchoring pseudo-elements

While playing with anchor positioning, I noticed you can anchor pseudo-elements, just the same as any other element.

#anchor anchor-name: --anchor; &::before content: "Target"; position: absolute; position-anchor: --anchor; left: anchor(center); bottom: anchor(center);

Might be useful for adding design flourishes to elements or adding functionality as some sort of indicator.

Moving anchors

Another quick experiment was to see if we can move anchors. And it turns out this is possible!

Notice the use of anchor() functions instead of position-area to position the target element.

#target position: absolute; position-anchor: --anchor-one; top: anchor(bottom); left: anchor(left);

CSS anchor functions are an alternate way to position target elements based on the computed values of the anchor-positioned element itself. Here we are setting the target element’s top property value to match the anchor-positioned element’s bottom value. Similarly, we can set the target’s left property value to match the anchor-positioned element’s left value.

Hovering over the container element swaps the position-anchor from --anchor-one to --anchor-two.

.container:hover #target position-anchor: --anchor-two;

We are also able to set a transition as we position the target using top and left, which makes it swap smoothly between anchors.

Extra experimental

Along with being the first to release CSS anchor-positioning, the Chrome dev team recently released new pseudo-selectors related to the <details> and <summary> elements. The ::details-content pseudo-selector allows you to style the “hidden” part of the <details> element.

With this information, I thought: “can I anchor it?” and sure enough, you can!

Again, this is definitely not ready for prime-time, but it’s always fun to experiment!

Practical examinations

Let’s take this a bit further and tackle more practical challenges using CSS anchor positioning. Please keep in mind that all these examples are Chrome-only at the time of writing!

Tooltips

One of the most straightforward use cases for CSS anchor positioning is possibly a tooltip. Makes a lot of sense: hover over an icon and a label floats nearby to explain what the icon does. I didn’t quite want to make yet another tutorial on how to make a tooltip and luckily for me, Zell Liew recently wrote an article on tooltip best practices, so we can focus purely on anchor positioning and refer to Zell’s work for the semantics.

Now, let’s check out one of these tooltips:

<!-- ... -->; <li class="toolbar-item">; <button type="button" id="inbox-tool" aria-labelledby="inbox-label" class="tool"> <svg id="inbox-tool-icon"> <!-- SVG icon code ... --> </svg> </button> <div id="inbox-label" role="tooltip"> <p>Inbox</p> </div> </li> <!-- ... -->

The HTML is structured in a way where the tooltip element is a sibling of our anchor-positioned <button>, notice how it has the [aria-labelledby] attribute set to match the tooltip’s [id]. The tooltip itself is a generic <div>, semantically enhanced to become a tooltip with the [role="tooltip"] attribute. We can also use [role="tooltip"] as a semantic selector to add common styles to tooltips, including the tooltip’s positioning relative to its anchor.

First, let’s turn our button into an anchored element by giving it an anchor-name. Next, we can set the target element’s position-anchor to match the anchor-name of the anchored element. By default, we can set the tooltip’s visibility to hidden, then using CSS sibling selectors, if the target element receives hover or focus-visible, we can then swap the visibility to visible.

/* Anchor-positioned Element */ #inbox-tool anchor-name: --inbox-tool; /* Target element */ [role="tooltip"]#inbox-label position-anchor: --inbox-tool /* Target positioning */ [role="tooltip"] position: absolute; position-area: end center; /* Hidden by default */ visibility: hidden; /* Visible when tool is hovered or receives focus */ .tool:hover + [role="tooltip"], .tool:focus-visible + [role="tooltip"] visibility: visible;

Ta-da! Here we have a working, CSS anchor-positioned tooltip!

As users of touch devices aren’t able to hover over elements, you may want to explore toggletips instead!

Floating disclosures

Disclosures are another common component pattern that might be a perfect use case for anchor positioning. Disclosures are typically a component where interacting with a toggle will open and close a corresponding element. Think of the good ol’ <detail>/<summary> HTML element duo, for example.

Currently, if you are looking to create a disclosure-like component which floats over other portions of your user interface, you might be in for some JavaScript, absolute positioning, and z-index related troubles. Soon enough though, we’ll be able to combine CSS anchor positioning with another newer platform feature [popover] to create some incredibly straightforward (and semantically accurate) floating disclosure elements.

The Popover API provides a non-modal way to elevate elements to the top-layer, while also baking in some great functionality, such as light dismissals.

Zell also has more information on popovers, dialogs, and modality!

One of the more common patterns you might consider as a “floating disclosure”-type component is a dropdown menu. Here is the HTML we’ll work with:

<nav> <button id="anchor">Toggle</button> <ul id="target"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav>

We can set our target element, in this case the <ul>, to be our popover element by adding the [popover] attribute.

To control the popover, let’s add the attribute [popoveraction="toggle"] to enable the button as a toggle, and point the [popovertarget] attribute to the [id] of our target element.

<nav> <button id="anchor" popoveraction="toggle" popovertarget="target"> Toggle </button> <ul id="target" popover> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav>

No JavaScript is necessary, and now we have a toggle-able [popover] disclosure element! The problem is that it’s still not tethered to the anchor-positioned element, let’s fix that in our CSS.

First, as this is a popover, let’s add a small bit of styling to remove the intrinsic margin popovers receive by default from browsers.

ul[popover] margin: 0;

Let’s turn our button into an anchor-positioned element by providing it with an anchor-name:

ul[popover] margin: 0; #anchor anchor-name: --toggle;

As for our target element, we can attach it to the anchor-positioned element by setting its position to absolute and the position-anchor to our anchor-positioned element’s anchor-name:

ul[popover] margin: 0; #anchor anchor-name: --toggle; #target position: absolute; position-anchor: --toggle;

We can also adjust the target’s positioning near the anchor-positioned element with the position-area property, similar to what we did with our tooltip.

ul[popover] margin: 0; #anchor anchor-name: --toggle; #target position: absolute; position-anchor: --toggle; position-area: bottom; width: anchor-size(width);

You may notice another CSS anchor function in here, anchor-size()! We can set the target’s width to match the width of the anchor-positioned element by using anchor-size(width).

There is one more neat thing we can apply here, fallback positioning! Let’s consider that maybe this dropdown menu might sometimes be located at the bottom of the viewport, either from scrolling or some other reason. We don’t really want it to overflow or cause any extra scrolling, but instead, swap to an alternate location that is visible to the user.

Anchor positioning makes this possible with the postion-try-fallbacks property, a way to provide an alternate location for the target element to display near an anchor-positioned element.

#target position: absolute; position-anchor: --toggle; position-area: bottom; postion-try-fallbacks: top; width: anchor-size(width);

To keep things simple for our demo, we can add the opposite value of the value of the postion-area property: top.

Shopping cart component

We know how to make a tooltip and a disclosure element, now let’s build upon what we’ve learned so far and create a neat, interactive shopping cart component.

Let’s think about how we want to mark this up. First, we’ll need a button with a shopping cart icon:

<button id="shopping-cart-toggle"> <svg id="shopping-cart-icon" /> <!-- SVG icon code ... --> </svg> </button>

We can already reuse what we learned with our tooltip styles to provide a functioning label for this toggle. Let’s add the class .tool to the button, then include a tooltip as our label.

<!-- Toggle --> <button id="shopping-cart-toggle" aria-labelledby="shopping-cart-label" class="tool"> <svg id="shopping-cart-icon" /> <!-- SVG icon code ... --> </svg> </button> <!-- Tooltip --> <div id="shopping-cart-label" role="tooltip" class="tooltip"> <p>Shopping Cart</p> </div>

We’ll need to specify our <button> is an anchor-positioned element in CSS with an anchor-name, which we can also set as the tooltip’s position-anchor value to match.

button#shopping-cart-toggle anchor-name: --shopping-cart-toggle; [role="tooltip"]#shopping-cart-label position-anchor: --shopping-cart-toggle;

Now we should have a nice-looking tooltip labeling our shopping cart button!

But wait, we want this thing to do more than that! Let’s turn it into a disclosure component that reveals a list of items inside the user’s cart. As we are looking to have a floating user-interface with a few actions included, we should consider a <dialog> element. However, we don’t necessarily want to be blocking background content, so we can opt for a non-modal dialog using the[popover] attribute again!

<!-- Toggle --> <button id="shopping-cart-toggle" aria-labelledby="shopping-cart-label" class="tool" popovertarget="shopping-cart" popoveraction="toggle"> <svg id="shopping-cart-icon" /> <!-- SVG icon code ... --> </svg> </button> <!-- Tooltip --> <div id="shopping-cart-label" role="tooltip" class="tooltip"> <p>Shopping Cart</p> </div> <!-- Shopping Cart --> <dialog id="shopping-cart" popover> <!-- Shopping cart template... --> <button popovertarget="shopping-cart" popoveraction="close"> Dismiss Cart </button> </dialog>

To control the popover, we’ve added [popovertarget="shopping-cart"] and [popoveraction="toggle"] to our anchor-positioned element and included a second button within the <dialog> that can also be used to close the dialog with [popoveraction="close"].

To anchor the shopping cart <dialog> to the toggle, we can set position-anchor and position-area:

#shopping-cart position-anchor: --shopping-cart; position-area: end center;

At this point, we should take a moment to realize that we have tethered two elements to the same anchor!

We won’t stop there, though. There is one more enhancement we can make to really show how helpful anchor positioning can be: Let’s add a notification badge to the element to describe how many items are inside the cart.

Let’s place the badge inside of our anchor-positioned element this time.

<!-- Toggle --> <button id="shopping-cart-toggle" aria-labelledby="shopping-cart-label" class="tool" popovertarget="shopping-cart" popoveraction="toggle"> <svg id="shopping-cart-icon" /> <!-- SVG icon code ... --> </svg> <!-- Notification Badge --> <div id="shopping-cart-badge" class="notification-badge"> 1 </div> </button> <!-- ... -->

We can improve our tooltip to include verbiage about how many items are in the cart:

<!-- Tooltip --> <div id="shopping-cart-label" role="tooltip"> <p>Shopping Cart</p> <p>(1 item in cart)</p> </div>

Now the accessible name of our anchor-positioned element will be read as Shopping Cart (1 item in cart), which helps provide context to assistive technologies like screen readers.

Let’s tether this notification badge to the same anchor as our tooltip and shopping cart <dialog>, we can do this by setting the position-anchor property of the badge to --shopping-cart-toggle:

#shopping-cart-badge position: absolute; position-anchor: --shopping-cart-toggle;

Let’s look at positioning. We don’t want it below or next to the anchor, we want it overlapping, so we can use CSS anchor functions to position it based on the anchor-positioned element’s dimensions.

#shopping-cart-badge position: absolute; position-anchor: --shopping-cart-toggle; bottom: anchor(center); left: anchor(center);

Here we are setting the bottom and left of the target element to match the anchor’s center. This places it in the upper-right corner of the SVG icon!

Folks, this means we have three elements anchored now. Isn’t that fantastic?

Combining things

To put these anchor-positioned elements into perspective, I’ve combined all the techniques we’ve learned so far into a more familiar setting:

Disclosure components, dropdown menus, tooltips (and toggletips!), as well as notification badges all made much simpler using CSS anchor positioning!

Final project

As a final project for myself (and to bring this whole thing around full-circle), I decided to try to build a CSS anchor-positioned-based onboarding tool. I’ve previously attempted to build a tool like this at work, which I called “HandHoldJS” and it… well, it didn’t go so great. I managed to have a lot of the core functionality working using JavaScript, but it meant keeping track of quite a lot of positions and lots of weird things kept happening!

Let’s see if we can do better with CSS anchor positioning.

Feel free to check out the code on CodePen! I went down quite a rabbit hole on this one, so I’ll provide a bit of a high-level overview here.

<hand-hold> is a native custom element that works entirely in the light DOM. It sort of falls into the category of an HTML web component, as it is mostly based on enabling its inner HTML. You can specify tour stops to any element on the page by adding [data-tour-stop] attributes with values in the order you want the tour to occur.

Inside the <hand-hold> element contains a <button> to start the tour, a <dialog> element to contain the tour information, <section> elements to separate content between tour stops, a fieldset[data-handhold-navigation] element which holds navigation radio buttons, as well as another <button> to end the tour.

Each <section> element corresponds to a tour stop with a matching [data-handhold-content] attribute applied. Using JavaScript, <hand-hold> dynamically updates tour stops to be anchor-positioned elements, which the <dialog> can attach itself (there is a sneaky pseudo-element attached to the anchor to highlight the tour stop element!).

Although the <dialog> element is attached via CSS anchor positioning, it also moves within the DOM to appear next to the anchor-position element in the accessibility tree. The (well-meaning) intention here is to help provide more context to those who may be navigating via assistive devices by figuring out which element the dialog is referring to. Believe me, though, this thing is far from perfect as an accessible user experience.

Also, since the <dialog> moves throughout the DOM, unfortunately, a simple CSS transition would not suffice. Another modern browser feature to the rescue yet again, as we can pass a DOM manipulation function into a View Transition, making the transitions feel smoother!

There is still quite a lot to test with this, so I would not recommend using <hand-hold> in a production setting. If for no other reason than browser support is quite limited at the moment!

This is just an experiment to see what I could cook up using CSS anchor positioning, I’m excited for the potential!

Class dismissed!

After seeing what CSS anchor positioning is capable of, I have suspicions that it may change a lot of the ways we write CSS, similar to the introduction of flexbox or grid.

I’m excited to see what other user interface patterns can be accomplished with anchor positioning, and I’m even more excited to see what the community will do with it once it’s more broadly available!

[streetsofsligo]

hitcher ⁉ oddbird some of these letters don't exist in our alphabet

[giftideasfromaycaramba]

It's okay to be exactly who you are. This is an inspiring and heartwarming found family narrative that's perfect for modern times.

[funhaversclub]

Next door to Oddbird is a luvly board game cafe called Ludology.

I made a little homage to them in the form of a SNES game case!

Instead of Mario riding Yoshi, it is the store owner! The background is the street the cafe is on! If you look close... all the info on the box has to do with Ludology!

Check them out!

Here's Ludology:

[lemonlyman-dotcom]

Hello Fire Fam!!!!

FINALLY!!!!!! We are one hour out from LONE STAR EPISODE SEVEN!!! I am once again asking you to tell us about your snack situation for tonight!!!

Are you joyously hoisting a massive avocado like TK 👆 or fighting to the death over an ice cream sammich like Enzo and Owen 👇

I have TAMALES!!!!!!! So I automatically win heheheheee

Rb and let us know when your set up is!!!!!!!!

Tagging some folks who I know are watching but everyone, if you see this, please participate 🥰

@herefortarlos @reyesstrand @chicgeekgirl89 @guardian-angle22 @thisbuildinghasfeelings @ladytessa74 @tellmegoodbye @emsprovisions @sapphic--kiwi @lonestardust @literateowl @lightningboltreader @paperstorm @bonheur-cafe @honeybee-taskforce @heartstringsduet @nisbanisba @she-walked-away @shes-an-oddbird @firstprince-history-huh @reeeallygood @laelipoo @the-126-family @alrightbuckaroo