- Mit der CSS Paint API können Sie ein Bild programmatisch generieren.
- Mit der Server Timing API können Webserver Informationen zur Leistungszeit über HTTP-Header bereitstellen.
- Mit der neuen CSS-Property
display: contents
können Felder verschwinden.
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.
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.
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
undHSLA
sowieRGB
undRGBA
-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.