Sign in

Jon Davis

@jondavis.bsky.social
479 followers 71 following 32 posts

Web Technologies Evangelist for the Safari & WebKit teams at 

PostsRepliesMedia
Reposted by Jon Davis
Saron Yitbarek @saron.bsky.social · 15/06/2026
Customizable select is so powerful -- it's fully style-able with custom arrows, icons, color swatches, rich option layouts. But to make sure everyone can enjoy it, there’s one rule to follow: always include text in your options. We show you why this rule is so important: webkit.org/blog/18117/t...
webkit.org
The golden rule of Customizable Select
Customizable select is coming to Safari 27.
1338
Reposted by Jon Davis
Brandel Zachernuk @zachernuk.bsky.social · 10/06/2026
Safari on macOS and iOS 27 have joined visionOS in having full support for the HTML <model> element! 🫖 I am so excited for everyone to play with it. We go into the details about how it works and what to expect in our excellent session here: developer.apple.com/videos/play/...
developer.apple.com
Get started with the HTML Model Element - WWDC26 - Videos - Apple Developer
Learn how the model element brings interactive 3D content to your websites — now on iOS, iPadOS, macOS, and visionOS. Discover tools for...
2123
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 10/06/2026
Watch our live panel discussion “WWDC26: Safari and Web Technologies Group Lab” today at 5:00pm Pacific. Log in at developer.apple.com (with an Apple Developer account, free accounts work) to ask or upvote questions. www.youtube.com/watch?v=LIxZ...
youtube.com
WWDC26: Safari and Web Technologies Group Lab | Apple
YouTube video by Apple Developer
2146
Jon Davis @jondavis.bsky.social · 10/06/2026
Minutes away from the Web Extensions Q&A going live at 2 PM (PDT). Bring your questions about:
→ Content blockers
→ Modifying webpage content
→ Extension-to-app communication
→ Packaging and distribution
Get answers from Apple engineers. developer.apple.com/forums/activ... #wwdc26 #safari
Web Extensions Q&A
Connect with Apple engineers in the Web Extensions Q&A on the Apple Developer Forums.
June 10, 2026 2:00 PM - 4:00 PM (PDT)
Register now >
010
Jon Davis @jondavis.bsky.social · 10/06/2026
Today at 2 PM Pacific: Apple engineers answer your Web Extensions questions live for 2 hours. Got questions about: blocking content, modifying webpages, communicating with your native app, packaging and distributing extensions? developer.apple.com/forums/activ... #wwdc26 #safari #web
Web Extensions Q&A
Connect with Apple engineers in the Web Extensions Q&A on the Apple Developer Forums.
June 10, 2026 2:00 PM - 4:00 PM (PDT)
Register now >
000
Jon Davis @jondavis.bsky.social · 10/06/2026
In one hour the Spatial Web Q&A goes live on the Apple Developer Forums. If you're working on web content for visionOS, WebXR, HTML Model Element, immersive web environments, this is your chance to get answers directly from Apple engineers. #wwdc26 developer.apple.com/forums/activ...
Spatial Web Q&A
Connect with Apple engineers in the Spatial Web Q&A on the Apple Developer Forums.
June 10, 2026 | 9:00 AM - 11:00 AM (PDT)
Register now >
022
Reposted by Jon Davis
Timothy Chien @timdream.mastodon.social.ap.brid.gy · 20/05/2026
I want to brag about a thing: MapKit JS is the only mapping framework on the web that responds to user defined text zoom. It is not easy to reach text zoom in browsers nowadays (Firefox has a checkbox; Chrome only has a dropdown; only macOS Safari accepts Option+Cmd+Plus), but if you like to […]
mastodon.social
Original post on mastodon.social
031
Jon Davis @jondavis.bsky.social · 10/06/2026
Got questions about building web experiences for Apple Vision Pro? Bring them. Safari engineers will be answering live for 2 hours starting at 9 AM Pacific today. Start thinking about what you want to ask. developer.apple.com/forums/activ... #wwdc26 #visionos #web
020
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 10/06/2026
Interested in CSS Grid Lanes? We just launched the Field Guide to Grid Lanes! gridlanes.webkit.org It’s got everything you need in a fun interactive playground + tons of demos. (And read about the Field Guide at: webkit.org/blog/18098/i...) #CSSDay #wwdc26 #CSS
gridlanes.webkit.org
The Field Guide to CSS Grid Lanes
Learn Grid Lanes to create masonry layouts in pure CSS. Absorb the possibilities with the Field Guide’s interactive playground. Return to the cheat sheet. Get inspired by six real examples with dozens...
814230
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 08/06/2026
What web technology is coming in Safari 27.0? Find out here. webkit.org/blog/17967/n...
webkit.org
News from WWDC26: WebKit in Safari 27 beta
Safari 27 beta is here.
68012
Jon Davis @jondavis.bsky.social · 09/06/2026
Did you know MapKit JS 6 is built around today's web development practices? npm packages, TypeScript support, modular loading and more. Add Apple Maps' data quality and design to your website with user privacy built into its foundation. webkit.org/blog/18027/d...
webkit.org
Discover MapKit JS 6: Rebuilt for Today’s Web Developer
MapKit JS allows you to bring the power and simplicity of Apple Maps to your website or web app.
071
Jon Davis @jondavis.bsky.social · 09/06/2026
If you've run into an issue or are looking for pointers on Web Views on Apple platforms including (e.g. WebView for SwiftUI, or WKWebView) drop by our WWDC26 Q&A: developer.apple.com/forums/activ...
085
Jon Davis @jondavis.bsky.social · 05/06/2026
Hello! youtube.com/shorts/X4s3tblNJ_c
youtube.com
Hello, WWDC26
YouTube video by Apple Developer
020
Reposted by Jon Davis
Dave Rupert @davatron5000.bsky.social · 08/01/2026
📝 Algorithmic hover states with contrast-color() - Taking some cool new features for a spin. daverupert.com/2026/01/algo...
daverupert.com
Algorithmic hover states with contrast-color()
Firefox 146 added support for contrast-color() joining Safari 26 in the First Implementor’s Club. For those unfamiliar, contrast-color(<color>) is a new CSS function that will take a <color> as input ...
13511
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 20/12/2025
More holiday cheer. For those of you asking about Safari’s “stable” Interop 2025 score…
Interop 2025 graph shows Safari jumping from 64 to 98 in one fell swoop, this week. The blue line goes almost straight up, jumping ahead of all the other browsers. And the interop score line goes right with it. 

