サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
developer.chrome.com
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
From Chrome 129 you can use the scrollSnapChange and scrollSnapChanging events from JavaScript. By implementing built-in snap events, the previously invisible snap state will become actionable, at the right time, and always correct. This is not a convenience you had without these events. Before scrollSnapChange, you could use an intersection observer to find what element was crossing the scroll po
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 アノテーションが改行可能になり、ruby-align CSS プロパティを使用して Ruby テキストのスタイルを設定できるようになります。 <ruby> 要素は 2 つの主要な部分からなります。ルビーベース(メインテキスト)とルビーテキスト(アノテーション テキスト)は、<rt> 要素でマークアップされています。Ruby テキストは、次の例に示すように、ルビーベースの上または下に表示できます。 <ruby style="ruby-position: under;"> 강남대로 <rt>江南大路</rt> </ruby> <ph type="x-smartl
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、 ブラウザはユーザーにプロンプトを表示し、多くの場合、その判断内容を保存するオプションが用意されています。 これは をご覧ください。 事前リクエストではなく、初回使用時に暗示的に求める Geolocation API は強力な 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
ウェブ上で AI モデルを使用して特徴を構築する場合、大規模なモデルにはサーバーサイド ソリューションを利用することがよくあります。これは、生成 AI に特に当てはまります。生成 AI では、小さなモデルでも、ウェブページのサイズの中央値の約 1, 000 倍の大きさになります。モデルが数十メガバイトから数百メガバイトまでにわたる他の AI ユースケースにも当てはまります。 これらのモデルはウェブサイト間で共有されないため、各サイトがページの読み込み時にモデルをダウンロードする必要があります。これはデベロッパーやユーザーにとって 実用的ではないソリューションであり サーバーサイド AI は大規模モデルに最適な選択肢ですが、オンデバイス アプローチとハイブリッド アプローチには独自の魅力的な利点があります。これらのアプローチを実現するには、モデルのサイズと提供方法に対応する必要があります。
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. Since these models aren't shared across websites, each site ha
In the dialog window, learn what data will be sent to Google. To view the data in new tabs, you can click the corresponding links. To get an explanation, click Continue. After a few seconds, an explanation will appear below the console error. If you don't think the explanation is satisfactory, you can click Use search instead to open a new tab with search results for the error. We would greatly ap
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
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 ページ内を移動し、 キーボードのみを使用できます。これにはさまざまな理由が考えられます。提供元: マウスの操作を困
対応ブラウザ <ph type="x-smartling-placeholder"></ph> 109 回 <ph type="x-smartling-placeholder"></ph> 109 回 <ph type="x-smartling-placeholder"></ph> × <ph type="x-smartling-placeholder"></ph> × Chrome チームは、ユーザーが移動しそうな将来のページを完全に事前レンダリングする機能を再開しました。 事前レンダリングの歴史 これまで Chrome は <link rel="prerender" href="/next-page"> リソースヒントをサポートしていましたが、これは Chrome 以外では広くサポートされておらず、それほど表現力豊かな API ではありませんでした。 リンク rel=prerender
Core Web Vitals イニシアチブは発足以来、ウェブサイトの作成方法や読み込み方法の技術的な詳細ではなく、ウェブサイトの実際のユーザー エクスペリエンスを測定することを目指してきました。Core Web Vitals の 3 つの指標はユーザー中心の指標として作成されました。DOMContentLoaded や load などの既存の技術指標から進化したものであり、ユーザーがページのパフォーマンスを認識する方法とは無関係なタイミングを測定していました。そのため、サイトの構築に使用されているテクノロジーがスコアに影響を与えることはありません。 現実は常に理想よりも少し複雑であり、一般的なシングルページ アプリケーション アーキテクチャは、Core Web Vitals の指標によって完全にサポートされているものではありません。これらのウェブ アプリケーションでは、ユーザーがサイト内
Rolling out from Chrome 119 to 123 is a new international CSS feature from CSS Writing Modes Level 4. Vertical writing mode for form control elements means that these elements can be displayed in vertical writing modes. By Chrome 123 the feature will be enabled for all users, this post explains the feature. Vertical writing mode for text-based form control elements Once this feature is fully enabl
11 月の Chrome 108 のリリースに伴い、画面キーボード(OSK)が表示されたときのレイアウト ビューポートの動作が変更されます。この変更により、Android 版 Chrome ではレイアウト ビューポートのサイズが変更されなくなり、ビジュアル ビューポートのみのサイズを変更できるようになります。これにより、Android 版 Chrome の動作が、iOS 版 Chrome および iOS 版 Safari と同等になります。 ここでは、現在の状況、Chrome でこの変更が行われる理由、実施可能な準備について説明します。 レイアウト ビューポートとビジュアル ビューポート ウェブサイトにアクセスしたときに、読み込んだページのコンテンツ全体が表示されない。その代わり、ブラウザにはページの一部を表示するビューポートが用意されています。このビューポートは、レイアウト ビューポート
25 年以上、sRGB(標準の赤、緑、青)は CSS のグラデーションと色における唯一の色色域であり、rgb()、hsl()、16 進数などの色空間サービスがあります。ディスプレイの中で最も一般的な色域機能であり、共通点です。この色域内の色を指定することに慣れてきました。 https://almanac.httparchive.org/en/2022/css#colors ディスプレイでさまざまな色を表示できるようになったため、CSS ではこれらの広い範囲から色を指定する方法が必要になります。現在のカラー形式には、広い色範囲に対応する言語がありません。 CSS が一度も更新されなければ、90 年代の色域に恒久的に留まり、画像や動画で見られる広色域の製品に合わせられなくなります。トラップ: 人間の目に見える色の 30% のみを表示します。この落とし穴から抜け出すために助けてくれた CSS C
CSS テキスト モジュール レベル 4 の 4 つの新しい国際的な CSS 機能が Chrome に導入されます。この投稿では、すでにリリース済みの製品と、間もなく提供予定の製品について説明します。 Chrome 119 以降: word-break: auto-phrase での日本語のフレーズ改行。 Chrome 120 のフラグの背後: text-autospace プロパティによるスクリプト間のスペース。 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語(CJK)の句読点カーニング。 言語間で最小フォントサイズを統一します。 日本語のフレーズの改行: word-break: auto-phrase 日本語の読みやすさを向上させるこの機能(Chrome 119 以降) 中国語や日本語など東アジアの一部の言語では、単語を区切るためにスペースを使
Resuming the transition to Manifest V3 Published on Thursday, November 16, 2023 In December of last year, we paused the planned deprecation of Manifest V2 in order to address developer feedback and deliver better solutions to migration issues. As a result of this feedback, we’ve made a number of changes to Manifest V3 to close these gaps, including: Introducing Offscreen Documents, which provide D
Service Worker Static Routing API Origin Trial Published on Friday, November 10, 2023 Service workers are a powerful tool for allowing websites to work offline and create specialized caching rules for themselves. A service worker fetch handler sees every request from a page it controls, and can decide if it wants to serve a response to it from the service worker cache, or even rewrite the URL to f
New in Chrome 119 Published on Tuesday, October 31, 2023 • Updated on Wednesday, November 1, 2023 Translated to: Español Here's what you need to know: There’s an update to the expiration date upper limit for cookies already in storage.CSS has new pseudo-classes, relative color syntax and more.Fenced Frames added improvements like ad size macros and others.And there’s plenty more.I’m Adriana Jara.
WebAssembly Garbage Collection (WasmGC) now enabled by default in Chrome Published on Tuesday, October 31, 2023 There are two types of programming languages: garbage-collected programming languages and programming languages that require manual memory management. Examples of the former, among many more, are Kotlin, PHP, or Java. Examples of the latter are C, C++, or Rust. As a general rule, higher-
p { text-wrap: pretty; } https://codepen.io/web-dot-dev/pen/yLGmzLJ Typographic widows and orphans are single words that stand alone at the end of a paragraph or text block. Widows are words alone at the top of a text block and orphans are alone at the end of a text block. They can interrupt the way our eyes skim the text, making content harder to read. Some designers avoid them at all costs and g
Chrome 119 beta brings you CSS relative color syntax, new pseudo-classes, and much more. Unless otherwise noted, changes described apply to the newest Chrome beta channel release for Android, ChromeOS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 119 is beta as of October 4, 2023. You can download the l
The delicate art of writing CSS selectors When writing selectors you may find yourself torn between two worlds. On the one hand you want to be pretty specific about which elements you select. On the other hand, you want your selectors to remain easy to override and not be tightly coupled to the DOM structure. For example, when you want to select “the hero image in the content area of the card comp
次のページ
このページを最初にブックマークしてみませんか?
『Chrome for Developers』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く