7 ms·

WebKit Features in Safari 16.0

68 points by MBCook 4y ago

arecurrence 4y ago
Ahhh, container queries... here at last. Passkeys look very interesting as well. What kind of adoption do people expect passkeys to get? I had read that it was a general standard rather than Apple specific. I've gotten used to password managers but they've always felt like a man in the middle.
- ArchOversight 4y ago
  Passkeys are just WebAuthN.
  - ptman 4y ago
    But very recent WebAuthN with (almost) all the extras. The featureset needed for passkeys doesn't seem to be very well supported on anything but Apple systems
- als0 4y ago
  FIDO is the general standard, though I'm unsure how Apple's implementation differs. The tricky aspect of Passkeys is that there doesn't seem to be an easy way to use them on non-Apple devices (IMHO not a deliberate lock-in, but a hard problem in general). I expect adoption to be slow because of this, in addition to the general problem of sites needing to adopt new authentication flows.
  - CharlesW 4y ago
    > The tricky aspect of Passkeys is that there doesn't seem to be an easy way to use them on non-Apple devices (IMHO not a deliberate lock-in, but a hard problem in general). Not sure if this is what you mean, but Google has pledged rich passkeys support: https://blog.google/technology/safety-security/one-step-closer-to-a-passwordless-future/ https://blog.google/technology/safety-security/one-step-clos... Also, I'm under the impression that password managers will evolve to also become passkey managers. Am I missing some reason that can't happen?
    - als0 4y ago
      I think you're right that password managers will probably evolve to handle syncing across devices. I was thinking about how iCloud Keychain doesn't work with non-Apple devices (solvable with third party password managers, I assume).
      - CharlesW 4y ago
        Ah! Yes. But also surprisingly, maybe? https://chrome.google.com/webstore/detail/icloud-passwords/pejdijmoenmkgeppbflobdenhhabjlaj?hl=en https://chrome.google.com/webstore/detail/icloud-passwords/p...
        als0 4y ago
        Oh wow, I haven't seen this before. I guess Apple don't really advertise this. Thanks for sharing.
  - alwillis 4y ago
    1Password announced support for Passkeys back in June, as did Google and Microsoft [1]. [1]: https://blog.1password.com/1password-is-joining-the-fido-alliance/ https://blog.1password.com/1password-is-joining-the-fido-all...
    - als0 4y ago
      But doesn't every website need to support passkeys? I'm not talking about client support. Server side support will have slow adoption.
      - MBCook 4y ago
        Yes, sites have to add their part too. It’s not something browsers add that “just works” everywhere like when auto-fill was created.
      - alwillis 4y ago
        I think most mainstream sites will upgrade fairly quickly. It’s great for them—no more password reset emails, etc.
- CharlesW 4y ago
  > Ahhh, container queries... here at last. For other folks wondering why this is seemingly very important: https://ethanmarcotte.com/wrote/on-container-queries/ https://ethanmarcotte.com/wrote/on-container-queries/
  - aidos 4y ago
    Thanks. That makes a lot of sense. Can definitely see the utility in that.
