Whenever a browser upgrades versions, it’s a little marketing event, and rightly so. Looks like for Firefox it’s about once a month, Chrome is ~6 weeks, and Safari is once a year.
Chrome 80 just dropped, as they say, and we get a video and blog post. What strikes me about releases like this these days is that there isn’t big flagship features that we’re all collectively interested in as developers. Maybe a little great divide stuff going on, but more broadly, just different front-end developers (the people who care about browsers) work on different things and so care about different things.
Let me try to illustrate that with a feature rundown of this release:
- Content Indexing is a way to access metadata of files your browser has cached (that you specifically cached). Seems like a great idea, but I’ve never really dealt with offline stuff like this seriously so it’s not really in my wheelhouse.
- Web Workers can use ES modules now. That’s cool, I didn’t even know they couldn’t.
- Origin Trials are like feature flags I guess, except you opt-in from a website and not just on your local browser. Totally new to me, but sounds like they have been effective in gathering and refining new APIs.
- Periodic background sync. Jeremy laid out how useful this in his article where he called it “silent push”. You can also schedule notifications, making them more resilient to offline situations.
- HTTP content tries to auto-upgrade to HTTPS if the site is HTTPS. Great idea. I use the Cloudflare setting for this, but makes sense it moves to the browser level.
- Contact Picker API. Very much like this, in the same way I like the Web Payments API. If I can build a UI that helps users fill out forms faster and more accurately, that’s great. That’s why I use 1Password. I use it just as much for filling out address and credit card forms as I do for passwords.
- SameSite cookies. Scares me. I know that we need to update our cookies on CodePen to make sure it has this value but I haven’t researched it deep enough yet, and 80 is already shipping.
- Actual CSS stuff!
overflow-wrap: anywhere;I can’t seem to grok the difference. This stuff is already very complicated.
- Nothing HTML related. Poor HTML never gets nuthin’.
And then the two that really caught my eye!
- SVG favicons. Awesome. We already ship one for CodePen because it looks so nice on Safari. Although Safari supports it with
and Chrome is supporting it with
so I’m not quite sure what to do there. I guess since Firefox supports SVG with
rel="icon", just ship SVG for both?
- Text fragments. How cool. I had no idea this was coming. People have been talking about this for at least a decade. The idea is linking to things on a page without needing a
idto link down to, just using text. The syntax is funky:
https://site.com/#:~:text=Links to first occurance of this text.
Here’s a video from Stefan Judis:
Text fragments will soon be available in Chromium land. You can then use `#:~:text=` to highlight certain text. 😲
🔗 Chrome status: https://t.co/e60xiQoQoT
🔗 Spec: https://t.co/t02TFfGO2X#devsheets
Video alt: Usage of text fragments to highlight text on wikipedia pic.twitter.com/W5tUYZk8NY
— Stefan Judis (@stefanjudis) February 5, 2020
Especially notable to me: it links you to the middle of the page, not headbutting the top. I much prefer this.