Edge Goes Chromium: What Does it Mean for Front-End Developers?

In December 2018, Microsoft announced that Edge browser will adopt Chromium, the open source project kernel of Google Chrome. Many people in the industry feel sorry for the loss of browser diversity, but I am ecstatic. While the official has not announced the exact release date, it is expected to be launched sometime this year. After Edge adopts Chromium, a large number of HTML, JavaScript and CSS features will achieve full browser compatibility.

The Edge preview version is now available for Windows users to download, and the Mac version will be released soon.

? For all web developers and enthusiasts! ?

The first preview version of the next generation #MicrosoftEdge is ready for you to experience – try now! [Link] [Twitter link]

Not long ago, I wrote an article titled "The Slow Death of Internet Explorer". Some of us lucky people have given up on IE browser. But IE is not the only factor that is holding us back. IE is the browser we all hate, and Edge should be its improved alternative. Unfortunately, Edge itself is also behind. EdgeHTML is a branch of Trident, which is the rendering engine of Internet Explorer. Microsoft's investment in Edge is seriously insufficient, and as a result, Edge also inherits the shortcomings of IE. Edge's Voice website is a good idea to allow developers to vote on the features they want to implement. However, as Dave Rupert said, voting on this site is “like throwing coins into a wishing well.” The most anticipated features have not been implemented for many years.

Edge before Chromium did not support many existing features in modern browsers, and these features could not be bypassed by polyfill or other methods, so Edge's move to Chromium was a major event.

New features worth looking forward to

So, what are these functions? Let's list it and start looking forward to all these new features.

Custom elements and Shadow DOM

Custom elements are used in conjunction with Shadow DOM, allowing developers to define custom, reusable, and encapsulated components. Many people desire this feature. People have been voting to make it happen since 2014, and we finally got it.

HTML details and summary elements

<details></details> and<summary></summary> Elements are part of HTML5 and have been supported by Chrome since 2011. These two elements are used in combination to generate a simple part to show and hide content. While it's easy to implement similar functionality using JavaScript, even if JavaScript is disabled or fails to load,<details></details> and<summary></summary> The elements work properly, too.

JavaScript Font Loading API

This means a lot to some. All modern browsers now support the CSS font-display property. However, you may still want to load fonts using JavaScript. Font loading fan Zach Leatherman explains why even though we have extensive support for font-display right now, you may still want to load fonts using JavaScript. It is very important to abandon the polyfill of this API because according to Zach, this JavaScript:

[…] Usually inlined in a critical path. On browsers that support native CSS font loading APIs, the time spent parsing and executing polyfill JavaScript is basically a waste of time. ”

In a 2018 article, Zach wrote regretfully:

[…] The browser-provided CSS font loading API has fairly extensive support and has been around for a long time, but it is puzzling that it is still missing in all available versions of Microsoft Edge. ”

No longer missing now!

JavaScript flat and flatMap

Easiest to explain in code snippets, flat() is very useful when you nest arrays in another array.

 const things = ['thing1', 'thing2', ['thing3', ['thing4']]]
const flattenedThings = things.flat(2); // Return ['thing1', 'thing2', 'thing3', 'thing4']

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

These methods are also supported by Node 11. ?

JavaScript TextEncoder and TextDecoder

TextEncoder and TextDecoder are part of the encoding specification. They look useful when dealing with streams.

JavaScript object remaining and object expansion

This is like the remaining and expanded properties of an array.

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

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

const combinedObj = {...obj1, ...obj2} 
// {a: 100, b: 2000, c: 11000, d: 220}

JavaScript module: Dynamic import

Using function-like syntax, dynamic import allows you to delay loading ES modules when users need it.

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

CSS background-blend-mode property

background-blend-mode brings Photoshop-style image processing to the web.

CSS prefers-reduced-motion media query

I can't help but feel that not letting users feel uncomfortable should be the default setting of the website, especially some users may not know the existence of this setting. As web animation becomes more common, it is important to recognize that animation can cause dizziness, nausea and headaches in some users.

CSS caret-color property

Granted, this is a rather trivial feature that can be used safely and easily as a progressive enhancement. It allows you to style the flashing cursor in the text input field.

8-bit hexadecimal color notation

It's good to maintain consistency in the code base. This includes sticking to any of RGB, hexadecimal, or HSL color formats. If your preferred format is hexadecimal, you will have problems because you need to switch to rgba() whenever you need to define transparency. Hexadecimal can now contain alpha (transparency) values. For example, #ffffff80 is equivalent to rgba(255, 255, 255, .5) . It can be said that it is not the most intuitive color format and has no practical benefits compared to rgba() .

Intrinsic size

I haven't seen as much hype or excitement about eigenscale as some other new CSS features, but it's the feature I personally crave the most. The eigens determine the size based on the content of the element, and three new keywords are introduced to CSS: min-content , max-content and fit-content() . These keywords can be used where you usually use lengths, such as height , width , min-width , max-width , min-height , max-height , grid-template-rows , grid-template-columns and flex-basis .

CSS text-orientation property

Used in conjunction with the writing-mode property, text-orientation specifies the direction of the text, as you might expect.

CSS:placeholder-shown pseudo-element

