#CSSAnchorPositioning

1 post1 participant0 posts today

Zacky MaSeems this is a browser bug (but Edge stable and Safari TP both have the same issue) or maybe I don't understand `position-area` right, but if you use CSSOM to set multiple values to `position-area` with one of them being `span-all`, `span-all` would be ignored/removed. <a href="https://m.marchbox.com/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://m.marchbox.com/tags/CSSOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSOM</a> <a href="https://m.marchbox.com/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a><a href="https://codepen.io/marchbox/pres/wBBryoz" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/marchbox/pres/wBBryoz</a>

kaiserkiwi :kiwibird:Wanted to play around with <a href="https://corteximplant.com/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a>. Everything works in Chrome but the Polyfill just positions every element in the top left in Safari and Firefox.Bummer… So I probably won't try this the next two years again and still fight this challenge with JavaScript. Really wanted this to work, but for such a small thing (that is solved with JavaScript for years) that's just too much work yet.<a href="https://corteximplant.com/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://corteximplant.com/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Coding</a> <a href="https://corteximplant.com/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

westbrook<a href="https://front-end.social/@kizu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@kizu</a> CSS Anchor positioning, please and thank you!🙏 🙇 👼 <a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a> <a href="https://mastodon.social/tags/webkit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webkit</a> <a href="https://mastodon.social/tags/mozilla" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mozilla</a>

westbrook<a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jensimmons</a> Would love it if I could use <a href="https://caniuse.com/css-overflow-anchor" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://caniuse.com/css-overflow-anchor</a> cross browser. More advanced scroll layouts really get slick with this added and it's too bad the way this needs to be polyfilled with JS to work in <a href="https://mastodon.social/tags/WebKit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebKit</a>.<a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a>

westbrookLiving on the double edge with this <a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a> API lately. Cool to see the APIs getting closer, but the today is `position-anchor`, yesterday it's `inset-area`, tomorrow it's something else is a bit dizzying when you're hopping back and forth between 6+ Chromium variants for testing and developments. 🫠 🌀 😵‍💫

westbrook<a href="https://front-end.social/@kizu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@kizu</a> Caught an interesting bug here... seems that a parent with "transform" related styling will confused "position-anchor" resolution. 🐛 <a href="https://issues.chromium.org/issues/364318220" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://issues.chromium.org/issues/364318220</a>If you'd love this to be fixed too, remember to add your "+1" to support Chromium Devs in understanding the priority of issues like these. 🙇 <a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a> <a href="https://mastodon.social/tags/testTheWebForward" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#testTheWebForward</a> <a href="https://mastodon.social/tags/chrome" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#chrome</a>

westbrookHey <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> friends! Looking at CSS Anchor Positioning... I've got an arrow on a tooltip, what's the path to _knowing_ which `position-try-fallbacks` is actually being leveraged to ensure the tooltip is displayed correctly?<a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a> <a href="https://mastodon.social/tags/whatAmIMissing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#whatAmIMissing</a>

westbrook<a href="https://mastodon.social/tags/CSSQuestions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSQuestions</a> <a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a> <a href="https://mastodon.social/tags/confused" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#confused</a> I should be able to make <a href="https://codepen.io/Westbrook/pen/wvLBwLP" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/Westbrook/pen/wvLBwLP</a> look like <a href="https://codepen.io/Westbrook/pen/QWXwWWx" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/Westbrook/pen/QWXwWWx</a> even though the earlier uses `position: fixed` and the later does not, right? :thinkhappy:

westbrookNow that CSS Anchor Positioning allows us to "name a reference" in CSS, do we need being able to consume the value of `:nth-child` or similar when naming things?Something like:a { anchor-name: --link-${indexOf}; }So we could anchor to ANY `<a>` on a page without needing to explicitly give each one of those an `anchor-name`?I don't much know the View Transitions API, but maybe it could benefit from similar?<a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a> <a href="https://mastodon.social/tags/CSSNaming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSNaming</a> <a href="https://mastodon.social/tags/CSSNext" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSNext</a>

pablolarah🔵⚪️ Let’s hang! An intro to CSS Anchor Positioning with basic examples by Brecht De Ruyte @utilitybend <a href="https://front-end.social/@utilitybend" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@utilitybend</a> <a href="https://mastodon.social/tags/CSSAnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSAnchorPositioning</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/AnchorPositioning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AnchorPositioning</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://utilitybend.com/blog/lets-hang-an-intro-to-css-anchor-positioning-with-basic-examples" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://utilitybend.com/blog/lets-hang-an-intro-to-css-anchor-positioning-with-basic-examples</a>

Recent searches

Search options

Administered by:

Server stats:

#cssanchorpositioning