🤩 Safari is about to support `interactive-widget` in the viewport meta tag
https://github.com/WebKit/standards-positions/issues/65#issuecomment-5346189958
This allows you to control what should happen to the viewport when the virtual keyboard gets shown.
https://developer.chrome.com/blog/viewport-resize-behavior#opting_in_to_a_different_behavior (from 2022!) has the details.
(No word on the Virtual Keyboard API though)
@matt_birchler hey are you gonna be able to get your hands on the m5 AVP?
Since you had similar issues with the quality of the virtual display I was wondering if that “10%” pixel increase had any meaningful improvements to text sharpness.
Let's start the week with an interesting interactive experiment: hover the face to see the person age (plays sound) https://piel-fawn.vercel.app/
Bad “#LiquidGlass” influences are starting to show up. Just worse than before… because Apple. You didn’t need to copy this junk. #cvsFarmacy
I've created a nice new illustration for my accessibility section!
It was not easy to find a way to represent accessibility, while matching the style of the other illustrations.
The text is a work in progress, I'm never happy with those. So, it will evolve in the future.
Check it in context with my other domains of expertise: https://stephaniewalter.design/
Also thank you to @juliemoynat for the idea of adding a little tab key to represent people with motor disabilities.
I created mocks of how #iPhonefold will accommodate #ios26 messages app and compared it to iPhone 13 mini and iPhone 16 Pro Max.
I think the iPhone mini aspect ratio and width is most ideal still.
The pro max is hard to hold and while seeing more conversation is good there's diminishing returns on the value.
The folding phone's will still feel wide in the hand but less top heavy. Screen would feel cramped but still usable. Though about as usable as original #iPhone.
We have 7 videos on web technology at WWDC25!!
- What’s new in Safari and WebKit
- What’s new for the spatial web
- Learn more about Declarative Web Push
- What’s new in passkeys
- Verify identity documents on the web
- Unlock GPU computing with WebGPU
- Meet WebKit for SwiftUI
https://webkit.org/blog/16987/web-technology-videos-at-wwdc25/
I’m super excited about `text-wrap: pretty`. It does a lot more to improve typography than you might expect — at least in Safari Technology Preview 216.
It improves all lines of text, not just the last 4. It enhances hyphenation & rag, not just avoiding short last lines.
https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/
A modal dialog you can open and close (via button, Esc, and click outside) without a single line of JS. ❤️ (currently Chrome 135 only)
edit: close button now uses command, too.
We’ve been on a roll publishing content on webkit.org:
Last Thursday: Meet Declarative Web Push https://webkit.org/blog/16535/meet-declarative-web-push/
Last Friday: Item Flow, Part 1: a new unified concept for layout https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
Monday: WebKit Features in Safari 18.4 https://webkit.org/blog/16574/webkit-features-in-safari-18-4/
Please do read! Subscribe to RSS (if that’s your thing).
Web Push is exciting. But it requires service workers and a bunch of custom code that can be different from project to project.
How about instead we standardize on using JSON & leave JavaScript out of it!
Meet Declarative Web Push. Available in iOS and iPadOS 18.4 beta.
🤩 Scroll-Driven Animations got switched on by default in WebKit!
https://github.com/WebKit/WebKit/pull/40646
This means that the next Safari Technolgy Preview release should have it, and that a stable release might follow soon 🤤
ℹ️ Learn all about SDA over at https://scroll-driven-animations.style
I put all of the demos in one place on CodePen.
https://codepen.io/collection/jONBky
Be sure to try them out in Safari Technology Preview, Safari 18.2 beta, or *perhaps* the version of Safari you have right now after enabling a flag. (The demos will tell you if your browser has support or not.)
Safari Technology Preview 205 is out!
New features include:
- `Math.sumPrecise`
- `Iterator.prototype.reduce`
- Lockdown Mode Safe Fonts
- new Wasm Exception specification
Plus fixes and polish.
https://webkit.org/blog/15999/release-notes-for-safari-technology-preview-205/
The CSS Working Group has just published the first public draft of the CSS Values and Units Level 5 Module. Although still in its early stages, this release introduces many new features and exciting improvements.
Here's a summary of some of the changes.
Does anyone who uses #Ivory by @tapbots know where "saved as draft" puts Drafts? I can't find them anywhere. It'd be genuinely better if the feature didn't exist because then I would have copied my text and saved it and now it's lost and I've frustratingly spent time searching for it and then googling it and not finding anything. #mastodon
#apple: it’s really important that something you wear on your wrist all the time like #applewatch be a size that’s comfortable for your wrist.
Also apple: we got rid of the smallest watch size and just have giant screens
Is making things larger but thinner really the best engineering compromise?
I won’t be buying another Apple Watch until it’s smaller.
Oh nice, @FirefoxNightly now has support for the 'interactive-widget' meta viewport key, to control the viewport resize behaviour when showing a virtual keyboard.
There are 3 values to choose from: resizes-visual, resizes-content, and overlays-content.
You can use one of these values to prevent a `position: fixed` element from getting placed underneath the virtual keyboard.
See https://developer.chrome.com/blog/viewport-resize-behavior#opting_in_to_a_different_behavior for all details.
Supported in Chrome from Chrome 108. No word from Safari on this.
Good reminder: don't lazy load hero or product images.
https://cloudfour.com/thinks/stop-lazy-loading-product-and-hero-images/
It hurts both your UX and your Largest Contentful Paint (LCP) score.
Apple Maps is now on the web.
https://beta.maps.apple.com/
For more info:
https://www.apple.com/newsroom/2024/07/apple-maps-on-the-web-launches-in-beta/