--- title: "Here's how to use those new CSS pseudo-class selectors" publication: "Frontend Focus" issue: 488 published_at: "2021-04-28" canonical_url: "https://frontendfoc.us/issues/488" --- plus a guide to getting started with CSS Custom Properties. | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​488 — April 28, 2021 | [Read on the web](https://frontendfoc.us/issues/488) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1619616605/fjqnmcucz6csazjltbuq.jpg)](https://www.smashingmagazine.com/2021/04/guide-supported-modern-css-pseudo-class-selectors/) [A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors](https://www.smashingmagazine.com/2021/04/guide-supported-modern-css-pseudo-class-selectors/) — The CSS Working Group Editor’s Draft for [Selectors Level 4](https://drafts.csswg.org/selectors-4/) includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today. Stephanie Eckles [![\](https://copm.s3.amazonaws.com/fb952d73.png)](https://revelo.io/ebooks/how-to-structure-your-remote-hiring-process/?utm_source=sponsored_content&utm_medium=cpc&utm_campaign=FrontEnd-Newsletter) [Learn How to Structure Your Remote Hiring Process](https://revelo.io/ebooks/how-to-structure-your-remote-hiring-process/?utm_source=sponsored_content&utm_medium=cpc&utm_campaign=FrontEnd-Newsletter) — A new era of remote work suddenly arrived and managers need to enhance their recruiting process if they want to win the best talent for their companies. This guide shows you how GitLab, Zapier and other companies build thriving remote teams. Revelo sponsor [Getting Started with CSS Custom Properties](https://piccalil.li/tutorial/getting-started-with-css-custom-properties) — Andy looks at just how useful Custom properties in CSS can be, “_not just for tokenising your CSS, but also for abstracting complexity and interactivity into smaller, easier to manage pieces_”. This short guide will get you up to speed with how they work and how to use them. Andy Bell **⚡️ Quick bits:** - The CSS Working Group has [maintained a list of CSS mistakes](https://wiki.csswg.org/ideas/mistakes) that "_should be corrected if anyone invents a time machine_". - Here's another new 'browser' to put on your radar: [Mighty](https://www.mightyapp.com). It's currently in early access and streams a cloud-hosted browser to your own machine. - In [last week's issue](https://frontendfoc.us/issues/487) we featured a round-up of links looking at Google's FLoC proposal — now [GitHub is the latest to block FLoC](https://github.blog/changelog/2021-04-27-github-pages-permissions-policy-interest-cohort-header-added-to-all-pages-sites/) across all GitHub Pages. - Safari 14.1 [shipped this week](https://twitter.com/jensimmons/status/1387121082176577544), with support for Flexbox Gap, however you still need to provide a fallback, so here's Ahmad Shadeed with [how to detect support](https://ishadeed.com/article/flexbox-gap/). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1619616264/wmglbhlj7k7qmenryrcj.png)](https://css-tricks.com/generating-and-solving-sudokus-in-css/) [Generating and Solving Sudokus in CSS](https://css-tricks.com/generating-and-solving-sudokus-in-css/) — “_I love to make CSS do stuff it shouldn’t_”. This is a fun look at just how to approach tackling such an experiment. Lee Meyer [How to Bake Layers of Accessibility Testing Into Your Process](https://www.smashingmagazine.com/2021/04/bake-layers-accessibility-testing-process/) — Accessibility experts Kate Kalcevich and Mike Gifford introduce “layered accessibility testing”, a practice of using a variety of tools/approaches at different stages in a product lifecycle to catch accessibility issues early (when it’s easier and cheaper to fix them). Smashing Magazine [The Complete Guide to Google's Core Web Vitals Performance Metrics](https://blog.asayer.io/the-complete-guide-to-google-s-core-web-vitals-performance-metrics) — A solid overview of all the key terms of Google’s performance metrics. We featured a handy guide along similar lines in [last week’s issue](https://frontendfoc.us/issues/487). Craig Buckler [A Webpack Tutorial for Beginners: A Step-by-Step Guide](https://www.codeinwp.com/blog/webpack-tutorial-for-beginners/) — If you’ve tried other bundler options but haven’t looked into webpack (maybe because of the bigger learning curve), this introductory tutorial might be a good starting point. Louis Lazaris beginner [[Guide\] The Truth About Developer Productivity Metrics](https://www.sleuth.io/developer-productivity-metrics?utm_source=cooperpress&utm_medium=email&utm_campaign=frontend&utm_content=metrics) — What you need to know to avoid weaponizing metrics for performance reviews, and use them to accelerate releases instead. Sleuth sponsor [Customizing Tailwind CSS](https://allround.io/articles/customizing-tailwind-css) — A look at how to make Tailwind look different whilst “_keeping all the underlying goodies_”. Ben Mann [How to Test Website Speed the Right Way](https://sematext.com/blog/measure-website-speed/) — A step-by-step tutorial on how to properly run tests to ensure optimum page load times and performance. John Demian [The Making (and Potential Benefits) of a CSS Font](https://css-tricks.com/the-making-and-potential-benefits-of-a-css-font/) — A way to render text without using any font at all. Levi Szekeres [Live Webinar: Building Editor X’s Award-Winning Homepage](https://srv.buysellads.com/ads/long/x/TFE7HTSTTTTTTTHNPN4NTTTTTTT2YZA6KTTTTTTTVTIYCYTTTTTTTMIIV7CIKNZ4G3QWY7IWVQCDEBSWF3VHVEZ5Q3JT) Editor X sponsor [How to Style and Define The Color of Radio and Checkbox Inputs](https://www.stefanjudis.com/snippets/how-to-style-and-define-the-color-of-radio-and-checkbox-inputs/) Stefan Judis ▶[Build and Deploy a Responsive Gallery Portfolio using HTML and CSS](https://www.youtube.com/watch?v=exghLWA3ZIU) Ania Kubów [A Web Developer's Guide to AVIF Images](https://darekkay.com/blog/avif-images/) Darek Kay 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/v1619610683/qignkbbs25igo5xu7yl7.png)](https://lighthouse-metrics.com/) [Lighthouse Metrics: Global Performance Insights for Your Site](https://lighthouse-metrics.com/) — Enter a URL and this tool will give you Lighthouse scores based on different geographic locations (US East, EU North, Asia Pacific North, etc). Lighthouse Metrics [Grid.js: An Advanced Table Control](https://gridjs.io/) — A lightweight, advanced table plugin that can work alongside React, Angular, Vue, or, well, nothing. Check out some of [the examples](https://gridjs.io/docs/examples/hello-world/) for more on how to use it. It uses Preact under the hood. Afshin Mehrabani [Uncut: An Open Source Typeface Catalogue, Focusing On Somewhat Contemporary Type](https://uncut.wtf/) — Currently features about 50 fonts that are available for direct download, and it seems the fonts are all free or open source. uncut [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/fezslimzqdcq1chslx3g.jpg)](https://nextapps-de.github.io/winbox/) [WinBox: An HTML5 Window Manager for the Web](https://nextapps-de.github.io/winbox/) — Very thoroughly documented and works pretty well, but feels a bit like Web-based UI experiments of 10+ years ago..? [GitHub repo](https://github.com/nextapps-de/winbox). WinBox [Inkline: A Customizable Vue.js UI/UX Library](https://inkline.io/) — Includes 50+ components designed for mobile-first apps with out-of-the-box accessibility support via WAI-ARIA. Alex Grozav [stylelint: A 'Mighty' Modern Style Linter](https://stylelint.io/) — A linter with over 170 built-in rules to help “catch errors, apply limits and enforce stylistic conventions”. [GitHub repo](https://github.com/stylelint/stylelint). stylelint Jobs [Senior Web Developer (Node/ReactJS) - Remote](https://www.komoot.com/jobs/senior-web-developer) — Millions get inspired and plan adventures with our apps. To help us make [komoot.com](https://www.komoot.com) the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team. Komoot [Find Frontend Jobs from 13K+ Remote Companies on Arc](https://arc.dev/?utm_source=newsletter&utm_medium=email&utm_campaign=arc2-launch&utm_term=042821&utm_content=frontend-focus) — Close those tabs! Arc aggregates all remote F/E developer jobs. Get hired by companies like Spotify & HubSpot. Arc.dev 🧑‍💻 Got a job listing to share? _[Here's how](https://booking.cooperpress.com/jobs)_. 📬 **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|*)