--- title: "How do you use CSS?" publication: "Frontend Focus" issue: 598 published_at: "2023-06-21" canonical_url: "https://frontendfoc.us/issues/598" --- Plus a focus on :has(), modern CSS in real life, and the W3C's new site. | Together with [![Userfront\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_600,h_110/e_make_transparent/co_white,e_outline:7/lnopbsxefrqqsjq14fvr.png)](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication) #​598 — June 21, 2023 | [Read on the web](https://frontendfoc.us/issues/598) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/p8ksztgxh0tvdkl1dmoj.jpg)](https://chriscoyier.net/2023/06/06/modern-css-in-real-life/) [Modern CSS in Real Life](https://chriscoyier.net/2023/06/06/modern-css-in-real-life/) — Chris (of CodePen fame) runs through five modern CSS concepts that _“really matter to real-world development”_, including logical properties, container queries, color spaces, and more. This is a real deep-dive highlighting the fast-paced changes we are seeing in CSS, with plenty of code, examples, and visuals to help things along. Chris Coyier [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1687343353/m6whtv4pg6sakuxlb0iz.jpg)](https://survey.devographics.com/en-US/survey/state-of-css/2023) [The 'State of CSS 2023' Survey is Now Open](https://survey.devographics.com/en-US/survey/state-of-css/2023) — With a ton of new CSS features like `:has()`, subgrid, and container queries quickly gaining adoption the annual CSS survey from Devographics returns a bit earlier than usual. [Here’s the announcement post](https://dev.to/sachagreif/the-2023-state-of-css-survey-is-now-open-18bk) explaining why you should fill it out, and [some background from this year's lead survey designer, Chen Hui Jing](https://chenhuijing.com/blog/state-of-css-survey-2023-is-live). As always, we recommend filling it out, and we'll be sure to go through the results once live. Devographics [![\](https://copm.s3.amazonaws.com/e36eb838.png)](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication) [React Authentication — Without Complexity](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication) — Userfront streamlines authentication & access control so engineers can focus on their core business. Create signup and login forms, reset passwords, generate magic links, add SSO with Google, and more. Read the docs now. Userfront sponsor [Cyclic Dependency CSS Variable Toggles](https://kizu.dev/cyclic-toggles/) — Paweł Grzybek [calls this](https://pawelgrzybek.com/til-invalid-css-cyclic-dependencies-and-a-valid-empty-fallback-value-using-a-bare-comma/) _“one of the most mind-bending CSS articles I have read in a while”_ – we agree. It's well explained but CSS custom properties are twisted – nay, broken up – into new shapes that it might take a little head scratching to figure out. Roman Komarov **⚡️ IN BRIEF** - The W3C has [deployed its new website](https://www.w3.org/news/2023/new-w3c-website-deployed/). - ...and the W3C has published a [new web standard for online payments](https://www.w3.org/press-releases/2023/spc-cr/) as a Candidate Recommendation. - It's Cloudflare's "Speed Week" which means lots of Web performance related news, such as [their full support for HTTP/3 Extensible Priorities](https://blog.cloudflare.com/better-http-3-prioritization-for-a-faster-web/), a new GraphQL ['Timing Insights' API](https://blog.cloudflare.com/introducing-timing-insights/), and the forthcoming automatic use of [Early Hints and Fetch Priorities](https://blog.cloudflare.com/smart-hints/) on pages they serve. - The humble [PDF file format is 30 years old](https://pdfa.org/30-years-of-change-30-years-of-pdf/). - [Opera One](https://www.opera.com) is now the [new flagship browser](https://twitter.com/opera/status/1671051728391753729) from Opera. - Tyler Sticka asks: is there [a viable animated GIF alternative](https://cloudfour.com/thinks/animated-gif-alternative/) yet? 📙 **Tutorials, Articles & Opinion** [Positioning Anchored Popovers](https://hidde.blog/positioning-anchored-popovers/) — Popovers are commonly positioned relative to their invoker — but when using the new `popover` attribute, anchoring can be tricky as these popovers are placed in the top layer, away from the context of their invoker. Hidde looks at what options we have to resolve this. Hidde de Vries [Thoughts from “Meet Safari for Spatial Computing”](https://blog.jim-nielsen.com/2023/thoughts-on-safari-spatial-computing/) — The key takeaway being that when it comes to visionOS you can continue doing “_what responsive web design and accessibility experts have advocated for years_”, and for the most part things will ‘just work’ on this new platform. Jim Nielsen [The New CSS](https://matthiasott.com/notes/the-new-css) — How recent tooling changes and new capabilities represent a “_fundamental shift_” for CSS, making it “_now the most powerful design tool for the Web_”. Matthias Ott [A New Comprehensive Project Management Tool from Notion](https://ntn.so/frontendfocus) — Execute plans with speed and clarity with Notion's powerful new project management tools - the first with AI assist. Notion sponsor [Fit-to-Width Text](https://kizu.dev/fit-to-width-text/) — An active look at how [scroll-driven animations](https://www.w3.org/TR/scroll-animations-1/) will hopefully solve the ‘fit-to-width’ text problem with just pure CSS. (See also: [This collection of related demos](https://scroll-driven-animations.style) from Bramus Van Damme.) Roman Komarov ▶[Going Beyond Color Contrast](https://www.youtube.com/watch?v=YxA_cxyMJ1E) — A quick introduction to tools that will help you automate the identification of accessibility issues beyond color contrast. There’s an [accompanying blog post](https://developer.mozilla.org/en-US/blog/accessibility-celebrating-gaad-2023/) too. Schalk Neethling ▶[Improving Performance for Three Million Sites](https://www.youtube.com/watch?v=yW_4A4pTPA4) — An interesting dig into how Shopify approaches performance challenges at scale. Michael Gooding 🔎 **A FOCUS ON:** The `:has()` psuedo-class selector The :has() CSS pseudo-class now enjoys widespread browser support, and [can be used](https://caniuse.com/css-has) across Chrome, Safari, Edge, Opera, and others (Firefox has it behind a flag for now). It lets you style an element that contains a specific descendant, defined by a selector argument, and can be used in a variety of interesting, creative ways. 📑 — [Related W3C spec](https://drafts.csswg.org/selectors-4/#relational) and [MDN documentation.](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) ❓ — [`:has()` Can I use... stats](https://caniuse.com/css-has) [An Introduction to `:has()`](https://www.sitepoint.com/has-selector-in-css/) — Shares how the `:has()` pseudo-class has far greater range than just styling an element’s ancestor. Stephanie Eckles [Using `:has()` as a CSS 'Parent Selector' and More](https://webkit.org/blog/13096/css-has-pseudo-class/) — Jen runs through the basics of how to use `:has()` as a parent selector with some practical examples. “_This feels like a revolution in how we will write CSS selectors..._” Jen Simmons (WebKit) [The Advanced Guide to the CSS `:has()` Selector](https://blog.logrocket.com/advanced-guide-css-has-selector/) — Rahul looks at some advanced implementations and use cases for `has`, including checking for multiple children, conditional decorations, and styling empty states. Rahul Chhodde [Style Your RSS Feed](https://darekkay.com/blog/rss-styling/) — How to make your RSS feed look nice (thanks to XSLT) and provide useful information at the same time. Darek Kay [How to Watch Transitions in Slow Motion in Chrome’s DevTools](https://blog.jim-nielsen.com/2023/slow-motion-animations-with-chrome-devtools/) Jim Nielsen [Six Quick Tests You Can Do to Test Your Forms for Accessibility](https://karlgroves.com/6-quick-tests-you-can-do-to-test-your-forms-for-accessibility/) Karl Groves 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1687348092/okkuez8qoiwczoztvgpu.png)](https://frosted-glass.shud.in/) [Frosted Glass](https://frosted-glass.shud.in/) — A lovely looking depth-based blur effect created with CSS. [Here’s how it works](https://twitter.com/DanHollick/status/1670479837738180609), and some [other examples](https://twitter.com/shuding_/status/1670449379814125569). Shu Ding [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1687278100/onrhlhp4ndnuzbt5kojh.png)](https://motioncanvas.io/) [Motion Canvas: A TypeScript Library and Real-Time Preview Editor to Program Animations](https://motioncanvas.io/) — Uses generator functions to procedurally define your animations, and you can try out the [web-based editor](https://motioncanvas.io/editor/quickstart/) that allows you to work with the animations visually. Motion Canvas [SVG.js v3.2: SVG Manipulation and Animation Library](https://svgjs.dev/docs/3.0/) — A lightweight approach without dependencies. There’s [a demo on JSFiddle](https://jsfiddle.net/Fuzzy/f2wbgx5a/) you can play with. [GitHub repo.](https://github.com/svgdotjs/svg.js) Various Authors [Code Together Before You Work Together. Interview Devs in a Real IDE](https://www.coderpad.io?utm_medium=3pmedia&utm_source=CooperFrontEndFocus&utm_campaign=23-Q2-3PMedia-CooperFrontEndFocus-ACQ-All-Global-NewsletterJune21) — Skip algorithm interviews & use CoderPad to run coding interviews that are trusted by both candidates and interviewers. CoderPad sponsor [daisyUI: A Library of Tailwind CSS Components in Multiple Themes](https://daisyui.com/) — Includes dozens of ready-made components that you can try out using about 20 different themes, all of which are testable live in [the docs](https://daisyui.com/components/alert). Redfern Dev [Threlte: A Three.js Scene Renderer and Component Library for Svelte](https://threlte.xyz/) — react-three-fiber is great, but if you prefer Svelte, this is the alternative for you. It appears to be under very active development too with a [whole new version](https://next.threlte.xyz/) on the way soon. [GitHub repo.](https://github.com/threlte/threlte) Grischa Erbe [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/x5oii1nl7wqebjj7okqm.jpg)](https://clarity.microsoft.com/) [Microsoft Clarity: Free Heatmaps & Session Recordings](https://clarity.microsoft.com/) — A new, free user behavior analytics tool, that claims to be both GDPR & CCPA compliant — it helps visualize how users are interacting with your site through session replays and heatmaps. Why is it free? Curiously, MS is [upfront about that.](https://clarity.microsoft.com/pricing) Microsoft [Novel: A Notion-Style WYSIWYG Editor with AI-Powered Autocompletions](https://github.com/steven-tey/novel) — Built with Next.js, Tiptap, OpenAI (for autocomplete), and Tailwind. [Try it live here](https://novel.sh/). Steven Tey 🧑‍💻 JOBS [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) — 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/598/*|UID|*?ipx=t)