サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
developer.chrome.com
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> 要素は 2 つの主要な部分からなります。親文字(メインテキスト)とルビ(アノテーション テキスト)は、<rt> 要素でマークアップされています。ルビは、次の例に示すように、親文字の上または下に表示できます。 <ruby> 絵文字 <rt>emoji</rt> </ruby> 日本語の親文字にルビとして表示される英語の発音。 <ruby style="ruby-position: under;"> 강남대로 <rt>江南大路</rt> <
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
ウェブ上で 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
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, you'll be able to build
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 124 以降、キーボードにフォーカス可能な子がない場合、スクローラーはデフォルトでキーボードをフォーカスできます。 背景 スクローラーは至るところに存在しています。[利用規約] ボックス内に利用規約が表示される場合がありますが、一番下までスクロールして [送信] ボタンをクリックする必要があります。垂直のメニューバーに多数のアイコンが表示され、そこから選択することもできます。 このようなケースでは、多くのウェブユーザーがマウスやタッチパッドを上下に動かして、要素をスクロールします。ただし、ユーザーがページを移動するには、ポインティング デバイス、トラックパッド、タッチスクリーンが最適な方法とは限りません。一部のユーザーは、キーボードのみを使用して HTML ページ間を移動し、フォーカス可能なすべての要素にアクセスすることがよくあります。これにはさまざまな理由が考えられます。振
Chrome チームは、ユーザーがアクセスする可能性の高い今後のページを完全に事前レンダリングするオプションの開発に取り組んできました。 事前レンダリングの略歴 以前は、Chrome は <link rel="prerender" href="/next-page"> リソースヒントをサポートしていましたが、Chrome を超えて広くサポートされていたわけではありません。また、表現力の高い API でもありませんでした。 リンク rel=prerender ヒントを使用した従来の事前レンダリングは非推奨となりました。代わりに NoState Prefetch に置き換えられました。NoState Prefetch は今後のページで必要となるリソースを取得していましたが、ページの事前レンダリングも完全には行われず、JavaScript も実行されませんでした。NoState のプリフェッチを
Core Web Vitals イニシアチブでは、リリース以来、ウェブサイトの作成や読み込みの背後にある技術的詳細ではなく、ウェブサイトの実際のユーザー エクスペリエンスを測定することを目標としてきました。Core Web Vitals の 3 つの指標は、ユーザー中心の指標として作成されました。これらは既存の技術的指標(DOMContentLoaded や load など)を進化させたもので、ページのパフォーマンスに対するユーザーの感じ方とは無関係であることが多い時間を測定したものです。そのため、サイトのパフォーマンスが良好であれば、サイトの構築に使用されたテクノロジーがスコア判定に影響することはありません。 現実は理想的よりも常に少し複雑で、人気のあるシングルページ アプリケーション アーキテクチャがウェブに関する主な指標の指標で完全にサポートされていることは一度もありません。このよう
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 Text モジュール レベル 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-
From Chrome 117 you can use a new text wrapping feature—text-wrap: pretty from CSS Text Level 4. 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 ou
In Chrome 119 is a very powerful color feature from CSS Color Level 5. Relative color syntax creates a smooth path for color manipulation within CSS, offering ways for authors and designers to: Lighten Darken Saturate Desaturate Chroma boost Adjust opacity Invert Complement Convert Contrast Color palettes Monochromatic Analogous Triadic Tetradic Monochromatic with hue rotation Before relative colo
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
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
Transitions have numerous benefits for users, including helping to keep them in context and reduce the perception of latency. Developers want the ability to create seamless transitions between pages, helping to increase user engagement with their site. However, enabling state transitions was really hard as it required developers to manage states of two different elements. Even something like a sim
New section for custom properties in Elements > Styles The Elements panel now supports the @property CSS at-rule. It lets you define CSS custom properties explicitly and register them in a stylesheet without running any JavaScript. To inspect your registered custom properties, in Elements > Styles, hover over the property name and see its descriptors in a tooltip. In the tooltip, click the link to
次のページ
このページを最初にブックマークしてみませんか?
『Chrome for Developers』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く