--- title: "Putting the C in CSS" publication: "Frontend Focus" issue: 526 published_at: "2022-01-26" canonical_url: "https://frontendfoc.us/issues/526" --- Plus what's new in DevTools. | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​526 — January 26, 2022 | [Read on the web](https://frontendfoc.us/issues/526) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1643195057/khq1ogbzamvfavh0xfgy.png)](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/) [Getting Started with CSS Cascade Layers](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/) — Cascade layers introduce the new at-rule of `@layer`. The intent is to help CSS authors be more intentional about ordering the “layers” of CSS rules as a new method of cascade management. Stephanie Eckles takes a look at how it works. Smashing Magazine [Giving Web Standards a Seat at the Table](https://thehistoryoftheweb.com/web-standards-bust/) — A great read on how standardization became important to the Internet Explorer team, thanks to the efforts of the Web Standards Project (WaSP) in pushing Microsoft to build what was then its most standards-compliant browser to date. Jay Hoffmann (The History of the Web) [![\](https://copm.s3.amazonaws.com/6b02d409.png)](https://www.contentful.com/technologies-getting-started/?utm_medium=email&utm_source=newsletter&utm_campaign=contentful-cooperpress&utm_content=frontendfocus) [Manage and Ship Content with Your Favorite Tech Stack](https://www.contentful.com/technologies-getting-started/?utm_medium=email&utm_source=newsletter&utm_campaign=contentful-cooperpress&utm_content=frontendfocus) — Contentful’s headless content platform enables building for the web with your favorite frameworks and technologies. Jamstack, SPAs, static sites — you name it, Contentful supports it. Access our guides, videos and tutorials to start building today. Contentful sponsor [What's New Since CSS3 in 2015?](https://css-tricks.com/whats-new-since-css3/) — CSS3 presented a huge, and modular, step forward for CSS. But how has CSS changed since? Chris counts the ways. Chris Coyier [Three Ways We Fail to Take Accessibility Seriously](https://css-tricks.com/why-dont-developers-take-accessibility-seriously/) — Covers perspectives on accessibility in web design that could help us bridge the ‘great divide’ between users and designers/developers. Melanie Sumner [What’s New with the DevTools?](https://www.smashingmagazine.com/2022/01/devtools-updates-2022/) — A decent break down of recent changes and additions to developer tooling in Chrome, Edge, Safari and Firefox. Patrick Brosset **⚡️ Quick bits:** - [Safari Technology Preview 138 is out now](https://webkit.org/blog/12176/release-notes-for-safari-technology-preview-138/), with support for `:focus-visible`. _More on that below..._ - Despite what you may have seen on Twitter, [Eric Meyer stresses that Apple didn't 'crowdfund' `:focus-visible`'s](https://meyerweb.com/eric/thoughts/2022/01/24/no-apple-did-not-crowdfund-focus-visible-in-safari/) development for Safari. At the same time, could Apple do more? We think yes. - Here's an interesting look at [how the team at the New York Times work with 3D content](https://rd.nytimes.com/projects/delivering-3d-scenes-to-the-web) on the web. 📙 **Tutorials, Articles & Opinion** [Comparing CSS Specificity Values](https://kilianvalkhof.com/2022/css-html/comparing-css-specificity-values/) — When it comes to CSS specificity how do you compare two selectors to decide which is highest? This post digs into just that. Kilian Valkhof [Here’s What I Didn’t Know About `:where()`](https://www.matuzo.at/blog/2022/heres-what-i-didnt-know-about-where/) — Manuel outlines how the `where()` pseudo-class might be more useful than originally thought. Manuel Matuzović [Try Fast, Intuitive Project Management That's Built for Software Teams](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=scrumgod) — Shortcut is fast and intuitive project management built for developers. Delight the scrum gods and try it now. Shortcut (formerly Clubhouse.io) sponsor [Frontend Predictions for 2022](https://www.jayfreestone.com/writing/frontend-predictions-2022/) — Thoughts on what we might see this year, including: “_the return of micro-frontends, functional JavaScript & the demise of the Jamstack as we know it_”. Jay Freestone [Animate Anything Along an SVG Path](https://tympanus.net/codrops/2022/01/19/animate-anything-along-an-svg-path/) — How to code creative animations with JavaScript using SVG paths and the `getPointAtLength()` function. Louis Hoebregts [Context-Aware Web Components Are Easier Than You Think](https://css-tricks.com/context-aware-web-components/) — A look at the four lifecycle callbacks that can be used with web components. John Rhea [Boosting Performance with Web Workers: The Bare Basics](https://blog.bitsrc.io/web-workers-a-step-by-step-guide-to-boosting-performance-with-web-workers-11307238b36e) — An introduction to the basic concept of multi-threading in JavaScript by way of Web Workers. Kyle DeGuzman [Add Less](https://css-tricks.com/add-less/) — As developers, we love to add our tools/libraries, but it can often mean overloading an app with more than it really needs and making it slower than it could be. Cassidy Williams [Trailing Slashes on URLs: Contentious or Settled?](https://www.zachleat.com/web/trailing-slash/) Zach Leatherman [Why It's Too Early to Get Excited About Web3](https://www.oreilly.com/radar/why-its-too-early-to-get-excited-about-web3/) Tim O’Reilly ['What Happened When We Turned Off AMP'](https://searchengineland.com/what-happened-when-we-turned-off-amp-378591) Henry Powderly [How Flexbox Works](https://tiffanybbrown.com/2022/01/how-does-flexbox-work/index.html) Tiffany B. Brown Jobs [AI & Software Engineers](https://www.stickermule.com/careers) — Sticker Mule is the Internet's most "kick ass" brand. Our software team operates from 17 countries, and we're always looking for more exceptional engineers. Stickermule [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-frontend&utm_content=frontend) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [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 🧑‍💻 _Looking to share your job listing in Frontend Focus? [There's more info here](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools & Resources** [mo.js 1.3: A Motion Graphics Toolbelt for the Web](https://mojs.github.io/) — Use a declarative API to get full control over animations. Check the [getting started tutorial](https://mojs.github.io/tutorials/getting-started.html#setup-mo-js-in-your-project) to see how it works from a code POV. Oleg Solomka, Xavier Foucrier, Jonas Sandstedt [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1643203777/z6smkyefez4seotvhvub.png)](https://fffuel.co/mmmotif/) [mmmotif: An SVG Generator for 3D-Like Isomorphic Patterns](https://fffuel.co/mmmotif/) — Another tool from Sébastien Noël (we’ve featured a few others here before). This one generates SVG shape patterns with a 3D feel, which you can then save or copy as SVG. Sébastien Noël [Identify, Track & Fix Problematic Tests with Buildkite’s Test Analytics ✅](https://buildkite.com/blog/announcing-buildkite-test-analytics?utm_campaign=CPress&utm_source=ppc&utm_medium=cpress&utm_term=flaky-tests&utm_content=devops) Buildkite sponsor [metaSEO: Quickly Generate Meta Tags for any Web Page](https://metaseo.itsvg.in/) — Including the OpenGraph and Twitter card data for visually representing the page on Twitter and Facebook, say. Vishwa Gaurav [DevToys: A Native Windows App That's a Swiss Army Knife for Developers](https://devtoys.app/) — Includes a number of built-in utilities that work offline including formatting and converting JSON, text diffs, testing RegExp, encoders/decoders, image compression, and lots more. Etienne Baudoux [Colourpalette: A Gallery of Beautiful Colors for Your CSS](https://colourpalette.xyz/) — This is a pretty simple project, but it stands out simply because it was built by an 11-year old developer. Love to see someone so young building stuff on the web! saharsh v [PostSrc Components: 50+ Categorized Tailwind CSS Components](https://postsrc.com/components) PostSrc [rasterizeHTML.js: Render HTML onto an HTML Canvas](http://cburgmer.github.io/rasterizeHTML.js/) Christoph Burgmer 📬 **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/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)