What's new in Safari and WebKit
Description: Explore the latest features in Safari and WebKit and learn how you can make better and more powerful websites. We’ll take you on a tour through the latest updates to HTML, CSS enhancements, Web Inspector tooling, Web APIs, and more.
New HTML & CSS features
dialog
tag::backdrop
pseudo-element- inert
- images lazy loading
<img src="images/shirt.jpg" loading="lazy"
alt="a brown polo shirt"
width="500" height="600">
- container queries support from Safari 16
.container {
container-type: inline-size;
container-name: clothing-card;
}
.content {
display: grid;
grid-template-rows: 1fr;
gap: 1rem;
}
/* 👇🏻 if the clothing card component is in a container that's wider than 250 pixels, */
@container clothing-card (width > 250px) {
.content {
grid-template-columns: 1fr 1fr;
}
/* additional layout code */
}
- cascade layer support
/* Author Styles - Layer A */
@layer utilities {
div {
background-color: red;
}
}
/* Author Styles - Layer B */
@layer customizations {
div {
background-color: teal;
}
}
/* Author Styles - Layer C */
@layer userDefaults {
div {
background-color: yellow;
}
}
has()
support- new viewport units:
svw
,lvw
,dvw
- smallest/largest/dynamic view port widthsvh
,lvh
,dvh
- smallest/largest/dynamic view port heightsvb
,lvb
,dvb
- blocksvi
,lvi
,dvi
- inlinesvmin
,lvmin
,dvmin
svmax
,lvmax
,dvmax
offset-path
for animationfocus-visible
pseudo-classaccent-color
font-palette
text-decoration-skip-ink
ic unit
- Subgrid
/* Grid to layout cards */
main {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(225px, 1fr));
gap: 1rem;
}
/* Grid to layout each card’s content */
article {
display: grid;
grid-row: span 5;
grid-template-rows: subgrid; // 👈🏻
}
- dropped webkit prefixes from:
backface-visibility
print-color-adjust
text-align: match-parent
mask
(renamed)text-combine-upright
(renamed)appearance
(renamed)
Web Inspector
- new Flexbox inspector
- new alignment editor
- new justify-content editor
- new CSS fuzzy autocompletion
- developer tool extensions support
Web API
- support for Web Push
- Safari 16 + macOS Ventura
- iOS and iPadOS next year
- new web app manifest improvements
- you can define the icon that's used when people save your web app to the Home Screen
// Manifest file
"icons": [
{
"src": "orange-icon.png",
"sizes": "120x120",
"type": "image/png"
}
]
ensure that there is no
apple-touch-icon
defined in the HTML head
- Broadcast Channel
- post a message and sync that state to any other open tabs or windows
broadcastChannel.postMessage("Item is unavailable");
- File System Access API
// Accessing the origin private file system
const root = await navigator.storage.getDirectory();
// Create a file named Draft.txt under root directory
const draftHandle = await root.getFileHandle("Draft.txt", { "create": true });
// Access and read an existing file
const existingHandle = await root.getFileHandle("Draft.txt");
const existingFile = await existingHandle.getFile();