What’s new in Safari and WebKit

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 width

  • svh, lvh, dvh - smallest/largest/dynamic view port height

  • svb, lvb, dvb - block

  • svi, lvi, dvi - inline

  • svmin, lvmin, dvmin

  • svmax, lvmax, dvmax

• offset-path for animation

• focus-visible pseudo-class

• accent-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();