Newly Acquired Powers of the Web Platform

This is a rather long heading that will break into two separate lines

This is a rather long heading that will break into two separate lines

This is a rather long heading that will break into two separate lines

This is a rather long heading that will break into two separate lines

h1 {
				text-wrap: balance;
			}
			

.icons {
				display: flex;
				flex-wrap: wrap;
			}
			

.icons {
				display: flex;
				flex-wrap: balance;
			}
			

Corner Shape

Text Box

text-box text-box-edge

Sibling Functions

sibling-index() sibling-count()

1. Item One
2. Item Two
3. Item Three
4. Item Four

li {
				margin-inline-start: calc(sibling-index() * 20px);
			}
			

1. Item One
2. Item Two
3. Item Three
4. Item Four

li {
				opacity: calc(sibling-index() / sibling-count());
			}
			

1. Item One
2. Item Two
3. Item Three
4. Item Four
5. Item Five
6. Item Six

li {
				opacity: calc(sibling-index() / sibling-count());
			}
			

Colour Mix

color-mix()

background: color-mix(blue 30%, yellow);
			

background: color-mix(blue 80%, yellow);
			

background: color-mix(red, green);
			

background: green;
			

background: color-mix(green, transparent);
			

Contrast Colour

contrast-color()

This is text.

This is text.

Invoker Commands

Open Dialog

<button id="open-btn">Open Dialog</button>
			
			<dialog id="example-dialog">
				<p>This dialog is controlled via JavaScript.</p>
				<button id="close-btn">Close</button>
			</dialog>
			

const dialog = document.getElementById("example-dialog");
			const openBtn = document.getElementById("open-btn");
			const closeBtn = document.getElementById("close-btn");
			
			openBtn.addEventListener("click", () => dialog.showModal());
			closeBtn.addEventListener("click", () => dialog.close());
			

<button commandfor="example-dialog" command="show-modal">Open Dialog</button>
			
			<dialog id="example-dialog">
				<p>This dialog is controlled natively via invoker commands.</p>
				<button commandfor="example-dialog" command="close">Close</button>
			</dialog>
			

Open Dialog

Scroll Driven Animations

.box {
				animation: scale-up;
				animation-timeline: view();
			}
			
			@keyframes scale-up {
				0% {
					transform: scale(0.3);
					opacity: 0.5;
				}
				100% {
					transform: scale(1.5) rotate(360deg);
					opacity: 1;
					background: #ff0077;
				}
			}
			

Scroll Triggered Animations

.box {
				animation: scale-up 2s both;
				timeline-trigger: --view-trigger view();
				animation-trigger: --view-trigger play-forwards;
			}
			
			@keyframes scale-up {
				from {
					transform: scale(0.3);
					opacity: 0.2;
				}
				to {
					opacity: 1;
					transform: scale(1.5) rotate(360deg);
					background: #ff0077;
				}
			}
			

View Transitions

Flip

This page has a ‘flip’ transition.

Dissolve

This page has a ‘dissolve’ transition.

Iris

This page has a ‘iris’ transition.

Barn

This page has a ‘barn’ transition.

Spin

This page has a ‘spin’ transition.

@view-transition {
				navigation: auto;
			}
			

@keyframes slide-out {
				to {
					transform: translateX(-100vw);
				}
			}
			
			@keyframes slide-in {
				from {
					transform: translateX(100vw);
				}
			}
			

::view-transition-old(root) {
				animation: slide-out 0.4s both;
			}
			
			::view-transition-new(root) {
				animation: slide-in 0.4s both;
			}
			

This is some text

This is some text!

This is some text!

view-transition-name: text-example;
			

Wrap Up