Keyboard focusable scrollers 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 背景 スクローラーのフォーカスが変更される前 Chrome 124からフォーカス可能なスクロールを持ちます Chrome 124からは、キーボードフォーカスが可能な子要素がない場合、スクローラーはデフォルトでキーボードフォーカスが可能です。 背景 スクローラーはどこにでもあります。送信ボタンをクリックするために下までスクロールする必要がある「利用規約」ボックスで見つけることができるかもしれません。あるいは、アイコンでいっぱいの縦型メニューバーに遭遇するかもしれません。 このような場合、多くのウェブ・ユーザーはマウスやタッチパッドの上下の動作を使って要素をスクロールします。しかし、ポインティングデバイス、トラックパッド、タッチスクリーン

What You Need to Know about Modern CSS (Spring 2024 Edition) 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 コンテナクエリー (サイズ) いつ気にすべきか? サポート状況 基本的な使用例 コンテナクエリー (スタイル) いつ気にすべきか? サポート状況 基本的な使用例 コンテナユニット コンテナユニットとは? いつ気にすべきか? サポート状況 基本的な使用例 :has() 疑似セレクター :has() セレクターとは? いつ気にすべきか? 3 サポート状況 基本的な使用例 ビュートランジション ビュートランジションとは? いつ気にすべきか? サポート状況 基本的な使用例 ネスティング ネスティングとは? いつ気にすべきか? スクロール駆動アニメーション スクロール駆動アニメーシ

gulp v5.0.0 タスクランナーであるgulpの新バージョン5.0.0がリリースされました！ バージョンアップはおよそ5年ぶりとなります。 以下はリリースノートを抄訳したものです。 ⚠ 破壊的な変更点 新機能 バグ修正 その他の作業 ⚠ 破壊的な変更点 Node.js <10.13のサポート終了 デフォルトのストリームエンコーディングがUTF-8に変更 globbingパスにはanymatchライブラリが標準化。srcとwatchで同じ動作になりました 順序付けられたグロブのサポートを削除。chokidarのglobbingの実装と一致 すべてのグロブとパスがUnix形式のファイルパスに正規化 .gulp.*設定ファイルはJSバリアントのみ許可 gulp-cliからv4のアルファリリースのサポート終了 --verifyフラグを削除 --requireフラグを--preloadに変更(

Your user doesn’t prefer your design 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 デベロッパーやデザイナーとして、私たちはウェブサイトを構築する際に多くのデザイン上の決断を下します。私たちはすべての人に対応しようとしますが、それは不可能なことです。では、どうすればユーザーの好みに耳を傾けることができるでしょうか？ 最近、アップルの新しいVision Proが話題になっています。この新しいデバイスは、新しいVisionOSに新しいデザイン言語を搭載しています。私が目を引いた主な特徴のひとつは、いたるところで使われている「すりガラス」の背景です。見た目は素晴らしいが、すべての人がこれを喜ぶとは限りません。 prefers-reduced-transparency (実験的な機能) その他のメディアクエリ

Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