はてなブックマーク

公開日: 2024 年 11 月 6 日 Chrome 131 以降では、<details> 要素と <summary> 要素の構造にスタイルを適用するオプションが追加されました。これらの要素は、開示ウィジェットやアコーディオン ウィジェットを作成する際に使用できます。 特に、Chrome 131 で導入された変更により、これらの要素で display プロパティを使用できるようになり、::details-content 疑似要素が追加され、展開と閉じを切り替える部分にスタイルを適用できるようになりました。

Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.

Recorder supports export to Puppeteer for Firefox As part of WebDriver BiDi support, the Recorder panel can now export recordings to Puppeteer for Firefox. With Puppeteer's support of Firefox, you can now record user flows using the Chrome DevTools Recorder panel, export them, and run them against both Firefox and Chrome. For more information, see WebDriver BiDi - The future of cross-browser autom

Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo

公開日: 2024 年 9 月 4 日、最終更新日: 2024 年 10 月 16 日 Digital Credentials API のオリジン トライアルは Chrome 128 から開始されます。Digital Credentials API は、ウェブサイトがデジタル ウォレットに保存されている運転免許証や国家 ID などのデジタル認証情報を通じて、ユーザーに関する検証可能な情報を選択的にリクエストできる新しいウェブ プラットフォーム API です。 背景 多くの官公庁や民間企業がデバイスに関連付けられたデジタル認証情報を発行し始めており、現実世界でのデジタル ID が現実のものになりつつあります。たとえば、米国の一部の州（アリゾナ州、カリフォルニア州、コロラド州、ジョージア州、メリーランド州など）では、モバイル デバイスの Google ウォレットなどのデジタル ウォレット アプ

Hints: Hints give relying parties (RPs) better control over WebAuthn UI in the browser. They are especially helpful for enterprise users who want to use security keys. Related origin requests: With related origin requests, RPs can make passkeys valid on multiple domains. If you own multiple sites, you can now enable your users to reuse their passkey across your sites, eliminating login friction. J

Before scrollSnapChange, you could use an intersection observer to find what element was crossing the scroll port, but determining what was snapped was restricted to a few circumstances. For example, you can detect if the snap items fill the scroll port or fill the majority of the scroll port. To do this you'd observe intersecting elements of the scroll area, then based on which item is consuming

Just last week, together with BrowserStack, we announced WebDriver BiDi becoming production-ready in BrowserStack. This week the summer of WebDriver BiDi continues with Firefox 129 and Puppeteer 23 each getting production-ready support for WebDriver BiDi! Mozilla has been a strong collaborator on WebDriver BiDi for over four years now, initially helping to shape the new standard and then gradually

HTML の <ruby> 要素は、特に東アジアの言語でテキストの表示を強化するための強力なツールです。この要素を使用すると、ベーステキストの上にまたは横に音声記号などの補足情報を表示できます。Chrome 128 以降、ルビ アノテーションは改行可能になり、ruby-align CSS プロパティでルビテキストのスタイルを設定できるようになります。 <ruby> 要素は、メインテキストであるruby base と、<rt> 要素でマークアップされたアノテーション テキストであるruby text の 2 つの主要部分で構成されています。次の例に示すように、ルビテキストはルビベースの上に表示することも、下に表示することもできます。 <ruby style="ruby-position: under;"> 강남대로 <rt>江南大路</rt> </ruby> 韓国語ハングルの下に中国語のアノ

The View Transition API is a web development game changer. Whether your website is single or multi-page, this powerful API lets you create seamless transitions between views, resulting in native-like experiences that captivate users. Currently available in Chrome, with same document view transitions soon to be available in Safari. With more and more people starting to look into the View Transition

ウェブアプリで位置情報へのアクセスなどの強力な機能を使用する権限をリクエストするには、いくつかの命令型メソッドがあります。これらの方法には多くの課題があるため、Chrome 権限チームは、新しい宣言型の方法（専用の HTML <permission> 要素）をテストしています。この要素は Chrome 126 からオリジン トライアルで使用されており、最終的には標準化される予定です。 権限をリクエストする命令型メソッド ウェブアプリが高度な機能にアクセスする必要がある場合は、権限をリクエストする必要があります。たとえば、Google マップが Geolocation API を使用してユーザーの位置情報を必要とする場合は、ブラウザからユーザーにプロンプトが表示されます。多くの場合、その決定を保存するオプションも表示されます。これは、権限仕様で明確に定義されたコンセプトです。 初回使用時に暗

There are a number of imperative methods for asking for permission to use powerful features like location access in web apps. These methods come with a number of challenges, which is why the Chrome permissions team is experimenting with a new declarative method: a dedicated HTML <permission> element. This element is in origin trial from Chrome 126, and ultimately we hope to standardize it. Imperat

