編集

Chrome 118

#Chrome #CSS

https://developer.chrome.com/blog/new-in-chrome-118/

Chrome 118 がリリース。

  • ブラウザ拡張によって登録された Service Worker から、WebUSB API を利用できるように変更
  • Payment Request及びSecure Payment Confirmationから user activation requirement が削除

https://github.com/w3c/secure-payment-confirmation/issues/216

#CSS @scope ルールの追加

@scopeルールを使用すると、スタイルの範囲を特定のスコープに制限することが出来る。

https://developer.chrome.com/articles/at-scope/

次のように利用できる。

html
<style>
  @scope (.first-container) {
    .main-title {
      color: grey;
    }
  }
  @scope (.second-container) {
    .main-title {
      color: mediumturquoise;
    }
  }
</style>
<div class="first-container">
  <h1 class="main-title">I'm the main title</h1>
</div>
<div class="second-container">
  <h1 class="main-title">I'm the main title, but somewhere else</h1>
</div>
css
@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

サンプルコード：https://stackblitz.com/edit/js-wyuqib?file=index.html

編集