SafariとWebKitの最新情報

SafariとWebKitの最新機能をはじめ、Webサイトを向上させ、強化する方法をご覧ください。HTML、CSSの向上、Webインスペクタツール、Web APIなどの最新情報を紹介します。

リソース

関連ビデオ

WWDC23

WWDC22

ダウンロード

♪メロウなヒップホップ音楽♪ ♪ こんにちは Safariチームのソフトウェアエンジニアの Kendall Bagleyです前回のWWDCから 1年が経ちました今日は今年のWWDCでの新機能とこの1年を通して見てきたことの両面から SafariとWebKitの素晴らしい機能と強化についてお話しします今年はとても忙しい年でした！昨年の秋以来 Safariの各リリースは Webデベロッパのみなさんが求める新しい機能を提供してきました今年提供された新しい機能拡張はみなさんから寄せられた最大のフィードバックへの対応が目的です :has() Pseudo Classによる親セクレタや新しいFlexbox Inspector コンテナクエリの追加です私たちはWeb用の最高のソフトウェアを作りながらみなさんの仕事をより良く簡単にしたいと願っていますここにあるのは今日紹介する新コンテンツの一例ですこの動画ではカバーしきれませんこの1年でリリースした 7つのSafariでは 162の新しいWeb プラットフォーム機能と改良が施されています Webサイトや Web Appを作るため多数の新ツールを提供してきました macOSでは SafariとWebKitの最新かつ最高のツールを試すだけでなく次に何を出すべきかを教えてくれる Safari Technology Previewがいち早く新機能を試す最適な方法ですご覧の通り新機能が目白押しなのでこれから紹介する内容をすべて見ていきましょう今日お話しするのは HTMLの新機能コード構築に役立つ CSSの強化新しいWebインスペクタツール幅広い新しいWeb API 優れたJavaScriptと WebAssemblyの優れた機能セキュリティやプライバシーの向上についてです早速 HTMLの新機能を私と同僚が使うために作成している Webページを通して見てみましょう私は自分の衣服をより持続可能なものにするために古着や洋服を再利用するのがとても好きです私がデザインしたサイトには「Request Item」ボタンがあり気に入った洋服が見つかったらフォームを表示できますそのフォームをページ全体の上にオーバーレイ表示させたいのです新しいdialog要素はオーバレイを安定して作成する簡単な方法とリクエストフォームに使えるアクセス可能な方法を提供しますまた CSSの新しい backdrop擬似要素によりモーダルのバックグラウンドにある背景のスタイル設定が可能になりましたアイテムを要求してダイアログを表示しましょうこの影とアニメーションを見てください素晴らしい出来栄えですサイト上でアイテムがリクエストされたら投稿者がリクエストを受け付けられるようにする必要がありますページ下部には受信したすべてのリクエストがめくれるカルーセルがありますしかし最前面にない項目のボタンやテキストフィールドをクリックやキーボードで誤って操作されるのは困ります inert属性で解決できます inert属性を JavaScriptと同時に適用することで現在選択されているスライド以外にある要素のインタラクションを無効にしてスライドを切り替えていますまた inertを使用すると補助技術のためのインタラクションが無効になりスクリーンリーダーがそれらを読めなくなるのでインタラクションを意図する要素について明確なガイダンスが与えられます最後に HTMLには画像の遅延読み込みがあります私のサイトではヘッダーにすぐに読み込む必要があるアイコンがありますが最初の読み込みで画面外に出る画像は遅延読み込みを利用してユーザーがスクロールしたときのみ画像を読み込みページの高速化と応答性の向上を図っていますこのサイトをとても気に入っていますし補助技術を使う人にとっても素晴らしいものになります HTMLの機能だけでなく今年は CSSについても注目すべき点がたくさんあります CSSではより強力なアーキテクチャにより CSSの再利用を容易にすることに重点を置いています新しいWeb技術に対する要望のトップがコンテナクエリですそして　このコンテナクエリの Safari 16でのリリースを発表できることにわくわくしていますサイズクエリとコンテナクエリユニットの両方が使えるようになりますここでは洋服交換の Webサイトのレイアウトを変えて実験しています服を紹介するカードを再利用可能な要素にしてその要素をページレイアウトの何カ所かに落とし込んでいますこのサイドバーでは利用できるスペースが狭いのでコンポーネント内のすべてのコンテンツを縦に重ねたいのですメイングリッドのアイテムでは最初の1つをヒーロー画像として特集し水平方向の空きスペースをワイドレイアウトでより意味のある方法でコンテンツを配置したいのですメインコンテンツエリアの残りの項目は小さなカラムに分割します水平方向に中程度のスペースがあるときに有効な別のレイアウトを作成しましたメディアクエリではなくコンテナクエリでレイアウト変更を処理することでこのコンポーネントのレイアウトコードを一度書けばサイト上のどの場所やどのサイズのコンテナもそのコンポーネントが使用でき常に正しいレイアウトを適用しますコンテナにどの要素を使いインラインサイズのみ対策するかインラインサイズとブロックサイズの両方を同時に対策するかは container-typeプロパティで指定しましたコンテナには container-nameプロパティで任意に名前が付けられるので HTMLの構成に柔軟性が生まれます @containerルールでコンテナのサイズに基づき条件付きでスタイルを適用しています幅が250ピクセル以上のコンテナに衣類カードコンポーネントがある場合グリッドが2列になるよう変更されます CSSアーキテクチャの次はカスケードレイヤーです CSSカスケードへの強力な変更です CSSの誕生以来カスケードはさまざまなレイヤーで構成されてきましたしかし各レイヤー内のセレクタにどんな特異性があってもあなたが Web開発者として書くオーサースタイルが常にUAスタイルに勝りますインラインスタイルは常にオーサースタイルより強力で他の階層も同様ですカスケードレイヤーはこれと同じコンセプトで各レイヤーの内部で独自に特異性を計算する独自のレイヤーの作成が可能です使用されるセレクタの特異性がどうであれあるレイヤー全体が別のレイヤー全体に勝りますどのレイヤーが他のレイヤーに対して力を持つかは CSSでレイヤーを定義する順番で決まりますカスケードレイヤーは大規模なプロジェクトで CSSを設計しそのコードを長期間維持する際に便利なツールになりますデザインシステムのオーバーライドからの分離やプロジェクトのカスタムスタイルに使うフレームワークの分離に使用するでしょうすべてあなた次第です！ CSSアーキテクチャのための新機能には念願の親セレクタとして機能する擬似クラス :has()や他にも多くの機能が追加されました CSSの他のセレクタと組み合わせるときょうだいや属性フォームフィールドの状態などを検索できます実にパワフルです誰かがメッセージの「Urgent?」にチェックを入れたときにメッセージボックス全体をハイライト表示するようにしたいとしますここで:has疑似クラスを使いフォーム要素にチェックボックスタイプの入力がありチェック時はこのCSSを適用するよう指示できますしかも JavaScriptは使う必要がありません has()　カスケードレイヤーコンテナクエリなど CSSアーキテクチャの扱いに関する改善により Web開発者としてのあなたの仕事がより良いものになることを願っています楽しみなCSSの追加機能はこれだけではありません既存のビューポートユニットに似ておりスクロールによってサイズ変化するようなデバイスで便利に使えるツールを求めてきましたねそこで新しいビューポートユニットを用意しましたビューポートの最小のときの高さが知りたいときは svhを使いますビューポートの最大の高さを知りたいときは lvhを使用します Sはスモール Lはラージと覚えてくださいビューポートの現在の高さに一致するよう常に変化する数値には dvhを使用します高さだけではありませんさらにビューポートユニットを用意しました幅の単位はよく使用する高さの単位と合わせて完成度を高められますブロックとインラインがありどちらもテキストの流れ方が異なる複数の言語向けに書く場合に便利です minとmaxも忘れてはいませんしかし反応するだけでなくページ上に動きを作り出したい場合はどうでしょう？これまでアニメーションは開始終了継続時間を指定してオブジェクトを動かす宣言的なものでしたしかしページ上の要素をアニメーション化する際にカーブしたパスに沿わせたりオフセットで移動させたりするのは大変でしたここでヘッダーをクリックするとシークレットアニメーションが表示されるようにしたいです新しいoffset-pathを使えばオブジェクトをアニメーションさせたいパスを定義できます offset-pathでパスを設定し offset-distanceでキーフレームエフェクトを使います animationプロパティでキーフレーム効果を適用すればアニメーションの制御をすべてCSSで行えます従来はブラウザエンジンに定義された Web上の要素もより自由にページをコントロールできるようにしたくスクロールの挙動はその最初の一例です Webの開始以来 Webページの別の場所に移動するリンクをクリックすると視覚的にジャンプしたように表示されますこれにはユーザーも戸惑うことがあります CSSのscroll-behavior プロパティではこの動作をするかどうか指定できますデフォルトのauto設定ではジャンプ表示になります scroll-behaviorに smoothを指定するとページの次の場所までスムーズにスクロールするようブラウザに要求できます JavaScriptのメソッドの window.scroll() scrollTo() scrollBy()を使っても可能ですユーザーのことを一番よく知るのはあなたたのでブラウザエンジンのデフォルト以外の独自のWebページ体験を定義できるようにすべきですそこには :focus-visibleや accent-colorの使用も含まれますフォーカスインジケータに特定のスタイルを適用して全体のデザインに調和させたいと思ったことがあればフォーカスセレクターのことはご存知でしょうしかし実行するとブラウザベースのヒューリスティックが失われるアクセシビリティ上の落とし穴がありますまた私のサイトではビルトインのフォームカラーでなくカスタムカラーを使いたいのですフォーカスのハイライトとチェックボックスにヘッダーのティールカラーを使ってみましょう focus-visible疑似クラスを使うとフォーカスインジケータを自由にスタイルできそのインジケータをブラウザにネイティブ表示される場合にのみ表示させることもできますフォームのカスタマイズをさらに進めるため accent-colorでフォームコントロールの UIの異なる部分の色を変更できますチェックボックスだけでなくラジオボタンなどにも適用できますまた CSSについても WebKitの接頭辞をどんどん置き換えています以前は実験的な機能を試す方法でしたが現在は標準的に定義されたプロパティに移行することで CSSが書きやすく相互運用性の高いものになりました Web標準に対応するものに移行しても WebKitの接頭辞を持つ既存のCSSは引き続き動作します Backface-visibility print-color-adjust text-align: match-parentは接頭辞付きが対応するものと全く同じです maskと text-combine-uprightは標準に合うように更新されました nonprefixed appearance プロパティも新しいauto値のサポートを追加しましたが標準仕様になったため Safari 16では caretやlistitemなど WebKit特有の値を削除していますタイポグラフィの追加についても注目する点が多数ありますカラーフォントの中のカラーパレットを簡単に選択できる font-paletteプロパティを追加しましたロゴの候補で試したらとてもクールだと思います内蔵のダークパレットやライトパレットで見え方を試したりカラーオーバーライドでカスタマイズして黄色で明るくすることもできますまたタイポグラフィでは text-decoration-skip-inkの追加により下線や上線が文字と交差するときの動作を制御できますさらにicユニットが日中韓の文字をブロック方向に正確に並ぶようにしました中国語日本語韓国語などでのきれいなタイポグラフィグリッドの作成に便利です CSSの素晴らしい機能のまとめとしてサブグリッドについてお話しします長年 Webでのレイアウトはとても大変でした CSS Gridは画期的ですがグリッドコンテナの直接の子要素にしか影響しません CSS Gridを使ってこれらのカードをレイアウトしメディアクエリなしで列の追加や削除を行いビューポートの幅に合わせて自動的にレイアウトを調整しますしかし各カードのコンテンツのサイズがバラバラで見出しが長かったり写真の縦横比が異なったりして見づらくなっていますリクエストボタンやメッセージボックスは横一列に並べたいですし 1枚のカードのタイトルが長いと他のカードのレイアウトに影響するので全部同じ間隔になるようにしたいのですサブグリッドで実現します各記事にグリッドを置いて "grid-template-rows: subgrid "と書いてすべて親グリッドに結びつけました Webインスペクタの Grid Inspectorで必要なグリッドをすべてオンにすると各カードのコンテンツが完璧に整列します Webインスペクタで多くの CSS作業が楽になります Webインスペクタに素晴らしい機能を追加したのでぜひお試しくださいまずレイアウトは何が起こっているのかがわかると書きやすく Webインスペクタの重要性がわかりますさらに新しい Flexbox Inspectorで要素間の間隔を視覚化できます私のWebサイトではヘッダーへのこれらのアイコンの追加に苦労しました必要なのは要素の検査と Layoutタブへの移動です今はグリッドに関心がないのでそのセクションを閉じて新しい Flexbox Inspectorに移動しますワンクリックですべてのビューをオンにしつつスムーズな動作が得られますすべてのビューをオンにするとハッシュマークやコンテナボックスでの要素の配置の様子や空いたスペースのビューの占め方がわかります今度はアライメントが正しいかどうか新しいアライメントエディターで確認しますスタイルタブを開くと align-itemsの横に新しいボタンがありますオプションを切り替えてヘッダーに最適なものが見つけられます justify-contentでも同様ですひとつひとつ見ていきながらちょうどよいものを選びます黄色のアイコンが小さすぎるので赤のアイコンと同じ大きさにします名前に"medium"と入っている変数を使ったはずですがフルネームが思い出せません黄色いアイコンの一つをインスペクタで調べて高さを編集するとサイズ変更が試せますまた新しいCSS ファジーオートコンプリートのおかげで名前の最後であっても ”medium”と入力すると目的の変数がポップアップで表示されます黄色いアイコンはもう小さすぎることはありませんアイコンの変数が検査対象の要素で使われていない場合は新しいCSSツールで隠されます必要なときにボタンで表示できるのでご安心ください今年のWebインスペクタで最も喜ばしいのは Safari Webインスペクタの開発者用ツール拡張のサポートを発表することですお気に入りの開発者用ツール拡張機能のクリエイターは他のブラウザで使用中のものと同じ基本APIでそれらを Safariに移植できます Webインスペクタの拡張機能の作り方や新しいAPIの探索自分で使用開始するためのセットアップに興味がある方は「SafariWebInspector Extensionsの作成」をご覧くださいここまでフロントエンド技術の新情報をたくさん紹介してきました次は Web APIの新情報に移りましょう Webプッシュのサポートを発表できて嬉しいです macOS VenturaのSafari 16で利用可能になる予定です来年にはiOSとiPadOSに搭載する予定です Webプッシュは Webサイトや Web Appからユーザーに遠隔で通知が送れます完全に相互運用可能な標準に基づいた実装ですすでに Webプッシュを実装済みで他のブラウザで動作している場合は変更無しで Safariでそのまま動作するはずです Apple Developer アカウントも不要です詳細はWWDC22の「Safari用の Webプッシュについて」をご覧ください Webプッシュに興味のある方は新しいWeb Appのマニフェストの改善にも関心があることでしょう Web Appをホーム画面に保存する際に使用するアイコンをマニフェストファイルに定義できるようになりましたマニフェスト内のアイコンを優先するには HTMLヘッドに apple-touch-iconが定義されていないことを確認します iOSとiPadOSにはあるアイコンを配信し他のモバイルプラットフォームには別のアイコンを配信したい場合もそのHTMLヘッドの apple-touch-iconで Apple用アイコンを定義しますどこにもアイコンを宣言しない場合はサイトをホーム画面に保存するとサイトのスクリーンショットを表示しますさらにユーザーが共有メニューから「ホーム画面に追加」を選択するのを待たずにマニフェストファイルを読み込むようになりましたそのマニフェストファイルを使うことで全サイトで Webページの特性を定義しメタタグを使用する必要性がさらに減ったのです APIに引き続き同じオリジンで複数のブラウジングコンテキストで Webページの利用を改善するために工夫しましたブロードキャストチャネルは異なるブラウジングコンテキスト間で通知が送信できます例えば洋服交換のサイトの利用中に同時に 2つのウインドウで開いているとしますそれからあるウインドウの服を選択しますその場合メッセージを投稿して利用できない状態をほかのタブやウインドウに同期することが可能ですバックグラウンドでタブを更新するのでなくサイト用に保存したファイルを更新しているかもしれないので File System Access APIを追加しましたこのAPIは今年複数のリリースで段階的に更新されましたまず originをベースにしたプライベートストレージの origin private file systemがありますこれにより私の洋服交換サイトでは apple.comのような他のサイトがそのファイルを読むことはできませんそこで FileSystemFile Handleの getFile() メソッドで　サイトのルートディレクトリから取得した既存のファイルを読み込む APIを追加しましたここでは作成したばかりのドラフトファイルを使っています今年追加された APIの中で最も色彩豊かなものをご紹介します Display P3色空間は RGBにはない色を表現することができますカラーピッカーの例をご紹介します白の四角い線の左側は RGBに存在する色です右側には P3にしかない色が並んでいます 2016年には動画と写真の P3対応を行いました昨年は CSS Color Level 4で定義した新しいカラーシンタックスを実装した最初のブラウザエンジンとなりました今年は canvas要素内のコンテンツの P3カラーに対応しましたよって 90年代のデバイスをベースにした色を使う必要はなく今日の素晴らしいデバイスの色彩能力がフル活用できます新しいWeb API にはさらに注目する点がありますシャドウ領域 Webロック ResizeObserver APIの ResizeObserverSize インターフェースへの更新サポートなど要素のボックスサイズプロパティに対する変更の監視に役立ちます新しいAPIの追加や新機能を含めて試したいことがたくさんありますね実はまだまだお話しすることがあります次は JavaScriptと WebAssemblyの新機能をご紹介します Webサイトでワーカーを使っていてそのインスタンスをタブやウインドウで共有する場合新しい共有ワーカーインターフェースが役立ちメモリ使用量を削減できるでしょうバックグラウンドで発生させたいタスクごとに新しいワーカーを生成する代わりに同じオリジンのブラウジングコンテキストは 1つのワーカーだけ使います各スクリプトは同じ方法で共有ワーカーを作成し同じポートを使ってメッセージの受信と投稿ができます共有ワーカーは異なるスクリプトから送信されたメッセージを受信して応答ができますこれでサーバーへの負担が軽減するとともにユーザーにとって高速で応答性の高い Webページを実現しますアレイ機能も一通りご紹介します配列の末尾から検索する場合 reverse()を使った配列の変更が必要でしたが findLast()と findLastIndex() メソッドを使えば「shoestring」を含む最後の項目のアイテムとインデックスが検索できますまた新しい at()メソッドにより配列の末尾からの検索が容易になりました中括弧の使用はインデックスが正の値の場合に有効ですが at()を使えば負の値のインデックスを作成できるためコードがより簡潔で読みやすくなりますこれだけ配列の新機能があっても私たちがお届けする国際化の新機能の数の多さには敵いません WebKitはこの1年間 Intlの実装に定期的なアップデートを加え続けてきました NumberFormatの新メソッドが異なる番号体系をサポートし LocaleとDisplayNamesの更新によりカレンダーが Intl Enumeration APIにより通貨が追加されています今年は国際的な実装が多く世界中のユーザーに対応するための試行錯誤に事欠かないでしょうまた C Objective C Swiftなどさまざまなコーディング言語で書かれた既存のコードを Webで利用する場合 WebAssemblyを使えば書き直さずに実行できますまた今年の改良でアドレス可能なメモリが 4GBに拡張され新しいゼロコスト例外処理にともなうパフォーマンスの向上により WebAssemblyを使用するWeb Appはより強力になります概して JavaScriptと WebAssemblyを試すのにわくわくする材料は間違いなく揃っています WebAssemblyに関してはセキュリティとプライバシーの強化もあり私たちが開発する Webのユーザーを守るだけでなく開発者にも新しい可能性をもたらすでしょう新しいCross Origin Opener Policyと Cross Origin Embedder Policyの HTTPレスポンスヘッダーを使うとプロセスの分離が選択できサイトが独自の専用のwebContent プロセスで実行されます多くのAppにとって WebAssemblyのスレッド機能を使って複数のスレッドで並行して動作できた方がよく新しいヘッダーでそれを安全に実行できます 2つ目のセキュリティ強化はコンテンツセキュリティポリシーレベル3への対応で HTTPヘッダにも対応します CSPは読み込みコンテンツのセキュリティ管理を強化しクロスサイトスクリプティングやその他の脆弱性のリスクを軽減しますレベル3のアップデートで最も素晴らしいのは新しいストリクトダイナミックソース表現です strict-dynamicの設計者はノンスで特定のスクリプトを許可してすでに信頼されているスクリプトがロードするスクリプトにその信頼を拡張できることに気づきました　明示的な許可リストは不要ですヘッダーがシンプルになりますね元の長いドメインのリストだと多くを許可してしまう可能性がありますねセキュリティとプライバシーに関する機能はこれで終わりです今日取り上げる話題も以上ですがさらに探索してみてくださいね例えばメディア関連のアップデートである getUserDisplay() APIによる特定のSafariウインドウのキャプチャやWebRTC Perfect Negotiation In-band chapter tracks requestVideoFrame Callback()などを行いましたまたマニフェストバージョン3のサポートとともに Webを拡張する多くの追加機能や新しいWeb拡張機能のAPIも多数あります今日取り上げた機能をさらに掘り下げ過去1年間に SafariとWebKitで開発された 162のすべての機能と改善点を調べるには Safari Technology Preview をダウンロードして今後の動向を把握しリリースノートブログ記事 Webインスペクタの広範なドキュメントを含む webkit.orgのすべてのコンテンツをチェックして Web技術を探求してくださいまたバグレポートを提出して意見や要望を聞かせてください WebKitのバグを HTML CSS JavaScript DOM API または Webインスペクタに関して発見したら WebKitのバグ追跡システム bugs.webkit.orgでフィードバックをください Safariのインターフェースに関する意見やバグは Appleのフィードバックアシスタントにご報告ください来年リリース予定の SafariとSafari Technology Previewではあなたのような開発者の仕事をより良くする素晴らしい機能を提供できるのが楽しみです本日はありがとうございました WWDCで最高の時間をお過ごしくださいそれではまた！ ♪

