--- title: "All browsers now support finer control over CSS transforms" publication: "Frontend Focus" issue: 553 published_at: "2022-08-03" canonical_url: "https://frontendfoc.us/issues/553" --- Plus Google delays its third-party cookie changes. | #​553 — August 3, 2022 | [Read on the web](https://frontendfoc.us/issues/553) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1659523223/fmsn6viyan9lltfb3gcp.png)](https://web.dev/css-individual-transform-properties/) [Finer Grained Control Over CSS Transforms with Individual Transform Properties](https://web.dev/css-individual-transform-properties/) — You can now use the _individual_ `translate`, `rotate`, and `scale` CSS properties across all major browser (support just got added to Chrome), making it easier to animate individual values. Bramus & Baron [Fluid Sizing Instead of Multiple Media Queries?](https://www.smashingmagazine.com/2022/08/fluid-sizing-multiple-media-queries/) — Like math and CSS? _You’ll love this one_. Ruslan explains how we don’t necessarily _require_ media queries to change values of certain CSS properties (such as `font-size`, `padding`, `margin`). Ruslan Yevych [![\](https://copm.s3.amazonaws.com/cdb3f848.png)](https://www.datadoghq.com/dg/real-user-monitoring/ux-monitoring/?utm_source=advertisement&utm_medium=newsletter&utm_campaign=dg-cooperpress-applications-ww-frontend-p-uxmonitoring) [Optimize Front-End Performance by Analyzing UX Data](https://www.datadoghq.com/dg/real-user-monitoring/ux-monitoring/?utm_source=advertisement&utm_medium=newsletter&utm_campaign=dg-cooperpress-applications-ww-frontend-p-uxmonitoring) — Utilize critical performance data to understand how users experience your applications with Datadog Real User Monitoring. Analyze user errors in real-time to resolve front-end issues fast. Start a free Datadog trial today. Datadog sponsor [Docusaurus 2.0 Released](https://docusaurus.io/blog/2022/08/01/announcing-docusaurus-2.0) — This open-source developer tool from Meta (Facebook) just hit [version 2.0](https://github.com/facebook/docusaurus) — a major release some four years in the making. It’s a static site generator aimed at building documentation sites specifically, and it’s React/Node.js under the hood. This new version was rebuilt from scratch, and adds [MDX](https://github.com/mdx-js/mdx) support, a new plugin system, theming, dark mode, SPA navigation, offline support, and more. There's [a demo here](https://docusaurus.new/). Meta [Google Postpones Third-Party 'Cookie Bonfire' Yet Again](https://www.theregister.com/2022/07/28/google_postpones_thirdparty_cookie_phaseout/) — Google says it needs more time to build and test its privacy-preserving ad technology, marketed as the “Privacy Sandbox.” It’s now pushed back to 2024. Thomas Claburn **⚡️ IN BRIEF** - The annual 'State of CSS' survey is due to return in September and they are [currently looking for help and feedback](https://lea.verou.me/2022/07/help-design-the-state-of-css-survey-2022/) on questions. - This pure CSS 'scroll shadow' layered gradient trick [now plays nice in Safari](https://css-tricks.com/scroll-shadows-pure-css-parallax-game-back-on/). - [Safari Technology Preview 150](https://webkit.org/blog/13066/release-notes-for-safari-technology-preview-150/) is out now for macOS. - There are plans to [ship the File System Access API](https://groups.google.com/a/chromium.org/g/blink-api-owners-discuss/c/QWBQXjwJyhU/m/O8InBgAeBgAJ) to both Android and Android Webview. (_Via [Thomas Steiner on Twitter](https://twitter.com/tomayac/status/1554770020722417664)_) - Frederico Bittencourt shares some [facts, know how, and experiments on UTF-8 character encoding](https://blog.fredrb.com/2022/07/31/character-encoding-utf8/). - Trys Mudford shares [a CSS reset for the `button` element](https://www.trysmudford.com/blog/a-good-reset/). - It's not a frontend thing as such, but [📗 this upcoming book from Marie Le Conte](http://unbouncepages.com/escape-marie-le-conte/) looks to be an interesting look at the more broader culture of the web in the early 00s. - Just think of [all those poor `footer` elements that never get seen](https://twitter.com/steeevg/status/1554130332420476929) on sites with infinite scroll... 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1659528800/dwhzloqv4dwvtnempdga.png)](https://daverupert.com/2022/07/solving-the-dangler-conundrum-with-has-and-container-queries) [Solving “The Dangler” Conundrum with Container Queries and `:has()`](https://daverupert.com/2022/07/solving-the-dangler-conundrum-with-has-and-container-queries) — Odd numbers in responsive design can be something of a sore point, so Dave shares a solution using `:has()` to find such odd-numbered grids, and then using container queries to flex it into shape. Dave Rupert [Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers](https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/) — Some neat demos here exploring the layout patterns that can be achieved with just a little code using CSS Grid’s auto-placement powers. Temani Afif ▶[Stack Overflow Podcast: Exploring the Art & Practice of Programming](https://stackoverflow.blog/podcast/?utm_source=FEFocus&utm_medium=newsletter&utm_campaign=editaudio) Stack Overflow sponsor [Testable Frontend: The Good, Bad, and the Flaky](https://www.smashingmagazine.com/2022/07/testable-frontend-architecture/) — Testing is not just about tools and processes, but architecture too. Noam shares his experience on how to organize testing and find the right balance between frontend and subsystems, and between different strategies. Noam Rosenthal [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1659534902/mzb0sazjoywqgc7q3yg4.png)](https://css-tricks.com/recreating-mdns-truncated-text-effect/) [Recreating MDN's Truncated Text Effect](https://css-tricks.com/recreating-mdns-truncated-text-effect/) — Looking at how a cool CSS text fade effect seen over on MDN is realised. Geoff Graham [Detecting CSS Selector Support with JavaScript](https://matthiasott.com/notes/detecting-css-selector-support-with-javascript) Matthias Ott [How to Add a Subtle Gradient on Top of an Image using CSS](https://theburningmonk.com/2022/07/how-to-add-a-subtle-gradient-effect-on-top-of-video/) Yan Cui JOBS [Sr Frontend Developer For a VA.gov Team (Remote)](https://www.notion.so/Kind-Jobs-a9a393359d88400c9c8912f8d1436658) — Use React to improve Veterans’ access to healthcare and benefits at VA.gov. We work on meaningful problems with productive stacks. KIND SYSTEMS [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1659527782/aujb5rntbbrjnhs1lqiz.png)](https://7ph.github.io/powerglitch/#/) [PowerGlitch: A Tiny Library to "Glitch" Images on the Web](https://7ph.github.io/powerglitch/#/) — Uses CSS to create the customizable glitch animated effect, with no need for Canvas or an external library. You can try out the [playground here](https://7ph.github.io/powerglitch/#/playground). PowerHat [Embla Carousel 7: Carousel with Fluid Motion and 'Swipe Precision'](https://www.embla-carousel.com/) — A much maligned UI element, but the [examples](https://www.embla-carousel.com/examples/basic/) worked pretty well for us. Library agnostic but has easy integrations for React, Vue, and Svelte, if you need them. David Jerleke [Design, Render, and Send Notifications for Free in Our Sandbox Studio](https://www.courier.com/studio/sandbox/?utm_campaign=demand-gen&utm_source=email&utm_medium=frontend-focus-08-3&utm_content=sandbox-studio) — Too many engineering resources are wasted on notification template building and routing rules. Pass this on to Product Courier.com sponsor [UI Filler: Placeholders for Your Designs](https://www.uifiller.com/) — A collection of placeholder elements. Think things like paragraph copy, people’s names, locations, email addresses, images, logos, and the like. UI Filler [Awesome Static Web Site Generators: A Curated List of Static Web Site Generators](https://github.com/myles/awesome-static-generators) — It's not all just Jekyll and Hugo, you know. Myles Braithwaite ✨ **QUICK RELEASES** [Lighthouse 9.6.5](https://github.com/GoogleChrome/lighthouse) – Google's auditing/performance tool. [React Admin 4.2.5](https://github.com/marmelab/react-admin) – Framework for building B2B apps on React. [Replay 0.6](https://github.com/puppeteer/replay) – Library to replay Chrome DevTools Recorder scripts. 📬 **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://twitter.com/chrisbrandrick) & [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/553/*|UID|*?ipx=t)