Neu in Chrome 65

Pete LePage

• Mit der CSS Paint API können Sie Bilder programmatisch generieren.
• Die Server Timing API ermöglicht Webservern, Informationen zur Leistungszeit über HTTP-Header bereitzustellen.
• kann die neue CSS-Eigenschaft display: contents Felder verschwinden lassen.

Und viele weitere Funktionen!

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

Möchtest du eine vollständige Liste der Änderungen erhalten? Weitere Informationen finden Sie in der Änderungsliste für das 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 Funktion „pinsel“ zeichnen – ähnlich wie bei einem Canvas-Element.

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

Statt zusätzliche DOM-Elemente hinzuzufügen, um den Ripple-Effekt für eine Schaltfläche mit Materialstil zu erzeugen, 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 großartigen Beitrag mit mehreren Demos in seiner Erklärung veröffentlicht.

Server Timing API

Hoffentlich verwendest du die Navigations- und Ressourcenzeit-APIs, um die Leistung deiner Website für echte Nutzer zu erfassen. Bisher gab es für den Server keine einfache Möglichkeit, den Zeitpunkt der Leistung zu melden.

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

Sie können beliebig viele Messwerte erfassen: Lesezeiten der Datenbank, Startzeit oder was auch immer Ihnen wichtig ist. Fügen Sie dazu Ihrer Antwort einen Server-Timing-Header hinzu:

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

Sie werden in den Chrome-Entwicklertools angezeigt. Sie können sie aber auch aus dem Antwortheader extrahieren und zusammen mit Ihren anderen Leistungsanalysen speichern.

display: contents

Die neue CSS-Eigenschaft display: contents ist ziemlich intuitiv.

Wenn sie einem Containerelement hinzugefügt werden, nehmen alle untergeordneten Elemente ihren Platz im DOM ein und verschwindet dann im Wesentlichen. Angenommen, ich habe zwei divs, einen in dem anderen. Meine äußere div hat einen roten Rahmen und einen grauen Hintergrund. 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 im äußeren div enthalten.

Ich bin das innere <div>

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

Prüfe das DOM mit den Entwicklertools und stelle fest, dass der äußere div noch vorhanden ist.

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

Wenn Sie jedoch display: contents auf ein untergeordnetes Element anwenden, werden die untergeordneten Elemente zu flexiblen Elementen und werden nach denselben Regeln angeordnet, die auf das übergeordnete Element angewendet wurden.

Sehen Sie sich Rachel Andrew in seinem hervorragenden Beitrag Vanishing-Boxen mit Displayinhalten an, um weitere Informationen und andere Beispiele zu erhalten.

Und mehr!

Dies sind nur einige der Änderungen in Chrome 65 für Entwickler. Natürlich gibt es noch viele weitere.

• Die Syntax zum Angeben von HSL und HSLA sowie die Koordinaten RGB und RGBA für das Farbattribut entspricht jetzt der Spezifikation für CSS Color 4.
• Es gibt eine neue Richtlinie für Funktionen, mit der du synchrone XHRs über einen HTTP-Header oder das iFrame-Attribut allow steuern kannst.

Sehen Sie sich Neu in Chrome-Entwicklertools an, um zu erfahren, was es bei den Entwicklertools in Chrome 65 Neues gibt. Wenn du dich für progressive Web-Apps interessierst, solltest du dir die neue Videoreihe „PWA-Roadsshow“ ansehen. Klicke anschließend in unserem YouTube-Kanal auf die Schaltfläche Abonnieren. Du wirst dann per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 66 veröffentlicht ist, erzähle ich Ihnen gleich, was es Neues bei Chrome gibt.