--- title: "All the selectors you need" publication: "Frontend Focus" issue: 652 published_at: "2024-07-17" canonical_url: "https://frontendfoc.us/issues/652" --- Plus a look at experimental invoker syntax. | Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/figma-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=figmav2) 🚀 **Frontend** Focus #​652 — July 17, 2024 | [Read on the web](https://frontendfoc.us/issues/652) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1721122946/fwk5e3pg36gy9km2ax84.jpg)](https://css-tricks.com/css-selectors/) [CSS Selectors](https://css-tricks.com/css-selectors/) — A thorough, complete guide/reference covering all of the various methods we have to select elements in CSS (such as pseudo-selectors, nested selectors, attribute selectors, etc) and how to use them for applying styles. Geoff Graham [Seamless SVG Copy-Paste on the Web](https://blogs.windows.com/msedgedev/2024/07/11/seamless-svg-copy-paste-on-the-web/) — Support has been added to Chromium browsers for SVG files in the Async Clipboard API. This means copying and pasting SVG data across any app that wants to use SVG, whether it’s native or web, becomes possible. Taylore Givens and Patrick Brosset [![\](https://copm.s3.amazonaws.com/109d050d.png)](https://frontendmasters.com/courses/figma-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=figmav2) [Figma Isn't Just for Designers](https://frontendmasters.com/courses/figma-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=figmav2) — Steve Kinney shares how devs can leverage Figma to bridge the gap between design and development. Learn to use constraints, grids, and auto layout, explore component properties, variables, and modes to create flexible UI elements and truly responsive designs. Frontend Masters sponsor [`@property`: Next-Gen CSS Variables Now with Universal Browser Support](https://web.dev/blog/at-property-baseline?hl=en) — The `@property` rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers. Una Kravets [Private Browsing 2.0 in Safari](https://webkit.org/blog/15697/private-browsing-2-0/) — First included as a feature in Safari almost twenty years ago, _‘Private Browsing’_ has been getting a big revamp over the past year. The WebKit team explains what changes and enhancements have occurred and the mitigations to prevent breaking existing sites. The WebKit Team ⚡️ Quick Links - 🤝 [Astro and Netlify are now BFFs](https://astro.build/blog/netlify-official-deployment-partner/) as Netlify is now the chosen deployment partner for all things Astro. - ❓ Adrian Roselli says we may want to [exercise some caution](https://adrianroselli.com/2024/07/dont-use-webdev-for-accessibility-info.html) when using `web․dev` for accessibility advice in particular. - 🌀 [_CSS Loaders_](https://css-loaders.com/) is now home to over 600 single element loaders, including [this Polygon collection](https://css-loaders.com/polygons/). - 📐 [A quick tip for getting the screen width and height](https://css-tip.com/screen-dimension/) _without_ JavaScript. - 🇪🇺 Opera is [appealing to the EU to overturn a decision](https://blogs.opera.com/news/2024/07/opera-dma-request/) not to designate Microsoft Edge as a 'gatekeeper' under the Digital Markets Act. 📙 **Tutorials, Articles & Opinion** [An Update on Invokers: Invoker Commands in HTML](https://utilitybend.com/blog/an-update-on-invokers-invoker-commands-in-html) — An overview of this experimental syntax which will allow devs to assign behavior to elements in a declarative and accessible way. Brecht De Ruyte ▶[Dialog Dilemmas and Modal Mischief: A Deep Dive into Popovers](https://heypresents.com/talks/dialog-dilemmas-and-modal-mischief-a-deep-dive-into-popovers-and-how-to-build-them) — A talk from the _All Day Hey!_ conference on dialogs, including the new `popover` attribute, “modality” and using the top layer. Hidde de Vries [ViteConf is Back!](https://viteconf.org/?utm_source=fe_focus&utm_medium=secondary) — ViteConf will be returning to the virtual stage on October 3rd. Get your tickets now! StackBlitz sponsor ▶[Utility First CSS _Isn’t_ Inline Styles](https://www.youtube.com/watch?v=g6wtyg3O4Fo) — A 52-minute talk on the comparison often made between utility first options versus inline styling. [Related slides here](https://noti.st/sarahdayan/clOedj). Sarah Dayan [Embracing Functional CSS: Have We Moved On?](https://www.browserlondon.com/blog/2024/07/15/embracing-functional-css-have-we-moved-on/) — A look at the positives of utility-first CSS, and why we’ve become accustomed to introducing it to our workflows. Oliver Creswell [JPEG History: Compressing It Down, Keeping the Essence](https://tedium.co/2024/06/16/jpeg-image-format-history/) — How the JPEG file — and the lossy compression it allowed and encouraged — became the dominant way we shared digital photos on the internet. Ernie Smith [How to Try Experimental CSS Features](https://chenhuijing.com/blog/how-to-try-experimental-css-features/) Chen Hui Jing ▶[Understanding the European Accessibility Act and Its Impact on Websites](https://wptavern.com/podcast/127-rian-rietveld-on-understanding-the-european-accessibility-act-and-its-impact-on-websites) WP Tavern podcast [WebAuthn: Enhancing Security with Minimal Effort](https://begin.com/blog/posts/2024-07-02-webauthn-with-arc) Taylor Beseda 📰 Classifieds Meetings should be more like code reviews. We're building a product for that and looking for software leaders to join the beta. [Apply here](https://docs.google.com/forms/d/e/1FAIpQLSdBPMJathunNduH8LKM5EPcUSIyFGzL3K3zPq_dpOZJ1ImIuQ/viewform). 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1721128297/ibxshssqxivxk2apkdmu.png)](https://cssgridgenerator.io/) [CSS Grid Generator](https://cssgridgenerator.io/) — A handy browser-based tool that can create custom CSS grid layouts. The generator allows you to specify the number of columns, rows, and gutter size. Kristjan Retter [Eruda 3.1: A Console for Mobile Browsers](https://github.com/liriliri/eruda) — If you’re in a situation where you have no access to DevTools, you can add Eruda to your page and it provides a sort of virtual devtools you can use from any browser, including on mobile. LiriLiri [Stop Worrying About Your Auth. Let FusionAuth Handle It](https://fusionauth.io/docs/?utm_medium=newsletter&utm_source=frontendfocus&utm_campaign=july24_newsletter) — Flexible deployment. Advanced features like MFA, SSO, and more. Check out the Go SDK. FusionAuth sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1721129681/n8xqecl9ryldx04ys5tb.png)](https://github.com/dy/linefont) [Linefont: A Typeface for Rendering Line Chart Data](https://github.com/dy/linefont) — A one-of-a-kind font that’s part of Google Fonts that technically falls under the “display” fonts category. [This interactive demo](https://dy.github.io/linefont/scripts/) lets you adjust the weight, width, and size to get an idea of what’s possible. Dmitry Ivanov [Hyphenopoly 6.0: A Polyfill for Client-Side Hyphenation](https://github.com/mnater/Hyphenopoly) — Hyphenates text if the user agent does not support CSS hyphenation (a [feature](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens) that’s part of Baseline but with widely varying support) or not for the language present. An interesting use of WebAssembly too. Mathias Nater [unplugin-turbo-console: Improve the Developer Experience of `console.log()`](https://github.com/unplugin/unplugin-turbo-console) — Part of UnJS’s Unplugin ecosystem, this enhancement to console.log() allows you to print the file name, line number, variable name, has highlighting for different file types, and features jump-to-source with one click. Unplugin 🕰️ ICYMI (_Older links, still worth checking out_) - Matthew Morete looks over [the tricky task of animating a <`dialog`> element](https://frontendmasters.com/blog/animating-dialog/). - Despite new CSS features, Juan Diego Rodriguez explains [why media queries still occupy a vital role](https://www.smashingmagazine.com/2024/05/beyond-css-media-queries/) in responsive layouts. - Niels Leenheer shares [the problem with user-agent strings](https://nielsleenheer.com/articles/2024/the-problem-with-user-agent-strings/). - Frontend development has plenty of buzzwords and jargon. [Here's Brian Rinaldi on how to navigate it](https://remotesynthesis.com/blog/navigaitng-frontend-buzzwords/). 📬 **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/652/*|UID|*?ipx=t)