Web Developerのための新機能 – WWDC2019

/* Enabling dark mode */
:root {
 color-scheme: light dark;
 --link-text-color: ...;
 --paragraph-background-color: ...;
 ...
}

/* Adapting content to dark mode with CSS */
@media (prefers-color-scheme: dark) {
 :root {
 --link-text-color: ...;
 --paragraph-background-color: ...;
 ...
 }
 ...

<!-- Adapting an image to dark mode with HTML -->
<picture>
 <source srcset="dark.jpg"
 media="(prefers-color-scheme: dark)">
 <img src="light.jpg">
</picture>

// Adapting dynamic content to dark mode with JavaScript
let darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
function updateForDarkModeChange() {
 if (darkModeMediaQuery.matches) {
 ...
 } else {
 ...
 }
}
darkModeMediaQuery.addListener(updateForDarkModeChange);
updateForDarkModeChange(); // Handle if Dark Mode is already active.

// Using the Web Share API after the user clicks a button
let shareButton = document.createElement("button");
shareButton.addEventListener("click", async (event) => {
 try {
 await navigator.share({
 title: "Dark Mode Support in WebKit",
 text: "Learn about how to support Dark Mode in your web content.",
 url: "https://webkit.org/blog/8840/dark-mode-support-in-webkit",
 });
 } catch (error) {
 ...
 }
});

navigator.mediaCapabilities.decodingInfo(configuration).then((capabilities) => {
 if (capabilities.supported) {
 if (capabilities.powerEfficient) {
 ...
 }
 if (capabilities.smooth) {
 ...
 }
 } else {
 ...
 }
});

navigator.mediaDevices.getDisplayMedia({ video: true }).then((stream) => {
 let videoElement = document.createElement("video");
 videoElement.src = URL.createObjectURL(stream);
 rtcPeerConnection.addTrack(stream.getVideoTracks()[0]);
 ...
});