--- title: "Safari adds over 100 new features" publication: "Frontend Focus" issue: 586 published_at: "2023-03-29" canonical_url: "https://frontendfoc.us/issues/586" --- Plus creating CSS shapes with trigonometry, a new color contrast method to consider, and another way to generate Open Graph images. | Together with [![SpeedCurve\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_640,h_120/e_make_transparent/co_white,e_outline:7/le6wslosoyt7jmgluuoa.png)](https://www.speedcurve.com/customers/?utm_source=frontendfocus&utm_medium=email&utm_campaign=ff3_2023&utm_id=ff3_2023) #​586 — March 29, 2023 | [Read on the web](https://frontendfoc.us/issues/586) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1680094885/u3ibbjcnbsoku0jn3uji.png)](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/) [WebKit Features in Safari 16.4](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/) — **This is a mammoth release**, adding 135(!) new features including support for Web Push, a slew of new CSS properties (including `margin-trim`), Declarative Shadow DOM support, `iframe` lazy-loading support, devtool changes, and the typical bug fixes. WebKit team member [Jen Simmons said](https://front-end.social/@jensimmons/110096732637221761): > _“_It’s hard to express just how massive a release Safari 16.4 is for web developers. Last night, I was reading replies web developers posted on Twitter back in 2021, when I asked what developers need most from WebKit — and the vast majority of things you asked for have now shipped._”_ Plenty of progress has been made, so it's well worth checking out to bring yourself up to speed on what’s new. - [Safari 16.4 Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes) ↳ The full, formal release notes outlining what's new in bulletpoint form. [![\](https://copm.s3.amazonaws.com/719efff0.png)](https://www.speedcurve.com/customers/?utm_source=frontendfocus&utm_medium=email&utm_campaign=ff3_2023&utm_id=ff3_2023) [What We Can All Learn from Web Performance Leaders](https://www.speedcurve.com/customers/?utm_source=frontendfocus&utm_medium=email&utm_campaign=ff3_2023&utm_id=ff3_2023) — Case studies from companies like Airbnb, Pinterest, BBC, Zillow, Casper, Shopify, and Leroy Merlin. Learn how they speed up their sites, use performance budgets, create a culture of performance, and measure the impact of site speed on their business. SpeedCurve sponsor [Visually Hidden Content is a 'Hack' That Needs to Be Resolved, Not Enshrined](https://www.scottohara.me//blog/2023/03/21/visually-hidden-hack.html) — In [issue 583](https://frontendfoc.us/issues/583) we shared Ben Myers piece on [why he believes the web needs a native `.visually-hidden` HTML/CSS technique](https://benmyers.dev/blog/native-visually-hidden/). Here, Scott shares his take: “_while there is a common ruleset for visually hiding content, codifying that to me seems more of a silent acknowledgement that a hack is the best we can do. I don’t agree. The web should be better than that_”. Scott O'Hara [The Ultimate Guide to Image Optimization](https://calibreapp.com/blog/image-optimisation-guide) — Image optimization is the web performance ‘lowest hanging fruit’. Here’s a sound look at how to optimise imagery _without_ sacrificing its quality. Karolina Szczur **⚡️ IN BRIEF** - Good news![Push notifications are now supported cross-browser](https://web.dev/push-notifications-in-all-modern-browsers/) in the three most common browser engines. - The first [Safari 16.5 Beta is out now](https://developer.apple.com/documentation/safari-release-notes/safari-16_5-release-notes) with support for CSS Nesting. - Did you know [some home appliances have a 'Sabbath mode'](https://ericwbailey.website/published/sabbath-mode-and-assistive-technology-features/)? Eric Bailey explains, and notes how such a practice may translate to digital experiences. - Back in October of last year we shared how Manuel Matuzović was embarking on a journey to [learn modern CSS bits over the course of 100 days](https://www.matuzo.at/blog/2022/100-days-of-more-or-less-modern-css/). That journey [came to an end last month](https://www.matuzo.at/blog/2023/100daysof-day100/). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1680092500/elin8lgnvpyuzpbpboat.png)](https://danielcwilson.com/posts/css-shapes-with-trig-functions/) [Improving CSS Shapes with Trigonometric Functions](https://danielcwilson.com/posts/css-shapes-with-trig-functions/) — This is an excellent dive into how we can use trigonometric functions to simplify how we approach making regular polygons and how to use these new CSS powers to build even more complex shapes by approximating curves. Lots of code examples and demos here too. Dan Wilson ⏱️ A few weeks back we shared [this fun look at using trigonometry functions to create a working clock](https://css-tricks.com/creating-a-clock-with-the-new-css-sin-and-cos-trigonometry-functions/). [Health Benefits of Browser Diversity](https://timkadlec.com/remembers/2023-03-22-safari-and-a-healthier-web/) — With rumblings that Apple may be opening up the iOS ecosystem to other browser engines, and the positive progress the WebKit team are taking with Safari (see above), Tim is optimistic that “_a pivot in strategy from Apple could open up so many doors to a healthier web_”. Tim Kadlec [Yes-Code Automation with Retool Workflows](https://retool.com/products/workflows/?utm_medium=newsletter&utm_source=sponsor&utm_campaign=frontendfocus) — A fastest way to create intelligent, code-first integrations across your entire data stack. No extra infra required. Retool sponsor [CSS-Only Widgets Are Inaccessible](https://adrianroselli.com/2023/03/css-only-widgets-are-inaccessible.html) — Notes that any claim that a CSS-only interactive widget is accessible “_is probably wrong_”. Adrian Roselli [File Uploads for the Web: Uploading Files with HTML](https://austingil.com/uploading-files-with-html/) — The first post in a series all about uploading files to the web — this post, covers the steps needed to upload files using only HTML. [The second covers JavaScript](https://austingil.com/upload-files-with-javascript/). Austin tells us more are on the way, looking at architecture planning, performance, security, and more. Austin Gil [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1680092006/vyig99rckpfe4h0927fm.png)](https://git.apcacontrast.com/documentation/WhyAPCA.html) [Why APCA as a New Contrast Method?](https://git.apcacontrast.com/documentation/WhyAPCA.html) — This document isn’t new, but it popped up on our radar this week — it’s a solid intro/overview of the Accessible Perceptual Contrast Algorithm, a proposed solution for handling readability contrast in WCAG 3.0 and beyond. [Related repo](https://github.com/Myndex/SAPC-APCA). Myndex [The Role of X-Height in Typefaces](https://typefully.com/DanHollick/9p1b5IsMqv8X) Dan Hollick [Size Container Queries Can Detect Landscape / Portrait Orientation](https://www.stefanjudis.com/today-i-learned/size-container-queries-can-detect-landscape-portrait-orientation/) Stefan Judis [It’s About Time CAPTCHAs Become Accessible](https://uxdesign.cc/its-about-time-captchas-are-accessible-676fa293a47c) Camryn Manker [16 Little UI Design Rules That Make a Big Impact](https://www.adhamdannaway.com/blog/ui-design/16-ui-design-rules) Adham Dannaway 🧑‍💻 JOBS [Software Engineer (Frontend)](https://jobs.ashbyhq.com/stickermule/6de4ccd8-7e58-4b65-9a25-62354972bdbd?utm_source=Cooperpress) — Join our "kick ass" team. 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=easy-job-hunting) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1680085735/jnimgdr9x70adyc8bzz2.png)](https://evanw.github.io/thumbhash/) [ThumbHash: A Very Compact Representation of an Image Placeholder](https://evanw.github.io/thumbhash/) — There’s a demo at the page to give you an idea of what to expect and to give you a brief overview of how things work. [Repo here](https://github.com/evanw/thumbhash). Evan Wallace [Accessibility Checker: Scan Any Site for ADA & WCAG Compliance](https://www.accessibilitychecker.org/) — A nicely designed tool that provides clear instructions on fixing accessibility errors and warnings. Enter a URL and get a report. Accessibility Checker [Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=fourletter) Shortcut (formerly Clubhouse․io) sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1680095420/ticto6tp3k0mgzkuxfrb.png)](https://github.com/FortAwesome/Font-Awesome/releases/tag/6.4.0) [Font-Awesome 6.4.0 Released](https://github.com/FortAwesome/Font-Awesome/releases/tag/6.4.0) — This version of "_the Internet's icon library_" adds an all new ‘Sharp Light’ icon style (pictured), along with a slew of new icons (including a dinosaur). The free library now sits at [over 2,000 icons](https://fontawesome.com/search?m=free&o=r), and balloons to a massive 25,000+ for paid users. [Changelog](https://fontawesome.com/docs/changelog/). Font Awesome [IMG Quest: An Open-Source API to Generate Open Graph Images](https://img.quest/) — Add an image URL, then specify the style you want the image to appear with, along with foreground and background colors, then use the generated URL in your meta tags. Vincent Will [Bright: A React Server Component for Syntax Highlighting](https://bright.codehike.org/) — Customizable and includes all of VS Code’s syntax highlighting themes, some of which are demonstrated on the page. Code Hike **✉️ ICYMI** Missed [last week's issue](https://frontendfoc.us/issues/585)? These were the top links shared in issue [#585](https://frontendfoc.us/issues/585): - Adam Argyle shared [six CSS snippets](https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/) that every frontend developer 'should know' in 2023. - [Josh W. Comeau put his thoughts down on GPT-4](https://www.joshwcomeau.com/blog/the-end-of-frontend-development/), the changes it will bring, and putting to rest the notion that it's coming for all our jobs. - Tobias Ahlin Bjerrome showed us how to [select previous siblings with the CSS pseudo-class `:has`](https://tobiasahlin.com/blog/previous-sibling-css-has/). 📬 **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://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/586/*|UID|*?ipx=t)