編集

Chrome 131

#Chrome #CSS #Tailwind CSS #DevTools #Gemini

Chrome 131 がリリース。

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

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

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

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

html
<style>
  p {
    color: deeppink;
  }

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

#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

html
<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>
🐈

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.

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.

#@page margin boxes

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

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

css
@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

編集