--- title: "Query your parents with CSS" publication: "Frontend Focus" issue: 582 published_at: "2023-03-01" canonical_url: "https://frontendfoc.us/issues/582" --- Plus Chrome extensions can still do evil, but at least it's getting faster on macOS. | Together with [![SpeedCurve\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_640,h_120/e_make_transparent/co_white,e_outline:7/le6wslosoyt7jmgluuoa.png)](https://www.speedcurve.com/features/performance-monitoring/?utm_source=frontendfocus&utm_medium=email&utm_campaign=ff2_2023&utm_id=ff2_2023) #​582 — March 1, 2023 | [Read on the web](https://frontendfoc.us/issues/582) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ee8cvhrqyw2ogahztqxy.jpg)](https://developer.chrome.com/en/blog/style-queries/) [Getting Started with Style Queries](https://developer.chrome.com/en/blog/style-queries/) — The ability to query a parent’s inline size, and container query unit values (using the `@container` rule) recently reached stable support in all modern browser engines (though the broader container style queries spec still [has some way to go](https://caniuse.com/css-container-queries-style)). Here’s a look at how to get started with the feature. Una Kravets (Chrome Developers) [Let's Build a Chrome Extension That 'Steals Everything'](https://mattfrisbie.substack.com/p/spy-chrome-extension) — Indulging in what they call “DIY whole hog data exfiltration”, Matt, the author of [Building Browser Extensions](https://www.buildingbrowserextensions.com/) demonstrates that in spite of Manifest v3, a whole lot of bad stuff is still possible when it comes to building browser extensions. Be aware of it and don’t actually _do_ it, of course. Matt Frisbie [![\](https://copm.s3.amazonaws.com/b638f269.png)](https://www.speedcurve.com/features/performance-monitoring/?utm_source=frontendfocus&utm_medium=email&utm_campaign=ff2_2023&utm_id=ff2_2023) [Get a Complete Picture of Your Site’s Performance](https://www.speedcurve.com/features/performance-monitoring/?utm_source=frontendfocus&utm_medium=email&utm_campaign=ff2_2023&utm_id=ff2_2023) — Track Core Web Vitals and learn how users experience the speed of your site. Use Lighthouse audits to fix issues. Measure the impact of slowdowns on business metrics and user engagement. Integrate with your CI/CD process to stay fast. SpeedCurve sponsor [On Container Queries, Responsive Images, and JPEG-XL](https://cloudfour.com/thinks/on-container-queries-responsive-images-and-jpeg-xl/) — Now that one major element of CSS Container Queries has shipped in nearly all modern browsers, Jason notes that it’s time to revisit responsive images and ask how they fit in a container query world. _Are we on the right path_? Jason Grigsby [A Guide to Accessible Form Validation](https://www.smashingmagazine.com/2023/02/guide-accessible-form-validation/) — What you need to take into consideration so that nobody gets stuck on an inaccessible invalid field. Sandrina Pereira **⚡️ IN BRIEF** - Chrome has long been considered a resource hog on modern Macs, but [the latest release of Chrome improves things a lot](https://blog.chromium.org/2023/02/do-more-with-chrome-on-single-charge-on.html), says the Chrome team. - Last week we featured news of Web Push support in iOS, but Roderick Gadellaa notes that the current implementation "[kind of defeats a key point of the web](https://webventures.rejh.nl/blog/2023/ios-web-push-requires-install/)". - _Is this عربي?_ Working with Arabic text in your project? [The 'Is This Arabic?' site from Rami Ismail](https://isthisarabic.com) has some pointers to be aware of (plus a great talk, if you have time.) - Algustionesa Yoshi shares a [comparison of eleven Google Analytics alternatives](https://algustionesa.com/google-analytics-alternatives/). - [The release notes](https://webkit.org/blog/13902/release-notes-for-safari-technology-preview-164/) for Safari Technology Preview 164. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1677675449/svumscy8szoelnphhhlk.png)](https://www.youtube.com/watch?v=cV9JhEV4Ll0) ▶[In-Depth Guide to CSS Logical Properties](https://www.youtube.com/watch?v=cV9JhEV4Ll0) — A 20-minute look at why you should start using CSS Logical Properties, how they work, and how to rewrite existing CSS using logical properties to fix potential problems with different writing modes (like right-to-left and vertical). Zoran Jambor [Intro to HTML-First Frontend Frameworks](https://www.sitepen.com/blog/intro-to-html-first-frontend-frameworks) — The post defines HTML-first front-end frameworks as ones that prioritize sending complete functional HTML versus a JavaScript bundle, and looks at some of the different approaches taken by different tools like Marko, Astro, Eleventy, and Enhance. SitePen Engineering [Improved Font Fallbacks](https://developer.chrome.com/blog/font-fallbacks/) — The new `size-adjust` and font metric overrides allow us to create fallbacks that closely match web fonts, thus reducing layout shifts. Katie Hempenius (Chrome Developers) [Database Caching Without Changing a Line of Code](https://www.polyscale.ai/) — Increase throughput and lower query latency using PolyScale’s intelligent database cache. Implement in minutes. PolyScale.ai sponsor [You Don't Need Ruby on Rails to Start Using Hotwire](https://www.akshaykhot.com/using-hotwire-without-rails/) — [Hotwire](https://hotwired.dev/), an ‘HTML over the wire’ approach to making Web pages more dynamic ([explained here](https://www.akshaykhot.com/introduction-to-hotwire/)), is closely tied to Rails, but Rails isn’t a _must_. Indeed, Akshay shows us how it can work on a totally static site here. Akshay Khot PDF: [The Carbon Impact of Web Standards](https://websitesustainability.com/cache/files/research23.pdf) — This report brings together the findings of a systematic investigation into the carbon impact of web standards (such as frontend HTML and CSS). It shows how developers, tooling, and browser vendors can calculate how polluting their web presence is (in terms of electricity usage). Alexander Dawson [Why to Avoid Spanning Table Headers](https://adrianroselli.com/2023/02/avoid-spanning-table-headers.html) — Spanned table headers are not well supported across screen readers. Adrian Roselli [Design Systems in the Time of AI](https://bradfrost.com/blog/post/design-systems-in-the-time-of-ai/) — Brad notes that it has “_been absolutely wild to witness the rise of the new crop of AI tools_”, calling it equally exciting and terrifying. This post looks at how they may impact the world of design systems, and explores some obvious use cases. Brad Frost [Building an Animated SVG Logo with Anime.js](https://www.pixelhop.io/writing/building-an-animated-svg-logo-with-animejs/) Jozef Maxted [Six Common SVG Fails (and How to Fix Them)](https://uxdesign.cc/6-common-svg-fails-32ff10e70b5a) Mariana Beldi [Is CSS-in-JS Actually Bad?](https://blog.mayank.co/is-css-in-js-actually-bad) Mayank 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/dzmpxue9u6tkwwfbmktg.jpg)](https://scrollbar.app/) [Scrollbar.app: Interactive Tool to Design Custom CSS Scrollbars](https://scrollbar.app/) — This is unique among CSS generators! You can adjust the values for the scrollbar-based pseudo-elements (which require `-webkit-` prefixes) and see the results directly on the page, before copying the CSS. _Nice, straightforward, and clean_. Henri Parviainen [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1677675882/vysexed6pqpk0ueftlj8.png)](https://typetrials.com/) [TypeTrials: A Free Platform to Test and Experiment with Variable Fonts](https://typetrials.com/) — You can choose from a set of included fonts or upload your own before fiddling with some basic settings, variable settings, OpenType Features, and more. Also lets you export the `@font-face` settings. Pangram Pangram Foundry [Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=fourletter) Shortcut (formerly Clubhouse.io) sponsor [Lenis: A Smooth Scroll Library](https://github.com/studio-freight/lenis) — Boasts a number of extra features compared to similar libraries that allow you to do scroll animations, parallax, etc. You can [try it out here](https://lenis.studiofreight.com/). Studio Freight Darkroom [Tachyon: A Small Script to Make Page Navigation Faster](https://github.com/weebney/tachyon) — Same concept as Turbolinks (now deprecated in favour of a larger set of tools called [Hotwire](https://hotwired.dev/)), which is basically a drop-in script that uses native features to improve page navigation speed. Tachyon [Gradient Picker: A Simple Online Tool to Build CSS Gradients Visually](https://zuramai.github.io/gradient-picker/) Ahmad Saugi [Storybook 7 Docs: Revamped from the Ground up with an Improved API and Developer Experience](https://storybook.js.org/blog/storybook-7-docs/) Tom Coleman (Storybook) 🧑‍💻 JOBS [Software Engineer](https://jobs.ashbyhq.com/stickermule/1539721e-7c7d-4f45-a5b0-17e5c02d7bd0?utm_source=Cooperpress) — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what's possible if your mission is to increase human happiness. Stimulus [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=easy-job-hunting) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 📬 **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/582/*|UID|*?ipx=t)