Neu in Chrome 65

Pete LePage

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? In der Änderungsliste für das Chromium-Quell-Repository.

CSS Paint API

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

Anstatt auf ein Bild zu verweisen, können Sie die neue Funktion Paint verwenden, um wie bei einem Canvas-Element.

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

Anstatt beispielsweise zusätzliche DOM-Elemente Erzeuge den Welleneffekt können Sie die Paint API verwenden.

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

In Surma haben wir einen tollen Beitrag Demos in seiner Erklärung.

Server Timing API

Hoffentlich nutzen Sie die Navigation und Ressourcen Timing APIs, um die die Leistung Ihrer Website für echte Nutzer. Bis jetzt war es schwierig, damit der Server seinen Leistungs-Timing melden kann.

Mit der neuen Server Timing API können Sie um Zeitinformationen an den Browser zu übergeben. um Ihnen ein besseres Bild Ihrer Gesamtleistung.

Sie können beliebig viele Metriken verfolgen: Lesezeiten der Datenbank, Startzeit, oder was Ihnen wichtig ist, fügen Sie die Kopfzeile Server-Timing zu Ihrem Antwort:

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

Sie werden in den Chrome-Entwicklertools angezeigt oder können aus der Antwort abgerufen werden. und speichern Sie sie mit Ihren anderen Leistungsanalysen.


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 Grunde. Angenommen, ich habe zwei div, einen davon im Sonstiges. Das äußere div hat einen roten Rahmen, einen grauen Hintergrund und ich habe eine Breite 200 Pixel groß ist. 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>

Durch Hinzufügen von display: contents zum äußeren div-Element verschwindet das äußere div. und seine Einschränkungen werden nicht mehr auf die innere div angewendet. Das innere div ist jetzt 100% breit.

Verwende die Entwicklertools, um das DOM zu prüfen. Dabei wirst du feststellen, dass der äußere div noch vorhanden ist.

Das kann in vielen Fällen hilfreich sein, aber der gängigste mit der Flexbox. Bei der Flexbox sind nur die unmittelbar untergeordneten Elemente eines Flex-Containers zulässig. zu flexiblen Elementen werden.

Wenn Sie jedoch display: contents auf ein untergeordnetes Element anwenden, sind seine untergeordneten Elemente flexibel. Elemente und werden nach denselben Regeln angeordnet, die auf die ihren Eltern.

Sieh dir den hervorragenden Beitrag von Rachel Andrew an. Vanishing-Boxen mit Displayinhalt .

…und vieles mehr

Dies sind nur einige der Änderungen in Chrome 65 für Entwickler. noch viel mehr.

Weitere Informationen finden Sie unter Neu in den Chrome-Entwicklertools. findest du weitere Informationen zu den Neuerungen bei den Entwicklertools in Chrome 65. Und wenn Sie sich für Progressive Web-Apps – probieren Sie die neuen Videoreihe „PWA-Roadsshow“ Klicke dann auf die Schaltfläche Abonnieren in unserem YouTube-Kanal und erhältst du eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 66 veröffentlicht ist, habe ich recht Hier erfährst du alles zu den neuen Funktionen in Chrome.