Jon Davis
@jondavis.bsky.social
📤 456
📥 71
📝 32
Web Technologies Evangelist for the Safari & WebKit teams at
reposted by
Jon Davis
Saron Yitbarek
22 days ago
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...
loading . . .
The golden rule of Customizable Select
Customizable select is coming to Safari 27.
https://webkit.org/blog/18117/the-golden-rule-of-customizable-select/
2
32
10
reposted by
Jon Davis
Brandel Zachernuk
27 days ago
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/...
loading . . .
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...
https://developer.apple.com/videos/play/wwdc2026/215/
2
11
3
reposted by
Jon Davis
Jen Simmons
27 days ago
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...
loading . . .
WWDC26: Safari and Web Technologies Group Lab | Apple
YouTube video by Apple Developer
https://www.youtube.com/watch?v=LIxZ7XyjgSg
2
14
8
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
27 days ago
0
1
0
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
27 days ago
0
0
0
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...
27 days ago
0
2
3
reposted by
Jon Davis
Timothy Chien
about 2 months ago
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 […]
loading . . .
Original post on mastodon.social
https://mastodon.social/@timdream/116608128985545395
0
3
1
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
27 days ago
0
2
0
reposted by
Jon Davis
Jen Simmons
27 days ago
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
loading . . .
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...
https://gridlanes.webkit.org
8
140
34
reposted by
Jon Davis
Jen Simmons
29 days ago
What web technology is coming in Safari 27.0? Find out here.
webkit.org/blog/17967/n...
loading . . .
News from WWDC26: WebKit in Safari 27 beta
Safari 27 beta is here.
https://webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta/
6
80
13
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...
loading . . .
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.
https://webkit.org/blog/18027/discover-mapkit-js-6-rebuilt-for-todays-web-developer/
28 days ago
0
6
1
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...
28 days ago
0
8
6
Hello!
youtube.com/shorts/X4s3tblNJ_c
loading . . .
Hello, WWDC26
YouTube video by Apple Developer
https://youtube.com/shorts/X4s3tblNJ_c
about 1 month ago
0
2
1
reposted by
Jon Davis
Dave Rupert
6 months ago
📝 Algorithmic hover states with contrast-color() - Taking some cool new features for a spin.
daverupert.com/2026/01/algo...
loading . . .
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 ...
https://daverupert.com/2026/01/algorithmic-hover-states-with-contrast-color/
1
35
15
reposted by
Jon Davis
Jen Simmons
7 months ago
More holiday cheer. For those of you asking about Safari’s “stable” Interop 2025 score…
7
139
21
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...
loading . . .
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.
https://webkit.org/blog/17431/online-identity-verification-with-the-digital-credentials-api/
9 months ago
0
4
1
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...
loading . . .
Rolling the Dice with CSS random()
Random functions in programming languages are amazing.
https://webkit.org/blog/17285/rolling-the-dice-with-css-random/
11 months ago
2
31
11
reposted by
Jon Davis
Saron Yitbarek
11 months ago
New WebKit post! “A gentle introduction to anchor positioning”
webkit.org/blog/17240/a...
loading . . .
A gentle introduction to anchor positioning
Anchor positioning allows you to place an element on the page based on where another element is.
https://webkit.org/blog/17240/a-gentle-introduction-to-anchor-positioning/
0
24
6
reposted by
Jon Davis
Saron Yitbarek
about 1 year ago
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...
loading . . .
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.
https://webkit.org/blog/17101/a-guide-to-scroll-driven-animations-with-just-css/
2
56
13
reposted by
Jon Davis
Sacha Greif
about 1 year ago
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...
loading . . .
State of CSS 2025
Take the State of CSS survey
https://survey.devographics.com/en-US/survey/state-of-css/2025
1
29
40
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!
loading . . .
Sessions & Labs - WWDC25 - Apple Developer
Learn about WWDC25 sessions, group labs, and one-on-one labs.
https://developer.apple.com/wwdc25/sessions-and-labs/one-on-one-labs#:~:text=Safari%20and%20web%20lab
about 1 year ago
1
2
2
reposted by
Jon Davis
Jen Simmons
about 1 year ago
Safari 26 beta!
webkit.org/blog/16993/n...
loading . . .
News from WWDC25: WebKit in Safari 26 beta
Welcome to WWDC25!
https://webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta/
5
81
23
reposted by
Jon Davis
Jen Simmons
about 1 year ago
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...
loading . . .
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?
https://webkit.org/blog/16929/contrast-color/#:~:text=Accessibility%20considerations%20and%20contrast%20algorithms
4
83
14
reposted by
Jon Davis
Jen Simmons
about 1 year ago
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...
loading . . .
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?
https://webkit.org/blog/16929/contrast-color/
16
503
115
reposted by
Jon Davis
Jen Simmons
about 1 year ago
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...
loading . . .
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.
https://webkit.org/blog/16831/line-height-units/
7
117
21
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...
loading . . .
The CSS shape() function
Shapes are an important aspect of graphic design.
https://webkit.org/blog/16794/the-css-shape-function/
about 1 year ago
0
49
13
reposted by
Jon Davis
Jen Simmons
about 1 year ago
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...
loading . . .
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.
https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/
10
181
38
reposted by
Jon Davis
Jen Simmons
over 1 year ago
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...
loading . . .
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.
https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
13
149
30
reposted by
Jon Davis
Jen Simmons
over 1 year ago
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...
loading . . .
Meet Declarative Web Push
Web Push notifications are a powerful and important part of the web platform.
https://webkit.org/blog/16535/meet-declarative-web-push/
6
129
30
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...
over 1 year ago
0
10
3
reposted by
Jon Davis
Jen Simmons
over 1 year ago
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...
10
169
38
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...
over 1 year ago
0
8
2
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
over 1 year ago
6
31
5
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...
over 1 year ago
0
6
1
reposted by
Jon Davis
Sacha Greif
over 1 year ago
Last one of the year! The State of JavaScript 2024 survey is now open:
survey.devographics.com/en-US/survey...
loading . . .
State of JavaScript 2024
Take the State of JavaScript survey
https://survey.devographics.com/en-US/survey/state-of-js/2024
11
184
89
reposted by
Jon Davis
Jen Simmons
over 1 year ago
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...
loading . . .
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?
https://webkit.org/blog/16214/background-clip-border-area/
10
251
52
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...
over 1 year ago
0
4
0
reposted by
Jon Davis
Ricky Mondello
over 1 year ago
"Say Goodbye to Passwords Passkey adoption is up, and problems are being fixed."
https://www.fastcompany.com/91220674/is-this-the-beginning-of-the-end-for-the-password
0
32
8
Hello Bluesky community. 👋
over 1 year ago
0
4
0
you reached the end!!
feeds!
log in