--- title: "A Complete Guide to CSS Functions" publication: "Frontend Focus" issue: 439 published_at: "2020-05-06" canonical_url: "https://frontendfoc.us/issues/439" --- This week's HTML, CSS and browser news. #439 — May 6, 2020 [Read on the Web](https://frontendfoc.us/issues/439) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1588772378/h09v0f5eyw4ltiutbn3u.png)](https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html) [Introducing Web Vitals: Essential Metrics for Healthy Sites](https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html) — _Web Vitals_ is a new Google initiative to provide guidance on quality signals (think first input delay, load speed, etc.) that are key to delivering good user experiences on the web. Google [A Complete Guide to CSS Functions](https://css-tricks.com/complete-guide-to-css-functions/) — A thorough resource detailing everything you need to know about functions in CSS. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration — this is a good look at how to use them. CSS Tricks [![\](https://copm.s3.amazonaws.com/74f087cc.png)](https://go.logianalytics.com/7-design-tips-for-pixel-perfect-operational-reports-fef.html) [7 Design Tips for Pixel-Perfect Operational Reports](https://go.logianalytics.com/7-design-tips-for-pixel-perfect-operational-reports-fef.html) — Pixel-perfect operational reports allow you to control every component down to the individual pixel level, so the rendered report is set exactly to spec. But how do you design them? Follow these 7 tips for creating beautiful, high-precision reports. Logi Analytics sponsor [10 Years of HTML5 Boilerplate](https://htmlcssjavascript.com/web/10-years-of-html5-boilerplate/) — A look at some of the history behind the front-end framwork that started them all: HTML5 Boilerplate, which is now 10 years old. Rob Larsen [Firefox 76: Audio Worklets and Other Tricks](https://hacks.mozilla.org/2020/05/firefox-76-audio-worklets-and-other-tricks/) — This latest version delivers new features for web platform support, such as Audio Worklets and `Intl` improvements, on the JavaScript side. Also a number of improvements to the DevTools have been added. [Here’s the list of dev-focused changes](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/76). Chris Mills & Harald Kirschner (Mozilla) **⚡️ Quick bytes:** - The [CSS Working Group has published](https://www.w3.org/blog/news/archives/8452) a First Public Working Draft of [CSS Box Model 4](https://www.w3.org/TR/css-box-4/). The two major changes are the introduction of the margin-trim property and content related to writing modes. - Firefox for Mobile (Android, really) [now supports](https://blog.mozilla.org/addons/2020/04/14/april-extensions-for-firefox-preview/) NoScript, PrivacyBadger, and HTTPS Everywhere extensions. - Need to be compliant with European data protection law? You [can’t make access to your site dependant on a visitor agreeing that you can process their data](https://techcrunch.com/2020/05/06/no-cookie-consent-walls-and-no-scrolling-isnt-consent-says-eu-data-protection-body/) — aka a ‘consent cookie'. - Did you know that the `
` element [should only be used for line breaks that are actually part of content](https://webplatform.news/issues/2020-04-29#when-not-to-use-the-br-element) (such as in poems or addresses)? - Working with static sites? We have a [JAMstack newsletter](https://jamstack.email) that may be of interest. 💻 **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)_ 📙 **News, Tutorials & Opinion** [Exciting Things on the Horizon For CSS Layout](https://css-irl.info/exciting-things-on-the-horizon-for-css-layout/) — …such as a new Grid inspector for Chrome, the ‘gap’ property in Chrome Canary, and (amazingly) masonry-style grids in Firefox Nightly. Michelle Barker [Selection in CSS](https://ishadeed.com/article/selection-in-css/) — Another one of Ahmad’s great deep dives, this time covering the `::selection` pseudo-element and the user-select property in CSS. Ahmad Shadeed [File Sharing Now in WebKit](https://bugs.webkit.org/show_bug.cgi?id=207491) — Looks like more [Web Share API](https://w3c.github.io/web-share/) support (Level 2 / file sharing) is landing in WebKit — spotted via [this tweet from Jake Archibald](https://twitter.com/jaffathecake/status/1257947875675385857). WebKit Bugzilla [For Many, Accessibility Is An Unknown Unknown](https://kilianvalkhof.com/2020/accessibility/accessibility-is-an-unknown-unknown/) — “Accessibility is, for all intents and purposes, duct-taped onto the web. We need to make it a first class citizen in browsers. Until we do, we’ll keep wondering why developers aren’t making accessible websites.” Kilian Valkhof [Is It Time for A Web Performance Rebrand?](https://simonhearne.com/2020/web-performance-rebrand/) — “Web Performance is a niche term in a broad market, should we broaden our appeal to reach more people?” Simon Hearne [Free for 30 Days: MongoDB Atlas Is Easy. Make It Powerful.](https://studio3t.com/download/?utm_source=cooper&utm_medium=newsletter&utm_campaign=fefmay06) — Use MongoDB Atlas? Try the perfect partner for it. Save hours with our GUI & unlock the power you need, with Studio 3T. Studio 3T sponsor [Beginner's Guide to Eleventy](https://tatianamac.com/posts/beginner-eleventy-tutorial-parti/) — This is an extensive and down-to-earth multi-part introductory guide to using Eleventy the popular static site generator. Tatiana Mac [A Guide to `window.location`](https://dev.to/samanthaming/window-location-cheatsheet-4edl) — A breakdown that covers most of the methods and properties available on the DOM’s `window.location` object. samantha ming [Styling in the Shadow DOM With CSS Shadow Parts](https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/) — Using the `::part()` selector. Ollie Williams [Progressively Enhancing Radio Buttons with SVG Whilst Staying Accessible](https://christianheilmann.com/2020/05/05/progressively-enhancing-radio-buttons-with-svg-whilst-staying-accessible/) Christian Heilmann [How to Create Pure CSS Games (No JS)](https://medium.com/cssclass-com/how-to-create-pure-css-games-2a29c777bf4) Elad Shechter 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1588776204/zfuer0rkff1pkeek2txg.png)](https://github.com/gripeless/pico#readme) [Pico: Take Browser Screenshots Client-Side with JavaScript](https://github.com/gripeless/pico#readme) — Different from capturing a webpage using Puppeteer or a similar tool in that the screenshot taking happens **entirely client side.** Gripeless [🌍 I18n Ally: An All-in-One i18n Extension for VS Code](https://github.com/antfu/i18n-ally#readme) — Got some internationalization work to do? I18n Ally gives you inline annotations, automated translations via Google Translate (which you can review), progress indication, etc. Supports React, Angular, Vue and other frameworks. Anthony Fu [web-vitals-extension: A Chrome Extension to Measure Essential Metrics for A Healthy Site](https://github.com/GoogleChrome/web-vitals-extension) — This extension measures three core web vitals metrics (Largest contentful paint, cumulative layout shift, and first input delay) in a way that matches how they’re measured by Chrome and reported to other Google tools (see top feature in this issue). Google Chrome [Faster CI/CD for All Your Software Projects Using Buildkite](https://buildkite.com/?pk_campaign=fefocus-060520&pk_source=cp-fefocus&pk_medium=newsletter) Buildkite sponsor [utfu: Replace Busted Characters From Legacy Text with UTF-8](https://gitlab.com/selfagency/utfu) — Useful when old content contains characters like “— in place of a single quote, and similar legacy text issues. Daniel Sieradski [Sitesauce: A Static Site for Your Dynamically-Generated Website](https://sitesauce.app/) — This paid tool converts dynamic websites (e.g. WordPress, Ghost, Joomla, etc.) into static sites, and keeps content in sync. Miguel Piedrafita 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