directory

  1. Added support for CSS properties “overflow: clip” and “overflow-clip-margin”
  2. RegExp match indices
  3. Delete setTimeout (… , 0) limit
  4. Support for specifying width/height on elements
  5. URL protocol setter: New limits on file urls
  6. Use: focus-Visible in the default UA stylesheet
  7. CSS Custom counter styles
  8. Class statically initializes the block
  9. The ability to test whether private fields exist in an object
  10. JSON Modules
  11. WebAssembly SIMD
  12. Add dayPeriod option for Intl.DateTimeFormat
  13. Relative indexing methods for arrays, strings, and TypedArrays
  14. size-adjust descriptor for @font-face

preface

Google Chrome is currently stable version 90, beta version 91, and Canary /dev version 92. Let’s talk about the new JS and CSS features in these releases. Download the Google beta to experience more of the latest features.

1. Add support for CSS properties overflow: clip and overflow-clip-margin

describe

Two CSS functions have been added. The ‘clip’ value causes the contents of the box to be clipped to the edge of the box’s overflow clip. In addition, no scrolling interface is provided, and content cannot be scrolled by the user or programmatically. By using the overflow-clip-margin attribute, you can specify how far an element can go beyond the boundary before it is clipped.

motivation

Overflow: Clip allows developers to disable any type of scrolling on this box, including programmatic scrolling. In addition, the box is not treated as a scroll container, does not launch a new formatting context, and allows clipping to be applied to a single axis via overflow-x and overflow-Y. Overflow clip boundaries allow developers to extend clip boundaries. This is especially useful in cases where you should see ink spill. Part of the CSS working draft and Firefox to be released: groups.google.com/g/mozilla.dev.platform/c/7oQm8PC0aU0.

2. RegExp match indices

describe

Add a new.indices property to the result array object returned by RegExp. Prototype. exec and String.prototype.match. This property is an index array that contains a pair of start and end indexes for each captured substring. Because of the high cost of generating this array, it only exists when the/D flag is passed. Indices property.

motivation

The result Array of regexp.prototype. exec contains information about the substrings that the regular expression matches. Although it already contains an input string, an index for pattern matching, and a group object that contains substrings of any named capture group, this information may not be sufficient for advanced cases such as reporting an error highlighting problematic substrings. This feature Bridges the gap by providing a.indices property, which is an array containing a pair of start and end indexes for each captured substring.

3. Delete setTimeout (… , 0) limit

describe

SetTimeout (… , 0) is limited to 1 ms timeout, rather than causing a callback as soon as possible. The device has since been removed. To get the old behavior, use setTimeout (… 1).

motivation

To solve the Tacking bug

4. Support for specifying width/height on elements

describe

This feature allows you to specify width and height on elements used in. This allows images to calculate aspect ratios from these properties, for example:

<p style = "max-width: 100%; clear: both; min-height: 1em; Height: auto;" > </ picture>Copy the code

In this example, the width of the image will be adjusted to the size of its container, and the height will follow the aspect ratio (to avoid content shifting) even before the image is loaded. Motivation matches non-image and similar behavior.

5. URL protocol setter: New limits on file urls

describe

Bring the behavior up to standard in cases where the URL protocol is changed to or from a file. Previously, trying to change a URL protocol or port with credentials to “file” resulted in invalid urls. Similarly, trying to change a URL without a host from “file” to “HTTP” will result in an invalid URL. Invalid changes are now ignored in order to be consistent with other browsers. This affects the URL API, location, and “protocol” attributes on and elements.

motivation

Improved standards compliance and interoperability with other browsers.

6. Use: focus-Visible in the default UA stylesheet

describe

Change the Chromium default UA stylesheet to use: focus-Visible instead of: Focus pseudo class to draw focus indicators (contours). This prevents elements from showing a focus indicator if they do not match: focus-visible (because they are focused and match: focus).

motivation

Focus-visible has been provided in Chromium 86, but Chromium has not yet updated the default UA stylesheet, as shown in the focus-Visible spec: “User agents should also use: focus-Visible to specify the default focus style, using: Authors of Focus-Visible also don’t need to disable the default: Focus style.” So when you click on an element like “<div tabIndex =” 0 “> Focus on me </ div>”, you get a focus indicator (because it matches: focus, and in this case the UA stylesheet is looking for contouring), but that element matches: Focus-visible does not match (as expected). The problem is that focus-visible isn’t enough to style the default focus indicator that Chromium shows, and when it doesn’t match: Focus-visible, people need a workaround to remove it from: focus:

 :focus:not(:focus-visible) {
    outline: 0;
  }
