Edge wird Chromium: Was bedeutet das für Frontend-Entwickler?

Im Dezember 2018 kündigte Microsoft an, dass Edge auf Chromium umsteigen würde, das Open-Source-Projekt, das Google Chrome antreibt. Viele in der Branche reagierten mit Trauer über den Verlust der Browser-Vielfalt. Persönlich war ich jubelnd. Ein offizielles Veröffentlichungsdatum wurde noch nicht bekannt gegeben, aber es wird irgendwann in diesem Jahr sein. Mit seiner Veröffentlichung werden eine ganze Reihe von HTML-, JavaScript- und CSS-Funktionen die vollständige Cross-Browser-Unterstützung erreicht haben.

Der Preview-Build ist jetzt für Windows verfügbar und kommt bald für Mac.

📣 Aufruf an alle Web-Entwickler und Bastler! 📣

Die ersten Preview-Builds der nächsten Version von #MicrosoftEdge sind fertig für Sie – probieren Sie es jetzt aus! https://#/I531hfmD3G pic.twitter.com/Tvh6OGGouO

— Microsoft Edge Dev (@MSEdgeDev) April 8, 2019

Vor nicht allzu langer Zeit verfasste ich einen Artikel mit dem Titel „Der langsame Tod von Internet Explorer“. Einige von uns hatten das Glück, diesen Browser bereits hinter uns zu lassen. Aber er war nicht das Einzige, was uns zurückhielt. Internet Explorer war der Browser, den wir alle hassten, und Edge sollte sein stark verbesserter Ersatz sein. Leider war Edge selbst ein ziemlicher Nachzügler. EdgeHTML ist ein Fork von Trident, der Engine, die Internet Explorer antrieb. Microsoft investierte unterdurchschnittlich viel in Edge. Der Apfel fiel nicht weit vom Stamm. Die User Voice-Website von Edge war eine nette Idee, die es Entwicklern ermöglichte, für die Funktionen abzustimmen, die sie implementiert haben wollten. Leider war das Abstimmen auf der Website, wie Dave Rupert es ausdrückte, „wie das Werfen von Münzen in einen Wunschbrunnen“. Die am häufigsten nachgefragten Funktionen blieben jahrelang *unimplementiert*.

Es gibt viele Funktionen, die das Edge vor Chromium derzeit nicht unterstützt, die aber in anderen modernen Browsern verfügbar sind und die wir nutzen können, sobald sie den Wechsel vollzogen haben. Viele davon können nicht durch Polyfills oder Workarounds ersetzt werden, daher ist diese Veröffentlichung ein großes Ding.

Funktionen, auf deren Nutzung wir uns freuen können

Was genau sind das für Funktionen? Lassen Sie uns sie hier skizzieren und uns auf all die neuen Dinge freuen, die wir tun können.

Benutzerdefinierte Elemente und Shadow DOM

Zusammen ermöglichen benutzerdefinierte Elemente und Shadow DOM es Entwicklern, benutzerdefinierte, wiederverwendbare und gekapselte Komponenten zu definieren. Viele Leute haben danach gefragt. Seit 2014 haben die Leute auf deren Implementierung gewartet, und wir bekommen sie endlich.

HTML-Elemente

<details>

und

<summary>

Die Elemente

<details>

und

<summary>

sind Teil von HTML5 und werden seit 2011 in Chrome unterstützt. Zusammen erzeugen die Elemente ein einfaches Widget zum Ein- und Ausblenden von Inhalten. Obwohl es trivial ist, etwas Ähnliches mit JavaScript zu implementieren, funktionieren die Elemente

<details>

und

<summary>

auch dann, wenn JavaScript deaktiviert ist oder nicht geladen wurde.

Siehe den Pen
details/summary von CSS GRID (@cssgrid)
auf CodePen.

Javascript Font Loading API

Diese Funktion ist für *einige* Leute sehr wichtig. Alle modernen Browser unterstützen jetzt die CSS-Eigenschaft font-display. Sie möchten Ihre Schriftarten jedoch möglicherweise immer noch mit JavaScript laden. Der Schriftartenlade-Monoman Zach Leatherman hat eine Erklärung, warum Sie Schriftarten mit JavaScript laden möchten, obwohl wir jetzt eine breite Unterstützung für font-display haben. Das Verwerfen von Polyfills für diese API ist wichtig, da dieses JavaScript laut Zach