2:59 - Dialog element

<!-- <dialog> element -->

<dialog method="dialog">
  <form id="dialogForm">
    <label for="givenName">Given name:</label>
    <input class="focus" type="text" name="givenName">
    <label for="familyName">Family name:</label>
    <input class="focus" type="text" name="familyName">
    <label>
      <input type="checkbox"> Can trade in person
   </label>
   <button>Send</button>
  </form>
</dialog>

3:09 - Backdrop pseudo-class

/* ::backdrop pseudo-element */

dialog::backdrop {
  background: linear-gradient(rgba(233, 182, 76, 0.7), rgba(103, 12, 0, 0.6));
  animation: fade-in 0.5s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

3:53 - inert attribute

// inert attribute

function switchToIndex(index) {
  this.items.forEach(item => item.inert = true);
  this.items[index].inert = false;
  this.currentIndex = index;
}

4:22 - Lazy image loading

<img src="images/shirt.jpg" loading="lazy"
     alt="a brown polo shirt"
     width="500" height="600">

6:46 - Container Queries

/* Container queries */

.container {
  container-type: inline-size;
  container-name: clothing-card;
}
.content {
  display: grid;
  grid-template-rows: 1fr;
  gap: 1rem;
}
@container clothing-card (width > 250px) {
  .content {
    grid-template-columns: 1fr 1fr;
  }
  /* additional layout code */
}

8:05 - Cascade layers

/* 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;
  }
}

8:54 - :has() pseudo-class

<!-- :has() pseudo-class -->

<style>
  form:has(input[type="checkbox"]:checked) {
    background: #ff927a;
  }
</style>



<form class="message">
  <textarea rows="5" cols="60" name="text" 
    placeholder="Enter text"></textarea>
  <div class="checkbox">
    <input type="checkbox" value="urgent"> 
    <label>Urgent?</label>
  </div>
  <button>Send Message</button>
</form>

11:08 - Offset Path

/* offset-path */

:is(.blue, .teal, .yellow, .red)  {
  offset-path: circle(9vw at 5vw 50%);
}

@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

/* Animation */
.clothing-header.clicked :is(.blue, .teal, .red, .yellow) {
  animation: move 1100ms ease-in-out;
}

11:43 - scroll-behavior: auto
```
html {
  scroll-behavior: auto;
}
```
12:09 - scroll-behavior: smooth
```
html {
  scroll-behavior: smooth;
}
```

13:10 - :focus-visible & accent-color

/* :focus-visible & accent-color */

:focus-visible {
  outline: 4px solid var(--green);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

:root {
  accent-color: var(--green);
}

14:50 - Font palette dark mode & light mode

/* Dark mode */
font-palette: dark;

/* Light mode */
font-palette: light;

15:01 - Font palette custom colors

/* Dark mode */
font-palette: dark;

/* Light mode */
font-palette: light;

/* Custom colors */
@font-palette-values --MyPalette {
  override-colors: 1 yellow;
}

#logo {
  font-palette: --MyPalette;
}

15:55 - CSS Grid

/* 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;
}

16:35 - Adding sub grid

/* 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;
/* Adding subgrid, tying them together */
  grid-template-rows: subgrid; 
}

