Frontend Weekly 2025-06-27
ECMAScript 2025承認、Chrome 138のAI API搭載、Vite 7.0リリース、Prettier 3.6の高速CLI、Playwright v1.53.0、ESLint v9.30.0のサブディレクトリ対応、カスタムリポジトリロールにGitHub Actions fine-grain権限、Google Offerwallなど
Frontend Weekly 2025-04-18
Astro 5.7のSessions API安定化、SVG Components、Experimental Fonts API、Config Imports、h1要素のデフォルトスタイル変更、RspackとNext.jsの統合、Cloudflare WorkersへのNext.jsデプロイ、Googleの国別ドメイン統合について。
CSSカルーセルを試す
Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法を紹介します。
list-styleを無効化したul要素にlistロールを指定すべきなのか？
list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。
色空間とOKLCHを利用したカラーパレットの生成
CSSがサポートしている色空間の特性や歴史的な経緯、カラーパレットを生成する場合にOKLCH色空間の利用を推奨する理由について解説する。
Q. overflow-yを指定したら、縦スクロールバーが表示されるようになった
overflow-yを指定したら、縦スクロールバーが表示されるようになる状況の解説と対処法について書いた。
Q. textareaに掛けたfield-sizing: content; width: 100%;が効かない
textareaにfield-sizing: content; width: 100%;などを指定しても親要素の幅を超えてしまうという相談を受けたので、その原因と対応についてまとめた。
Q. Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになった
Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになったという報告があったので、その理由と対処方法についてまとめた。
Q. position: stickyが効かない
position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。
余計なDOMを追加せずにinput[type="file"]を装飾する
file-selector-buttonを利用してinput[type="file"]を装飾する方法とその是非について。
2種類のスクロールバーとscrollbar-gutterによる制御
動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。
Q. Noto Sansの場合、下にずれたように見える
Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。
Q. iPhoneで見るとフォーム画面が崩れる
iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。
CSS Media Queryを使うときに気を付けること及び知見
CSS Media Query、特にmin-widthまたはmax-widthを利用する場合に気を付けた方が良いパターンや知見について紹介する。これらのメディア特性が自由に扱われているスタイルは破綻しやすい。
スクロール領域はそのままにスクロールバーを隠す
undefined...
CSS 変数で色を透過したりパレットを生成する
CSS変数に色をそのまま宣言するのではなく、パラメーターを持たせておくことで、`rgb()`や`hsl()`、`lch()`などの関数に渡して、色を生成する方法を紹介する。
CSSで印刷時の見た目を調整する
@media printや@page、break-inside、break-before、break-after、print-color-adjustなどを利用して印刷時の見た目を調整する方法を紹介する。
text-align-last: ブロックの最後の行および強制的な改行の直前の行をどのように配置するか
Safari 16でサポートされ、全ての主要なブラウザで利用できるようになったtext-align-lastについて紹介する。
