編集

Chrome 139 リリース

#Chrome

Chrome 139がリリース。

CSS Custom Functions、Web Speech APIのオンデバイス利用、@font-face の font-feature-settingsサポートなど。

出展：

#オンデバイス Web Speech API（Web Speech API）

Web Speech API にデバイス上の音声認識のサポートが追加。ウェブサイトで音声と文字変換された音声の両方が処理のためにサードパーティのサービスに送信されないようにすることが可能。オンデバイス音声認識に必要なリソースをインストールするようにユーザーに促す。基本利用コードは従来通り。

js
const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new Recognition();
recognition.lang = 'ja-JP';
recognition.continuous = true;
recognition.interimResults = true;

recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map((r) => r[0].transcript)
    .join('');
  console.log(transcript);
};

recognition.start();

#CSS の角の形状（Corner Shapes）

corner-shape を導入。border-radius と併用して、squircle、notch、scoop 等の角表現やアニメーションが可能。

css
.card {
  border-radius: 24px;＾＾
  corner-shape: round; /* squircle 風の滑らかな角 */
}

.badge--notch {
  border-radius: 12px;
  corner-shape: notch; /* 角を切り欠く */
}

.avatar--scoop {
  border-radius: 20px;
  corner-shape: scoop; /* 角をえぐる */
}

/* 形状間のアニメーション */
.card:hover {
  corner-shape: scoop;
  transition: corner-shape 300ms ease;
}

#CSS Custom Functions（@function）

CSS にユーザー定義関数を導入。引数や他のカスタムプロパティに基づいて値を生成。

css
@function --negate(--value) {
  result: calc(var(--value) * -1);
}

.box {
  --gap: 1em;
  margin-top: --negate(var(--gap));
}

#Web App Manifest: scope_extensions複数のサブドメインを紐づける

複数のサブドメインや別 TLD を 1 つの Web App として扱うための拡張スコープを宣言。

json
{
  "name": "Sample App",
  "start_url": "/",
  "scope": "https://example.com/",
  "scope_extensions": [
    { "origin": "https://a.example.com" },
    { "origin": "https://example.org", "scope": "/subapp/" }
  ]
}

#WHATWG mimesniff に準拠した JSON MIME の認識

application/manifest+json など、仕様で有効な JSON MIME を JSON として認識。

js
const res = await fetch('/manifest.webmanifest');
// Content-Type: application/manifest+json
const data = await res.json();

#@font-face ルールで font-feature-settings構文をサポート

@font-face で OpenType feature の既定値を指定可能に。

css
@font-face {
  font-family: "MyFont";
  src: local("MyFont Regular"), url("/fonts/myfont.woff2") format("woff2");
  font-display: swap;
  font-feature-settings: "liga" 1, "kern" 1, "ss01" 1;
}

body {
  font-family: "MyFont", system-ui, sans-serif;
}

.title {
  font-feature-settings: "ss01" 0, "ss02" 1;
}
編集