公開日: 2024 年 5 月 14 日、最終更新日: 2024 年 11 月 13 日 ウェブで AI モデルを使用して特徴を構築する場合、大規模なモデルにはサーバーサイド ソリューションを使用することがよくあります。これは特に生成 AI に当てはまります。生成 AI では、最も小さいモデルでもウェブページの平均サイズの約 1, 000 倍の大きさになります。これは、モデルが数十から数百メガバイトになる他の AI ユースケースにも当てはまります。これらのモデルはウェブサイト間で共有されないため、各サイトはページの読み込み時にモデルをダウンロードする必要があります。これは、デベロッパーとユーザーにとって現実的ではありません。 Google は、大規模言語モデル（LLM）などの AI モデルをブラウザに直接統合するように設計されたウェブ プラットフォーム API とブラウザ機能を開発していま

Published: May 14, 2024, Last updated: November 13, 2024 When we build features with AI models on the web, we often rely on server-side solutions for larger models. This is especially true for generative AI, where even the smallest models are about thousand times bigger than the median web page size. It's also true for other AI use cases, where models can range from 10s to 100s of megabytes. As th

Published: May 10, 2024 The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements relative to other elements, known as anchors. This API simplifies complex layout requirements for many interface features like menus and submenus, tooltips, selects, labels, cards, settings dialogs, and many more. With anchor positioning built into the browser,

The Chrome team is keen to see an implementation of masonry type layouts on the web. However, we feel that implementing it as part of the CSS Grid specification as proposed in the recent WebKit post would be a mistake. We also feel that the WebKit post argued against a version of masonry that no one was proposing. Therefore, this post aims to explain why we at Chrome have concerns about implementi

Chrome 130 以降、スクローラーは、キーボード フォーカス可能な子要素がない場合、デフォルトでキーボード フォーカス可能になります。 背景 スクロールバーはあらゆる場所に存在します。[利用規約] ボックスの中に利用規約が表示されている場合は、一番下までスクロールして [送信] ボタンをクリックしてください。または、選択できるアイコンが並んだ縦型のメニューバーが表示されることもあります。 そのような場合、多くのウェブユーザーはマウスやタッチパッドを上下に動かして要素をスクロールします。ただし、ポインティング デバイス、トラックパッド、タッチスクリーンがページを移動する最適な方法であるとは限りません。キーボードのみを使用して、フォーカス可能なすべての要素にアクセスしながら HTML ページを移動することを好むユーザーもいます。これにはさまざまな理由が考えられます。振戦などの問題でマウス

Chrome チームは、ユーザーが次に移動する可能性が高いページの完全なプリレンダリングを復活させました。 プリレンダリングの簡単な歴史 以前、Chrome は <link rel="prerender" href="/next-page"> リソースヒントをサポートしていましたが、Chrome 以外では広くサポートされておらず、表現力の高い API ではありませんでした。 リンク rel=prerender ヒントを使用するこの従来のプリレンダリングは非推奨になり、NoState プリフェッチに置き換えられました。NoState プリフェッチは、将来のページに必要なリソースを取得しますが、ページを完全にプリレンダリングしたり、JavaScript を実行したりしません。NoState プリフェッチは、リソースの読み込みを改善することでページのパフォーマンスを向上させますが、完全な事前レン

Core Web Vitals イニシアチブは、ウェブサイトの作成や読み込みの技術的な詳細ではなく、ウェブサイトの実際のユーザー エクスペリエンスを測定することを目的としています。3 つの Core Web Vitals 指標は、ユーザー中心の指標として作成されました。これは、ユーザーがページのパフォーマンスをどのように認識しているかとは関係のないタイミングを測定する既存の技術指標（DOMContentLoaded や load など）を進化させたものです。そのため、サイトのパフォーマンスが良好であれば、サイトの構築に使用した技術がスコアに影響することはありません。 現実は理想よりも少し複雑で、一般的なシングルページ アプリケーション アーキテクチャは、Core Web Vitals 指標で完全にサポートされたことはありません。これらのウェブ アプリケーションでは、ユーザーがサイト内を移動

25 年以上、sRGB（標準の赤、緑、青）は、rgb()、hsl()、16 進数などのカラースペース オファリングを含む、CSS グラデーションと色の唯一の色範囲でした。これはディスプレイで最も一般的な色域機能であり、共通の基準です。その中で色を指定することに慣れています。 https://almanac.httparchive.org/en/2022/css#colors ディスプレイの色域が広がるにつれて、CSS では、より広い範囲の色を指定できる方法が必要になっています。現在の色形式には、広い色域を記述する言語がありません。 CSS が更新されなければ、90 年代の色域に永遠にとどまり、画像や動画で使用されている広色域に対応できなくなります。トラップ: 人間の目で識別できる色の 30% のみを表示します。Lea Verou と Chris Liley が主に作成した CSS Colo