Frontend Weekly 2024-05-10

2024年5月10日

Webフロントエンド版DX Criteria、Deno v1.43、Baseline 2024 Aprilなどについて紹介する。

Table of Contents

Webフロントエンド版DX Criteria

CTO協会の発行しているDX Criteriaにフロントエンド版が追加。

2024年5月にDeno v1.43がリリースされました。

deno.jsonのtasksでnpmコマンドを直接実行できるようになりました。以前はnode-modules-dirオプションを利用して実行する必要がありました。

{
  "tasks": {
-	  "start": "deno run -A --unstable --node-modules-dir npm:vite"
+   "start": "vite"
  }
}

Popover APIやIntl.Segmenter、ブロックレイアウトへのalign-contentなどがBaselineに追加。

Baselineは、どの機能が現在のプロジェクトで安全に使用できるかについて明確な情報を提供している。

Baselineの定義は2023年12月に変更されており、Baselineには主要ブラウザで相互運用可能であるNewlyと、一定の期間が立ちほとんどの環境で安全に利用できるWidlyの段階があります。この情報はMDNやCan i useにも記載されています。

Chrome 124から発生するようになったらしい。サンプルでは画像が子要素に含まれているが、画像の有無は関係ない。min-width: 0;で解決するとのこと。

GridやFlexboxで表示が崩れる場合、min-width: 0; を付けると解決することが多々ある。

CSSと単一のdivでハーフトーン効果を適用する。

楽譜をCSSで記述する方法。

記事で触れられている手法をラップした**<scribe-music>** Webコンポーネントが提供されている。JSONファイルを指定して描画することも出来る。