Neu in Chrome 65

Pete LePage

Und viele weitere Funktionen!

Ich bin Pete LePage. Sehen wir uns an, was es in Chrome 65 für Entwickler Neues gibt.

Möchtest du eine vollständige Liste der Änderungen erhalten? Liste der Änderungen am Chromium-Quell-Repository

CSS Paint API

Mit der CSS Paint API können Sie programmatisch ein Bild für CSS-Eigenschaften wie background-image oder border-image generieren.

Anstatt auf ein Bild zu verweisen, können Sie das Bild mit der neuen Malfunktion zeichnen, ähnlich wie ein Canvas-Element.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

Anstatt beispielsweise zusätzliche DOM-Elemente hinzuzufügen, um den Welleneffekt auf einer Schaltfläche im Material-Design zu erstellen, können Sie die Paint API verwenden.

Es ist auch eine leistungsstarke Methode zum Polyfilling von CSS-Funktionen, die in einem Browser noch nicht unterstützt werden.

Surma hat einen tollen Beitrag mit mehreren Demos in seinem Erläuterungsvideo.

Server Timing API

Hoffentlich verwenden Sie die Navigation und Ressourcen-Timing-APIs, um die Leistung Ihrer Website für echte Nutzer zu erfassen. Bisher gab es keine einfache Möglichkeit für den Server, seine Leistungszeit zu melden.

Mit der neuen Server Timing API kann Ihr Server Zeitinformationen an den Browser weitergeben, sodass Sie ein besseres Bild Ihrer Gesamtleistung erhalten.

Du kannst beliebig viele Messwerte erfassen: Datenbanklesezeiten, Startzeit oder alles, was für dich wichtig ist. Dazu musst du deiner Antwort einen Server-Timing-Header hinzufügen:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Sie werden in den Chrome-Entwicklertools angezeigt. Du kannst sie aber auch aus dem Antwortheader extrahieren und zusammen mit deinen anderen Leistungsanalysen speichern.


display: contents

Die neue CSS-Property display: contents ist ziemlich cool.

Wenn sie einem Containerelement hinzugefügt werden, nehmen alle untergeordneten Elemente ihren Platz im DOM ein und verschwinden dann im Wesentlichen. Angenommen, ich habe zwei div, die ineinander verschachtelt sind. Meine äußere div hat einen roten Rahmen, einen grauen Hintergrund und ich habe eine Breite von 200 Pixeln festgelegt. Die innere div hat einen blauen Rahmen und einen hellblauen Hintergrund.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

Standardmäßig ist die innere div in der äußeren div enthalten.

Ich bin das innere <div>

Wenn Sie dem äußeren div-Element display: contents hinzufügen, wird das äußere div ausgeblendet und seine Einschränkungen werden nicht mehr auf das innere div angewendet. Die innere div ist jetzt 100% breit.

Prüfen Sie mit den DevTools das DOM. Sie sehen, dass die äußere div noch vorhanden ist.

Es gibt viele Fälle, in denen dies hilfreich sein kann, aber am häufigsten ist das bei Flexbox der Fall. Bei der Flexbox werden nur die unmittelbar untergeordneten Elemente eines Flex-Containers zu Flex-Elementen.

Wenn Sie display: contents jedoch auf ein untergeordnetes Element anwenden, werden seine untergeordneten Elemente zu Flexelementen und werden mit denselben Regeln wie das übergeordnete Element angeordnet.

Weitere Informationen und Beispiele finden Sie im hervorragenden Artikel Vanishing boxes with display contents von Rachel Andrew.

…und vieles mehr

Das sind nur einige der Änderungen in Chrome 65 für Entwickler. Es gibt natürlich noch viele weitere.

  • Die Syntax für die Angabe von HSL und HSLA sowie RGB und RGBA-Koordinaten für die Farbeigenschaft entspricht jetzt der CSS Color 4-Spezifikation.
  • Es gibt eine neue Funktionsrichtlinie, mit der Sie synchrone XHRs über einen HTTP-Header oder das iframe-Attribut allow steuern können.

Neu in den Chrome-Entwicklertools Wenn Sie sich für progressive Web-Apps interessieren, sehen Sie sich die neue Videoreihe zur PWA Roadshow an. Klicke dann auf unserer YouTube-Seite auf die Schaltfläche Abonnieren. Du erhältst dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 66 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.