Chrome 131

Chrome 131がリリース。

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

CSSハイライトが継承されるように

::selectionと::target-textを利用したハイライトが、::highlightや::spelling-error、::grammar-errorを利用した場合と同じく子要素へ継承されるようになった。

今までは次のようなコードを書いた場合、emを選択しても色は変わらなかったが、Chrome 131からは色が変わる。

<style>
  p {
    color: deeppink;
  }

  .blue::selection {
    color: blue;
  }
</style>
<p class="blue">
  This is
  <em>emphasized</em>
  text.
</p>

Tailwind CSSでのハイライト表示への影響

この変更によりTailwind CSSでハイライトが今までと同様に表示されなくなっている。

https://github.com/tailwindlabs/tailwindcss/issues/15000

v3.4.15で修正されたとあるが、フォールバックが追加されただけでありユーザー側で対応が必要。

https://github.com/tailwindlabs/tailwindcss/pull/15003

details要素のカスタマイズ

details要素へのdisplayプロパティの変更、::details-content疑似要素を利用した開閉部分のスタイリングが可能になった。

https://developer.chrome.com/blog/styling-details

<style>
  details {
    display: flex;
    overflow: hidden;
    width: min-content;
    /* ... */
    summary {
      &::marker {
        content: "";
      }
      /* ... */
    }
    ::details-content {
      transition: 0.5s ease;
      width: 0;
      height: 0;
    }
    [open]::details-content {
      width: 320px;
      height: 28em;
    }
    /* ... */
  }
</style>
<details name="accordion" open>
  <summary>🐈</summary>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam.
      Veritatis consequatur, soluta molestiae voluptates accusamus qui odio,
      error, repellat rem harum id similique omnis quod dignissimos saepe quas
      mollitia.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam.
      Veritatis consequatur, soluta molestiae voluptates accusamus qui odio,
      error, repellat rem harum id similique omnis quod dignissimos saepe quas
      mollitia.
    </p>
  </div>
</details>

@page margin boxes

印刷時にページのマージン領域へのコンテンツの挿入が可能になった。 これによりヘッダーやフッターを独自のものに置き換えることも可能。

https://developer.chrome.com/blog/print-margins

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

印刷する

Debug CSS with Gemini in DevTools

検証ツールからCSSなどについてGeminiに質問できる機能が追加された。

https://developer.chrome.com/blog/new-in-devtools-131

Storybook 8.4

Storybook 8.4がリリース。

https://storybook.js.org/blog/storybook-8-4/

次のような変更が行われている。

• Vitestを利用したコンポーネントテストをStorybookのUI上で実行可能に。
• Storybookのバンドルサイズが半減。
• Next.js v15、Svelte v5のサポート。
• StorybookのESLintプラグインがv9とFlat configをサポート
• Storyのタグ付けとフィルタリングが可能に。
  • またタグ情報をサイドバーに表示するアドオンも追加。
    • https://github.com/Sidnioulz/storybook-addon-tag-badges

Rspack 1.1

Rspack 1.1がリリース。

https://rspack.dev/blog/announcing-1-1

パフォーマンスや機能の改善、CLIショートカットの追加など。

$ rsbuild dev --open
  # ...
  Shortcuts:
  c + enter   clear console
  o + enter   open in browser
  q + enter   quit process
  r + enter   restart server
  u + enter   show urls

Nuxt v3.14

Nuxt v3.14がリリース。

https://nuxt.com/blog/v3-14

Nitro/Vue間で共有する型やユーティリティを入れるためsharedディレクトリのサポート、実験的なrspackビルダーの追加。

pqoqubbw/icons

lucideアイコンにFramer Motionで動きを付けたReact用のアイコンセット。

https://icons.pqoqubbw.dev/

uihub.com

githubのリポジトリから一文字だけ切り替えることでテキストとして情報を落とせるサービス。

https://uithub.com/

API keyの発行が必要だが、issueやdiscussion、pull requestなどの取得も可能。

https://uithub.com/openapi.html