placeholder-shown is even available in Internet Explorer, but somehow never went into Edge…until now. User experience research shows that placeholder text should generally be avoided. However, if you use placeholder text, this is a convenient way to conditionally apply styles based on whether the user enters any text in the input.

CSS place-content property

place-content is the abbreviation for setting align-content and justify-content .

CSS will-change attribute

will-change attribute can be used as performance optimization to inform the browser element in advance that changes will occur. Edge before Chromium actually excels at handling animations efficiently without this property, but it will now have full browser compatibility.

CSS all properties

[CSS-Tricks link] all is the abbreviation for setting all CSS properties at the same time.

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

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

Unfortunately, however, the revert keyword has not been implemented anywhere other than Safari, which somewhat limits the mileage we can get from all attributes.

CSS shape and clip path

Traditionally, the web has always been centered on rectangles. After all, it has a box model. While we no longer need floats to layout, we can use them creatively to wrap text around images and shapes using shape-outside property. This can be used in conjunction with clip-path property, which displays the image within the shape.

CSS: focus-within pseudo-class

If you want to apply special styles to the entire form when any input is in focus, then :focus-within is your selector.

CSS contents keywords

This is almost essential if you use a CSS grid. Despite the developers' votes, this has been marked as "unplanned" by Edge.

For flexbox and grid, only direct child elements become flex projects or grid projects respectively. Any deeper nested elements cannot be placed using flex or grid positioning. In specification, when using display: contents to a parent element, "the element must be treated as having been replaced in the element tree by its content", allowing it to be laid out using a grid or flexbox. Chris explains this in a more detailed way, and it is worth a look.

Unfortunately, there are still some bugs that affect accessibility in other browser implementations.

The future is full of more hope

We've only focused on features that will be supported by all modern browsers after Edge switches to Chromium. That said, the demise of traditional Edge also makes many other features feel closer. Edge is the only browser to drag on the web animation API and is not interested in any part of the Houdini specification.

Impact on browser testing

Of course, another huge benefit for web developers is the reduction in testing. Many people ignore Edge during cross-browser testing, so Edge users are more likely to experience a broken experience. This is the main reason why Microsoft decided to switch to Chromium. If your website has no errors in one Chromium browser, it may be fine in all browsers. In the words of the Edge team, Chromium will "provide better web compatibility for our customers and reduce web fragmentation for all web developers." A wide variety of devices and browsers make browser testing one of the most unpleasant tasks we are responsible for as front-end developers. Edge is now available for macOS users, which is good news for many of us who work on Mac. A subscription to BrowserStack will now be slightly less necessary.

Will we lose something?

As far as I know, the only feature that is supported everywhere except Chrome is the SVG color font, which will no longer work in the Edge browser. However, other color font formats (COLR, SBIX, CBDT/CBLC) will continue to work.

Uh, @GoogleChrome Are you planning to support #OpenTypeSVG soon? Supported in Safari (12), Firefox (26) and even EdgeHTML (38) Photoshop, Illustrator – but Chrome does not support it
/cc @colorfontswtf [twitter link]

What about other browsers?

Admittedly, Edge is not the last suboptimal browser. All the features in this article are not supported in Internet Explorer and will never be supported. If you have users in Africa or India, you need to support Opera Mini. If you have users in China, then UC browsers will be very important. If you don't have these regional considerations, now is the best time to give up support for Internet Explorer and embrace the features that modern web offers. Many PC users insist on using Internet Explorer purely out of habit. Hopefully the improved Edge is enough to attract them to leave. An official Microsoft blog post titled "The Danger of Using Internet Explorer as the Default Browser" concluded, "Internet Explorer is a compatibility solution...developers are basically not testing Internet Explorer now." For its remaining users, most of the web looks increasingly corrupt. It's time to let it die.

Is Google a power tycoon?

Life for web developers is about to get easier, but the response to Microsoft's announcements is far from positive. For example, Mozilla gave a strong pessimistic response, accusing Microsoft of "formally giving up the Internet's independent sharing platform." The statement said Google "almost completely controls the infrastructure of our online lives" and "has a monopoly on unique assets." It concluded, “It is terrible to hand over control of the basic online infrastructure to a company.”

Many people recall the era of IE6, which was the last time browsers gained such an overwhelming market share. Internet Explorer fell into a total stagnation after winning the browser war. In contrast, Chrome keeps introducing new features. Google is actively involved in the Web standards bodies W3C and WHATWG. However, it can be said that it has too much influence in these institutions and has the ability to determine the shape of the future of the Web. Google Developer Relations does tend to promote features released only in Chrome.

From competition to cooperation

Edge is not the new IE , it can help drive web innovation. While it lags behind in many ways, it does lead the CSS grid, CSS exclusion, CSS zones and new HTML import specifications. Much different from previous behaviors, Microsoft has become one of the world's largest open source project supporters. This means that all major browsers are now open source. Microsoft said they intend to be a major contributor to Chromium — in fact, they have completed more than 300 mergers. This will help Edge users and will also benefit users of Chrome, Opera, Brave and other Chromium-based browsers.

The above is the detailed content of Edge Goes Chromium: What Does it Mean for Front-End Developers?. For more information, please follow other related articles on the PHP Chinese website!