編集

Chrome 143リリース

#Chrome #CSS

Chrome 143がリリースされた。主な新機能として、CSS anchored fallback container queries、background-position-x/yの辺相対構文、font-language-override CSS propertyが追加された。

出展：Chrome 143 の新機能

#CSS anchored fallback container queries

@container anchored(fallback)を導入。position-try-fallbacksのどれが適用されているかに基づいて、アンカー位置指定要素の子孫のスタイルを設定可能。アンカーとアンカー要素の相対的な位置関係に基づいて、アンカー要素のテザーやアニメーションのスタイルを設定できる。

css
.anchor {
  anchor-name: --my-anchor;
}

.infobox {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top left;
  
  position-try:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;
  
  position-try-fallbacks:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;
}

@container anchored(fallback) {
  .infobox {
    opacity: 0.8;
    border: 2px dashed #ff6b6b;
  }
}
アンカー要素
ツールチップ

#Side-relative syntax for background-position-x/y longhands

background-position-xとbackground-position-yで、背景画像を端の1つに対して相対的に配置可能。従来のキーワード（left、right、top、bottom）に加えて、端からの距離を指定できる。

css
.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: right 30px;
  background-position-y: bottom 20px;
}

#font-language-override CSS property

OpenTypeグリフ置換に使用されるシステム言語をオーバーライド可能。CSSでOpenType language systemにある言語タグを指定して、言語固有のグリフバリアントを制御できる。多言語コンテンツや言語固有のグリフバリアントを含むフォントに特に有用。HTMLのlang属性で指定された言語の字形を使用する代わりに、指定した言語の字形を強制的に使用する。

css
.english-text {
  font-language-override: "ENG"; /* 英語の字形 */
}

.turkish-text {
  font-language-override: "TRK"; /* トルコ語の字形 */
}

.japanese-text {
  font-language-override: "JAN"; /* 日本語の字形 */
}

English text with font-language-override: "ENG"

日本語テキスト（font-language-override: "JAN"）

#Gamepad ongamepadconnected/ongamepaddisconnected イベントハンドラー属性

ongamepadconnectedとongamepaddisconnectedイベントハンドラー属性が追加された。

  • window.ongamepadconnected
  • document.body.ongamepadconnected
  • window.ongamepaddisconnected
  • document.body.ongamepaddisconnected

#DataTransfer プロパティが insertFromPaste、insertFromDrop、insertReplacementText 入力イベントで利用可能に

inputTypeがinsertFromPaste、insertFromDrop、insertReplacementTextのinputイベントで、dataTransferプロパティが設定されるようになった。contenteditable要素での編集操作中に、クリップボードやドラッグ&ドロップデータにアクセスできる。

dataTransferオブジェクトには、beforeinputイベント中に利用可能だったのと同じデータが含まれる。この機能はcontenteditable要素にのみ適用され、フォームコントロール（textarea、input）では従来通りdataプロパティに挿入されたテキストが含まれ、dataTransferはnullのまま。

javascript
const editor = document.querySelector('[contenteditable]');

editor.addEventListener('input', (e) => {
  if (e.inputType === 'insertFromPaste' && e.dataTransfer) {
    const text = e.dataTransfer.getData('text/plain');
    const html = e.dataTransfer.getData('text/html');
    console.log('Pasted text:', text);
    console.log('Pasted HTML:', html);
  }
  
  if (e.inputType === 'insertFromDrop' && e.dataTransfer) {
    const files = Array.from(e.dataTransfer.files);
    console.log('Dropped files:', files);
  }
});
編集