--- title: "A guide to media queries, and a look at new CSS pseudo-classes on the way." publication: "Frontend Focus" issue: 444 published_at: "2020-06-10" canonical_url: "https://frontendfoc.us/issues/444" --- Plus this week's browser, HTML and CSS links. #444 — June 10, 2020 [Read on the Web](https://frontendfoc.us/issues/444) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1591796451/nq1i3twmzxqpxmqltapo.png)](https://caniuse.com/#search=is%28%29) Current browser support for 'is()' via [caniuse.com](https://caniuse.com/#search=is%28%29) [CSS `:is()` and `:where()` Are Coming to Browsers](https://webplatform.news/issues/2020-06-04) — Šime Vidas explains how these new CSS pseudo-classes can be used (_for reducing repetition, and keeping specificity low respectively_). Web Platform News [The Complete Guide to CSS Media Queries](https://polypane.app/blog/the-complete-guide-to-css-media-queries/) — A solid, thorough guide on all things CSS media queries, good as a primer, or worth revisiting for a refresher. Polypane [![\](https://res.cloudinary.com/cpress/image/upload/v1591791734/xv8wlnepj3eqa1cjabuc.jpg)](https://jamstack.email) [JAMstacked: An Email Update on The Evolving JAMstack Ecosystem](https://jamstack.email) — Join Brian Rinaldi for a regular email update on all things JAMstack, including all of the latest resources developers need to know about. Cooperpress sponsor [Animate.css v4: Just-add-water CSS Animations](https://animate.style/) — This is one of the most popular of the ‘drop-in’ CSS animation libraries, and they’ve now moved to version 4. Significantly, among [the changes](https://animate.style/#migration) is a prefix on classes. daniel eden [Cool Little CSS Grid Tricks for Your Blog](https://css-tricks.com/cool-little-css-grid-tricks-for-your-blog/) — An exploration of how you can use CSS Grid, along with properties such as `auto-fit` and `auto-fill`, to produce some nifty looking image galleries. Ana Tudor [Publishers Sue Internet Archive For 'Mass Copyright Infringement'](https://www.npr.org/2020/06/03/868861704/publishers-sue-internet-archive-for-mass-copyright-infringement?t=1591698470014) — Whilst the legal action here is specifically to do with ebooks, it’s important to underline the excellent preservation work of the Internet Archive (_which includes the Wayback Machine_) and how hugely important it is to the long-term conservation of the web as a whole. Colin Dwyer (NPR) **⚡️ Quick bits:** - A new CSS function for [mixing two colors](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/uASqamKZILY/DYm_UuokBQAJ) is in the works. - Version 8 of the [popular HTML 5 Boilerplate template](https://htmlcssjavascript.com/web/html5-boilerplate-8-0-0-released/) is now available. [Here's the related GitHub repo](https://github.com/h5bp/html5-boilerplate). - The recently released ['ScrollTrigger' GSAP plugin](https://greensock.com/scrolltrigger) claims to '_reinvent scroll-driven animations_'. - Oops. The Brave browser has been [observed autocompleting to URLs](https://www.zdnet.com/article/privacy-browser-brave-busted-for-autocompleting-urls-to-versions-it-profits-from/) it could profit from. - A [second release candidate](https://vivaldi.com/blog/snapshots/desktop/vivaldi-3-1-rc-2-desktop/) for Vivaldi 3.1 has been released. 💻 **Jobs** [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere. X-Team [Find A Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started Vettery ℹ️ _Interested in running a job listing in Frontend Focus? There's [more info here.](https://booking.cooperpress.com/jobs)_ 📙 **Tutorials & Opinion** [The Service Worker Lifecycle Explained](https://felixgerschau.com/service-worker-lifecycle-update/) — Explaining the lifecycle of Service Workers in PWAs and how to update them as fast as possible. Felix Gerschau About [Grid for Layout, Flexbox for Components](https://ishadeed.com/article/grid-layout-flexbox-components/) — Ahmad looks at the key differences between these two layout options, and although there’s no right or wrong here, he recommends some use-cases for where you may want to use each. Ahmad Shadeed [The Mad Magazine Fold-In Effect in CSS](https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/) — An impressive CSS-only recreation of the Mad magazine fold-ins (where folding a printed page would reveal a hidden message in the artwork). Thomas Park [Quick Tips for High Contrast Mode](https://sarahmhigley.com/writing/whcm-quick-tips/) — A few simple pointers to improve the High Contrast Mode experience for Windows users. Sarah Higley [Scale Your Software Projects Without Losing Speed](https://buildkite.com/case-studies/shopify?pk_campaign=fefocus-200610&pk_source=cp-fefocus&pk_medium=newsletter) — See how Shopify used Buildkite CI/CD to scale from 300 to 1800 engineers while keeping build times under 5 minutes. Buildkite sponsor [How to Create a Motion Hover Effect for a Background Image Grid](https://tympanus.net/codrops/2020/06/10/how-to-create-a-motion-hover-effect-for-a-background-image-grid/) — You’ll need to see [the demo](https://tympanus.net/Tutorials/ImageGridMotionEffect/) to get it, but it’s a neat visual effect well suited for when you’ve got a variety of photos to illustrate a concept. Mary Lou [Styling Numbered Lists with CSS Counters](https://blog.logrocket.com/styling-numbered-lists-with-css-counters/) — How to use CSS counters to customize the appearance of numbers in an ordered list. Supun Kavinda [CSS Viewport Units: A Quick Start](https://www.sitepoint.com/css-viewport-units-quick-start/) — Covers `vh`, `vw`, `vmin` and `vmax`. Asha Laxmi and Maria Antonietta Perna [Sass Color Functions in CSS](https://blog.jim-nielsen.com/2020/sass-color-functions-in-css/) Jim Nielsen 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1591793061/q2iumzjm3cf5hggrso0i.png)](https://codepen.io/oliviale/full/BaoXOOP) [CSS Grid: Newspaper Layout](https://codepen.io/oliviale/full/BaoXOOP) — This is an excellent demo showing how Grid can be used to create a _responsive_ newspaper-style layout. Olivia Ng codepen [FAB: Frontend Application Bundles](https://fab.dev/) — A bundle format for frontend applications that unify static sites, SPAs, server-side rendering (SSR), and server-side logic in a single format that’s easy to deploy. Frontend Application Bundles [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 [Quotebacks: Embed Quotes Without Losing Context](https://quotebacks.net/) — This is a small library that can embed a quote in an attractive format within the source context. Can also be used as a Chrome extension that saves to local storage. Tom Critchlow and Toby Shorin [Sorted CSS Colors: A Way to Navigate CSS Colors By Hue](https://enes.in/sorted-colors/) — This feels like quite a natural way to navigate the over 100 ‘named’ CSS colors (like `Gainsboro`, `Firebrick`, and `LawnGreen`). Mustafa Enes [SweetAlert: Attractive Modal Popup Alerts/Messages](https://sweetalert.js.org/) — Bills itself as _‘a beautiful replacement for JavaScript’s “`alert`”’_ Tristan Edwards et al. [μJam: A Minimalistic Jamstack Approach for Creating GitHub-Pages Hosted Sites](https://github.com/goessner/microjam) — Use Visual Studio Code as a lightweight authoring and publishing tool for small to medium websites. Stefan Goessner A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom