Android 版 Chrome でのビューポートのサイズ変更動作の変更に備える | Blog | Chrome for Developers
11 月の Chrome 108 のリリースで、オンスクリーン キーボード（OSK）が表示されたときのレイアウト ビューポートの動作が変更されます。この変更により、Android 版 Chrome ではレイアウト ビューポートのサイズ変更がなくなり、代わりにビジュアル ビューポートのみのサイズ変更が行われます。これにより、Android 版 Chrome の動作が iOS 版 Chrome や iOS 版 Safari と同等になります。 以下では、今回の変更の背景、Chrome がこの変更を行う理由、準備に役立つ対応方法について説明します。 レイアウト ビューポートとビジュアル ビューポート ウェブサイトにアクセスしたときに、ページのコンテンツが読み込まれた後もページ全体が表示されない。代わりに、ブラウザはビューポートを提供します。これにより、ページの一部を表示できます。このビューポート
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS Text Module Level 4 の 4 つの新しい国際 CSS 機能が Chrome に導入されます。この投稿では、すでにリリースされている機能と、まもなくリリースされる機能について説明します。 Chrome 119 以降: word-break: auto-phrase を使用して日本語のフレーズを改行。 Chrome 120 のフラグ: text-autospace プロパティによるスクリプト間のスペース。 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語（CJK）の句読点のケーニング。 言語間で最小フォントサイズを統一する。 日本語のフレーズでの改行: word-break: auto-phrase この機能は日本語の読みやすさを向上させ、Chrome 119 以降で利用できます。 中国語や日本語などの東アジアの言語では、単語を
Four new CSS features for smooth entry and exit animations | Blog | Chrome for Developers
Motion is a core part of any digital experience, guiding your user from one interaction to the next. But there are a few gaps in smooth animations on the web platform. These include the ability to easily animate entry and exit animations, and smoothly animate to and from the top layer for dismissible elements such as dialogs and popovers. To fill these gaps, Chrome 116 and 117 includes four new we
Optimizing third-party script loading in Next.js | Blog | Chrome for Developers
Around 45% of requests from websites served on mobile and desktop are third-party requests of which 33% are scripts. The size, latency, and loading of third-party scripts can significantly affect a site's performance. The Next.js Script component comes with baked-in best practices and defaults to help developers introduce third-party scripts in their applications while addressing potential perform
Links to cross-origin destinations are unsafe | Lighthouse | Chrome for Developers
When you link to a page on another site using the target="_blank" attribute, you can expose your site to performance and security issues: The other page may run on the same process as your page. If the other page is running a lot of JavaScript, your page's performance may suffer. The other page can access your window object with the window.opener property. This may allow the other page to redirect
Improving user privacy and developer experience with User-Agent Client Hints | Privacy & Security | Chrome for Developers
Client Hints enable developers to actively request information about the user's device or conditions, rather than needing to parse it out of the User-Agent (UA) string. Providing this alternative route is the first step to eventually reducing User-Agent string granularity. Learn how to update your existing functionality that relies on parsing the User-Agent string to make use of User-Agent Client
History API - Scroll restoration | Blog | Chrome for Developers
Using the History API to manage your URLs is awesome and, as it happens, a crucial feature of good web apps. One of its downsides, however, is that scroll positions are stored and then, more importantly, restored whenever you traverse the history. This often means unsightly jumps as the scroll position changes automatically, and especially so if your app does transitions, or changes the contents o
Paint Holding - reducing the flash of white on same-origin navigations | Blog | Chrome for Developers
For a while now, Chrome has eagerly cleared the screen when transitioning to a new page to give users the reassurance that the page is loading. This "flash of white" is this brief moment during which the browser shows a white paint while loading a page. This can be distracting in-between navigations, especially when the page is reasonably fast in reaching a more interesting state. But for pages th
An event for CSS position:sticky | CSS and UI | Chrome for Developers
TL;DR Here's a secret: You may not need scroll events in your next app. Using an IntersectionObserver, I show how you can fire a custom event when position:sticky elements become fixed or when they stop sticking. All without the use of scroll listeners. There's even an awesome demo to prove it: View demo | Source Introducing the sticky-change event One of the practical limitations of using CSS sti
Introducing visualViewport | Blog | Chrome for Developers
What if I told you, there's more than one viewport. BRRRRAAAAAAAMMMMMMMMMM And the viewport you're using right now, is actually a viewport within a viewport. BRRRRAAAAAAAMMMMMMMMMM And sometimes, the data the DOM gives you, refers to one of those viewport and not the other. BRRRRAAAAM… wait what? It's true, take a look: Layout viewport vs visual viewport The video above shows a web page being scro
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされています。これは、ヘッドレス環境で Chrome ブラウザを実行する方法です。つまり、Chrome なしで Chrome を実行することになります。Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォーム機能をすべてコマンドラインにもたらします。 なぜこれが有用なのでしょうか？ ヘッドレス ブラウザは、可視 UI シェルが必要ない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、その PDF を作成したり、ブラウザが URL をレンダリングする方法を確認したりできます。 ヘッドレスの開始（CLI） ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くことです。Chrome 59 以降がインス
Building performant expand & collapse animations | Blog | Chrome for Developers
TL;DR Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them. Previously we’ve posted updates on how to create performant parallax effects and infinite scrollers. In this post, we’re going to look over what’s involved if you want performant clip animations. If you want to see a demo, check out the Sample
Performance observer - Efficient access to performance data | Blog | Chrome for Developers
Progressive Web Apps enable developers to build a new class of applications that deliver reliable, high performance user experiences. But to be sure a web app is achieving its desired performance goals, developers need access to high resolution performance measurement data. The W3C Performance Timeline specification defines such an interface for browsers to provide programmatic access to low level
Intervening against document.write() | Web Updates - Google Developers
(index):34 A Parser-blocking, cross-origin script, https://paul.kinlan.me/ad-inject.js, is invoked via document.write(). This may be blocked by the browser if the device has poor network connectivity. Composability is one of the great powers of the web, allowing us to easily integrate with services built by third parties to build great new products! One of the downsides of composability is that it
Pointing the way forward | Blog | Chrome for Developers
Pointing at things on the web used to be simple. You had a mouse, you moved it around, sometimes you pushed buttons, and that was it. Everything that wasn’t a mouse was emulated as one, and developers knew exactly what to count on. Simple doesn’t necessarily mean good, though. Over time, it became increasingly important that not everything was (or pretended to be) a mouse: you could have pressure-
CSS コンテインメント（Chrome 52） | Blog | Chrome for Developers
contain: none | strict | content | [ size || layout || style || paint ] この機能は Chrome 52 以降と Opera 40 以降で利用できます（Firefox でも公開サポートされています）。ぜひお試しいただき、ご感想をお聞かせください。 contain プロパティ ウェブアプリや複雑なサイトを作成する際、パフォーマンスの面で重要な課題は、スタイル、レイアウト、ペイントの効果を制限することです。多くの場合、DOM の全体が計算処理の「対象範囲内」と見なされます。つまり、ウェブアプリで自己完結型の「ビュー」を試みると、DOM の一部を変更すると他の部分に影響する可能性があるため、対象範囲内と対象範囲外をブラウザに指示する方法がありません。 たとえば、DOM の一部が次のようになっているとします。 <section
Experiment Time - Scroll Anchoring | Blog | Chrome for Developers
Have you ever visited a web page, started reading some of the content and then the page sort of pops due to ad’s or images loading, making you lose your place on the page? Well it might be worth checking out the Scroll Anchoring flag in Chrome 51. Scroll Anchoring keeps track of where you are on the page and prevents anything that causes a reflow from disrupting your position on the page. To try t
CSS containment in Chrome 52 | Blog | Chrome for Developers
contain: none | strict | content | [ size || layout || style || paint ] It’s in Chrome 52+ and Opera 40+ (and it has public support from Firefox), so give it a whirl and let us know how you go! The contain property When making a web app, or even a complex site, a key performance challenge is limiting the effects of styles, layout and paint. Oftentimes the entirety of the DOM is considered “in scop
IntersectionObserver’s coming into view - Chrome Developers
IntersectionObserver’s coming into viewPublished on Wednesday, April 20, 2016 • Updated on Tuesday, October 3, 2017 Let’s say you want to track when an element in your DOM enters the visible viewport. You might want to do this so you can lazy-load images just in time or because you need to know if the user is actually looking at a certain ad banner. You can do that by hooking up the scroll event o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Workbox Broadcast Cache Update | Workbox | Google Developers