[…] normalerweise im kritischen Pfad inlined ist. Die Zeit, die für das Parsen und Ausführen von Polyfill-JavaScript aufgewendet wird, ist im Wesentlichen verschwendet für Browser, die die native CSS Font Loading API unterstützen.

In einem Artikel aus dem Jahr 2018 beklagte sich Zach

[…] Die von Browsern bereitgestellte CSS Font Loading API hat eine ziemlich breite Unterstützung und ist schon lange verfügbar, aber sie fehlt erstaunlicherweise immer noch in allen verfügbaren Versionen von Microsoft Edge.

Nicht mehr!

JavaScript flat und flatMap

Am einfachsten mit einem Code-Snippet erklärt: flat() ist nützlich, wenn Sie ein Array in einem anderen Array verschachtelt haben.

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

Wie der Name schon sagt, ist flatMap() äquivalent zur Verwendung sowohl der Methode map() als auch von flat().

Diese Methoden werden auch in Node 11 unterstützt. 🎉

JavaScript TextEncoder und TextDecoder

TextEncoder und TextDecoder sind Teil der Encoding-Spezifikation. Sie scheinen nützlich zu sein, wenn Sie mit Streams arbeiten.

JavaScript Object Rest und Object Spread

Diese sind genauso wie Rest- und Spread-Eigenschaften für Arrays.

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: dynamischer Import

Mithilfe einer funktionsähnlichen Syntax ermöglichen dynamische Imports das verzögerte Laden von ES-Modulen, wenn ein Benutzer sie benötigt.

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

CSS-Eigenschaft background-blend-mode

background-blend-mode bringt Bildmanipulation im Photoshop-Stil ins Web.

CSS prefers-reduced-motion Media Query

Ich habe das Gefühl, dass es *nicht* sein sollte, dass man sich schlecht fühlt, der *Standard* einer Website sein sollte, insbesondere da nicht alle Benutzer wissen, dass diese Einstellung existiert. Da Animationen im Web immer häufiger werden, ist es wichtig zu erkennen, dass Animationen bei manchen Benutzern Schwindel, Übelkeit und Kopfschmerzen verursachen können.

CSS-Eigenschaft caret-color

Zugegebenermaßen eine eher triviale Funktion, und eine, die sicher und einfach als progressive Enhancement hätte genutzt werden können. Sie ermöglicht es Ihnen, den blinkenden Cursor in Texteingabefeldern zu gestalten.

8-stellige Hex-Farbnotation

Es ist schön, Konsistenz in einer Codebasis zu haben. Dazu gehört, dass man sich *entweder* an das RGB-, Hexadezimal- oder HSL-Farbformat hält. Wenn Ihr bevorzugtes Format Hex ist, hatten Sie ein Problem, da Sie zu rgba() wechseln mussten, wann immer Sie Transparenz definieren mussten. Hex kann jetzt einen Alpha-Wert (Transparenz) enthalten. Zum Beispiel ist #ffffff80 äquivalent zu rgba(255, 255, 255, .5). Es ist wohl nicht das intuitivste Farbformat und hat keinen wirklichen Vorteil gegenüber rgba().

Intrinsische Größenbestimmung

Ich habe nicht so viel Hype oder Aufregung für intrinsische Größenbestimmung gesehen wie für andere neue CSS-Features, aber es ist das, worauf ich persönlich am meisten Lust habe. Intrinsische Größenbestimmung bestimmt Größen basierend auf dem Inhalt eines Elements und führt drei neue Schlüsselwörter in CSS ein: min-content, max-content und fit-content(). Diese Schlüsselwörter können an den meisten Stellen verwendet werden, an denen Sie normalerweise eine Länge verwenden würden, wie z. B. height, width, min-width, max-width, min-height, max-height, grid-template-rows, grid-template-columns und flex-basis.

CSS-Eigenschaft text-orientation

In Verbindung mit der Eigenschaft writing-mode gibt text-orientation, wie erwartet, die Ausrichtung von Text an.

Siehe den Pen
text-orientation: upright von CSS GRID (@cssgrid)
auf CodePen.

CSS :placeholder-shown Pseudo-Element

placeholder-shown war sogar im Internet Explorer verfügbar, hat es aber irgendwie nie in Edge geschafft… bis jetzt. UX-Forschung zeigt, dass Platzhaltertexte im Allgemeinen vermieden werden sollten. Wenn Sie jedoch Platzhaltertext verwenden, ist dies eine praktische Möglichkeit, Stile bedingt anzuwenden, je nachdem, ob der Benutzer Text in das input eingegeben hat.

