Translation: Crazy geek

Original text: css-tricks.com/edge-goes-c…

In December 2018, Microsoft announced that Edge will have Chromium kernel, an open source project that powers Google Chrome. Many in the industry are sad about the loss of browser diversity, but I am very happy. An official release date has yet to be announced, though it is likely to come sometime this year. With its release, a range of HTML, JavaScript, and CSS features will be fully cross-browser supported.

A Windows preview is now available and a Mac version is coming soon.

Not long ago, I wrote an article titled “The Slow Death of Internet Explorer.” Some people have been lucky enough to get rid of that browser. But that’s not the only thing holding us back. Internet Explorer is the browser we all hate, and Edge is a great alternative. Unfortunately, Edge itself is backward. EdgeHTML is a branch of Trident, which is also the core of Internet Explorer. And Microsoft has underinvested in Edge, so like father, like son. Edge’s user feedback site is good, allowing developers to vote on what features they want to implement. Unfortunately, as Dave Rupert quipped, voting on the site is “like throwing a coin into a trevi fountain.” The most needed features haven’t been implemented for years.

Edge currently has many features that are not supported, but those features are available in other modern browsers and will be available once they switch. And it has a lot of problems that can’t be fixed or solved, so this version is a huge pain in the ass.

# Features worth waiting for

So what are these functions? Let’s do a quick and exciting summary here.

# Custom elements and Shadow DOM

Custom elements and shadow DOM allow developers to have custom, reusable, and wrapable components. A lot of people are asking for this feature. People have been voting for it since 2014, and now we’re finally getting it.

# Details and summary elements of HTML

The < Details > and < Summary > elements are part of HTML5 and have been supported in Chrome since 2011. Together, these elements generate a simple widget that shows and hides content. While it’s easy to implement something similar in JavaScript, the < Details > and

elements work even when JavaScript is disabled or the load fails.

# Javascript font loading API

It means a lot to some people. All modern browsers support the CSS font-display property. But you may still want to load fonts in JavaScript. Zach Leatherman explains why you might need to load fonts in JavaScript, even though font display is now widely supported. According to Zach, the API’s abandonment of polyfill is important because this JavaScript is

[…]. Usually inline in the critical path. Time spent by browsers parsing and executing JavaScript is actually wasted supporting native CSS font loading apis. “

In a 2018 article, Zach laments:

[…]. CSS font loading apis provided by browsers are fairly widely supported and have been around for a long time, but everyone feels bad about Microsoft Edge. “

It won’t happen again!

# JavaScript 的 flat 和 flatMap

Code snippets are the easiest way to explain that flat() is useful when one array is nested within another.

const things = ['thing1'.'thing2'['thing3'['thing4']]]
const flattenedThings = things.flat(2); // Returns ['thing1', 'thing2', 'thing3', 'thing4']
Copy the code

As the name implies, flatMap() is equivalent to using both the map() and flat() methods.

Node.js 11 also supports these methods. 🎉

# JavaScript TextEncoder and TextDecoder

TextEncoder and TextDecoder are part of the coding specification. They are very useful when working with streams.

# Rest and spread for JavaScript objects

Just like the REST and spread properties of arrays.

const obj1 = {
  a: 100.b: 2000
}

const obj2 = {
  c: 11000.d: 220
}

constcombinedObj = {... obj1, ... obj2}// {a: 100, b: 2000, c: 11000, d: 220}
Copy the code

# JavaScript module: dynamic import

Using function-like syntax, dynamic imports allow you to lazily load ES modules when the user needs them.

button.addEventListener("click".function() {
  import("./myModule.js").then(module= > module.default());
});
Copy the code

# background-blending-mode property for CSS

Background-blending-mode brings Photoshop-style image manipulation to the Web.

# CSS Reduced -motion media query

As animations become more common on the Web, it is important to be aware that animations may cause dizziness, nausea and headaches for some users. I can’t help but feel that indiscomfort should be the default setting on the site, since not all users will know it exists.

# CSS caret-color property

This is a fairly simple feature that can be safely and easily used as a progressive enhancement. It allows you to style the blinking cursor as you enter characters in a text box.

# 8-bit hexadecimal color representation

Consistency in the code base is important. This includes fixing one of the RGB, hexadecimal, or HSL color formats. If your preferred format is hexadecimal, you run into problems, because when you need to define transparency, switch to RGBA (). Hex can now contain alpha (transparency) values. For example, ffffff80 is equivalent to rgba(255,255,255,.5). But it’s not the most intuitive color format, and it doesn’t have any advantages over RGBA ().

# Proper size

This is the one feature I crave the most. Inherent size determines the size of an element based on its content, and introduces three new keywords in CSS: min-content, max-content, and fit-Content (). These keywords can be used in most places where length is usually used, For example, height, width, min-width, max-width, min-height, max-height, grid-template-rows, grid-template-columns and flex-basis.

# text-orientation properties of CSS

