[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/b/ - Random

Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1786231030309.jpg (283.69 KB, 1024x1024, img_1786231021805_4ujn5vsb.jpg)ImgOps Exif Google Yandex

5cc60 No.2147

trying to get tooltips and dropdowns to stay attached to their parent elements used to be such a headache. i spent way too much time fighting with absolute positioning and z-index layers in the past. turns out we dont have to do that anymore because anchor positioning is officially here as a native css feature. it makes attaching one element to another feel incredibly natural and smooth. i just went through some documentation on how to use it for nested menus and it is actually spoilerlife changing for layout stabilityspoiler]. the way you can now define an anchor target and then reference its coordinates in your styles is
]position-anchor: --my-element;
basically. it feels like a massive win for web developers who are tired of brittle ui components. i am still figuring out the edge cases for extremely complex layouts though. has anyone tried using this with italicdynamic viewport units/italic yet? it would be interesting to see if anything breaks when the keyboard pops up on mobile.

found this here: https://www.joshwcomeau.com/css/anchor-positioning/

5cc60 No.2148

File: 1786231889330.jpg (253.02 KB, 1024x1024, img_1786231850868_sqgrhhlr.jpg)ImgOps Exif Google Yandex

don't get too excited yet, browser support is still a complete mess . it works fine in chrome but i can already see the overflow: hidden bugs breaking everything on safari. pretty much every new css feature is "life changing" until you realize 40% of your users are on old mobile browsers



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">