Copy the code

This solution is no longer needed once Chromium changed the UA stylesheet to use: focus-Visible instead of: focus. The changes he made to the UA stylesheet will result in a change in the user’s behavior, so that when the user clicks on such elements, they no longer get the focus indicator, but that’s exactly the main purpose of focus-visible. Many sites are disabled because of this problem: all in one place, so not showing it by default seems to be the way to go. If websites want to always show a focus indicator, they can still use the Focus pseudo-class.

7. CSS custom counter styles

describe

The CSs@counter-style rule allows Web authors to specify and use custom counter styles in list tags and CSS counters. This helps internationalize the network.

motivation

This is a much needed CSS feature, especially for developers with internationalization requirements.

8. Class static initialization block

describe

The classic static block proposal adds the ability for JavaScript classes to have one or more statically initialized blocks. These blocks are initialized once each time the class definition is evaluated.

class C {
  static s_field;
  static {
    this.s_field = doSomeInitialization();
  }
}
Copy the code

This is a Stage 3 TC39 proposal.

9. Test whether private fields exist in the object

describe

This JavaScript feature adds the ability to test for the presence of private fields in an object: “#foo in obj”. Proposal: github.com/tc39/proposal-private-fields-in-in

This is a Stage 3 TC39 proposal.

10. JSON Modules

describe

The SON module allows you to statically import JSON instead of using it dynamically via fetch (). JSON modules, such as JavaSCript modules, are obtained using the “CORS” pattern and strict MIME type checking. They also share the same module import syntax, for example, importing data from “./ resource-. json “.

motivation

Currently, developers do not have a way to statically import JSON content as part of module diagram instantiation. Currently, developers are forced to use JSON content dynamically via fetch (), for example.

11. WebAssembly SIMD

describe

WebAssembly SIMD exposes hardware SIMD instructions to WebAssembly applications in a platform-independent manner. The SIMD proposal introduces a new 128-bit value type that can be used to represent different types of packaged data, as well as some vector operations that operate on packaged data. SIMD improves performance by leveraging data-level parallelism and is also useful when compiling native code into WebAssembly.

12. Add dayPeriod option for Intl.DateTimeFormat

describe

Add the dayPeriod option to the intl.datetimeFormat () method so that the caller can set the time format, for example: “7 am”, “11 am”, “12 noon”, “1 PM”, “6 PM”, “10 PM” (or “7 am”, “11 am”, “12 noon”, “1 PM”, “6 PM”, “10 PM”).

motivation

This enhances intl. DateTimeFormat () by calling ICU and ICU4J to match what is already available in C ++ and Java. Without this capability, the developer would need to format a quarter of the format in the server, or send a set of day time mode and hour-to-day time mapping from the server to the client to perform such tasks.

13. Relative indexing methods for arrays, strings, and TypedArrays

describe

Add a new method called at () to array.prototype, String.prototype, and TypedArray prototypes that allows relative indexing using negative indexes. Let arr = [1, 2, 3, 4]; arr.at(-1); // Returns 4

motivation

Relative indexing by negative indexes is a feature that is popular in other languages (such as Python) and has been requested by JS programmers.

14. size-adjust descriptor for @font-face

describe

The resizing descriptor in @font-face allows scaling the font size of a particular font without affecting CSS font size and derived metrics (such as EM). The CSS font size can be thought of as a scaling factor of the frame in which the font is drawn. The font sizes within this box vary from font to font, and can be resized to coordinate them between different fonts. That’s why it can also help reduce cumulative layout offset by using this descriptor to match backup fonts and primary Web fonts. motivation

Harmonize perceived sizes of fonts that occupy different sizes in the EM box. Reduce CLS by matching the size and average width of the layout text between the primary Web font and the system backup font.

conclusion

If there is something wrong or bad in the article, please correct it, thank you! Code word is not easy, click a like plus a concern! Want to Get more front-end knowledge, do not miss my public account – do not love to eat cat fish ER. The latest original articles are here.

digression

The author in “Shenzhen shrimpy”, a good reputation of southeast Asian e-commerce company, 2021 a large number of people, a lot of opportunities! Come and join us! Now have an idea, or later have an idea of the students, can add my wechat [stone– 999]! Push you to join our family!