# Safari Technology Preview Published articles for Safari Technology Preview. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Release Notes for Safari Technology Preview 256 DevFeed: [Release Notes for Safari Technology Preview 256]() Original publisher: [Read original article]() Author: Jon Davis Published: 2026-11-05T00:09:57Z Content type: release Language: en Sources: [WebKit]() Topics: [Release notes](), [releases]() Tags: [macos](), [macos-golden-gate](), [preview](), [release](), [safari](), [safari-technology-preview]() ### AI overview Safari Technology Preview 256 is available for macOS Golden Gate and macOS Tahoe; installed copies can be updated in System Settings under General -> Software Update. The release adds web platform capabilities including CSS `font-palette-mix()` on Cocoa, canvas text style options, SVG 2 text layout, and WebGPU texture component swizzling. It also improves navigation and selector performance and includes fixes across JavaScript execution, CSS layout, media playback, networking, rendering, Web APIs, extensions, and developer tools. Notable security-related changes include blocking Geolocation in non-secure contexts, correcting secure-context handling for `data:` documents, and warning when COOP/COEP isolation is expected but not achieved. XML external entities are deprecated with a console warning; `` `rightmargin` and `bottommargin` attributes are removed. These notes cover the listed WebKit changes from revisions 323398@main through 324653@main. ### Source excerpt Safari Technology Preview Release 256 is now available for download for macOS Golden Gate and macOS Tahoe. ## Release Notes for Safari Technology Preview 255 DevFeed: [Release Notes for Safari Technology Preview 255]() Original publisher: [Read original article]() Author: Saron Yitbarek Published: 2026-10-22T21:22:48Z Content type: release Language: en Sources: [WebKit]() Topics: [Release notes](), [releases](), [web animation]() Tags: [accessibility](), [animations](), [api](), [aspect](), [attr](), [audio](), [auto-fill](), [await](), [beacon](), [block](), [button](), [download](), [macos](), [macos-golden-gate](), [news](), [notes](), [preview](), [release](), [release-notes](), [safari](), [safari-technology-preview]() ### AI overview Safari Technology Preview 255 is available for macOS Golden Gate and macOS Tahoe, with fixes spanning WebKit and new features in forms, SVG, web APIs, extensions, and Web Inspector. The notes highlight extensive CSS and layout corrections, including many `line-clamp` fixes, plus JavaScript, media playback and codec, networking, accessibility, and rendering fixes. New capabilities include buttons in native select appearance, SVG `textPath` side support, transferable streams for `AudioWorklet`, the `cross-origin-isolated` Permissions Policy feature, extension notification methods, and Web Inspector animation editing and console previews. One known issue remains: `document.activeElement` returns `` rather than `null` in HTML documents without a body, differing from other browsers and affecting WebDriver's Get Active Element command. ### Source excerpt Safari Technology Preview Release 255 is now available for download for macOS Golden Gate and macOS Tahoe. ## Release Notes for Safari Technology Preview 254 DevFeed: [Release Notes for Safari Technology Preview 254]() Original publisher: [Read original article]() Author: Jon Davis Published: 2026-10-08T23:29:40Z Content type: release Language: en Sources: [WebKit]() Topics: [view transitions](), [web animation](), [Canvas](), [Visual Studio Code]() Tags: [macos](), [macos-golden-gate](), [release](), [safari](), [safari-technology-preview]() ### AI overview Safari Technology Preview 254 is available for macOS Golden Gate and macOS Tahoe. The release notes describe WebKit changes, including CSS features and fixes, JavaScript and Web API corrections, accessibility updates, and improvements to WebDriver, WebAssembly, WebGPU, and media handling. ### Source excerpt Safari Technology Preview Release 254 is now available for download for macOS Golden Gate and macOS Tahoe. ## Web-Perf Wednesday 011 - SpeedCurve's INP Observer Missed Its Threshold DevFeed: [Web-Perf Wednesday 011 - SpeedCurve's INP Observer Missed Its Threshold]() Original publisher: [Read original article]() Author: Harry Roberts Published: 2026-09-30T11:00:00Z Content type: article Language: en Sources: [CSS Wizardry]() Topics: [observability](), [Interaction to Next Paint](), [Latency]() Tags: [browser](), [firefox](), [inp](), [perf](), [performance](), [releases](), [rum](), [safari](), [safari-technology-preview](), [tooling]() ### AI overview A bug in SpeedCurve's lux.js wrapper nested Event Timing observer options incorrectly, leaving the browser at its default 104 ms threshold. Interactions below that threshold could be omitted from the data used to calculate INP and its attribution. The fix was merged on 24 September and adds an integration test for sub-104 ms interactions. The article also notes smaller Firefox and Safari Technology Preview changes and recommends tracking lux.js versions and rollout timing when comparing RUM data. ### Source excerpt A long-standing lux.js bug left Event Timing on its 104 ms default, while browser releases improve testing and rendering performance. ## Release Notes for Safari Technology Preview 253 DevFeed: [Release Notes for Safari Technology Preview 253]() Original publisher: [Read original article]() Author: Saron Yitbarek Published: 2026-09-23T21:46:47Z Content type: release Language: en Sources: [WebKit]() Topics: [Release notes](), [WebKit](), [CSS](), [macOS](), [Web Development](), [web-standards]() Tags: [accessibility](), [animation](), [download](), [macos](), [new-features](), [news](), [release](), [release-notes](), [safari](), [safari-technology-preview](), [software](), [webkit]() ### AI overview Safari Technology Preview 253 is available for macOS and includes WebKit changes covering accessibility, animations, CSS, and related resolved issues. ### Source excerpt Safari Technology Preview Release 253 is now available for download for macOS Golden Gate and macOS Tahoe. ## Release Notes for Safari Technology Preview 252 DevFeed: [Release Notes for Safari Technology Preview 252]() Original publisher: [Read original article]() Author: Jon Davis Published: 2026-09-11T17:02:22Z Content type: release Language: en Sources: [WebKit]() Topics: [Release notes](), [WebKit](), [CSS](), [animations](), [Web Accessibility (a11y)](), [macOS]() Tags: [accessibility](), [animation](), [css](), [macos](), [release-notes](), [safari-technology-preview](), [webkit]() ### AI overview Safari Technology Preview 252 is available for macOS and includes WebKit fixes and new features covering accessibility, animations, and CSS behavior. ### Source excerpt Safari Technology Preview Release 252 is now available for download for macOS Golden Gate and macOS Tahoe. ## Release Notes for Safari Technology Preview 251 DevFeed: [Release Notes for Safari Technology Preview 251]() Original publisher: [Read original article]() Author: Saron Yitbarek Published: 2026-08-26T21:36:31Z Content type: release Language: en Sources: [WebKit]() Topics: [Release notes](), [releases](), [CSS](), [WebKit](), [macOS](), [HTML](), [Web Accessibility (a11y)](), [Scalability]() Tags: [accessibility](), [css](), [macos](), [news](), [release](), [release-notes](), [safari-technology-preview](), [scaling](), [scroll-snap](), [webkit]() ### AI overview Safari Technology Preview Release 251 is available for macOS Golden Gate and macOS Tahoe. The release notes describe WebKit updates, including accessibility fixes, new CSS support, and resolved issues involving layout, queries, serialization, and scroll snapping. ### Source excerpt Safari Technology Preview Release 251 is now available for download for macOS Golden Gate and macOS Tahoe. ## When Safari's 'Ignore Cache' Ignored Cache-Control DevFeed: [When Safari's 'Ignore Cache' Ignored Cache-Control]() Original publisher: [Read original article]() Author: Harry Roberts Published: 2026-08-17T16:11:40Z Content type: article Language: en Sources: [CSS Wizardry]() Topics: [Cache](), [WebKit](), [browser](), [debugging]() Tags: [bug](), [cache](), [cache-control](), [caching](), [devtools](), [fixed](), [headers](), [safari](), [safari-technology-preview]() ### AI overview Safari Technology Preview 250 fixed a Web Inspector bug in which disabling the resource cache overwrote Cache-Control request headers supplied by a page. The article explains the distinction between bypassing cached resources and modifying outgoing requests, and describes the related WebKit regression test. ### Source excerpt Safari Technology Preview 250 fixed a subtle Web Inspector bug that overwrote page-authored Cache-Control request headers when the resource cache was disabled. ## Release Notes for Safari Technology Preview 250 DevFeed: [Release Notes for Safari Technology Preview 250]() Original publisher: [Read original article]() Author: Jon Davis Published: 2026-08-13T21:24:55Z Content type: release Language: en Sources: [WebKit]() Topics: [Release notes](), [WebKit](), [JavaScript](), [CSS](), [macOS](), [WebAssembly](), [API](), [Web Accessibility (a11y)]() Tags: [accessibility](), [api](), [css](), [download](), [javascript](), [macos](), [preview](), [release](), [release-notes](), [safari](), [safari-technology-preview](), [technology](), [web](), [webassembly](), [webkit]() ### AI overview Safari Technology Preview 250 is available for macOS and includes WebKit updates spanning accessibility, CSS, JavaScript, WebAssembly, media, networking, scrolling, and related web platform features. ### Source excerpt Safari Technology Preview Release 250 is now available for download for macOS Golden Gate and macOS Tahoe. ## Release Notes for Safari Technology Preview 249 DevFeed: [Release Notes for Safari Technology Preview 249]() Original publisher: [Read original article]() Author: Saron Yitbarek Published: 2026-07-29T21:46:12Z Content type: release Language: en Sources: [WebKit]() Topics: [Release notes](), [CSS](), [WebKit](), [Web Development](), [Web Accessibility (a11y)](), [animations](), [macOS]() Tags: [accessibility](), [animation](), [css](), [macos](), [news](), [release-notes](), [safari-technology-preview](), [web](), [webkit]() ### AI overview Safari Technology Preview 249 is available for macOS and includes WebKit updates covering accessibility, animations, CSS features, layout, rendering, and related resolved issues. ### Source excerpt Safari Technology Preview Release 249 is now available for download for macOS Golden Gate and macOS Tahoe. ## Release Notes for Safari Technology Preview 248 DevFeed: [Release Notes for Safari Technology Preview 248]() Original publisher: [Read original article]() Author: Jon Davis Published: 2026-07-22T18:58:31Z Content type: release Language: en Sources: [WebKit]() Topics: [WebKit](), [CSS](), [Release notes](), [Web Development](), [macOS](), [Web Accessibility (a11y)](), [Document Object Model (DOM)](), [Web platform]() Tags: [accessibility](), [download](), [macos](), [new-features](), [release-notes](), [safari](), [safari-technology-preview](), [software]() ### AI overview Safari Technology Preview Release 248 is available for macOS Golden Gate and macOS Tahoe. The release notes describe WebKit fixes and updates involving accessibility, CSS, editing, forms, rendering, and related web platform behavior. ### Source excerpt Safari Technology Preview Release 248 is now available for download for macOS Golden Gate and macOS Tahoe. ## Should masonry be part of CSS grid? DevFeed: [Should masonry be part of CSS grid?]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2024-10-30T00:00:00Z Content type: article Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [Responsive Design](), [Web Development](), [Web platform]() Tags: [browsers](), [css](), [css-grid](), [display](), [examples](), [experimental](), [firefox](), [grid](), [layout](), [pinterest](), [responsive](), [responsive-design](), [safari-technology-preview](), [syntax]() ### AI overview An exploration of CSS masonry layout, including the debate over whether it should be integrated into CSS Grid or introduced as a separate layout module. The article discusses syntax, browser support, progressive enhancement, and responsive design implications. ### Source excerpt An exploration of examples showing masonry as both a part of CSS Grid and as its own display type. ## Day 99: native nesting DevFeed: [Day 99: native nesting]() Original publisher: [Read original article]() Author: Manuel Matuzović Published: 2023-02-09T00:00:00Z Content type: tutorial Language: en Sources: [Manuel Matuzović]() Topics: [CSS](), [Web Development](), [Code](), [browser]() Tags: [browser](), [chrome](), [css](), [nesting](), [parsing](), [safari-technology-preview](), [selector]() ### AI overview A practical introduction to native CSS nesting, explaining the required selector syntax and demonstrating nested selectors, pseudo-classes, media queries, and deeper nesting patterns. The examples were tested in Chrome Dev, Safari Technology Preview, and Polypane 13. ### Source excerpt Nesting in CSS is coming soon! For me personally not the killer feature, at least compared to cascade layers or container queries, but still exciting. Let's see how it works. The most important thing to know about native nesting in CSS is that the nested selector always must start with a symbol (. # : [ * + > ~) because of limitations in browser parsing engines. The following code doesn't work: /* Doesn't work */ ul { li { border-color: green; } } To work around that limitation the nested selector can start with an &. ul { & li { border-color: green; } } /* Same as: ul li { } */ Besides this limitation, everything works as expected for me. Here are some of the things I've tested: a { &:hover { background-color: aqua; } &:focus-visible { background-color: aqua; } } /* Same as: a:hover { } a:focus-visible { } */ a { &:is(:hover, :focus-visible) { background-color: aqua; } } /* Same as: a:is(:hover, :focus-visible) { } */ h2 { font-family: sans-serif; &::first-letter { color: red; } } /* Same as: h2 { } h2::first-letter { } */ h2 { & + p { background-color: red; } } /* Same as: h2 + p { } */ h2 { .parent & { background-color: aqua; } } /* Same as: .parent h2 { } */ h2 { @media (min-width: 400px) { background: red; } } /* Same as: @media (min-width: 400px) { h2 { } } */ h2 { @media (min-width: 400px) { background: red; &::before { content: "!"; color: #fff; } & ~ p { & span { background-color: #000; } :is(span) { color: #fff; } } } } /* Same as: @media (min-width: 400px) { h2 { } h2::before { } h2 ~ p span { } h2 ~ p :is(span) { } } */ div { & & & h3 { background-color: green; } } /* Same as: div div div h3 { } */ h3 { :is(div) & { color: #fff; } } /* Same as: :is(div) h3 { } */ a { &[download] { border: 1px solid red; } } /* Same as: a[download] { } */ You can try it today in Chrome Dev, Safari Technology Preview, or Polypane 13. My blog doesn't support comments yet, but you can reply via blog@matuzo.at. ## Day 96: the margin-trim property DevFeed: [Day 96: the margin-trim property]() Original publisher: [Read original article]() Author: Manuel Matuzović Published: 2023-02-06T00:00:00Z Content type: tutorial Language: en Sources: [Manuel Matuzović]() Topics: [CSS](), [Web Development]() Tags: [css](), [margin](), [property](), [safari-technology-preview](), [selector]() ### AI overview A brief tutorial on the CSS margin-trim property, which lets a container trim child margins at its edges. It compares several existing spacing techniques and notes that Safari Technology Preview is the only browser supporting the property at the time described. ### Source excerpt The margin-trim property allows a container element to trim the margins of its children where they adjoin the container's edges. Let's say we have a parent element and 4 children, and we use margin-block-end to add some spacing between these elements.
  • A
  • B
  • C
  • D
li { margin-block-end: 1rem; } A B C D That's great, but to avoid the extra space at the end of the list, we want to make sure that the last item doesn't get any margin. To achieve that, I've used at least 3 different solutions in the past. Apply a margin on all elements and remove it from the last. Okay, why not. li { margin-block-end: 1rem; } li:last-child { margin-block-end: 0; } Apply a margin on all elements but the last. Looks clever, less lines, but harder to read. li:not(:last-child) { margin-block-end: 1rem; } Use the lobotimized owl selector My favorite for the longest time. ul > * + * { margin-block-start: 1rem; } There are pros and cons to all solutions. Anyway, eventually we might not have to use any of them when we have this specific problem because margin-trim solves it more elegantly. We can define the property on the parent element and tell it where it should trim margins. Allowed values are none, block, block-start, block-end, inline, inline-start, and inline-end. ul { margin-trim: block-end; } li { margin-block-end: 1rem; } Note: Safari Technology Preview is currently the only browser that supports margin-trim. My blog doesn't support comments yet, but you can reply via blog@matuzo.at.