メインコンテンツへスキップ

All Posts

News bits

Chrome 120

2023 年 12 月 5 日に Chrome 120 がリリースされました。

https://developer.chrome.com/blog/new-in-chrome-120?hl=ja

#CloseWatcher API

https://github.com/WICG/close-watcher

Android の戻るボタンやジェスチャー、Esc キーが押された場合などに CloseWatcher インスタンスに close イベントが通知されます。ユーザーがモーダルやポップアップなどを閉じたいという意思を表示した際に、アプリで適切に処理するための API です。

jsx
document.querySelector("#open").addEventListener("click", () => {
  document.querySelector("#sidebar").classList.add("open");

  const watcher = new CloseWatcher();

  watcher.addEventListener("cancel", () => {
    console.log("CloseWatcher cancel event");
  });
  watcher.addEventListener("close", () => {
    document.querySelector("#sidebar").classList.remove("open");
  });
});

window.addEventListener("error", (e) => {
  document.querySelector("#error-console").textContent +=
    e.error.stack + "\n\n";
});

https://stackblitz.com/edit/js-x1v2yr?file=index.js,index.html,style.css

#details 要素の name 属性

同じ name 属性で複数の details 要素を紐づけることで、どれか 1 つだけを開ける UI を実装できます。

jsx
<details name="cookies">
  <summary>Chocolate chip</summary>
  Yum yum chocolate chip.
</details>
<details name="cookies">
  <summary>Snickerdoodle</summary>
   Yum yum snickerdoodle.
</details>
<details name="cookies">
  <summary>Maicenitas</summary>
   Yum yum maicenitas.
</details>
<details name="cookies">
  <summary>Sugar cookies</summary>
   Yum yum sugar cookies.
</details>

https://stackblitz.com/edit/js-bjwzi1?file=index.html

#緩和された CSS ネスト

& や is() を使用しなくても CSS をネストした状態で記述できるようになりました。

css
.card {
  h1 {
    font-size: 24px;
  }
}

/* 今まで */
.card {
  & h1 {
    font-size: 24px;
  }
}

https://developer.chrome.com/blog/css-nesting-relaxed-syntax-update/?hl=ja

著者について

Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.

In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.

In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.

In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.

I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.