--- title: "What you need to know about new CSS in 2022" publication: "Frontend Focus" issue: 542 published_at: "2022-05-18" canonical_url: "https://frontendfoc.us/issues/542" --- Plus WordPress sees a dip... | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus ๐Ÿ‡บ๐Ÿ‡ฆ #โ€‹542 โ€” May 18, 2022 | [Read on the web](https://frontendfoc.us/issues/542) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/beiuwe9chxo7vt1bvtfw.jpg)](https://web.dev/state-of-css-2022/) [The State of CSS in 2022](https://web.dev/state-of-css-2022/) โ€” An introduction and overview of the CSS features and browser changes on slate for the rest of the year. **Thereโ€™s a lot to look through here,** including `:has()`, Viewport unit variants, `subgrid`, `color-mix()`, and much more. Itโ€™s a solid high level look at what you need to know about writing CSS in 2022 and beyond, with examples/resources to boot. Thereโ€™s also an [accompanying video version here](https://www.youtube.com/watch?v=Xy9ZXRRgpLk). Adam Argyle [Web Applications 101](https://www.robinwieruch.de/web-applications/) โ€” A single article that touches on almost everything involved in building a modern Web site from the simplest of HTML pages through to server-side rendering (SSR) and static-site generation (SSG). Not a tutorial but gives you the broader, architectural picture. Robin Wieruch [![\](https://copm.s3.amazonaws.com/316eeb46.png)](https://www.telerik.com/blogs/angular-basics-creating-dynamic-forms-using-formarray-angular?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-general&utm_content=dynamic-forms-using-formarray) [How to Create Dynamic Forms Using FormArray in Angular](https://www.telerik.com/blogs/angular-basics-creating-dynamic-forms-using-formarray-angular?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-general&utm_content=dynamic-forms-using-formarray) โ€” Have you ever booked movie tickets online? If yes, then you have used a dynamic form. In this article, youโ€™ll learn to create a dynamic form in Angular and also hear a high-level explanation of other useful classes of Angular reactive forms. Kendo UI for Angular sponsor [New WebKit Features in Safari 15.5](https://webkit.org/blog/12669/new-webkit-features-in-safari-15-5/) โ€” Safari 15.5 is here, with support for the inert attribute, the worker-src Content Security Policy directive, APIs for implementing new viewport units in WKWebView, and many fixes. Jen Simmons (WebKit) **โšก๏ธ Quick bits:** - _Privacy is an essential part of the web_. Now, the W3C TAG Privacy Principles Task Force [has released](https://www.w3.org/blog/2022/05/privacy-principles/) a first public working draft of the [Privacy Principles](https://www.w3.org/TR/privacy-principles/). - The Chrome team have [decided to postpone the restriction on SharedArrayBuffer](https://developer.chrome.com/blog/enabling-shared-array-buffer/) on desktop to Chrome 106 โ€” it's to secure more time to introduce ways to relax the requirement to enable cross-origin isolation. - CSS Day is back _in person_ next month. There's [still a few tickets left](https://cssday.nl/2022) if you fancy a trip to Amsterdam. - Dev browser [Polypane just hit version nine](https://polypane.app/blog/polypane-9-screenshot-editor-structured-data-support-and-new-debug-tools/), adding a screenshot editor, structured data support and new debug tools. - For the first time in a very long time, [WordPress' market share is shrinking](https://joost.blog/wordpress-market-share-shrinking/). - So, [what happens to a TLD when a country _stops existing_](https://astrid.tech/2022/04/05/1/dead-tlds/)? - [This site highlights examples of low-carbon web design and development](https://lowwwcarbon.com) You can submit a site for inclusion too if you'd like. ๐Ÿ“™ **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1652781386/alrdbifd2pyjjfrivw2m.png)](https://polypane.app/blog/where-is-has-new-css-selectors-that-make-your-life-easier/) [`:where()` `:is()` `:has()`? New CSS Selectors That Make Your Life Easier](https://polypane.app/blog/where-is-has-new-css-selectors-that-make-your-life-easier/) โ€” An approachable look at these three new CSS selectors, how to use them, and the current levels of browser support for each. Kilian Valkhof (Polypane) [Rethinking `Server-Timing` as a Critical Monitoring Tool](https://www.smashingmagazine.com/2022/05/rethinking-server-timing-monitoring-tool/) โ€” `Server-Timing` is uniquely powerful as the only HTTP response header that supports setting free-form values for a specific resource and making them accessible via a browser API separate from the Request/Response references themselves. Sean Roberts [Level-Up Your Cypress Testing Knowledge for Free](https://learn.cypress.io/?utm_medium=newsletter&utm_source=sponsorship&utm_campaign=frontend-focus-sponsorship-may-18-2022&utm_term=&utm_content=website) โ€” Learn from top industry experts with over 25 lessons on how to get started with Cypress. Cypress.io sponsor [Syntax Highlighting (and More) with Prism on a Static Site](https://css-tricks.com/syntax-highlighting-prism-on-a-next-js-site/) โ€” This post will show you how to implement syntax highlighting on a Next.js blog with the popular Prism.js library. Adam Rackis [Theoretical Foundations for Server-Side Rendering and Static-Rendering](https://htmlpreview.github.io/?https://github.com/lbke/ssr-theory/blob/main/readme.html) โ€” A research paper and proposal regarding rendering. It ultimately concludes that the distinction between pre-rendering (static) and SSR is somewhat blurry and proposes an API implementation wherein the framework chooses whether to serve up an existing pre-render or a server-rendered page without the developer needing to specify in advance. Eric Burel [How Modern Frameworks Perform on the New 'Interaction to Next Paint' (INP) Metric](https://web.dev/inp-in-frameworks/) Leena Sohoni, Addy Osmani, Keen Yee Liau [Quick Tip: You Might Not Need `calc()`](https://css-irl.info/quick-tip-you-might-not-need-calc/) Michelle Barker Jobs [Product Designer at Fleet (100% Remote)](https://fleet-device-management.breezy.hr/p/07d78382d0e9-product-designer) โ€” We're building a better way to manage employee laptops and servers. We're looking for someone with design and frontend experience to join the team and help iterate our web and desktop apps. Fleet [Software Engineer](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. Sticker mule [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/ikwj6dze53rwcf8bs3k8.jpg)](https://github.com/reaviz/reagraph) [Reagraph: WebGL Graph Visualizations for React](https://github.com/reaviz/reagraph) โ€” A high-performance network graph visualization library that uses WebGL under the hood for both 2D and 3D rendering options. Hereโ€™s [a basic sandbox example](https://codesandbox.io/s/reagraph-example-mwh96q) you can play with. REAVIZ [Tweetic: Convert Tweets to Static HTML](https://www.tweetic.io/) โ€” Useful to preserve the look of a tweet longterm or possibly in HTML email. Also gives you the option to use plain CSS or Tailwind for the styling. Zernonia [DFlex: A Drag-and-Drop Library for All JS Frameworks](https://www.dflex.dev/) โ€” This is a vanilla JavaScript solution with a focus on good performance and easy implementation. Try some demos [here](https://www.dflex.dev/demo/lists/symmetric/). DFlex [Find & Fix Your Accessibility Bugs. Free axe DevTools Chrome Extension](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?utm_source=frontendfocus&utm_medium=sponsored_brief&utm_campaign=20220518) Deque sponsor [Parvus: Accessible Lightbox with No Dependencies](https://github.com/deoostfrees/Parvus) โ€” I love how it says not to use overlays on Web pages but if you have to, use this! Thereโ€™s [a CodePen example.](https://codepen.io/deoostfrees/pen/GRqdEPY) Benjamin de Oostfrees [Shrink.media: An Online Tool to Reduce the Size of Images](https://www.shrink.media/) โ€” There are certainly lots of similar tools, but this one has a nice UI where you can visually compare the images and use sliders to reduce the quality and physical size. Shrink.media [Horizon UI: A Beautiful Open Source Admin Template for Chakra UI and React](https://horizon-ui.com/#/) โ€” Includes 70+ dark/light components covering a whole slew of UI possibilities. View a [live preview here](https://horizon-ui.com/horizon-ui-chakra/#/admin/default). Horizon UI ๐Ÿ“ฌ **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|*)