- olliej 4y ago
  If you're using Safari there's password management builtin, though obviously that assumes you're Apple+iCloud+safari ecosystem only which is an infeasible restriction for many people. The passkeys API is afaict actually a spec to handle hardware token based login which Safari uses the builtin SEP (or the SE? I can honestly never recall which is which) so it's more streamlined than digging around for a token. But then I don't know how it (either the specification or the safari implementation) handles multiple devices. But again it seems possible that you hit similar "are you a safari only user?" ecosystem issues.
  - MBCook 4y ago
    I think Apple released an extension (or something) to let you use your iCloud passwords in Chrome on Windows but I may be mistaken.
  - alwillis 4y ago
    If you're using Safari there's password management builtin, though obviously that assumes you're Apple+iCloud+safari ecosystem only Safari actually uses Keychain, which has been part of macOS since it existed and long before Safari and iCloud were even thought of. But again it seems possible that you hit similar "are you a safari only user?" ecosystem issues. Passkeys is WebAuthn, an industry standard that uses public key encryption. Your public key is your identity and the private key is essentially your password. It doesn’t require a secure element or anything like that. There’s no reason why Passkeys created on a Mac can’t work on Windows or Linux that have browsers and password managers that support Passkeys/WebAuthn.
    - olliej 4y ago
      > Safari actually uses Keychain, which has been part of macOS since it existed and long before Safari and iCloud were even thought of. I know how safari and keychain works, and my statement stands as a reasonable summary of the end user experience. Keychain is the mechanism by which passwords are stored, but the integration into the browser is only available in Safari - you can manually open and use KeychainAccess to get the passwords for use in other browsers but that is far from what is expected from modern password manager UI - the UI for this path is even worse on iOS. To get the syncing between devices that people want from password managers using the safari password system requires an iCloud account. > Passkeys is WebAuthn, an industry standard that uses public key encryption The generation using the secure element/touchid seems to be safari only, and the key material is as you say stored in keychain, which other browsers do not use and so do not have access to. So using them has the effect of tying you to the safari/apple ecosystem. Question of ecosystems are a matter of "how does an end user actually use a feature?" not "could a sufficiently skilled user use the feature across multiple ecosystems?".
DitheringIdiot 4y ago
AVIF support is a good thing — hopefully edge will follow and we'll be able stop having three different image types in `<picture>` elements.
- alwillis 4y ago
  Um… Microsoft has been making noise about JPEG XL…
  - ksec 4y ago
    Any links for reference?
retskrad 4y ago
When you swipe back on the trackpad to go back on my M1 MacBook Air, you must wait for the animation to end before taking any other action. That means there's basically a 0.5 second lag every time you go back. This is unacceptable. Safari for the Mac has had this issue for years and I am honestly shocked that Apple haven't fixed it. It means that they themselves don't use their own product.
- deleted 4y ago
  [deleted]
- olliej 4y ago
  I would suspect it's more gesture based navigation is uncommon among engineers/technical folk vs cmd+[,]. That said the animation shouldn't be stopping other actions - that's imo the issue with any kind of animation triggered by UI actions in general.
- jorl17 4y ago
  Over the last 5 years I have been through, in that order: - Safari - Chrome - Safari - Firefox - Safari - Firefox I keep trying to stick to Safari because of the resource usage and OS integration, but it just becomes unusable. Very very very slow. Difficult to integrate decent extensions or alternatives (e.g. RedditEnhancementSuite, Ublock Origin), and a distinct feeling of sluggishness. I have changed back to firefox (in the last 3 months) after 7 or 8 months trying to use Safari again. I just couldn't deal with it anymore. A pity, really. I just checked, and I have usage statistics (from the Timing app) on application usage since September 2017. Chrome: 54% Firefox: 32% Safari: 13% These stats are inherently a bit skewed because I still use chrome for some development, or firefox. So Chrome should come a bit down and Safari go a bit up. Also, my overall browsing usage has decreased and the data isn't adjusted for that. I used to be in "the browser" a lot more when I used chrome than now. I don't intend to go back to chrome. I can't stand google, and at the time what really tipped me over the edge (to Safari) was how awful their integration with the macOS play controls were. Chrome would assume putting or taking my airpods from my ears was the same as pressing play/pause, regardless of anything else. So sometimes I'd put them in my ears and videos would stop. Sometimes they'd start. Whatever. It was a mess. I guess I'll keep being a Firefox user. I'm so tired of moving passwords around.........
