--- title: "An objective look at CSS Carousels" publication: "Frontend Focus" issue: 691 published_at: "2025-05-07" canonical_url: "https://frontendfoc.us/issues/691" --- Plus GSAP goes free. | Together with [![WorkOS\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_514,h_98/e_make_transparent/co_white,e_outline:9/tdfxwgk852ui9leli4wm.png)](https://workos.com/radar?utm_source=cpff&utm_medium=newsletter&utm_campaign=q22025) 🚀 **Frontend** Focus #​691 — May 7, 2025 | [Read on the web](https://frontendfoc.us/issues/691) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1746608715/zidg48wnhszngd77mqka.png)](https://webkit.org/blog/16854/margin-trim/) [Easier Layout with `margin-trim`](https://webkit.org/blog/16854/margin-trim/) — Jen and the WebKit team have been on something of a roll of late with great blog posts on various modern CSS features, and so it goes with this one on the [experimental `margin-trim` property](https://caniuse.com/mdn-css_properties_margin-trim) — a way to tell a container to trim the margins off its children. Jen Simmons [Are 'CSS Carousels' Accessible?](https://www.sarasoueidan.com/blog/css-carousels-accessibility/) — It’s still early days for the [recently introduced CSS Carousels](https://developer.chrome.com/blog/carousels-with-css), but that hasn’t stopped Sara from diving in for this excellent look at this experimental feature, sharing an objective look at its current accessibility and general usability. Sara Soueidan [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/3c7575bb.png)](https://workos.com/radar?utm_source=cpff&utm_medium=newsletter&utm_campaign=q22025) [🔒 Protect Against AI Bots, Fraud, and Abuse in Real Time](https://workos.com/radar?utm_source=cpff&utm_medium=newsletter&utm_campaign=q22025) — WorkOS Radar protects your app with advanced device fingerprinting — stop fake signups, free tier abuse, bot attacks and brute force attempts today. WorkOS sponsor [The GSAP Web Animation Toolkit is Now Entirely Free](https://gsap.com/blog/3-13/) — Last year the hugely popular GSAP (a.k.a. _GreenSock_) animation library [was acquired by Webflow](https://gsap.com/blog/webflow-GSAP/), and it’s turned out to be great news for us, as from version 3.13 the entire GSAP toolkit is now freely available (including formerly paid addons like [MorphSVG](https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/) and [SplitText](https://gsap.com/docs/v3/Plugins/SplitText/)), even for commercial use. ℹ️ **Note:** It’s not _exactly_ traditional open source though, using [a ‘no charge’ license](https://gsap.com/community/standard-license/) that prevents you from using it to compete with Webflow directly. Cassie Evans and Jack Doyle ⚡️ IN BRIEF - 🤖 [Google has updated its Gemini 2.5 Pro model](https://developers.googleblog.com/en/gemini-2-5-pro-io-improved-coding-performance/) – they claim it's now far better at building frontend apps in particular with 'a real taste for aesthetic web development'. - 💸 A Mozilla executive has said their lucrative search deal with Google is [vital for Firefox's survival](https://www.omgubuntu.co.uk/2025/05/mozilla-says-google-search-deal-vital-to-firefoxs-survival). This [cash from the Mountain View search giant may go away](https://danfabulich.medium.com/all-four-major-web-browsers-are-about-to-lose-80-of-their-funding-0e42ceb358f1), having widespread implications for the broader browser landscape as a result. - ✨ Rachel Andrew shares an overview of the [new features and changes to the web platform in the last month](https://web.dev/blog/web-platform-04-2025?hl=en). Always worth a catch up. - 📹 The video infrastructure platform [Mux now has a free plan](https://www.mux.com/blog/free-plan). - 🪐 [Here's a rundown of the latest changes and new features](https://astro.build/blog/whats-new-april-2025/) in the popular Astro web framework. - 🦉 ICYMI: Our most clicked link in last week's issue was this [quick video primer on the CSS 'owl' (* + *) selector](https://www.youtube.com/watch?v=0O0ssm70g1g). 📙 Articles, Opinions & Tutorials [Reading Flow Will Ship in Chrome 137](https://rachelandrew.co.uk/archives/2025/05/02/reading-flow-ships-in-chrome-137/) — Both the `reading-flow` and `reading-order` [properties](https://drafts.csswg.org/css-display-4/#reading-flow) are expected to land in the stable version of Chrome later this month — however before then Rachel is seeking folks to try it out and report any bugs found. There's [more on this feature](https://developer.chrome.com/blog/reading-flow) over on the Chrome blog. Rachel Andrew [WCAG 3.0’s Proposed Scoring Model: A Shift in Accessibility Evaluation](https://www.smashingmagazine.com/2025/05/wcag-3-proposed-scoring-model-shift-accessibility-evaluation/) — There’s a rethink underway in terms of conformance with the web content accessibility guidelines — moving away from a binary success/fail model to one that prioritizes “_usability over compliance [..] shifting the focus toward the quality of access rather than the mere presence of features_”. Mikhail Prosmitskiy [How to Build a React Login Page Template](https://go.clerk.com/TtEi5Kj) — Learn to build auth with React & Express, compare JWT vs session auth, and get a plug-and-play login page template. Clerk sponsor [Polyfilling CSS with CSS Parser Extensions](https://www.bram.us/2025/05/04/css-parser-extensions-pitch/) — Bramus has had an idea “_to fix CSS polyfilling once and for all_” by allowing developers to extend the browser’s CSS parser with JavaScript. Bramus Van Damme [Frontend's Next Evolution: AI-Powered State Management](https://thenewstack.io/frontends-next-evolution-ai-powered-state-management/) — Here’s how artificial intelligence is changing the complexity of state management in modern frontend apps. “_Rethinking state management isn’t about discarding what we know. It’s about augmenting it._” Alexander T. Williams [Passkeys for Normal People](https://www.troyhunt.com/passkeys-for-normal-people/) — A solid primer on the mechanics of passkeys and the defensive role they play, encouraging us all to adopt this [increasingly popular](https://passkeys.directory) security method. Troy Hunt [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1746611052/hbejhltevukuvpotutpm.jpg)](https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/) [Masonry in CSS: Should Grid Evolve or Stand Aside for a New Module?](https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/) — It feels like we’ve been talking about this for a while now, and with three proposals in the ring you may have lost sight of where things are — here’s a solid reminder/recap. Gabriel Shoyombo [Revisiting Image Maps](https://css-tricks.com/revisiting-image-maps/) — Although ultimately image maps weren’t the right fit for the task at hand here, this exploration of the feature and the need to find the right tool for the job make for a good read. Andy Clarke [Good vs Great Animations](https://emilkowal.ski/ui/good-vs-great-animations) — A neat collection of practical tips to help you go from good to great animations. Emil Kowalski ▶[How to Detect Memory Leaks in Your Web App](https://www.youtube.com/watch?v=6IlTjqU_Tc0) Decoded Frontend [UX Localization: Adapting User Interfaces for Diverse Cultures](https://www.uxmatters.com/mt/archives/2025/05/ux-localization-adapting-user-interfaces-for-diverse-cultures.php) Magnus Eriksen [Quickly Checking HTTP Response Headers](https://henry.codes/writing/quickly-checking-http-response-headers/) Henry Desroches 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1746607653/ekadsaqlvgwavenvtxqm.png)](https://github.com/webtui/webtui) [WebTUI: A Modular CSS Library Bringing the Beauty of Terminal UIs to the Browser](https://github.com/webtui/webtui) — You can see it in use [on the docs site](https://webtui.ironclad.sh/). Includes ASCII Boxes, a badge, button, checkbox, popover, and other components, along with some plugins. WebTUI [Your React App Is Fast. Until It Isn’t](https://blog.sentry.io/react-js-performance-guide/?utm_source=reactstatus&utm_medium=paid-community&utm_campaign=general-fy26q2-traceblog&utm_content=newsletter-s-read) — From bloated bundles to re-render chaos, this guide breaks down 8 common React perf killers—and how to fix them. Tools, tactics, and just enough salt to keep you from writing another 500ms spinner. Sentry sponsor [Mantine 8.0: The Full Featured React Components Library](https://mantine.dev/changelog/8-0-0/) — [Mantine](https://mantine.dev/) is one of the most celebrated React component libraries, and for good reason: it’s full featured, modern, and looks great. v8.0 ups its chart game with a little _Recharts_ magic, adds over twenty new components (including a GitHub-style [Heatmap](https://mantine.dev/charts/heatmap/), [Tree](https://mantine.dev/core/tree/) and [SemiCircleProgress](https://mantine.dev/core/semi-circle-progress/)), submenus, and much more. Vitaly Rtishchev et al. [VERT: A Fast, Ad-Free File Converter for Media & Documents](https://vert.sh/) — All image formats are converted locally, while videos are sent to a server temporarily. You can also convert documents like XML, MD, HTML, RTF, CSV, JSON and others. vert [9ui: A Curated Library of UI Components Built with Base UI and Tailwind](https://www.9ui.dev/) — Includes dozens of standard components that are easy to theme and customize, which you can test drive [on the theme page](https://www.9ui.dev/themes). Bora Baloglu [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1746607949/xcnf8y06ehylbikk8ppd.png)](https://bekuto3d.ayaka.io/) [Bekuto 3D: Web-Based Tool to Convert SVGs to 3D Models](https://bekuto3d.ayaka.io/) — Works well for simple graphics, allowing you to edit the different parts of the file before exporting to a 3D format (STL, GLTTF, or 3MF). [GitHub repo](https://github.com/LittleSound/bekuto3d). I just tried it with this rocket SVG — works well. Rizumu Ayaka [StringTune: A JavaScript Library Designed to Deliver High-Performance, Modular Web Effects](https://www.npmjs.com/package/@fiddle-digital/string-tune) — This enables parallax scrolling, dynamic cursor interactions, progress tracking, split text animations, and autoplaying videos. You can try out lots of examples [on the demo page](https://tune-demo.fiddle.digital/). fiddle digital 📰 Classifieds 🎹 [STRICH:](https://strich.io/?ref=frontend-focus) Add blazing fast and reliable 1D/2D Barcode Scanning to your web apps. Free demo app and 30-day trial available. --- 🕹️ Craft delightful games that change how the world learns as an engineer at Brilliant. Remote/NYC/SF: [brilliant.org/careers/](https://brilliant.org/careers/) 😅 ...and finally [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1746615345/edprxxp2kwsfoin0ky6o.jpg)](https://comicss.art/comics/183/) (Image via: [comiCSS](https://comicss.art) – CC BY-NC 4.0 license.) The [above comic](https://comicss.art/comics/183/) is from [comiCSS](https://comicss.art/) by Alvaro Montoro – it's notable for being a webcomic both about CSS and that's coded with CSS and well worth a browse around for some edifying technical funnies, like [this one featuring the oft-maligned `
` tag.](https://comicss.art/comics/91/) 📬 **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://bsky.app/profile/brandrick.bsky.social) & [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/691/*|UID|*?ipx=t)