Neu in Chrome 65

Pete LePage

Das sind noch reichlich mehr!

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es für Entwickler bei Chrome 65 Neues gibt.

Möchten Sie die vollständige Liste der Änderungen sehen? Weitere Informationen finden Sie in der Änderungsliste des Chromium-Quell-Repositorys.

CSS-Paint-API

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

Anstatt auf ein Bild zu verweisen, können Sie die neue Funktion „color“ verwenden, um das Bild zu zeichnen – ganz wie bei einem Canvas-Element.

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

Sie können beispielsweise die Paint API verwenden, statt zusätzliche DOM-Elemente hinzuzufügen, um für eine Schaltfläche mit Materialstil den Welleneffekt zu erzeugen.

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

Surma hat in seiner Erklärung einen tollen Beitrag mit mehreren Demos veröffentlicht.

Server Timing API

Wir hoffen, dass ihr die Navigations- und Ressourcen-Timing-APIs verwendet, um die Leistung eurer Website für echte Nutzer zu verfolgen. Bisher gab es keine einfache Möglichkeit für den Server, den Zeitpunkt der Leistung zu erfassen.

Mit der neuen Server Timing API kann dein Server Zeitinformationen an den Browser weitergeben. Dadurch erhältst du ein besseres Bild von deiner Gesamtleistung.

Sie können beliebig viele Messwerte verfolgen: Datenbanklesezeiten, Startzeit usw., indem Sie Ihrer 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 oder Sie können sie aus dem Antwortheader abrufen und mit Ihren anderen Leistungsanalysen speichern.


display: contents

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

Wenn Sie einem Containerelement hinzugefügt werden, nehmen alle untergeordneten Elemente ihren Platz im DOM ein und verschwinden im Grunde. Angenommen, ich habe zwei div, eines im anderen. Meine äußere div hat einen roten Rahmen, einen grauen Hintergrund und ich habe eine Breite von 200 Pixeln festgelegt. Das innere div-Element 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 die innere <div>

Wenn Sie display: contents zum äußeren div-Element hinzufügen, verschwindet die äußere div und ihre Einschränkungen werden nicht mehr auf die innere div angewendet. Das innere div-Objekt hat jetzt eine Breite von 100 %.

Prüfen Sie das DOM mithilfe der Entwicklertools und stellen Sie fest, dass das äußere div noch vorhanden ist.

Es gibt viele Fälle, in denen dies hilfreich sein kann, aber der gängigste ist eine Flexbox. Mit Flexbox werden nur die unmittelbar untergeordneten Elemente eines Flex-Containers zu Flex-Elementen.

Wenn Sie jedoch display: contents auf ein untergeordnetes Element anwenden, werden seine untergeordneten Elemente zu Flex-Elementen und werden mit denselben Regeln dargestellt, die auch auf das übergeordnete Element angewendet worden wären.

Weitere Informationen und Beispiele finden Sie in Rachel Andrews hervorragendem Beitrag Vanishing Box with display content.

…und vieles mehr

Dies sind nur einige der Änderungen in Chrome 65 für Entwickler. Und natürlich gibt es noch viel mehr.

Unter Neu in den Chrome-Entwicklertools erfahren Sie, was es Neues bei den Entwicklertools in Chrome 65 gibt. Wenn Sie an progressiven Web-Apps interessiert sind, sehen Sie sich die neue PWA-Roadshow-Videoreihe an. Klicke anschließend in unserem YouTube-Kanal auf die Schaltfläche Abonnieren. Du wirst dann jedes Mal per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 66 veröffentlicht wird, werde ich Ihnen die Neuheiten bei Chrome mitteilen.