capableweb 4y ago
The image at the top is a great overview, but sadly it's a image, even though implementing it with HTML + CSS would have been trivial. Sad to see a browser engine not using browser technologies and instead opt for images. Extra sad that instead of putting the same text in the alt text, it just describes that it's a lot of text describing all the new features (and in it, the author confuses what the image is, vs what a "word cloud" is), poor screen-readers who don't get that nice overview. Anyways, for the rest of you, I passed it through OCR, so probably some mistakes somewhere: Webkit Features in Safari 16.0 / Lazy Loading Images / appearance CSS property / Removed Webkit Prefixes / ResizeObserverSize / Subgrid / CSS Containment / Fullscreen API in WKWebView / accent-color / Scroll Behavior / Shared Workers / New Viewport Units / Font Palettes for Color Fonts / Container Queries / ic Unit / :has() Pseudo Class / Cascade Layers / Web Inspector Extensions / New Web Extension APIs / Manifest version 3 / Discrete Animation / Web Animations Composite Operations / Overscroll Behavior / Web Inspector CSS Variable Grouping / AVIF / Flexbox Inspector / Dialog Element / Inert Attribute / New Apple Pay payment options / structuredClone(value) / text-decoration-skip-ink / CSS Motion Path / Screen Capture Improvements / SharedArrayBuffer / Object.hasOwn() / findLast() / findLastIndex() / at() method / text-align-last / Internationalization Updates / Form Improvements / Passkeys / Web Push for macOS Ventura / :focus-visible Pseudo Class / CSP 3 / display: contents accessibility / Wide Gamut HTML Canvas / <form>.requestSubmit() / File System API / BroadcastChannel / Web Locks API / Improved Web App Manifest Loading / Web App Manifest Icons / :has(:target) / Navigation Preload in ServiceWorker / worker-src CSP directive / WebRTC Perfect Negotiation / In-band Chapter Tracks / SharedArrayBuffer / Private Click Measurement Updates / requestVideoFrameCallback() / Shadow Realms / Web Inspector Alignment Editor / MSE in WKWebView for iPadOS / resolution media query / Increased WASM Memory Limit / <input>.showPicker() Faster VoiceOver / WASM Zero-Cost Exception Handling / Cross-Origin-Opener-Policy / Cross-Origin-Embedder-Policy
- dchest 4y ago
  Apple's VoiceOver can read the text from this picture just fine.
