編集

Chrome 125

#Chrome #CSS #Web API

Chrome 125 がリリースされました。

New in Chrome 125 | Blog | Chrome for Developers

#CSS Anchor Positioning

CSS Anchor Positioning は、CSS のみで指定された要素を基準に要素を配置する機能です。Chrome や Edge でしか現状利用できません。

Introducing the CSS anchor positioning API | Blog | Chrome for Developers

これは複数の新しいプロパティや値を含んでおり、色々なことが出来ます。以下に主なパターンを書き出しました。詳しくは記事を見てください。

css
.anchor {
  anchor-name: --anchor-el;
}
/* インセット領域を利用した配置 */
.anchored-notice-1 {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of anchored elem at top center of anchor  */
  /* top, left, right, bottom, inline-(start|end), block-(start|end) */
  inset-area: top;
}
/* 絶対配置を利用した配置 */
.anchord-notice-2 {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  right: anchor(right);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}
.anchord-notice-3 {
  position: absolute;
  position-anchor: --anchor-el;
  inset-area: right span-bottom;
  /*
  * 配置位置をアンカーの位置に応じて変更する。
  */
  position-try-options: --bottom;
}
/* alternate position */
@position-try --bottom {
  inset-area: bottom;
}
.anchord-notice-4 {
  position: absolute;
  position-anchor: --anchor-el;
  inset-area: top;
  /* 自動的に反転させる flip-blockとflip-inlineの組み合わせ*/
  position-try-options: flip-block;
}
.anchord-notice-5 {
  position: fixed;
  position-anchor: --anchor-el;
  /* アンカーが表示されている間、配置された要素を表示し続ける */
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

DEMO:

Anchor position tool

#Compute Pressure API

Compute Pressure API がサポートされました。現状 Chrome ぐらいでしか利用できません。

Compute Pressure API | Web Platform | Chrome for Developers

Compute Pressure API は、大きな負荷の変化を検出できます。これによりビデオ会議 Web アプリなどのリアルタイム アプリケーションで、負荷が高まった際に画質を落とすなどの対応ができます。

jsx
function callback(records) {
  const lastRecord = records[records.length - 1];
  console.log(`Current pressure ${lastRecord.state}`);
  if (lastRecord.state === "critical") {
    // disable video feeds
  } else if (lastRecord.state === "serious") {
    // disable video filter effects
  } else {
    // enable all video feeds and filter effects
  }
}

const observer = new PressureObserver(callback);
await observer.observe("cpu", {
  sampleInterval: 1000, // 1000ms
});

Storage Access API はクロスサイト Cookie の代替として導入された API です。iframe などを通して別のサイトに埋め込まれたコンテンツに対してサードパーティー Cookie へのアクセスを提供していました。Chrome 125 から indexedDB や localStorage など Cookie 以外のストレージにもアクセスできるようになりました。

Storage Access API - Web API | MDN

Storage Access API の使用 - Web API | MDN

#CSS round(), mod(), rem()

round()は指定に応じて、四捨五入や切り捨て・切り上げを行います。Chrome のサポートにより、ほとんどの環境で利用できるようになりました。

https://developer.mozilla.org/en-US/docs/Web/CSS/round

mod()、rem()は名前の通りです。

css
/* Math.round相当。デフォルトはnearest */
width: round(var(--width), 50px);
/* Math.ceil相当 */
width: round(up, 101px, var(--interval));
/* Math.floor相当 */
width: round(down, var(--height), var(--interval));
/* Math.tranc相当 */
margin: round(to-zero, -105px, 10px);
margin: mod(29vmin, 6vmin); /* 5vmin */
rotate: mod(135deg, -90deg); /* -45deg */
line-height: rem(21, 2); /* 1 */
rotate: rem(140deg, -90deg); /* 50deg */

#Others

折りたたみデバイス向けの Device Posture API と Viewport Segments API のオリジントライアルが開始

Origin trial for Foldable APIs | Blog | Chrome for Developers

編集