CSS place-content-Eigenschaft

place-content ist eine Kurzform zum Setzen von sowohl align-content als auch justify-content.

Siehe den Pen
place-content von CSS GRID (@cssgrid)
auf CodePen.

CSS will-change-Eigenschaft

Die Eigenschaft will-change kann als Performance-Optimierung verwendet werden, indem der Browser im Voraus darüber informiert wird, dass sich ein Element ändern wird. Das Edge vor Chromium war tatsächlich gut darin, Animationen performant zu handhaben, ohne dass diese Eigenschaft benötigt wurde, aber es wird jetzt die vollständige Cross-Browser-Unterstützung haben.

CSS all-Eigenschaft

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

Leider wurde das Schlüsselwort revert immer noch nirgendwo außer in Safari implementiert, was die Reichweite, die wir aus der all-Eigenschaft erzielen können, etwas einschränkt.

CSS Shapes und Clip Path

Traditionell war das Web rechteckzentriert. Es hat schließlich ein *Box*-Modell. Obwohl wir keine Floats mehr für das Layout benötigen, können wir sie kreativ zum Umfließen von Text um Bilder und Formen mit der shape-outside-Eigenschaft verwenden. Dies kann mit der clip-path-Eigenschaft kombiniert werden, die die Möglichkeit bietet, ein Bild innerhalb einer Form anzuzeigen.

CSS :focus-within Pseudo-Klasse

Wenn Sie einem gesamten Formular spezielle Stile zuweisen möchten, wenn eines seiner Eingabefelder im Fokus ist, dann ist :focus-within der Selektor für Sie.

CSS contents-Schlüsselwort

Dies ist so ziemlich *unerlässlich*, wenn Sie mit CSS Grid arbeiten. Dies wurde von Edge als "nicht geplant" markiert, trotz 3.920 Stimmen von Entwicklern.

Bei Flexbox und Grid werden nur *direkte Kinder* zu Flex-Items bzw. Grid-Items. Alles, was tiefer verschachtelt ist, kann nicht mit Flex- oder Grid-Positionierung platziert werden. Mit den Worten der Spezifikation, wenn display: contents auf ein Elternelement angewendet wird, „muss das Element so behandelt werden, als wäre es im Elementbaum durch seine Inhalte ersetzt worden“, wodurch es mit einem Grid oder mit Flexbox layoutet werden kann. Chris erklärt eine umfassendere Erklärung, die es wert ist, angeschaut zu werden.

Leider gibt es bei anderen Browser-Implementierungen immer noch einige Fehler, die die Zugänglichkeit beeinträchtigen.

Die Zukunft verspricht noch viel mehr

Wir haben uns nur Funktionen angesehen, die von allen modernen Browsern unterstützt werden, sobald Edge den Wechsel zu Chromium vollzieht. Dennoch rückt auch der Tod des Legacy-Edge viele andere Funktionen näher. Edge war der einzige Browser, der bei der Web Animation API zögerte und kein Interesse an *irgendwelchen Teilen* der Houdini-Spezifikationen zeigte, zum Beispiel.

Die Auswirkungen auf das Browser-Testing

Natürlich ist der andere riesige Vorteil für Webentwickler weniger Testaufwand. Viele haben Edge beim Cross-Browser-Testing vernachlässigt, sodass Edge-Benutzer mit höherer Wahrscheinlichkeit eine fehlerhafte Erfahrung hatten. Dies war der Hauptgrund für Microsofts Entscheidung, zu Chromium zu wechseln. Wenn Ihre Website in einem Chromium-Browser fehlerfrei ist, dann ist sie wahrscheinlich auch in allen anderen in Ordnung. Mit den Worten des Edge-Teams bieten sie „bessere Webkompatibilität für unsere Kunden und weniger Fragmentierung des Webs für alle Webentwickler“. Die große Vielfalt an Geräten und Browsern macht Browser-Tests zu einer der unangenehmsten Aufgaben, für die wir als Frontend-Entwickler verantwortlich sind. Edge wird jetzt für macOS-Benutzer verfügbar sein, was für viele von uns, die an einem Mac arbeiten, großartig ist. Ein Abonnement für BrowserStack wird jetzt *etwas* weniger notwendig sein.

