{"$schema": "https://raw.githubusercontent.com/guitaripod/wwdc-sessions/master/schema/transcript.schema.json", "id": "wwdc2026-204", "language": "eng", "source": "https://developer.apple.com/videos/play/wwdc2026/204", "wordCount": 2351, "segments": [{"start": 7.0, "text": "Hi! I'm Jen Simmons!"}, {"start": 9.0, "text": "And I'm here to share the latest news about WebKit,"}, {"start": 13.0, "text": "the web browser engine that powers Safari."}, {"start": 16.0, "text": "The WebKit and Safari teams have been busy this year."}, {"start": 19.0, "text": "I'm excited to share what we've been working on,"}, {"start": 22.0, "text": "and how it impacts you as you make websites, web apps, and web content."}, {"start": 28.0, "text": "We've already shipped a lot of new web technology,"}, {"start": 31.0, "text": "including CSS Grid Lanes,"}, {"start": 32.0, "text": "Navigation API, Largest Contentful Paint, and many more."}, {"start": 38.0, "text": "The first beta of Safari 27 brings over 60 more new features,"}, {"start": 43.0, "text": "including Customizable Select, img sizes=auto,"}, {"start": 47.0, "text": "the stretch keyword for layout, and more."}, {"start": 51.0, "text": "Later in this session,"}, {"start": 52.0, "text": "I'll walk you through five of the most exciting new features."}, {"start": 55.0, "text": "Stick around to see what CSS Grid Lanes can do,"}, {"start": 59.0, "text": "learn how you can customize Select UI,"}, {"start": 62.0, "text": "explore what the Model Element brings to the web,"}, {"start": 65.0, "text": "and more!"}, {"start": 66.0, "text": "But first, I think what you might find most exciting as a web developer"}, {"start": 72.0, "text": "is the time my team put in this year to improve the quality of WebKit."}, {"start": 77.0, "text": "I hear from web developers that it's challenging"}, {"start": 80.0, "text": "when you to have to work around a problem in our browser engine."}, {"start": 83.0, "text": "You expect more."}, {"start": 85.0, "text": "We hear you."}, {"start": 87.0, "text": "And we set out to greatly improve the quality"}, {"start": 90.0, "text": "of existing web platform features."}, {"start": 92.0, "text": "We put our focus there this year, rather than on implementing"}, {"start": 95.0, "text": "a whole lot of brand new ones."}, {"start": 98.0, "text": "When I look at what we've accomplished so far,"}, {"start": 100.0, "text": "a few clear themes emerge."}, {"start": 103.0, "text": "I want to share one quick story from each."}, {"start": 106.0, "text": "First, compatibility."}, {"start": 108.0, "text": "A big part of this work focuses heavily on the things that directly affect users,"}, {"start": 114.0, "text": "making sure real websites work for real people."}, {"start": 117.0, "text": "Your users are our customers"}, {"start": 121.0, "text": "and we want them to have a fantastic experience."}, {"start": 125.0, "text": "My team got a report about a particular website."}, {"start": 128.0, "text": "When users typed emoji,"}, {"start": 130.0, "text": "the totally wrong character appeared."}, {"start": 133.0, "text": "But why?"}, {"start": 135.0, "text": "Well, normally, when a user presses a key,"}, {"start": 138.0, "text": "the browser sends a Unicode number to the website."}, {"start": 141.0, "text": "The number for this A uses 7-bits of data."}, {"start": 144.0, "text": "Some websites want to intercept keyboard input"}, {"start": 147.0, "text": "and process it with JavaScript."}, {"start": 150.0, "text": "For decades, websites used the .fromCharCode method"}, {"start": 153.0, "text": "to turn those numbers back into characters."}, {"start": 157.0, "text": ".fromCharCode can handle data that's 16-bits or smaller."}, {"start": 162.0, "text": "And for a long time, even as Unicode grew, that was enough."}, {"start": 167.0, "text": "But then a lot of emoji came along."}, {"start": 170.0, "text": "And these new characters got assigned bigger numbers."}, {"start": 175.0, "text": "This one needs 17-bits."}, {"start": 178.0, "text": "And on websites that still use .fromCharCode, that number got truncated"}, {"start": 182.0, "text": "to 16-bits."}, {"start": 184.0, "text": "Which maps to a totally different character."}, {"start": 187.0, "text": "So, what should we do?"}, {"start": 190.0, "text": "Try to get every website to stop using .fromCharCode?"}, {"start": 193.0, "text": "That's not realistic."}, {"start": 194.0, "text": "Users wanna type emoji now!"}, {"start": 197.0, "text": "So my colleagues adopted a clever workaround."}, {"start": 201.0, "text": "Now when a user types a character with a code point beyond 16-bits,"}, {"start": 206.0, "text": "WebKit doesn't send the number to the website at all."}, {"start": 209.0, "text": "The emoji arrives as text instead."}, {"start": 211.0, "text": "No number, no truncation."}, {"start": 214.0, "text": "And now everyone can type a face holding back tears"}, {"start": 217.0, "text": "on any website they wish."}, {"start": 219.0, "text": "It's one example of the many changes we've made to directly help users."}, {"start": 224.0, "text": "But, as a web developer, you just want your work to become easier."}, {"start": 228.0, "text": "My team is also working to rebuild the foundations of WebKit"}, {"start": 232.0, "text": "in quite a few areas."}, {"start": 234.0, "text": "Sometimes we just gotta to start from scratch to pay off technical debt."}, {"start": 238.0, "text": "This deep work isn't necessarily visible on the surface,"}, {"start": 241.0, "text": "but it makes everything built on these foundations more reliable."}, {"start": 244.0, "text": "Here's one: block-in-inline layout."}, {"start": 248.0, "text": "Block elements end up nested inside of inline elements all the time."}, {"start": 253.0, "text": "The code for handling such layout was over two decades old,"}, {"start": 256.0, "text": "and had grown tangled and hard to maintain."}, {"start": 260.0, "text": "So we rewrote it from scratch with a new architectural approach."}, {"start": 264.0, "text": "You probably won't notice"}, {"start": 266.0, "text": "but the work did fix a bunch of issues."}, {"start": 269.0, "text": "My team is also going deep to make significant progress in specific areas."}, {"start": 275.0, "text": "Media and video playback, Scrolling, SVG, Accessibility, WebRTC,"}, {"start": 281.0, "text": "even HTML tables!"}, {"start": 283.0, "text": "Each of these areas needed something different."}, {"start": 286.0, "text": "Take SVG for example."}, {"start": 288.0, "text": "To make real progress, we needed the web standard"}, {"start": 291.0, "text": "to have more clarity and detail."}, {"start": 294.0, "text": "Only there was no active SVG Working Group."}, {"start": 298.0, "text": "So, that's how my teammates accelerated their journey,"}, {"start": 301.0, "text": "by reviving and leading a new standards effort."}, {"start": 305.0, "text": "For example, what happens if a web developer makes an SVG"}, {"start": 309.0, "text": "with a radial gradient, but doesn't explicitly define its focal point"}, {"start": 314.0, "text": "with the fx and fy attributes?"}, {"start": 316.0, "text": "In SVG 1, the spec text describing"}, {"start": 319.0, "text": "the initial values of fx and fy was confusing,"}, {"start": 323.0, "text": "and different browsers interpreted it differently."}, {"start": 327.0, "text": "Now, SVG 2 removes all ambiguity."}, {"start": 331.0, "text": "The initial value is clearly defined."}, {"start": 334.0, "text": "And we're updating WebKit in Safari 27."}, {"start": 338.0, "text": "We've made over 75 improvements to SVG so far,"}, {"start": 341.0, "text": "and there's definitely more work to do."}, {"start": 344.0, "text": "A lot of the improvements my team is making"}, {"start": 347.0, "text": "are to better align with web standards."}, {"start": 350.0, "text": "Both to shore up the interoperability of longstanding web technology,"}, {"start": 355.0, "text": "and to keep up with the evolution of new features."}, {"start": 359.0, "text": "Here's something new: the CSS random function."}, {"start": 362.0, "text": "You can use it to generate random values."}, {"start": 365.0, "text": "With this code, width and height get random lengths."}, {"start": 370.0, "text": "You can name random values to reuse them."}, {"start": 372.0, "text": "But originally, names were scoped per instance."}, {"start": 376.0, "text": "Each time the box class was called, new random values got calculated."}, {"start": 380.0, "text": "We shipped random in Safari 26.2"}, {"start": 383.0, "text": "but then developers argued that maybe this could be better."}, {"start": 388.0, "text": "After discussion at the CSS Working Group,"}, {"start": 390.0, "text": "these names were redefined to be global by default."}, {"start": 394.0, "text": "Now all these boxes get the same random size."}, {"start": 397.0, "text": "We updated the scoping of names in Safari 26.5."}, {"start": 401.0, "text": "We're still the only browser with support, so there was time to make it better."}, {"start": 405.0, "text": "We're keeping up with recent changes to features like Anchor Positioning"}, {"start": 409.0, "text": "and View Transitions."}, {"start": 410.0, "text": "And we're strengthening older features, too."}, {"start": 413.0, "text": "There are hundreds of updates to better align with web standards."}, {"start": 417.0, "text": "We want it to be easier for you to create websites that just work in every browser."}, {"start": 423.0, "text": "And the fifth area of improvements:"}, {"start": 426.0, "text": "integration."}, {"start": 428.0, "text": "A bunch of improvements make sure separate features integrate together correctly."}, {"start": 433.0, "text": "In 2014, WebKit shipped support for the sizes attribute in HTML"}, {"start": 438.0, "text": "enabling responsive images."}, {"start": 441.0, "text": "In 2018, we shipped support for the CSS min() and max() functions."}, {"start": 445.0, "text": "But when we did, we somehow missed implementing support for min() and max()"}, {"start": 450.0, "text": "inside of sizes."}, {"start": 452.0, "text": "Thank you to the developers who filed issues about this."}, {"start": 455.0, "text": "When clamp() came along in 2020, we didn't do it then either."}, {"start": 459.0, "text": "This year we circled back and closed the gap in Safari 26.4."}, {"start": 464.0, "text": "These are the kinds of problems that we want to keep finding and fixing."}, {"start": 468.0, "text": "We care deeply about the experience people have when interacting with the web"}, {"start": 473.0, "text": "on our platforms."}, {"start": 474.0, "text": "Browser engines are huge"}, {"start": 476.0, "text": "and we rely on the feedback and contributions from developers"}, {"start": 480.0, "text": "to help identify pain points"}, {"start": 483.0, "text": "and inform our priorities."}, {"start": 485.0, "text": "Millions of apps in the App Store take advantage of web technologies"}, {"start": 490.0, "text": "built into WebKit and JavaScriptCore, including apps for iOS, iPadOS,"}, {"start": 495.0, "text": "macOS, visionOS, and even watchOS!"}, {"start": 499.0, "text": "We care about the web"}, {"start": 502.0, "text": "and we sincerely hope our efforts make a real difference in your success."}, {"start": 507.0, "text": "With this focus, we were able to tackle over a 1100 feature improvements"}, {"start": 511.0, "text": "and fixes since last fall."}, {"start": 512.0, "text": "That's a record for us."}, {"start": 514.0, "text": "We'd love to have you test your projects"}, {"start": 516.0, "text": "in the most recent versions of Safari Technology Preview or Safari beta."}, {"start": 521.0, "text": "And if you are having problems, please file an issue."}, {"start": 525.0, "text": "We know there's more to do."}, {"start": 527.0, "text": "I only covered a few examples of our quality efforts."}, {"start": 530.0, "text": "For all the detail, check out Safari release notes."}, {"start": 534.0, "text": "Quality improvements are a huge part of what my team has been doing this year"}, {"start": 537.0, "text": "but it's not all."}, {"start": 539.0, "text": "We've shipped some genuinely exciting new features, too."}, {"start": 543.0, "text": "In the rest of this session, I'll go through several."}, {"start": 546.0, "text": "Starting with CSS Grid Lanes, which shipped in Safari 26.4."}, {"start": 551.0, "text": "Use it to create the classic masonry layout in pure CSS."}, {"start": 555.0, "text": "No JavaScript needed."}, {"start": 557.0, "text": "It can handle use cases that you've maybe never considered before."}, {"start": 562.0, "text": "The code is simple, and it includes all the power of CSS Grid to define tracks."}, {"start": 567.0, "text": "And yes, it works in the other direction!"}, {"start": 572.0, "text": "Check out our Field Guide to Grid Lanes at gridlanes.webkit.org."}, {"start": 577.0, "text": "Click through different configurations to experience how it works,"}, {"start": 580.0, "text": "and explore the many demos."}, {"start": 583.0, "text": "Use Safari Web Inspector to better understand and adjust your layout."}, {"start": 588.0, "text": "Enable Order Numbers to reveal the order of Items."}, {"start": 592.0, "text": "It's super helpful for adjusting flowtolerance to finesse the experience"}, {"start": 596.0, "text": "for users tabbing through content."}, {"start": 599.0, "text": "And watch, \"Learn CSS Grid Lanes,\" where Brandon will walk you through"}, {"start": 603.0, "text": "exactly how to create these layouts."}, {"start": 606.0, "text": "Customizable Select is another exciting feature coming to the web."}, {"start": 610.0, "text": "Safari 27 transforms the select element."}, {"start": 613.0, "text": "It's easier than ever to implement a fully-custom design to match"}, {"start": 617.0, "text": "your website or web app"}, {"start": 619.0, "text": "with great accessibility automatically!"}, {"start": 622.0, "text": "You start by applying appearance: base-select"}, {"start": 624.0, "text": "in CSS to the element."}, {"start": 627.0, "text": "Immediately the control starts inheriting more CSS, including your font family,"}, {"start": 632.0, "text": "text color, and background color."}, {"start": 634.0, "text": "Also, apply appearance: base-select to the new ::picker pseudo-element."}, {"start": 640.0, "text": "This unlocks the ability to style the menu of options that pops up"}, {"start": 643.0, "text": "when a user taps on the control."}, {"start": 646.0, "text": "Other brand new pseudo-elements let you target specific parts of the control,"}, {"start": 650.0, "text": "like the ::checkmark, and the ::picker-icon."}, {"start": 652.0, "text": "Now, you can add additional HTML inside ."}, {"start": 656.0, "text": "Like subtext describing the details, or images representing each option."}, {"start": 661.0, "text": "All while leveraging the benefits of using a real HTML form control,"}, {"start": 666.0, "text": "with its accessibility and robustness."}, {"start": 669.0, "text": "Use Grid or Flexbox to layout the options,"}, {"start": 673.0, "text": "or anything from CSS and make it look nothing like a traditional drop down menu."}, {"start": 678.0, "text": "Tim will teach you how in his session, \"Rediscover the HTML Select Element.\""}, {"start": 684.0, "text": "Last year, we shipped , a brand new HTML element for Safari in visionOS."}, {"start": 690.0, "text": "In Safari 27, is coming to iOS, iPadOS, and macOS."}, {"start": 696.0, "text": "It joins , , and"}, {"start": 698.0, "text": "in the family of elements that handle media files."}, {"start": 702.0, "text": "This time putting 3D models into HTML."}, {"start": 706.0, "text": "By adding a model to your website,"}, {"start": 708.0, "text": "you can provide a way for users to check out products,"}, {"start": 710.0, "text": "preview an object in their space,"}, {"start": 712.0, "text": "or just have a cool experience."}, {"start": 715.0, "text": "The markup works like you would expect."}, {"start": 717.0, "text": "You can keep it simple,"}, {"start": 718.0, "text": "or just like the other media elements, you can use"}, {"start": 722.0, "text": "to link to multiple files in different formats."}, {"start": 726.0, "text": "You can optionally include attributes like environmentmap"}, {"start": 729.0, "text": "to provide custom lighting for your model."}, {"start": 730.0, "text": "Or stagemode, which sets the default to interaction behavior."}, {"start": 735.0, "text": "Target your model with JavaScript to open up a wide range of possibilities,"}, {"start": 740.0, "text": "or wrap the model in to let users on iOS & iPadOS"}, {"start": 746.0, "text": "see the product in their space."}, {"start": 748.0, "text": "You can find much more about making and using 3D models"}, {"start": 752.0, "text": "on developer.apple.com."}, {"start": 754.0, "text": "There's years of documentation, videos, and sample projects"}, {"start": 757.0, "text": "diving into what's possible."}, {"start": 760.0, "text": "Watch \"Get started with HTML Model Element\" to learn more."}, {"start": 764.0, "text": "Aleksei will explain where to get a 3D model,"}, {"start": 767.0, "text": "how to optimize it for the web,"}, {"start": 768.0, "text": "and what to do in JavaScript."}, {"start": 770.0, "text": "In visionOS 27, goes even further with immersive website environments."}, {"start": 778.0, "text": "A user can go to your website in Safari,"}, {"start": 780.0, "text": "tap to open an immersive environment"}, {"start": 782.0, "text": "and step into the model you provide."}, {"start": 785.0, "text": "Maybe you've made an immersive video game,"}, {"start": 787.0, "text": "and you want to give potential customers a way to preview it."}, {"start": 791.0, "text": "Maybe your site sells theater tickets."}, {"start": 794.0, "text": "You can show people the view from their seats on any platform"}, {"start": 797.0, "text": "and then in visionOS, they can experience the whole theater."}, {"start": 803.0, "text": "There's a new Immersive API for manipulating models."}, {"start": 806.0, "text": "It works just like the Fullscreen API."}, {"start": 809.0, "text": "Learn all about it"}, {"start": 810.0, "text": "watching \"Explore immersive website environments in visionOS\""}, {"start": 814.0, "text": "where Jean will show you how he built the theater."}, {"start": 818.0, "text": "And then, there's Web Extensions."}, {"start": 821.0, "text": "Not that long ago, making a browser extension meant creating"}, {"start": 824.0, "text": "entirely separate projects for each browser, with different code, using different APIs."}, {"start": 830.0, "text": "That's why so many extensions only worked in one browser."}, {"start": 833.0, "text": "Things started to change in 2017,"}, {"start": 835.0, "text": "when Mozilla deprecated support for Firefox add-ons"}, {"start": 838.0, "text": "and committed to a cross-compatible future."}, {"start": 841.0, "text": "In 2020, Safari 14 shipped support for Safari Web Extensions."}, {"start": 846.0, "text": "And then in 2021,"}, {"start": 848.0, "text": "we led an effort to create the W3C WebExtensions Community Group,"}, {"start": 853.0, "text": "and turn these ideas into official web standards."}, {"start": 856.0, "text": "Today, the dream of an interoperable extension future is becoming a reality."}, {"start": 862.0, "text": "You can create an extension using one codebase,"}, {"start": 865.0, "text": "one set of scripts, one manifest."}, {"start": 867.0, "text": "It's all interoperable HTML, CSS, and JavaScript,"}, {"start": 872.0, "text": "just like the rest of the web."}, {"start": 874.0, "text": "You just have to know how to package and distribute"}, {"start": 876.0, "text": "your extension to the users of each browser."}, {"start": 880.0, "text": "But if you don't use Xcode, or even have a Mac,"}, {"start": 885.0, "text": "how can you distribute your extension to Safari users?"}, {"start": 888.0, "text": "Now, you can use the Safari web extension packager."}, {"start": 892.0, "text": "It enables you to package and distribute your extension using App Store Connect"}, {"start": 896.0, "text": "from any web browser, on any operating system."}, {"start": 900.0, "text": "Today, it's easier than ever to reach Safari users."}, {"start": 903.0, "text": "You can read the documentation to learn how on developer.apple.com"}, {"start": 908.0, "text": "and watch \"Create web extensions for Safari,\" where Kiara will guide you"}, {"start": 912.0, "text": "through how to build a web extension from the ground up,"}, {"start": 915.0, "text": "as well as how to use App Store Connect."}, {"start": 918.0, "text": "Finally, I want to quickly mention MapKit JS."}, {"start": 923.0, "text": "It's a tool that you can use"}, {"start": 924.0, "text": "to embed interactive maps on your website or web app."}, {"start": 928.0, "text": "All while preserving the privacy of your users."}, {"start": 932.0, "text": "It works in all browsers, on any operating system."}, {"start": 936.0, "text": "Learn all about it at developer.apple.com."}, {"start": 940.0, "text": "My team has done a lot work this year."}, {"start": 942.0, "text": "WebKit is packed with improvements."}, {"start": 945.0, "text": "I truly hope these efforts make your work more satisfying, more successful, easier,"}, {"start": 952.0, "text": "and maybe, more fun!"}, {"start": 954.0, "text": "Check out our website, at webkit.org,"}, {"start": 956.0, "text": "where we teach about all the new features in every release of Safari."}, {"start": 961.0, "text": "There, you can learn more about what's in Safari 27,"}, {"start": 965.0, "text": "watch other WWDC sessions about web technology to dive deeper,"}, {"start": 969.0, "text": "and file issues at bugs.webkit.org."}, {"start": 973.0, "text": "We'd love to hear from you, and to know what more we can do to support your work"}, {"start": 978.0, "text": "making projects on the web for people to use and enjoy."}, {"start": 982.0, "text": "Thanks for watching!"}]}