- olliej 4y ago
  Hmmm, looks very marketing image like - is it from WWDC presentation maybe? In which case copy/paste of an image was probably the easiest path. Thanks for the OCRing! [edit: the post links to a WWDC session, so I wouldn't be surprised if its from there - https://developer.apple.com/videos/play/wwdc2022/10048/ https://developer.apple.com/videos/play/wwdc2022/10048/ ]
simonw 4y ago
It would be great if there was a single web page I could visit in Safari 16 that demonstrated all of the new capabilities in one place.
- theklr 4y ago
  I mean that’s a tall ask, even google just does a YT video and a blog post and allow the enthusiast community to truly do the heavy lifting. Most of the features have been posted on this very site already.
- theklr 4y ago
  CSS Tricks aggregate: https://css-tricks.com/webkit-features-in-safari-16-0/ https://css-tricks.com/webkit-features-in-safari-16-0/
okhuman 4y ago
Can't wait to try Passkeys on Safari 16 as I just implemented this "passwordless" flow on my auth server https://github.com/authcompanion/authcompanion2 https://github.com/authcompanion/authcompanion2
lofaszvanitt 4y ago
ASAuthorizationSecurityKeyPublicKeyCredentialRegistrationRequest :DDD
- crispyalmond 4y ago
  At first I thought you were joking, but this is a very real class! Probably one of the longest I've seen.
taf2 4y ago
Very excited to see SharedWorkers return to safari - so many buggy work arounds can be deleted. A really great use case for SharedWorkers is to handle your websocket connection- sharing it between all open tabs. This is something ServiceWorkers can’t be used for but is great for SharedWorkers
cornedor 4y ago
Overscroll Behavior will make my life so much easier when I have to implement a modal that can scroll. You need stuff like body-scroll-lock [1] which will do a lot of different tricks and has to be implemented just right. Now we only need to add overscroll-behavior: contain; and we're done. [1]: https://github.com/willmcpo/body-scroll-lock https://github.com/willmcpo/body-scroll-lock
traspler 4y ago
And Web Push should come in 2023 (according to https://www.apple.com/ios/ios-16/features/ https://www.apple.com/ios/ios-16/features/ ). Which I both love and hate. As a developer I like it as it makes PWAs even more viable but as a user I have notifications in all browsers disabled anyways. I wonder how this "opt-in" setting will be exposed.

68 points by MBCook 4y ago

Ahhh, container queries... here at last. Passkeys look very interesting as well. What kind of adoption do people expect passkeys to get? I had read that it was a general standard rather than Apple specific. I've gotten used to password managers but they've always felt like a man in the middle.

ArchOversight 4y ago
Passkeys are just WebAuthN.
- ptman 4y ago
  But very recent WebAuthN with (almost) all the extras. The featureset needed for passkeys doesn't seem to be very well supported on anything but Apple systems
als0 4y ago
FIDO is the general standard, though I'm unsure how Apple's implementation differs. The tricky aspect of Passkeys is that there doesn't seem to be an easy way to use them on non-Apple devices (IMHO not a deliberate lock-in, but a hard problem in general). I expect adoption to be slow because of this, in addition to the general problem of sites needing to adopt new authentication flows.
- CharlesW 4y ago
  > The tricky aspect of Passkeys is that there doesn't seem to be an easy way to use them on non-Apple devices (IMHO not a deliberate lock-in, but a hard problem in general). Not sure if this is what you mean, but Google has pledged rich passkeys support: https://blog.google/technology/safety-security/one-step-closer-to-a-passwordless-future/ https://blog.google/technology/safety-security/one-step-clos... Also, I'm under the impression that password managers will evolve to also become passkey managers. Am I missing some reason that can't happen?
  - als0 4y ago
    I think you're right that password managers will probably evolve to handle syncing across devices. I was thinking about how iCloud Keychain doesn't work with non-Apple devices (solvable with third party password managers, I assume).
    - CharlesW 4y ago
      Ah! Yes. But also surprisingly, maybe? https://chrome.google.com/webstore/detail/icloud-passwords/pejdijmoenmkgeppbflobdenhhabjlaj?hl=en https://chrome.google.com/webstore/detail/icloud-passwords/p...
      - als0 4y ago
        Oh wow, I haven't seen this before. I guess Apple don't really advertise this. Thanks for sharing.
- alwillis 4y ago
  1Password announced support for Passkeys back in June, as did Google and Microsoft [1]. [1]: https://blog.1password.com/1password-is-joining-the-fido-alliance/ https://blog.1password.com/1password-is-joining-the-fido-all...
  - als0 4y ago
    But doesn't every website need to support passkeys? I'm not talking about client support. Server side support will have slow adoption.
    - MBCook 4y ago
      Yes, sites have to add their part too. It’s not something browsers add that “just works” everywhere like when auto-fill was created.
    - alwillis 4y ago
      I think most mainstream sites will upgrade fairly quickly. It’s great for them—no more password reset emails, etc.
CharlesW 4y ago
> Ahhh, container queries... here at last. For other folks wondering why this is seemingly very important: https://ethanmarcotte.com/wrote/on-container-queries/ https://ethanmarcotte.com/wrote/on-container-queries/
- aidos 4y ago
  Thanks. That makes a lot of sense. Can definitely see the utility in that.
olliej 4y ago
If you're using Safari there's password management builtin, though obviously that assumes you're Apple+iCloud+safari ecosystem only which is an infeasible restriction for many people. The passkeys API is afaict actually a spec to handle hardware token based login which Safari uses the builtin SEP (or the SE? I can honestly never recall which is which) so it's more streamlined than digging around for a token. But then I don't know how it (either the specification or the safari implementation) handles multiple devices. But again it seems possible that you hit similar "are you a safari only user?" ecosystem issues.
- MBCook 4y ago
  I think Apple released an extension (or something) to let you use your iCloud passwords in Chrome on Windows but I may be mistaken.
- alwillis 4y ago
  If you're using Safari there's password management builtin, though obviously that assumes you're Apple+iCloud+safari ecosystem only Safari actually uses Keychain, which has been part of macOS since it existed and long before Safari and iCloud were even thought of. But again it seems possible that you hit similar "are you a safari only user?" ecosystem issues. Passkeys is WebAuthn, an industry standard that uses public key encryption. Your public key is your identity and the private key is essentially your password. It doesn’t require a secure element or anything like that. There’s no reason why Passkeys created on a Mac can’t work on Windows or Linux that have browsers and password managers that support Passkeys/WebAuthn.
  - olliej 4y ago
    > Safari actually uses Keychain, which has been part of macOS since it existed and long before Safari and iCloud were even thought of. I know how safari and keychain works, and my statement stands as a reasonable summary of the end user experience. Keychain is the mechanism by which passwords are stored, but the integration into the browser is only available in Safari - you can manually open and use KeychainAccess to get the passwords for use in other browsers but that is far from what is expected from modern password manager UI - the UI for this path is even worse on iOS. To get the syncing between devices that people want from password managers using the safari password system requires an iCloud account. > Passkeys is WebAuthn, an industry standard that uses public key encryption The generation using the secure element/touchid seems to be safari only, and the key material is as you say stored in keychain, which other browsers do not use and so do not have access to. So using them has the effect of tying you to the safari/apple ecosystem. Question of ecosystems are a matter of "how does an end user actually use a feature?" not "could a sufficiently skilled user use the feature across multiple ecosystems?".

DitheringIdiot 4y ago

AVIF support is a good thing — hopefully edge will follow and we'll be able stop having three different image types in `<picture>` elements.

alwillis 4y ago
Um… Microsoft has been making noise about JPEG XL…
- ksec 4y ago
  Any links for reference?

retskrad 4y ago

When you swipe back on the trackpad to go back on my M1 MacBook Air, you must wait for the animation to end before taking any other action. That means there's basically a 0.5 second lag every time you go back. This is unacceptable. Safari for the Mac has had this issue for years and I am honestly shocked that Apple haven't fixed it. It means that they themselves don't use their own product.

deleted 4y ago
[deleted]
olliej 4y ago
I would suspect it's more gesture based navigation is uncommon among engineers/technical folk vs cmd+[,]. That said the animation shouldn't be stopping other actions - that's imo the issue with any kind of animation triggered by UI actions in general.
jorl17 4y ago
Over the last 5 years I have been through, in that order: - Safari - Chrome - Safari - Firefox - Safari - Firefox I keep trying to stick to Safari because of the resource usage and OS integration, but it just becomes unusable. Very very very slow. Difficult to integrate decent extensions or alternatives (e.g. RedditEnhancementSuite, Ublock Origin), and a distinct feeling of sluggishness. I have changed back to firefox (in the last 3 months) after 7 or 8 months trying to use Safari again. I just couldn't deal with it anymore. A pity, really. I just checked, and I have usage statistics (from the Timing app) on application usage since September 2017. Chrome: 54% Firefox: 32% Safari: 13% These stats are inherently a bit skewed because I still use chrome for some development, or firefox. So Chrome should come a bit down and Safari go a bit up. Also, my overall browsing usage has decreased and the data isn't adjusted for that. I used to be in "the browser" a lot more when I used chrome than now. I don't intend to go back to chrome. I can't stand google, and at the time what really tipped me over the edge (to Safari) was how awful their integration with the macOS play controls were. Chrome would assume putting or taking my airpods from my ears was the same as pressing play/pause, regardless of anything else. So sometimes I'd put them in my ears and videos would stop. Sometimes they'd start. Whatever. It was a mess. I guess I'll keep being a Firefox user. I'm so tired of moving passwords around.........

capableweb 4y ago

The image at the top is a great overview, but sadly it's a image, even though implementing it with HTML + CSS would have been trivial. Sad to see a browser engine not using browser technologies and instead opt for images. Extra sad that instead of putting the same text in the alt text, it just describes that it's a lot of text describing all the new features (and in it, the author confuses what the image is, vs what a "word cloud" is), poor screen-readers who don't get that nice overview. Anyways, for the rest of you, I passed it through OCR, so probably some mistakes somewhere: Webkit Features in Safari 16.0 / Lazy Loading Images / appearance CSS property / Removed Webkit Prefixes / ResizeObserverSize / Subgrid / CSS Containment / Fullscreen API in WKWebView / accent-color / Scroll Behavior / Shared Workers / New Viewport Units / Font Palettes for Color Fonts / Container Queries / ic Unit / :has() Pseudo Class / Cascade Layers / Web Inspector Extensions / New Web Extension APIs / Manifest version 3 / Discrete Animation / Web Animations Composite Operations / Overscroll Behavior / Web Inspector CSS Variable Grouping / AVIF / Flexbox Inspector / Dialog Element / Inert Attribute / New Apple Pay payment options / structuredClone(value) / text-decoration-skip-ink / CSS Motion Path / Screen Capture Improvements / SharedArrayBuffer / Object.hasOwn() / findLast() / findLastIndex() / at() method / text-align-last / Internationalization Updates / Form Improvements / Passkeys / Web Push for macOS Ventura / :focus-visible Pseudo Class / CSP 3 / display: contents accessibility / Wide Gamut HTML Canvas / <form>.requestSubmit() / File System API / BroadcastChannel / Web Locks API / Improved Web App Manifest Loading / Web App Manifest Icons / :has(:target) / Navigation Preload in ServiceWorker / worker-src CSP directive / WebRTC Perfect Negotiation / In-band Chapter Tracks / SharedArrayBuffer / Private Click Measurement Updates / requestVideoFrameCallback() / Shadow Realms / Web Inspector Alignment Editor / MSE in WKWebView for iPadOS / resolution media query / Increased WASM Memory Limit / <input>.showPicker() Faster VoiceOver / WASM Zero-Cost Exception Handling / Cross-Origin-Opener-Policy / Cross-Origin-Embedder-Policy

dchest 4y ago
Apple's VoiceOver can read the text from this picture just fine.
olliej 4y ago
Hmmm, looks very marketing image like - is it from WWDC presentation maybe? In which case copy/paste of an image was probably the easiest path. Thanks for the OCRing! [edit: the post links to a WWDC session, so I wouldn't be surprised if its from there - https://developer.apple.com/videos/play/wwdc2022/10048/ https://developer.apple.com/videos/play/wwdc2022/10048/ ]

simonw 4y ago

It would be great if there was a single web page I could visit in Safari 16 that demonstrated all of the new capabilities in one place.

theklr 4y ago
I mean that’s a tall ask, even google just does a YT video and a blog post and allow the enthusiast community to truly do the heavy lifting. Most of the features have been posted on this very site already.
theklr 4y ago
CSS Tricks aggregate: https://css-tricks.com/webkit-features-in-safari-16-0/ https://css-tricks.com/webkit-features-in-safari-16-0/

okhuman 4y ago

Can't wait to try Passkeys on Safari 16 as I just implemented this "passwordless" flow on my auth server https://github.com/authcompanion/authcompanion2 https://github.com/authcompanion/authcompanion2

lofaszvanitt 4y ago

ASAuthorizationSecurityKeyPublicKeyCredentialRegistrationRequest :DDD

crispyalmond 4y ago
At first I thought you were joking, but this is a very real class! Probably one of the longest I've seen.

taf2 4y ago

Very excited to see SharedWorkers return to safari - so many buggy work arounds can be deleted. A really great use case for SharedWorkers is to handle your websocket connection- sharing it between all open tabs. This is something ServiceWorkers can’t be used for but is great for SharedWorkers

cornedor 4y ago

Overscroll Behavior will make my life so much easier when I have to implement a modal that can scroll. You need stuff like body-scroll-lock [1] which will do a lot of different tricks and has to be implemented just right. Now we only need to add overscroll-behavior: contain; and we're done. [1]: https://github.com/willmcpo/body-scroll-lock https://github.com/willmcpo/body-scroll-lock

traspler 4y ago

And Web Push should come in 2023 (according to https://www.apple.com/ios/ios-16/features/ https://www.apple.com/ios/ios-16/features/ ). Which I both love and hate. As a developer I like it as it makes PWAs even more viable but as a user I have notifications in all browsers disabled anyways. I wonder how this "opt-in" setting will be exposed.