--- title: "The :has() revolution" publication: "Frontend Focus" issue: 556 published_at: "2022-08-24" canonical_url: "https://frontendfoc.us/issues/556" --- Plus what can browsers do to help with third-party resource optimization? | #​556 — August 24, 2022 | [Read on the web](https://frontendfoc.us/issues/556) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1661336562/vdqftlmtx8jdqoodrg3r.png)](https://webkit.org/blog/13096/css-has-pseudo-class/) [Using `:has()` as a CSS Parent Selector (and much more.)](https://webkit.org/blog/13096/css-has-pseudo-class/) Everyone seems to be tinkering with [the new `:has()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) and sharing the neat possibilities it unlocks. This post from Jen Simmons covers the basics of how to use it as a parent selector, and highlights some great examples of what powerful things you can do with it. > “_This feels like a revolution in how we will write CSS selectors, opening up a world of possibilities previously either impossible or often not worth the effort._” → [webkit.org/blog/13096/css-has-pseudo-class](https://webkit.org/blog/13096/css-has-pseudo-class/) JEN SIMMONS [![\](https://copm.s3.amazonaws.com/b764d820.png)](https://www.courier.com/studio/sandbox/?utm_campaign=demand-gen&utm_source=email&utm_medium=frontend-focus-8-24-primary&utm_content=sandbox-studio) [Render Notification Tests Across All Channels [Sandbox\]](https://www.courier.com/studio/sandbox/?utm_campaign=demand-gen&utm_source=email&utm_medium=frontend-focus-8-24-primary&utm_content=sandbox-studio) — Too many engineering resources are wasted on notification template building and routing rules. Pass this on to Product, Support, and Security. Heck, even if the engineers want to quickly assemble templates: use our UI or JSON based syntax, Elemental. Courier.com sponsor [Can Browsers Optimize the Loading of Third-Party Resources?](https://developer.chrome.com/blog/third-party-scripts/) — Highlights the impact of third party resources, and the proposed approach the Chrome team is hoping to take at the browser level to protect the user experience from their potentially detrimental impact, “_without reducing their business value to site owners_”. Addy Osmani (Chrome Developers) [What Makes a Great Toggle Button?](https://www.smashingmagazine.com/2022/08/toggle-button-case-study-part-1/) — The first in a two-part case-study analyzing the characteristics of effective toggle buttons, what makes them error-proof, and how to use them whilst preventing confusion for users. Eduard Kuric **⚡️ IN BRIEF** - The Inclusive Design 24 online conference returns next month. [Here's a look at how the schedule](https://inclusivedesign24.org/2022/schedule/) is shaping up. - Here's a cautionary tale about [ensuring your domain payment information is correct](https://news.ycombinator.com/item?id=32470017) at time of renewal. - [This collection of fun cursor effects](https://tholman.com/cursor-effects/) will take you back to web browsing circa 1999. - [Enter your GitHub user name here](https://firstpr.me/) to find out your first ever pull request. - Of course you want to see [a video of the Mona Lisa being created in CSS](https://twitter.com/asyrafhussin4/status/1561981294984065024). 📙 **Tutorials, Articles & Opinion** [Meet the Top Layer: A Solution to `z-index:10000`](https://developer.chrome.com/blog/what-is-the-top-layer/) — With new built-in components and APIs coming to the web platform, what is this “top layer” that they enable us to use? Jhey Tompkins (Chrome Developers) [An Introduction to Constraint Based Design Systems](https://www.colepeters.dev/posts/an-introduction-to-constraint-based-design-systems) — _“Constructed and maintained with a foundation of proactive and informed communication, design systems become an incredibly powerful organizational asset.”_ Cole Peters ▶[Ben Callahan on the Value of a Design System](https://www.smashingmagazine.com/2022/08/smashing-podcast-episode-51/) — A ~50-minute discussion exploring how to go about proving the value of a Design System and how you can pitch it effectively to stakeholders. Smashing Magazine podcast [Build Real-Time Chat Messaging in Less Time](https://getstream.io/maker-account/?utm_source=FrontendFocus&utm_medium=Promoted_Newsletter&utm_content=Developer&utm_campaign=FrontendFocus_August2022_MakerAccount_klmh22) — Explore Stream’s Chat API, SDKs, and UI by activating your free account. Stream sponsor [How to Skew Benchmarks in Your Favor](https://marvinh.dev/blog/benchmarks/) — Looks at how accidental bias are often introduced into framework benchmarks. “_Always double check that you’re measuring what you think you are measuring._” Marvin Hagemeister [Inclusive User Research: Recruiting Participants](https://tetralogical.com/blog/2022/08/01/inclusive-user-research-recruiting-participants) — Some advice on when and how to recruit folks with disabilities for your usability tests. Ela Gorla [When Do You Use CSS Columns?](https://css-tricks.com/when-do-you-use-css-columns/) — Geoff points out that this _isn’t_ a rhetorical question. What are some great real-world use cases for CSS multi-column layouts? Geoff Graham ▶[How to Lower the Opacity of a Background Image with CSS](https://www.youtube.com/watch?v=lRPguPbovro) Kevin Powell [Creating Custom SVG Cursors with an Interactive Emitter Effect](https://tympanus.net/codrops/2022/08/24/custom-svg-cursors-with-an-interactive-emitter-effect/) Marlène Bruhat 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 & 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/v1661337618/nwayeorlztn2caea3kno.png)](https://heroicons.com/) [Heroicons: Beautiful Hand-Crafted SVG Icons by the Makers of Tailwind CSS](https://heroicons.com/) — Yup, we’ve shared this great icon set with you before, but the collection has [just hit 2.0](https://twitter.com/steveschoger/status/1562117153591107586), now sporting a fresh look, a thinner stroke option, and a new 24px solid set. Heroicons [Tota11y!](https://tota11y.babylontech.co.uk/) — A browser utility to visualize the most common web accessibility errors on a site in a clear, understandable way. (This builds upon [the original toolkit](https://khan.github.io/tota11y/) from Khan Academy) Babylon Health [InAppBrowser: See What JavaScript Commands Get Injected Through an In-App Browser](https://inappbrowser.com/) — Read the explainer [here](https://krausefx.com/blog/announcing-inappbrowsercom-see-what-javascript-commands-get-executed-in-an-in-app-browser), which also has instructions on how to use the tool. Felix Krause [With Retool, Ship Apps Fast with 90+ Production-Ready UI Components](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) Retool sponsor [Gradientify: A Web Based All-in-One Gradient Editor](https://gradientify.com/) — Includes a gallery of 100+ hand-crafted gradients that you can customize or use for inspiration. Lets you save gradients in the web app, copy the CSS, or download as PNG. Nitin Singh and Friends [Tailwindhelper: A Tool for Visualizing Tailwind Classes, Converting Units, and Finding Colors](https://www.tailwindhelper.com/) — This can be used as a reference but seems to be more useful for those just getting started with Tailwind and want to convert regular CSS to Tailwind’s utility classes. Sebastien Graf [Puppertino: A CSS Framework Based on Human Guidelines from Apple](https://codedgar.github.io/Puppertino/) — Compatible with most other CSS frameworks, and you can view the very Apple-like [examples here](https://codedgar.github.io/Puppertino/examples/). It doesn't feel _quite_ right to us yet, but a good start. Edgar Pérez 📬 **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/556/*|UID|*?ipx=t)