サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
中東情勢
developer.chrome.com
Summary This article is a deep dive into font fallbacks and the size-adjust, ascent-override, descent-override, and line-gap-override APIs. These APIs make it possible to use local fonts to create fallback font faces that closely or exactly match the dimensions of a web font. This reduces or eliminates layout shifts caused by font swapping. If you’d prefer to skip reading this article, these are s
Lighthouse is a website auditing tool that helps developers with opportunities and diagnostics to improve the user experience of their sites. Lighthouse 10 is available immediately on the command line through npm and in Chrome Canary. It will land in Chrome stable in Chrome 112 and in PageSpeed Insights in the coming weeks. Scoring changes The venerable Time To Interactive (TTI) metric is being re
New CSS color types and color spaces, CSS trigonometric functions, and the View Transitions API. Unless otherwise noted, the following changes 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 111 is beta as of 9 February 2023. You can do
Introducing historical web performance data via the CrUX History API Published on Tuesday, February 7, 2023 This article introduces the Chrome UX Report (CrUX) History API endpoint, which provides time series of web performance data. This data updates weekly, and allows you to see about 6 months worth of history, with 25 data points spaced out by a week. When used with the daily updates from the o
For over 25 years, sRGB (standard red green blue) has been the only color gamut for CSS gradients and colors, with color space offerings within it like rgb(), hsl() and hex. It is the most common color gamut capability amongst displays; a common denominator. We've grown very accustomed to specifying colors within this gamut. https://almanac.httparchive.org/en/2022/css#colors As displays become mor
Since its launch, the Core Web Vitals initiative has sought to measure the actual user experience of a website, rather than technical details behind how a website is created or loaded. The three Core Web Vitals metrics were created as user-centric metrics—an evolution over existing technical metrics such asDOMContentLoaded or load that measured timings that were often unrelated to how users percei
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
Cookie Expires and Max-Age attributes now have upper limit As of Chrome release M104 (August 2022) cookies can no longer set an expiration date more than 400 days in the future. Published on Thursday, January 12, 2023 As of Chrome release M104 (August 2022) cookies can no longer set an expiration date more than 400 days in the future. This change does not impact session cookies—cookies that do not
Iframe credentialless is enabled by default from Chrome version 110. It solves the most common complaint developers working with Cross-Origin-Embedder-Policy (COEP) have: embedding third-party iframes that do not set COEP. It was previously available as an origin trial from version 106 to 108, and known as anonymous iframe. # Why we need COEPSome web APIs increase the risk of side-channel attacks
In our blog post Deprecating and removing Web SQL, we promised a replacement for Web SQL based on SQLite. The SQLite Wasm library with the Origin Private File System persistence backend is our fulfillment of this promise. # About SQLiteSQLite is a popular, open-source, lightweight, embedded relational database management system. Many developers use it to store data in a structured, easy-to-use man
Here's what you need to know: It is easier to create adaptive UIs with new viewport size units. Color vector fonts now include support for variable fonts. The methods in the interface FileSystemSyncAccessHandle, part of the File System Access API, are now synchronous. And there’s plenty more I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 108. New viewport size units Th
In November, with the release of Chrome 108, Chrome will make some changes to how the Layout Viewport behaves when the on-screen keyboard (OSK) gets shown. With this change, Chrome on Android will no longer resize the Layout Viewport, and instead resize only the Visual Viewport. This will bring Chrome on Android’s behavior up to par with that of Chrome on iOS and Safari on iOS. Here's some backgro
Hints for inactive CSS properties DevTools now identifies CSS styles that are valid but have no visible effect. In the Styles pane, DevTools fades out the inactive properties. Hover over the icon next to it to understand why the rule has no visible effect. Chromium issue: 1178508 Auto-detect XPath and text selectors in the Recorder panel The Recorder panel now supports XPath and text selectors. St
Customize keyboard shortcuts in DevTools You can now customize keyboard shortcuts for your favorite commands in DevTools. Go to Settings > Shortcuts, hover over a command and click the Edit button (pen icon) to customize the keyboard shortcut. You can create chords (a.k.a multi-key press shortcuts) as well. Chromium issues: 1335274, 174309 Toggle light and dark themes with keyboard shortcut Config
Last year, we announced a timeline for the phasing out of Manifest V2 extensions as we shift our focus to Manifest V3. This change will give Chrome users increased safety and peace of mind while browsing and installing extensions by providing more transparency and control over permissions, adding stricter protocols for accessing resources outside the extension’s context, and ensuring that extensio
Here's what you need to know: There are new Intl APIs to give you more control when formatting numbers. There’s an origin trial for the Pop-up API to make it easy to surface critical content to the user. We’re adding a handful of CSS features to improve interop. And there's plenty more. I'm Pete LePage, and I’m Adriana Jara. Let's dive in and see what's new for developers in Chrome 106. New Intl A
The goal of the Open UI initiative is to make it easier for developers to make great user experiences. To do this, we are trying to tackle the more problematic patterns that developers face. We can do this by providing better platform built-in APIs and components. One such problem area is pop-ups, described in Open UI as "Popovers". Popovers have had a rather polarizing reputation for a long time.
The Web SQL Database API, which allows you to store data in a structured manner on the user's computer (internally based on the SQLite database engine), was introduced in April 2009 and abandoned in November 2010. While it was implemented in WebKit (which powers Safari) and remained active in the Blink engine (which powers Chrome), Gecko (which powers Firefox) never implemented this feature and We
Step-by-step replay in the Recorder You can now set a breakpoint and replay a user flow step by step in the Recorder panel. To set a breakpoint, click on the blue dot next to a step. Replay your user flow, the replay will pause before executing the step. From here, you can continue the replay, execute a step, or cancel the replay. With this feature, you can fully visualize and debug your user flow
The top layer sits above its related document in the browser viewport, and each document has one associated top layer. This means that elements promoted to the top layer needn't worry about z-index or DOM hierarchy. They also get a neat ::backdrop pseudo-element to play with. The Fullscreen API spec goes into more details as Fullscreen was a great example of the top layer in use before dialog supp
Following on from the previous announcement, support of HTTP/2 Server Push will be disabled by default in Chrome 106 and other Chromium-based browsers in their next releases. Why is this being removed? HTTP/2 Server Push allowed websites to proactively send resources needed by the page instead of waiting for them to be requested. However, it was problematic as Jake Archibald wrote about previously
Container queries and :has() are a match made in responsive heaven. Luckily, both of these features are landing together in Chromium 105. This is a huge release with two highly-requested features for responsive interfaces! Container Queries: a quick summary Container queries enable developers to query a parent selector for its size and styling information, making it possible for a child element to
Since time began (In CSS terms), we've worked with a cascade in various senses. Our styles compose a "Cascading Style Sheet". And our selectors cascade too. They can go sideways. In most cases they go downwards. But never upwards. For years, we've fantasized about a "Parent selector". And now it's finally coming! In the shape of a :has() pseudo selector. The :has() CSS pseudo-class represents an e
CSS nesting is a convenience syntax addition that allows CSS to be added inside of a ruleset. If you've used SCSS, Less or Stylus, then you've most certainly seen a few flavors of this: .nesting { color: hotpink; > .is { color: rebeccapurple; > .awesome { color: deeppink; } } } Which after being compiled to regular CSS by the preprocessor, turns into regular CSS like this: .nesting { color: hotpin
What is Early Hints? Websites have become more sophisticated over time. As such, it's not unusual that a server needs to perform non-trivial work (for example, access to databases, or CDNs accessing the origin server) to produce the HTML for the requested page. Unfortunately, this "server think-time" results in extra latency before the browser can start rendering the page. Indeed, the connection e
Secure Payment Confirmation (SPC) is a proposed web standard that allows customers to authenticate with a credit card issuer, bank, or other payment service provider using a platform authenticator: Unlock feature including Touch ID on a macOS device Windows Hello on a Windows device With SPC, merchants can allow customers to quickly and seamlessly authenticate their purchases, while issuing banks
Preview feature: New Performance insights panel Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance. Open the panel and start a new recording based on your use case. For example, let’s measure the page load of this demo page. Once the recording is complete, you get the performance insights on the Insights pane. Click on each insight item
次のページ
このページを最初にブックマークしてみませんか?
『Chrome for Developers』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く