Verlieren wir etwas?

Soweit ich weiß, ist die einzige Funktion, die überall außer Chrome unterstützt wurde, SVG-Farbschriftarten, die im Edge-Browser nicht mehr funktionieren werden. Andere Farbschriftformate (COLR, SBIX, CBDT/CBLC) werden jedoch weiterhin funktionieren.

Ähm, @GoogleChrome Plant ihr, #OpenTypeSVG bald zu unterstützen? Unterstützt in Safari (12+), Firefox (26+) sogar EdgeHTML (38+) Photoshop, Illustrator – aber nicht Chrome
/cc @colorfontswtf pic.twitter.com/tgwJ3AqHm2

— Chris Lilley (@svgeesus) February 15, 2019

Was ist mit anderen Browsern?

Zugegebenermaßen war Edge nicht der letzte unterdurchschnittliche Browser. Alle Funktionen in diesem Artikel werden in Internet Explorer nicht unterstützt und werden es auch nie sein. Wenn Sie Benutzer in Afrika oder Indien haben, müssen Sie Opera Mini unterstützen. Wenn Sie Benutzer in China haben, wird der UC-Browser wichtig sein, um dagegen zu testen. Wenn Sie diese regionalen Einschränkungen nicht haben, gab es nie einen besseren Zeitpunkt, die Unterstützung für Internet Explorer einzustellen und die Funktionen der modernen Welt zu nutzen. Viele PC-Benutzer sind aus reiner Gewohnheit bei Internet Explorer geblieben. Hoffentlich wird ein überarbeitetes Edge ausreichen, um sie zu verführen. Ein offizieller Blogbeitrag von Microsoft mit dem Titel „Die Gefahren der Verwendung von Internet Explorer als Standardbrowser“ schloss damit, dass „Internet Explorer eine Kompatibilitätslösung ist… Entwickler testen heutzutage größtenteils nicht mehr für Internet Explorer.“ Für seine verbleibenden Benutzer muss der Großteil des Webs immer kaputter aussehen. Es ist Zeit, ihn sterben zu lassen.

Ist Google ein Megaloman?

Das Leben wird für Webentwickler einfacher, aber die Reaktion auf die Ankündigung von Microsoft war alles andere als positiv. Mozilla zum Beispiel hatte eine *sehr* pessimistische Antwort, in der Microsoft beschuldigt wurde, „offiziell auf eine unabhängige gemeinsame Plattform für das Internet verzichtet zu haben“. Die Erklärung beschrieb Google als „fast vollständige Kontrolle über die Infrastruktur unseres Online-Lebens“ und einen „monopolistischen Griff auf einzigartige Assets“. Sie schloss damit, dass „die Kontrolle über die grundlegende Online-Infrastruktur an ein einziges Unternehmen abzutreten, schrecklich ist.“

Viele blicken zurück auf die Tage von IE6, das letzte Mal, dass ein Browser eine solch überwältigende Marktanteil erreichte. Internet Explorer, nachdem er den Browserkrieg gewonnen hatte, gab der totalen Stagnation nach. Chrome hingegen treibt unermüdlich neue Funktionen voran. Google beteiligt sich aktiv an den Webstandards-Gremien W3C und WHATWG. Arguably hat es aber einen übermäßigen Einfluss in diesen Gremien und die Macht, die zukünftige Gestalt des Webs zu diktieren. Google Developer Relations hat die Tendenz, Funktionen zu bewerben, die nur in Chrome veröffentlicht wurden.

Von Wettbewerb zu Zusammenarbeit

Anstatt *der neue IE* zu sein, kann Edge helfen, das Web voranzubringen. Während es in vielen Bereichen zurückfiel, ebnete es den Weg für CSS Grid, CSS Exclusions, CSS Regions und die neue HTML Imports-Spezifikation. In einer radikalen Abkehr vom historischen Verhalten ist Microsoft zu einem der weltweit größten Unterstützer von Open-Source-Projekten geworden. Das bedeutet, dass alle wichtigen Browser jetzt Open Source sind. Microsoft hat erklärt, dass sie beabsichtigen, ein *wesentlicher Beitragender zu Chromium* zu werden – tatsächlich haben sie bereits über 300 Merges angesammelt. Dies wird Edge-Benutzern helfen, aber auch Benutzern von Chrome, Opera, Brave und anderen Chromium-basierten Browsern zugute kommen.