--- title: "The history of CSS" publication: "Frontend Focus" issue: 489 published_at: "2021-05-05" canonical_url: "https://frontendfoc.us/issues/489" --- Plus what's new in Safari 14.1. | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​489 — May 5, 2021 | [Read on the web](https://frontendfoc.us/issues/489) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1620219635/xycxmtjrf0brfmzhmqsn.jpg)](https://css-tricks.com/chapter-8-css/) [The History of CSS](https://css-tricks.com/chapter-8-css/) — Jay Hoffman returns for another instalment in his excellent web history series, this time looking at the backstory of CSS. The series so far has covered things such as search, browsers, web design, and more —[all are well worth a read](https://css-tricks.com/category/history/). Oh, and there’s also an audio version of this narrated by Jeremy Keith if you fancy. CSS-Tricks [The Humble <`img`> Element and Core Web Vitals](https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/) — Images have always been a key part of the web (well, [since HTML 2.0](https://thehistoryoftheweb.com/the-origin-of-the-img-tag/) anyway ;-) — they communicate ideas instantly, but they are also a lot heavier than text to load. As such, it’s essential to get loading and displaying them right. Here's an excerpt from [Addy’s new book](https://www.smashingmagazine.com/2021/04/image-optimization-pre-release/) on the topic (also, check a [free PDF preview](http://provide.smashingmagazine.com/eBooks/image-optimization-sample-chapter.pdf)). Addy Osmani [![\](https://copm.s3.amazonaws.com/ada35adf.jpg)](https://frontendmasters.com/courses/web-perf/?utm_source=frontendfocus&utm_medium=email&utm_campaign=webperf) [Nail the Fundamentals of Web Performance](https://frontendmasters.com/courses/web-perf/?utm_source=frontendfocus&utm_medium=email&utm_campaign=webperf) — Join Todd Gardner for an in-depth course on all things web perf. You’ll learn about new core web vitals metrics, such as cumulative layout shift, and how to improve them. Frontend Masters sponsor [New WebKit Features in Safari 14.1](https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/) — We mentioned this release in passing in last week’s issue, but here’s a blog post from the WebKit team outlining what’s new — such as Flexbox Gap support, individual CSS transform properties, the Paint Timing API, WebM support, and more. Jon Davis **⚡️ Quick bits:** - Microsoft have joined the Bytecode Alliance to ['advance' WebAssembly](https://www.theregister.com/2021/04/28/microsoft_bytecode_alliance/). - Frontend Practice is a site that [challenges you to recreate real websites](https://www.frontendpractice.com) as way to hone your frontend skills. - Throwback: Remember the [CSS Zen Garden](https://www.webdesignmuseum.org/web-design-history/css-zen-garden-2003)? It's now 18 years old. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1620219967/l2lukaklinitw0sdwuyh.gif)](https://css-tricks.com/how-to-create-actions-for-selected-text-with-the-selection-api/) [How to Create Actions for Selected Text With the Selection API](https://css-tricks.com/how-to-create-actions-for-selected-text-with-the-selection-api/) — Click, drag, release: you’ve just selected some text on a webpage — a selection menu pops up with some options for what you may want to do next. Here’s how to make one. Preethi Sam [Performance-Testing the Google I/O Site](https://jakearchibald.com/2021/io-site-perf/) — Another solid performance review from Jake here, this time looking at how the Google I/O site fares on a 3G mobile connection. (Spoiler: _It’s rather slow_) Jake Archibald [The State of CSS Cross-Browser Development](https://ishadeed.com/article/cross-browser-development/) — Thoughts on why cross-browser development is better today than ever before, and a look at what issues still remain. Ahmad Shadeed [Trouble with Remote Pair Programming? Download Revelo’s eBook](https://revelo.io/ebooks/your-guide-to-remote-pair-programming/?utm_source=sponsored_content&utm_medium=cpc&utm_campaign=FrontEnd-Newsletter) — The future of work is here. Prepare yourself and your team for remote pairing. Revelo sponsor [Understanding Design Systems: Designing Component APIs](https://javascript.plainenglish.io/design-systems-designing-component-apis-25dcf81d26f5) — “Designers that understand how component APIs work can make more meaningful decisions when defining a component” Eduardo Ferreira [Don't You Forget About Me: Overlooked Breakpoints in Responsive Design](https://polypane.app/blog/overlooked-breakpoints-in-responsive-design/) Polypane [Top Metrics You Need to Understand When Measuring Frontend Performance](https://blog.asayer.io/top-metrics-you-need-to-understand-when-measuring-front-end-performance) Fernando Doglio [Variable Fonts in WordPress: How to Use Them and Why](https://creativethemes.com/blocksy/blog/variable-fonts-in-wordpress/) Karol K [The Evolution of Jamstack](https://www.smashingmagazine.com/2021/05/evolution-jamstack/) Mathias Biilmann 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1620217785/szjqszwncwhhnszpbwuw.jpg)](https://iconic.app/) [Iconic: A Free Set of 'Do-what-you-want' Pixel-Perfect Icons](https://iconic.app/) — 150+ SVG icons. Requires login to download or copy the code and the icons are searchable and categorized. James M & Orman C [CQFill: A Polyfill for CSS Container Queries](https://github.com/jsxtools/cqfill) — In case you were wondering, Container Queries have [no browser support](https://caniuse.com/css-container-queries) yet except Chrome behind a flag. **Related:** [Bramus Van Damme takes a look at how it works here](https://www.bram.us/2021/04/27/a-first-look-at-cqfill-a-polyfill-for-css-container-queries/). jonathan neal [A Better Way to Build Internal Tools](https://retool.com/?ref=cooperpress) Retool sponsor [CSS Filters Generator: A Live Playground for CSS Filters](https://justcode.today/filters/) — This online tool lets you easily generate cross-browser CSS to modify hue, saturation, brightness, contrast, etc. using CSS filters. Upload your own image or use the example. Michael Bollin [Eva.js: A Frontend Game Engine for Creating Interactive Game Projects](https://github.com/eva-engine/eva.js) — Includes components that are ready to use out-of-the-box and it uses PixiJS for performant WebGL rendering. Try it in [this live playground](https://eva.js.org/playground/). EVA [QuickSnippets: Categorized Code Snippets Sourced from Tweets](https://quicksnippets.dev/?category=css) — Nicely laid out, searchable, and categorized for easy filtering. Note that the snippets are generally in images, so not the most accessible, but it’s a nice selection. QuickSnippets [Font Subsetter: A Fast and Easy to Use Font Subset Generator](https://everythingfonts.com/subsetter) orthosie Jobs [Senior Software Engineer, Frontend (Remote)](https://arc.dev/remote-jobs?utm_source=newsletter&utm_medium=email&utm_campaign=arc2-launch&utm_term=050521&utm_content=frontend-focus) — Access thousands of remote frontend jobs from 13k+ top global companies, hiring now. Visit Arc today. 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|*)