--- title: "The state of CSS in 2022" publication: "Frontend Focus" issue: 571 published_at: "2022-12-07" canonical_url: "https://frontendfoc.us/issues/571" --- Plus how to set up a screen reader testing environment, Google eyes continuous scrolling for search results, and the latest DevTools updates. | 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) #​571 — December 7, 2022 | [Read on the web](https://frontendfoc.us/issues/571) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/maqixej8welcrdgs0dja.jpg)](https://2022.stateofcss.com/en-US/) [The State of CSS 2022](https://2022.stateofcss.com/en-US/) — An always fascinating overview of the evolving CSS landscape. This year’s results highlight the speed at which changes and new features have been coming in, and the impressive rate at which they are being adopted, both by browser vendors and developers alike. The big highlights of the year? Parent selectors such as `:has()`, container queries, and the emerging Subgrid. _An essential end of year read_. Devographics [![\](https://copm.s3.amazonaws.com/96a31780.png)](https://userfront.com/tutorials/react-authentication) [React Authentication, Simplified](https://userfront.com/tutorials/react-authentication) — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications. Userfront sponsor [A Practical Guide to CSS Media Queries](https://stackdiary.com/css-media-queries/) — A closer look at media queries, sharing how they work, how to use them correctly, breakpoints, examples, and looking at the different device types that can be specified directly with the `@media` property. Alex Ivanovs [Setting Up a Screen Reader Testing Environment](https://www.sarasoueidan.com/blog/testing-environment-setup/) — Accessibility expert Sara shares how to get set up with a screen reader — a crucial step when performing manual testing, as you’ll be able to catch and fix accessibility issues that cannot be caught by automated testing tools. Sara Soueidan [Landmarks and Where to Put Them](https://www.htmhell.dev/adventcalendar/2022/4/) — An introduction to landmark elements (a bunch of elements that help you define the structure of a page, think `nav`, `main`, etc) and advice about their ideal position and structure. Kilian Valkhof **⚡️ IN BRIEF** - Google is [switching to continuous scrolling](https://9to5google.com/2022/12/05/google-search-continuous-scrolling-2/) for search results on desktop (for the first six traditional pages of results, at least). - Nic Mulvaney looks at how to [count unique visitors _without_ using typical cookies](https://notes.normally.com/cookieless-unique-visitor-counts/), UIDs or fingerprinting – some cache trickery is afoot. - [Here's a look at what's new in DevTools](https://www.youtube.com/watch?v=UVtXrWvq_oI) in Chrome 108 (including hints for inactive CSS properties). - ...and here's [what's new in the DevTools of Microsoft Edge 107](https://www.youtube.com/watch?v=QcAnrbfJN0s). - WYSIWYG! It's been 25 years since [the debut of Microsoft Frontpage 98](https://www.webdesignmuseum.org/old-software/html-editors/microsoft-frontpage-98). 📙 **Tutorials, Articles & Opinion** ▶[Accessibility: The Land That Time to Interactive Forgot](https://www.youtube.com/watch?v=tQkPog-stj8) — We tend to think of performance in terms of latency, code optimization, and the critical rendering path, but what happens when the browser creates an accessibility tree as well as the DOM? This half-hour talk considers the purpose of this, the ways its constructed in different browsers, and the impact it has on both performance and experience for people who use assistive technology. Léonie Watson [Shortcut Brings Product and Engineering Together. Try It for Free](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=pmeng) — The best issue tracking software is one that software developers are actually happy to use. Shortcut (formerly Clubhouse.io) sponsor ▶[`mask-image` Lets You Do Some Really Cool Stuff](https://www.youtube.com/watch?v=FCuNtCq3nRg) — A quick six-minute look at how the CSS `mask-image` property can quickly add some creativity to your designs. Note, [Chrome requires a `-webkit-` prefix](https://caniuse.com/?search=mask-image) for this. Kevin Powell [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1670424329/an2rjxotbasextgt7cib.png)](https://pixelpoint.io/blog/advanced-web-font-optimization-techniques/) [Advanced Web Font Optimization Techniques](https://pixelpoint.io/blog/advanced-web-font-optimization-techniques/) — Some advanced techniques to be aware of to help make your site faster and to create a better user experience when using web fonts. Alex Barashkov [Why You Should Be Using New CSS Features Today](https://techhub.iodigital.com/articles/why-you-should-be-using-new-css-features-today/why-you-should-be-using-new-css-features-today-part-2) — A [two part series](https://techhub.iodigital.com/series/why-you-should-be-using-new-css-features-today) on new CSS features (such as cascade layers, `:has()`, nesting, and more). Brecht De Rutye [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1670413170/xmwbvkiwjztkkj89wl3p.png)](https://tympanus.net/codrops/2022/11/29/sketchy-pencil-effect-with-three-js-post-processing/) [Sketchy Pencil Effect with Three.js Post-Processing](https://tympanus.net/codrops/2022/11/29/sketchy-pencil-effect-with-three-js-post-processing/) — 3D development always gets my head spinning a bit, but the sketched pencil effect here is compelling and unique. Maya Nedeljković Batić ['How We’re Making Firefox Accessible and Delightful for Everyone'](https://blog.mozilla.org/en/products/firefox/firefox-news/firefox-accessibility-text-recognition-screen-readers/) Jamie Teh (Mozilla) ▶[Top Seven Visual Studio Code Extensions for CSS](https://www.youtube.com/watch?v=f4Pv42003y4) Zoran Jambor [Digging Deeper Into Container Style Queries](https://css-tricks.com/digging-deeper-into-container-style-queries/) Geoff Graham [Reduce Image Sizes by Removing Metadata](https://calendar.perfplanet.com/2022/reduce-image-sizes-by-removing-metadata/) Robert Boedigheimer 🧑‍💻 JOBS [Software Engineer](https://www.stimulus.com/jobs/1539721e-7c7d-4f45-a5b0-17e5c02d7bd0) — [Stimulus](https://www.stimulus.com/jobs) is a social platform started by Sticker Mule to show what's possible if your mission is to increase human happiness. Join our engineering team. 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=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,q_auto/v1670426886/fqnow4yfc2jekjiafiqy.gif)](https://github.com/amandaghassaei/gpu-io) [gpu-io: A GPU-Accelerated Computing Library](https://github.com/amandaghassaei/gpu-io) — ..for physics simulations and other mathematical calculations. This is a neat look at the power of what WebGL can do. [Plenty of examples here](https://apps.amandaghassaei.com/gpu-io/examples/). Amanda Ghassaei 🎨 [Leonardo: A One-of-a-Kind Tool for Creating, Managing, and Sharing Accessible Color Systems](https://leonardocolor.io/) — From Adobe, this allows you to generate colors based on a desired contrast ratio, for better accessibility. Adobe [Automate Cron Jobs 10x Faster with Retool Workflows](https://retool.com/products/workflows/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=frontendfocus) Retool sponsor 👀 [Invisible Characters: The Unicode Characters You Can't See](https://invisible-characters.com/) — The most common of these, all ready to copy and paste, is probably the “zero-width space”. Maybe the best part is the list of “unusual applications” (_e.g. ability to create an “empty” tweet_). Use for good, not evil. Florian Pigorsch [Fontaine: Automatic Font Fallback Based on Font Metrics](https://github.com/danielroe/fontaine) — A useful utility for dealing with cumulative layout shift (CLS) due to fonts not loading quickly. Daniel Roe [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/wzdnyza6skztvsfwshaj.jpg)](https://a2000-docs.netlify.app/) [a2000 / a2k: A 'Retro 2000s Feeling' UI Library](https://a2000-docs.netlify.app/) — In the same spirit as [React95](https://react95.io/) comes a new way to create retro-feeling interfaces with modern Web technologies. There’s also an [article introducing it](https://dev.to/andrico1234/introducing-a2k-a-ui-library-designed-to-capture-that-retro-2000s-feeling-192j) and the motivation behind the project. Andrico Karoulla 📬 **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/571/*|UID|*?ipx=t)