サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
developer.chrome.com
Today we’re happy to announce Chrome for Testing, a new Chrome flavor that specifically targets web app testing and automation use cases. This article explains why the Chrome team felt this was needed, and walks through concrete examples where Chrome for Testing might benefit you as a developer. Background Browser testing is a vital component of creating a high-quality web experience, regardless o
Introduction (This article is also available in form of a video.) In 2021, Adobe, together with Chrome engineering, brought a version of Photoshop to the web. The software makes innovative use of WebAssembly with features like SIMD, high performance storage in the origin private file system, the P3 color space for canvas, and Web Components with Lit. In this article, we want to focus on how Adobe
Multiple keywords for the CSS display property, WGSLLanguageFeatures for WebGPU, HTTPS upgrades, and 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 115 is beta as of May 31, 2023. You can
The SVG spec was recently updated to remove support for data: URLs in SVG <use> element. This improves security of the Web platform as well as compatibility between browsers as Webkit does not support data: URLs in SVG <use> element. Reason for the removal SVG <use> element can fetch external SVG images and clone it into the current document. This is a powerful capability, and therefore it is rest
A year ago, in May 2022, we added the side panel to Chrome. This is a new companion surface that allows users to use tools alongside the content they are browsing. Today, we're excited to announce that your extension can start showing content in the side panel, beginning in Chrome 114. A dictionary extension that shows the definition of a selected word. See the code in the chrome-extensions-sample
Popovers are everywhere on the web. You can see them in menus, toggletips, and dialogs, which could manifest as account settings, disclosure widgets, and product card previews. Despite how prevalent these components are, building them in browsers is still surprisingly cumbersome. You need to add scripting to manage focus, open and close states, accessible hooks into the components, keyboard bindin
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
In Chrome Canary we're testing new features in DevTools that aim to help developers understand how form Autofill works, and why it sometimes fails: How does browser Autofill map stored values to form fields? What criteria are used by Autofill to fill a form field? Which fields didn't get filled by Autofill? Why does a form field not get filled by Autofill? This article outlines the new features in
Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Examples of this are effects such as parallax background images or reading indicators which move as you scroll. A reading indicator atop a document
Click into the example and tab around to see how the tab order is disconnected from the layout order by use of grid placement properties. Proposed solution The CSS Working Group is proposing a solution for this problem, and would love feedback from developers and the accessibility community about this approach. Following randomized layouts with reading-order: auto In situations that create a rando
Override network response headers You can now override response headers in the Network panel. Previously, you needed access to the web server to experiment with HTTP response headers. With response header overrides, you can locally prototype fixes for various headers, including but not limited to: Cross-Origin Resource Sharing (CORS) Headers Permissions-Policy Headers Cross-Origin Isolation Header
New CSS media features, the linear() easing function, and WebGPU. Unless otherwise noted, changes described below 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 113 is beta as of 6 April, 2023. You can download the latest on Google.com
The Chrome team is thrilled to announce that WebGPU is now available by default in Chrome 113, which is currently in the Beta channel. WebGPU is a new web graphics API that offers significant benefits such as greatly reduced JavaScript workload for the same graphics and more than three times improvements in machine learning model inferences. This is possible due to more flexible GPU programming an
Try a demo Without text-wrap: balance; designers, content editors and publishers have few tools to change the way lines are balanced.. The best options available being to use <wbr> or ­ to help guide text layouts into smarter decisions about where to break lines and words. As a developer, you don't know the final size, font size, or even language of a headline or paragraph. All the variables n
Required background The post Deprecating and removing Web SQL announced the deprecation of the Web SQL database technology. While the technology itself may be deprecated, the use cases addressed by the technology very much are not, so the follow-up post SQLite Wasm in the browser backed by the Origin Private File System, outlines a replacement set of technologies based on the SQLite database, comp
FLEDGE is a Privacy Sandbox proposal to serve remarketing and custom audience use cases, designed with the intent of preventing third-parties from tracking user browsing behavior across sites. The browser will provide protection against microtargeting, by only rendering an ad if the same rendering URL is being shown to a sufficiently large number of people. We will require a crowd of 50 users per
Recorder updates Replay extensions support The Recorder introduces support for custom replay options that you can embed into DevTools with an extension. Try out the example extension. Select the new custom replay option to open the custom replay UI. To customize the Recorder to your needs and integrate it with your tools, consider developing your own extension: explore the chrome.devtools.recorder
The View Transition API lets you update the DOM in a single step, while generating an animated transition between the two states. Transitions created with the View Transition API. Try the demo site–Requires Chrome 111+. These kinds of transitions were a frequently-requested feature from developers, including me, and I think we've managed to land it in a way that balances good defaults with extensi
CSS Nesting Stay organized with collections Save and categorize content based on your preferences. One of our favorite CSS preprocessor features is now built into the language: nesting style rules. Before nesting, every selector needed to be explicitly declared, separately from one another. This leads to repetition, stylesheet bulk and a scattered authoring experience. Try this in browser. Nesting
The :nth-child() and :nth-last-child() pseudo-class selectors With the :nth-child() pseudo-class selector it is possible to select Elements in the DOM by their index. Using the An+B microsyntax you get fine control over which elements you want to select. :nth-child(2): Select the 2nd child. :nth-child(2n): Select all even children (2nd, 4th, 6th, 8th, and so on). :nth-child(2n+1): Select all odd c
Here's what you need to know: Create polished transitions in your single page app with the View Transitions API. Bring colors to the next level with support for CSS Color Level 4. Discover new tools in the style panel to make the most of new color functionality. And there’s plenty more. I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 111. View Transitions API. Creating
Use cases Custom video player A website can provide a Picture-in-Picture video experience with the existing Picture-in-Picture API for <video>, however it is very limited. The existing Picture-in-Picture window accepts few inputs, and has limited ability for styling them. With a full Document in Picture-in-Picture, the website can provide custom controls and inputs (for example, captions, playlist
How do you currently tether one element to another? You might try tracking their positions, or use some form of wrapper element. <!-- index.html --> <div class="container"> <a href="/link" class="anchor">I’m the anchor</a> <div class="anchored">I’m the anchored thing</div> </div> /* styles.css */ .container { position: relative; } .anchored { position: absolute; } These solutions often aren't idea
This means that we have even more logical control of styles in CSS, and enables better separation of an application’s logic and data layer from its styles. The CSS Containment Module Level 3 spec, which covers size and style queries, allows for any styles to be queried from a parent, including property and value pairs such as font-weight: 800. However, in the rollout of this feature, style queries
Chrome's Headless mode just got a whole lot better! This article presents an overview of recent engineering efforts to make Headless more useful for developers by bringing Headless closer to Chrome's regular "headful" mode. Background Back in 2017, Chrome 59 introduced the so-called Headless mode, which lets you run the browser in an unattended environment without any visible UI. Essentially, runn
Debugging HD color with the Styles pane New CSS color types and spaces are coming to the web! It is equally exciting that DevTools introduced new tools to help developers create, convert and debug High Definition color. The Styles pane now supports 12 new color spaces and 7 new gamuts as outlined in the CSS Color Level 4 specification. See High Definition CSS Color Guide for a comprehensive unders
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
次のページ
このページを最初にブックマークしてみませんか?
『Chrome for Developers』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く