Nieuw in Chroom 65

Pete LePage

• Met de CSS Paint API kunt u programmatisch een afbeelding genereren.
• Met de Server Timing API kunnen webservers prestatietiminginformatie verstrekken via HTTP-headers.
• de nieuwe CSS display: contents kan ervoor zorgen dat vakken verdwijnen!

En er is nog veel meer !

Ik ben Pete LePage . Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 65!

Wilt u de volledige lijst met wijzigingen bekijken? Bekijk de wijzigingenlijst in de Chromium-bronrepository .

CSS Paint API

Met de CSS Paint API kunt u programmatisch een afbeelding genereren voor CSS-eigenschappen zoals background-image of border-image .

In plaats van naar een afbeelding te verwijzen, kunt u de nieuwe verffunctie gebruiken om de afbeelding te tekenen, net als een canvas-element.

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

In plaats van bijvoorbeeld extra DOM-elementen toe te voegen om een ​​rimpeleffect op een materiaalstijlknop te creëren , kunt u de Paint API gebruiken.

Het is ook een krachtige manier om CSS-functies te polyfillen die nog niet door een browser worden ondersteund.

Surma heeft een geweldig bericht met verschillende demo's in zijn uitleg .

Servertiming-API

Hopelijk gebruik je de API's voor navigatie en resourcetiming om de prestaties van je site voor echte gebruikers te volgen. Tot nu toe was er geen eenvoudige manier voor de server om de prestatietiming te rapporteren.

Met de nieuwe Server Timing API kan uw server timinginformatie doorgeven aan de browser, waardoor u een beter beeld krijgt van uw algehele prestaties.

U kunt zoveel statistieken bijhouden als u wilt: leestijden van de database, opstarttijd of wat u maar belangrijk vindt, door een Server-Timing header aan uw antwoord toe te voegen:

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

Ze worden weergegeven in Chrome DevTools, maar u kunt ze ook uit de antwoordheader halen en samen met uw andere prestatieanalyses opslaan.

display: contents

De nieuwe CSS- display: contents ziet er erg mooi uit!

Wanneer ze aan een containerelement worden toegevoegd, nemen alle onderliggende elementen hun plaats in de DOM in en verdwijnen ze in feite. Stel dat ik twee div 's heb, één in de andere. Mijn buitenste div heeft een rode rand, een grijze achtergrond en ik heb een breedte van 200 pixels ingesteld. De binnenste div heeft een blauwe rand en een lichtblauwe achtergrond.

.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;
}

Standaard bevindt de innerlijke div zich in de buitenste div .

Door weergave display: contents toe te voegen aan de buitenste div, verdwijnt de buitenste div en worden de beperkingen niet langer toegepast op de binnenste div . De binnenste div heeft nu een breedte van 100%.

Er zijn talloze gevallen waarin dit nuttig kan zijn, maar de meest voorkomende is bij flexbox. Bij flexbox worden alleen de directe kinderen van een flexcontainer flexitems.

Maar zodra u display: contents toepast op een child-item, worden de children-items flex-items en worden ze ingedeeld volgens dezelfde regels als die welke op hun parent-item zouden zijn toegepast.

Bekijk het uitstekende bericht van Rachel Andrew Vanishing boxes with display contents voor meer details en andere voorbeelden.

En nog veel meer!

Dit zijn slechts enkele van de wijzigingen in Chrome 65 voor ontwikkelaars. Er is natuurlijk nog veel meer.

• De syntaxis voor het specificeren HSL en HSLA , en RGB en RGBA -coördinaten voor de kleureigenschap komt nu overeen met de CSS Color 4-specificatie .
• Er is een nieuw functiebeleid waarmee u synchrone XHR's kunt beheren via een HTTP-header of het iframe- allow .

Bekijk zeker Nieuw in Chrome DevTools om te ontdekken wat er nieuw is voor DevTools in Chrome 65. En als je geïnteresseerd bent in Progressive Web Apps, bekijk dan de nieuwe PWA Roadshow-videoserie . Klik vervolgens op de abonneerknop op ons YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 66 uitkomt, vertel ik u graag wat er nieuw is in Chrome!