21:15 - Web App Manifest file icons

// Manifest file 

"icons": [
 {
   "src": "orange-icon.png",
    "sizes": "120x120",
    "type": "image/png"
  }
]

21:29 - apple-touch-icon

<!-- HTML head -->

<link rel="apple-touch-icon" href="blue-icon.png" />

22:36 - Broadcast Channel

// State change
broadcastChannel.postMessage("Item is unavailable");

23:14 - Origin private file system

// 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();

25:32 - Shared Worker

// Create Shared Worker
let worker = new SharedWorker("SharedWorker.js");

// Listen for messages from Shared Worker
worker.port.addEventListener("message", function(event) {
  console.log("Message received from worker: " + event);
});

// Send messages to Shared Worker
worker.port.postMessage("Send message to worker");

25:56 - findLast() and findLastIndex()

const list = ["shirt","pants","shoes","hat","shoestring","dress"];
const hasShoeString = (string) => string.includes("shoe");

console.log(list.findLast(hasAppString));
// shoestring

console.log(list.findLastIndex(hasAppString));
// 4

26:17 - at()

const list = ["shirt","pants","shoes","hat","shoestring","dress"];

// Instead of this:
console.log(list[list.length - 2]);

// It's as easy as:
console.log(list.at(-2));

29:12 - strict-dynamic source expression

// strict-dynamic source expression

// Without strict-dynamic
Content-Security-Policy: script-src desired-script.com dependent-script-1.com
  dependent-script-2.com dependent-script-3.com; default-src "self";

// With strict-dynamic
Content-Security-Policy: default-src "self"; script-src "nonce-desired" "strict-dynamic";

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。