Overall scores: Chrome 95, Edge 96, Firefox 90, Safari 98.
713816
Jon Davis @jondavis.bsky.social · 03/10/2025
The Digital Credentials API is transforming online identity verification. Instead of uploading photos of IDs, users can now securely share verified credentials directly from their digital wallet. You can read up on the API and security best practices here: webkit.org/blog/17431/o...
webkit.org
Online Identity Verification with the Digital Credentials API
The rise of e-commerce in the past decade changed the way customers interact with businesses online, leading to new innovations and improved user experiences.
041
Jon Davis @jondavis.bsky.social · 22/08/2025
The WebKit team published "Rolling the Dice with CSS random()". CSS random() is a new function to generate random values for CSS properties opening up a huge range of possibilities for procedurally generated layouts. Learn more on the WebKit blog: webkit.org/blog/17285/r...
webkit.org
Rolling the Dice with CSS random()
Random functions in programming languages are amazing.
23010
Reposted by Jon Davis
Saron Yitbarek @saron.bsky.social · 14/08/2025
New WebKit post! “A gentle introduction to anchor positioning” webkit.org/blog/17240/a...
webkit.org
A gentle introduction to anchor positioning
Anchor positioning allows you to place an element on the page based on where another element is.
0246
Reposted by Jon Davis
Saron Yitbarek @saron.bsky.social · 25/06/2025
Now that my blog post got the thumbs up from @zeldman.bsky.social, I can die a happy evangelist 🥰 Check out my intro to scroll-driven animations, hope you like it too ❤️ webkit.org/blog/17101/a...
webkit.org
A guide to Scroll-driven Animations with just CSS
CSS animations have come a long way since Apple first introduced them to the web in 2007.
25612
Reposted by Jon Davis
Sacha Greif @sachagreif.com · 25/06/2025
Still a week left to take the State of CSS survey! The survey hasn't got as many responses as last year, so any help sharing will be much appreciated :) survey.devographics.com/en-US/survey...
survey.devographics.com
State of CSS 2025
Take the State of CSS survey
12938
Jon Davis @jondavis.bsky.social · 10/06/2025
Want to chat 1-on-1 with Safari and WebKit engineers during #WWDC25? Our teams are hosting labs this week — it’s your chance to ask questions, share feedback, and connect directly with the folks behind the browser. developer.apple.com/wwdc25/sessi... Hope to see you there!
developer.apple.com
Sessions & Labs - WWDC25 - Apple Developer
Learn about WWDC25 sessions, group labs, and one-on-one labs.
122
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 09/06/2025
Safari 26 beta! webkit.org/blog/16993/n...
webkit.org
News from WWDC25: WebKit in Safari 26 beta
Welcome to WWDC25!
58020
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 13/05/2025
Have you ever tried using color contrast tools backed by the WCAG 2 contrast algorithm (probably didn’t realize) — and then wonder “WHY IN THE WORLD DOES BLACK ON MEDIUM BLUE PASS WHILE WHITE ON MEDIUM BLUE FAILS?” You aren’t the only one. Learn what’s going on: webkit.org/blog/16929/c...
webkit.org
How to have the browser pick a contrasting color in CSS
Have you ever wished you could write simple CSS to declare a color, and then have the browser figure out whether black or white should be paired with that color?
48314
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 13/05/2025
Have you ever wished the browser would look at a background color and pick black or white for the text — whichever one provides more contrast? Now, the `constrast-color()` function in CSS does just that. webkit.org/blog/16929/c...
webkit.org
How to have the browser pick a contrasting color in CSS
Have you ever wished you could write simple CSS to declare a color, and then have the browser figure out whether black or white should be paired with that color?
1650297
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 24/04/2025
If you use `lh` units in your CSS, you can start to establish vertical rhythm in your web designs. Learn how in this short & easy tutorial. webkit.org/blog/16831/l...
webkit.org
Polishing your typography with line height units
See how to use line-height units when setting paragraph margins, and create vertical rhythm in your text.
711717
Jon Davis @jondavis.bsky.social · 15/04/2025
Say hello to responsive, adaptable shapes in CSS with the new shape() function! Instead of static SVG paths in clip-path, shape() allows you to define scalable, flexible shapes with familiar CSS units, variables, and even calc(). Learn more on the WebKit blog post. webkit.org/blog/16794/t...
webkit.org
The CSS shape() function
Shapes are an important aspect of graphic design.
04812
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 08/04/2025
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. webkit.org/blog/16547/b...
webkit.org
Better typography with text-wrap pretty
Support for text-wrap: pretty just shipped in Safari Technology Preview, bringing an unprecedented level of polish to typography on the web.
1018027
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 28/03/2025
Are you excited for masonry layouts in CSS? Wondering what’s happening? Well, a third option is emerging. One that unifies the `flex-flow` and `grid-auto-flow` properties into a whole new mechanism — Item Flow. Learn what it is, and what it means for Flexbox and Grid in webkit.org/blog/16587/i...
webkit.org
Item Flow – Part 1: A new unified concept for layout
CSS Grid and Flexbox brought incredible layout tools to the web, but they don’t yet do everything a designer might want.
1314928
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 27/03/2025
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. webkit.org/blog/16535/m...
webkit.org
Meet Declarative Web Push
Web Push notifications are a powerful and important part of the web platform.
612927
Jon Davis @jondavis.bsky.social · 18/12/2024
The release notes for Safari Technology Preview 210 are available covering updates to CSS, DOM, JavaScript, Rendering, Web Animations, Web API, Web Extensions, and Web Inspector. www.webkit.org/blog/16406/r...
Safari Technology Preview app icon on macOS Sequoia featuring a red and white compass needle over a purple background with white radial marks.
0102
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 11/12/2024
Safari 18.2 is here! For web developers, it’s the biggest release of new features this year. Highlights include cross-document View Transitions, text-box, spatial videos in visionOS, ruby improvements, WASM garbage collection, HTTPS by default, Genmoji, and more. webkit.org/blog/16301/w...
Side by side comparison of a layout with and without text-box. With text-box, a headline lines up with the top of the image it's next to.
1016830
Jon Davis @jondavis.bsky.social · 04/12/2024
Release notes are available for Safari Technology Preview 209 with updates to the Browser, CSS, Rendering, Scrolling, SVG, Text, Web API, Web Extensions, and Web Inspector. www.webkit.org/blog/16296/r...
Safari Technology Preview app icon on macOS Sequoia featuring a red and white compass needle over a purple background with white radial marks.
082
Jon Davis @jondavis.bsky.social · 21/11/2024
I got to be part of an effort to modernize WebKit Bugzilla and we just launched it over the weekend on bugs.webkit.org #AMA
Old WebKit BugzillaNew WebKit Bugzilla
6315
Jon Davis @jondavis.bsky.social · 21/11/2024
Release notes are available for Safari Technology Preview 208 with updates to CSS, JavaScript, Rendering, Scrolling, Web API, Web Authentication, Web Extensions, Web Inspector, and WebRTC. www.webkit.org/blog/16285/r...
Safari Technology Preview app icon on macOS Sequoia featuring a red and white compass needle over a purple background with white radial marks.
061
Reposted by Jon Davis
Sacha Greif @sachagreif.com · 13/11/2024
Last one of the year! The State of JavaScript 2024 survey is now open: survey.devographics.com/en-US/survey...
survey.devographics.com
State of JavaScript 2024
Take the State of JavaScript survey
1118376
Reposted by Jon Davis
Jen Simmons @jensimmons.bsky.social · 20/11/2024
We implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient. This article explains how it works, and shows up the possibilities in 7 demos. #css #webdesign #webdevelopment #graphicdesign webkit.org/blog/16214/b...
webkit.org
Make creative borders with background-clip border-area
How’d you like to use CSS to easily create a border from an image or gradient?
1025144
Jon Davis @jondavis.bsky.social · 11/11/2024
Release notes are available for Safari Technology Preview 207 with updates to Accessibility, CSS, Forms, JavaScript, Loading, Networking, Rendering, Scrolling, Web Extensions, and Web Inspector. webkit.org/blog/16205/r...
Safari Technology Preview app icon on macOS Sequoia featuring a red and white compass needle over a purple background with white radial marks.
040
Reposted by Jon Davis
Ricky Mondello @rmondello.com · 11/11/2024
"Say Goodbye to Passwords Passkey adoption is up, and problems are being fixed." www.fastcompany.com/91220674/is-thi…
0328
Jon Davis @jondavis.bsky.social · 11/11/2024
Hello Bluesky community. 👋
040