--- title: "A peek at CSS Anchor positioning" publication: "Frontend Focus" issue: 639 published_at: "2024-04-17" canonical_url: "https://frontendfoc.us/issues/639" --- Plus popover in Firefox, and View Transitions in Safari. | Together with [![Fusion Auth\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_512,h_127/e_make_transparent/co_white,e_outline:15/es9kzxpnghhbbctheomi.png)](https://fusionauth.io/docs/quickstarts/?utm_source=frontend_focus&utm_medium=newsletter&utm_campaign=apr24_newsletter&utm_term=quickstarts&utm_content=apr24_primary) ๐Ÿš€ **Frontend** Focus #โ€‹639 โ€” April 17, 2024 | [Read on the web](https://frontendfoc.us/issues/639) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1713356664/y0fkqmye4fifg0r4ejz8.png)](http://anchor-tool.com/) [Anchor Position Tool](http://anchor-tool.com/) โ€” CSS anchor positioning is on the way, and one rather neat layout mechanism thatโ€™s part of the spec is `inset-area`. This (Chrome Canary only) demo from Una demonstrates how it works. Itโ€™s super early days for this (_you can [see the draft spec here](https://www.w3.org/TR/css-anchor-position-1/)_) but it should prove rather powerful once widely available. Una Kravets [iOS404](https://ios404.com/) โ€” An overview of all of the missing web features in iOS. Thereโ€™s over 60, and some of the missing features may surprise you (many are over a decade old). Shalanah Dawson [![\](https://copm.s3.amazonaws.com/a8570710.jpg)](https://fusionauth.io/docs/quickstarts/?utm_source=frontend_focus&utm_medium=newsletter&utm_campaign=apr24_newsletter&utm_term=quickstarts&utm_content=apr24_primary) [Auth for Every App](https://fusionauth.io/docs/quickstarts/?utm_source=frontend_focus&utm_medium=newsletter&utm_campaign=apr24_newsletter&utm_term=quickstarts&utm_content=apr24_primary) โ€” The best frontend developers deserve the best auth service. Add MFA, SSO, biometrics and advanced threat detection with just a few clicks. Find out for yourself using our easy quickstart guides (there may even be a t-shirt to sweeten the deal). FusionAuth sponsor [Modern CSS Patterns in Campfire](https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/) โ€” Advancements in CSS, such as `:has()`, `oklch()`, and others allow developers to replace client- and server-side code with CSS properties, enabling behavior that was previously difficult to impossible, all without a framework. Jason Zimdars (37signals) [Optimizing WebKit & Safari for Speedometer 3.0](https://webkit.org/blog/15249/optimizing-webkit-safari-for-speedometer-3-0/) โ€” Speedometer 3.0 was [introduced back in March](https://webkit.org/blog/15131/speedometer-3-0-the-best-way-yet-to-measure-browser-performance/), and now this post looks at what positive results the optimizations have bought about for Safari. WebKit โšก๏ธ Quick Links - ๐ŸŽฅ The latest version of Firefox [adds in support](https://www.mozilla.org/en-US/firefox/125.0.1/releasenotes/) for the AV1 video codec and [the native popover element](https://twitter.com/jdevalk/status/1780511519941300474). - ๐Ÿงญ ..and [the latest preview build](https://webkit.org/blog/15260/release-notes-for-safari-technology-preview-192/) of Safari adds support for View Transitions. - ๐Ÿ”Š Chrome now [requires user permission](https://developer.chrome.com/blog/web-midi-permission-prompt) for access to MIDI devices. - ๐ŸŽจ Last week we shared [the latest release of Color.js](https://github.com/color-js/color.js/releases/tag/v0.5.0) โ€” but in error called it version 5.0 โ€” it is in fact version 0.5.0. - ๐ŸŒฑ [This article](https://www.noemamag.com/we-need-to-rewild-the-internet/) calls into question a 'monoculture' brought about by walled web gardens, and makes the case for 'rewilding' the internet. โ–ถ[New in Chrome 124: setHTMLUnsafe, Streams in WebSockets, & More](https://www.youtube.com/watch?v=Io5d28IETrg) โ€” Plus here's a [run down of what's new in DevTools](https://developer.chrome.com/blog/new-in-devtools-124) for Chrome 124 too. Pete LePage (Chrome for Developers) ๐Ÿ—“๏ธ [Building Interactive Docs with the WebContainer API and StackBlitz SDK](https://www.crowdcast.io/c/stackblitz-interactive-docs?utm_source=fe-focus&utm_medium=secondary) โ€” Join StackBlitz's live stream later today on building interactive developer documentation. StackBlitz sponsor ๐Ÿ“™ **Tutorials, Articles & Opinion** [CSS in React Server Components](https://www.joshwcomeau.com/react/css-in-rsc/) โ€” An exploration of compatibility issues between React Server Components and CSS-in-JS libraries like styled-components, including what some of your options are and whatโ€™s coming in future. Josh W Comeau [Gap is the New Margin](https://frontendmasters.com/blog/gap-is-the-new-margin/) โ€” Chris highlights how the use of the `margin` property is now on the decline, slowly. Chris Coyier [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1713357573/mhunarcx6zr29uewirsa.png)](https://www.bram.us/2024/04/13/what-if-you-had-real-control-over-light-mode-dark-mode-on-a-per-site-basis/) [What if You Had Real Control Over Light Mode / Dark Mode on a Per-Site Basis?](https://www.bram.us/2024/04/13/what-if-you-had-real-control-over-light-mode-dark-mode-on-a-per-site-basis/) โ€” Bramus thinks that a dark mode toggle should be a browser-level feature, and notes that thanks to the [Web Preferences API](https://wicg.github.io/web-preferences-api/), that might become a reality someday. Bramus Van Damme [Learn Modern UI Engineering with Web Components and Web Standards](https://bluespire.com/p/web-component-engineering?utm_source=frontendfocus&utm_medium=email&utm_campaign=wcec-2&utm_content=sponsor-link) โ€” 13 modules, 170+ videos, and an interactive learning app guide you from novice to expert with the latest web standards. Blue Spire sponsor [Displaying HTML Web Components](https://adactio.com/journal/21055) โ€” A brief look at using `display: contents` to work around the issues with support for the `is` attribute in HTML. Jeremy Keith [Things That Can Break `aspect-ratio` in CSS](https://frontendmasters.com/blog/things-that-can-break-aspect-ratio-in-css/) โ€” Three things that may break, or cause unexpected results, when using the `aspect-ratio` property. Chris Coyier [CSS Text Fragment Selector (Please)](https://remysharp.com/2024/04/17/css-text-fragment-selector) โ€” What could syntax for a CSS selector to jump to and highlight a block (or more) of text look like? Remy Sharp [Some DevTools Tips and Tricks](https://frontendmasters.com/blog/devtools-tips-tricks/) โ€” Most devs barely scratch the surface of what DevTools can accomplish, says the author, who shares ten tips here. Pankaj Parashar [My Favorite Animation Trick: Exponential Smoothing](https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html) โ€” Something as small as tweaking the acceleration curve of a UI elementโ€™s animations or scrolling can have a striking end result. Nikita Lisitsa [5 Ways Cookie Consent Managers Hurt Web Performance (& How to Fix Them)](https://www.speedcurve.com/blog/web-performance-cookie-consent/) Cliff Crocker [How to Think About HTML Responsive Images](https://danburzo.ro/responsive-images-html/) Dan Cฤƒtฤƒlin Burzo ๐Ÿ”ง **Code, Tools & Resources** [Classnames: Find Inspiration for Naming HTML Classes, CSS Properties, or JS Functions](https://classnames.paulrobertlloyd.com/) โ€” This little resource is ostensibly to help with the common โ€˜naming things is hardโ€™ problem in programming, offering thematically grouped lists of words with direct links to their meanings. Paul Robert Lloyd [SVG Encoder: A Simple Tool to Convert SVG Into Different Formats, Ready for Use in CSS and HTML](https://svgencode.com/) โ€” The formats are things like URL encoded, Base64 encoded, optimized as a one-liner, no transforms, and other variations of those. Andy Pearson [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1713345266/cyutzam2gct0mkmilduq.png)](https://csspro.com/css-gradients) [CSS Gradients: A Gallery of 275 'Click-to-Copy' CSS Gradients](https://csspro.com/css-gradients) โ€” Includes quite a few unique examples (i.e. not just two-color gradients) that you might find useful or simply for inspiration. CSS Pro [Layer Cake: A Graphics Framework for Svelte](https://layercake.graphics/) โ€” This library gives you a baseline for creating responsive web graphics via common elements (e.g. a coordinate system and scales). See numerous [example components here](https://layercake.graphics/components). Layer Cake [component-template: A Starter Project for Kicking Off a New Web Component](https://github.com/daviddarnes/component-template) David Darnes [SaaSKits: A SaaS Boilerplate Built with Remix, Stripe, Prisma and Resend](https://saaskits.dev/) SaaSKits ๐Ÿ•ฐ๏ธ ICYMI (_Older links, still worth checking out_) - Tammy Everts shares a [comprehensive guide to web performance budgets](https://www.speedcurve.com/blog/performance-budgets/), covering what metrics to track, validation, buy-in, etc. - Adrian Roselli runs through the various techniques available to us for [breaking up long words](https://adrianroselli.com/2024/02/techniques-to-break-words.html). - The only certainty on the web is change. [Ste Grainer takes a look at the history of the web](https://alistapart.com/article/the-wax-and-the-wane-of-the-web/) and how it's constantly reinvented, and then turns to where we are now. ๐Ÿ“ฌ **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/639/*|UID|*?ipx=t)