New WebKit Features in Safari 13.1

This year’s spring releases of Safari 13.1 for macOS Catalina, iPadOS, iOS, and watchOS bring a tremendous number of WebKit improvements for the web across Apple’s platforms. All of this with many more updates for improved privacy, performance, and a host of new tools for web developers.

These features stand out to me:

  • Pointer and Mouse Events on iPadOS
  • Web Animations API
  • Async Clipboard API
  • JavaScript Improvements: String.prototype.replaceAll() and Nullish Coalescing (??)
  • ResizeObserver
  • HTML enterkeyhint Attribute
  • Media APIs: Picture-in-Picture API and Remote Playback API
  • Subtitles and Captions

Great to see things like ResizeObserver finally make it into Safari. The Web Anmations even have gotten their own entry on the WebKit Blog.

~

The enterkeyhint attribute is something new to me. As the spec states, it allows you to set the word to be used on the enter button on virtual keyboards:

The enterkeyhint content attribute is an enumerated attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key in order to make it more helpful for users.

Allowed values are:

  • enter: Typically inserting a new line.
  • done: Typically meaning there is nothing more to input and the IME will be closed.
  • go: Typically meaning to take the user to the target of the text they typed.
  • next: Typically taking the user to the next field that will accept text.
  • previous: Typically taking the user to the previous field that will accept text.
  • search: Typically taking the user to the results of searching for the text they have typed.
  • send: Typically delivering the text to its target.

~

New WebKit Features in Safari 13.1 →
Web Animations in Safari 13.1 →

Can I Unicode‽ Unicode support across JavaScript engines

Small site by @mathias (who else?) on the Unicode support in browsers their JavaScript engines.

Changes in the Unicode Standard can affect the JavaScript language. This page gives concrete examples and tracks which exact Unicode version each browser supports for each feature.

What surprises me is that some engines support different Unicode versions per feature. Check out Safari for example that has Unicode v12 support for Identifiers, but Unicode v11 for RegExp property escapes.

Can I Unicode‽ →

What is the Fugu project?

Project Fugu is an effort to close gaps in web’s capabilities vs. native platforms. APIs that Project Fugu is delivering enable new experiences on the web while preserving the web’s core benefits of security, low-friction, and cross-platform delivery. All Project Fugu API proposals are made in the open and on the standards track.

The previously mentioned Native File System API and Wake Lock API for example are part of project Fugu.

Web Capabilities (Project Fugu) →

Puppeteer 2.1.0, with native Firefox support

Late January Puppeteer 2.1.0 got released, with native support for Firefox:

The launcher now has an option to run Puppeteer with different browsers, starting with Firefox. Puppeteer can now talk to a real, unpatched Firefox binary. This is a first step towards eventually deprecating the separate puppeteer-firefox package in favor of supporting Firefox directly in puppeteer itself.

You can define which browser to use by setting product on the options object to either "chrome" or "firefox", or by setting the PUPPETEER_PRODUCT env variable to one of those values.

puppeteer.launch({product: 'firefox'});

Installation still per NPM/Yarn

npm i puppeteer

Puppeteer →

Today, the Trident Era Ends


IE6 vs. the Acid2 test. It was only until IE8 that it passed Acid2.

When “Edgium” got released about a month ago, Schepp also wrote an extensive piece to commemorate the Trident rendering engine.

Back in the days, Microsoft was single-handedly pushing the web forward, with around 1.000(!) people working on Internet Explorer and with a 100 million dollar budget to burn per year, with almost no-one left to compete. This was massive!

As I’ve been tinkering with the web for almost 25 years by now, I remember many of the stuff mentioned. IE/Trident gave us many great things, and sometimes was ahead of its time, lest we forget.

Today, the Trident Era Ends →

New in Chrome 80

Chrome 80 recently got released, with some nice new features.

To me the highlights are:

New in Chrome 80 →

💁‍♂️ Also on my list of highlights is Linking to text fragments using a special URL fragment in the form of :~:text=[prefix-,]textStart[,textEnd][,-suffix]. It’s a but clunky to work with as you can’t manually change the fragment in the URL and hit enter to make it work, you’ll need to actually follow it through a link.


Text Fragment linking in action

Chromium-based Edge released

Two days ago, Microsoft released their new Edge browser — the one based on Chromium. Apart from a huge change in web features support it also pushes its privacy features – the new “Browser War” – forward.

With this release the version numbering also jumped from 18 to the Chromium version number it is based upon (79 at the time of writing).

Available on macOS, Windows, iOS, and Android.

Download New Microsoft Edge Browser →

SVG favicons in Chrome

A commit that landed in Chromium (and which will be available in Chrome 80) is support for SVG favicons. 🎉

🦊 Firefox already has support for SVG favicons, ever since version 41

Since most (all?) browsers always make a request to favicon.ico you can also serve an SVG at that location with the image/svg+xml MIME Type – As per tip by Mathias

Above that it’s also possible to use prefers-color-scheme in your SVG icon, thus supporting Light/Dark Mode:

🐛 There’s on small bug though: you need to refresh the page after changing to/from Dark Mode for the favicon to change.

Dark Mode Favicon Demo →

Clicking Buttons: Inconsistent behavior across browsers

Great research by Zell Liew:

I noticed browsers were inconsistent in how they handle a click on <button>. Some browsers choose to focus on the button. Some browsers don’t.

In this article, I want to show you my test and findings. Then, I want to talk about a way to overcome these inconsistencies.

Great to see all those illustration gifs to show what’s going one. Must’ve taken a ton of work to create them all.

Inconsistent behavior among browsers when clicking on buttons →