Used in conjunction with the writing-mode attribute, text-orientation specifies the orientation of the text, which is highly desirable.

Placeholder: placeholder-shown

Placeholder -shown is even available in Internet Explorer, but somehow never implemented in Edge. User experience studies have shown that placeholder text should generally be avoided. But if you use placeholder text, you can easily apply styles conditionally based on whether the user entered text in the input.

# place-content property of CSS

Place-content is shorthand for setting align-content and context-content.

# CSS will-change property

The will-change attribute can be used for performance optimization by notifying the browser element will change in advance. Pre-chromium Edge is actually pretty good at handling animations without needing this property, but now it will have full cross-browser support.

# all property of CSS

All is shorthand for setting all CSS properties at once.

For example, set button {all: unset; } equivalent to:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}
Copy the code

Unfortunately, the Revert keyword is still only implemented in Safari, which somewhat limits the benefits you can get from the All attribute.

# CSS shapes and clipping paths

The Web has traditionally been rectangle-centric. After all, it has a box model. While we no longer need floats for layout, we can use them creatively to wrap text shape-outside properties around images and shapes. This can be used in conjunction with the clip-path property, which displays the image within the shape.

Clippy is an online clip-path editor

# CSS: focus-within pseudo-class

If you want to apply a special style to one of the form’s input controls when they are in focus :focus-within is your best choice.

# CSS content keyword

This is almost essential if you are using CSS grids. Despite a whopping 3,920 votes from developers, Edge labeled it “unplanned.”

For Flexbox and Grid, only Direct Children becomes a Flex item or grid item, respectively. Anything more deeply nested cannot be placed with Flex or Grid-positioning. In the words of the specification, when display:contents is applied to a parent element, “the element must be treated as if it has been replaced by its contents in the element tree,” allowing them to be laid out in a grid or flexbox. The more comprehensive explanation in Chris’s article is worth reading.

Unfortunately, there are still certain bugs and other browser implementations that affect accessibility.

# Promise more for the future

We only looked at features that all modern browsers supported when Edge was migrated to Chromium. That said, the death of the traditional Edge brings a lot of other features closer. Edge is the only browser that has been slow to support the Web animation API and has absolutely no interest in the Houdini specification.

ishoudinireadyyet.com

# Impact on browser testing

Testing in BrowserStack (left) and various browsers on the iPhone (right)

Of course, another huge advantage for Web developers is that there is less testing. Edge is mostly ignored during cross-browser testing, so Edge users are more likely to have a broken experience. That was the main reason Microsoft decided to switch to Chromium. If your site has no bugs in Chromium browser, it will probably work fine in other browsers. In the words of the Edge team, Chromium will provide our customers with “better Web compatibility and less Web fragmentation for all Web development.” The variety of devices and browsers makes browser testing one of the most unpleasant tasks for a front-end developer. Edge is now available for macOS users, which is very useful for those of us who work on Macs. There will be slightly less need for BrowserStack.

What do we have to lose?

As far as I know, SVG color fonts will no longer work with Edge browsers. Other color font formats (COLR, SBIX, CBDT/CBLC) will continue to be valid.

What about other browsers?

Admittedly, Edge isn’t the last low-standard browser. Internet Explorer does not always support all the features mentioned in this article. If you have users in Russia, you need to support Yandex. If you have users in Africa, you need to support Opera Mini. If you have users in China, UC and QQ will be important test subjects. If you don’t need to consider these regional considerations, now is the perfect time to drop support for Internet Explorer and embrace modern Web features. Many PC users are completely unfamiliar with Internet Explorer. The hope is that the improved Edge will appeal to them. The official Microsoft blog post titled “The Dangers of Using Internet Explorer as the Default Browser” concludes: “Internet Explorer is a compatibility solution…… Most developers aren’t testing in Internet Explorer right now.” To other users, most of the Web looks increasingly fragmented. It’s time to let it die.

# Google is an egomaniac?

Web developers’ lives will get easier, but the response to Microsoft’s announcement has not been positive. Mozilla, for example, has an extremely pessimistic response, accusing Microsoft of “officially abandoning pingtai, an independent Internet sharing service.” The statement said Google had “near-total control over the infrastructure of our online lives” and “monopolized control over unique assets.” It concluded that “handing control of basic online infrastructure to one company is very bad.”

# Cooperation from competitors

Edge, not the new IE, can help the Web innovate. While it is backward in many areas, it does lead to CSS grids, CSS Exclusions, CSS Regions, and the new HTML import specification. In a radical change, Microsoft is now one of the world’s biggest proponents of open source projects. This means that all major browsers are now open source. Microsoft has stated that they intend to be a significant contributor to Chromium — in fact, they’ve submitted over 300 mergers. This will be of great help to Edge users, but will also benefit users of Chrome, Opera, Brave and other Chromium-based browsers.

Welcome to pay attention to the public number: front-end pioneer, get more front-end dry goods.