Nieuw in Chrome 64

Piet LePage

  • Ondersteuning voor ResizeObservers zal u op de hoogte stellen wanneer de inhoudrechthoek van een element van grootte is veranderd.
  • Modules hebben nu toegang tot het hosten van specifieke metadata met import.meta .
  • De pop-upblokkering wordt sterk.
  • window.alert() verandert niet langer de focus.

En er is nog veel meer !

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 64!

Wilt u de volledige lijst met wijzigingen? Bekijk de Chromium-bronrepositorywijzigingslijst .

ResizeObserver

Het kan lastig zijn om bij te houden wanneer de grootte van een element verandert. Hoogstwaarschijnlijk koppelt u een luisteraar aan de resize -gebeurtenis van het document en roept u vervolgens getBoundingClientRect of getComputedStyle aan. Maar beide kunnen een pak slaag veroorzaken.

En wat als het browservenster niet van grootte verandert, maar er een nieuw element aan het document wordt toegevoegd? Of heb je display: none aan een element toegevoegd? Beide kunnen de grootte van andere elementen op de pagina wijzigen.

ResizeObserver waarschuwt u wanneer de grootte van een element verandert, en geeft de nieuwe hoogte en breedte van het element weer, waardoor het risico op lay-outverlies wordt verminderd.

Net als andere Observers is het gebruik ervan vrij eenvoudig: maak een ResizeObserver object en geef een callback door aan de constructor. De callback krijgt een array van ResizeOberverEntries – één item per waargenomen element – ​​die de nieuwe dimensies voor het element bevatten.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Bekijk ResizeObserver : het lijkt op document.onresize voor Elements voor meer details en voorbeelden uit de echte wereld.

Ik haat tab-unders. Je kent ze wel, het is wanneer een pagina een pop-up opent naar een bepaalde bestemming EN door de pagina navigeert. Meestal is een daarvan een advertentie of iets dat u niet wilde.

Vanaf Chrome 64 worden dit soort navigatie geblokkeerd en toont Chrome een eigen gebruikersinterface aan de gebruiker, zodat deze de omleiding kan volgen als hij dat wil.

import.meta

Bij het schrijven van JavaScript-modules wilt u vaak toegang tot hostspecifieke metadata over de huidige module. Chrome 64 ondersteunt nu de eigenschap import.meta binnen modules en geeft de URL voor de module weer als import.meta.url .

Dit is erg handig als u bronnen wilt omzetten die betrekking hebben op het modulebestand, in tegenstelling tot het huidige HTML-document.

En meer!

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

  • Chrome ondersteunt nu benoemde captures en Unicode-eigenschaps-escapes in reguliere expressies.
  • De standaard preload waarde voor <audio> en <video> -elementen is nu metadata . Dit brengt Chrome in lijn met andere browsers en helpt de bandbreedte en het bronnengebruik te verminderen door alleen de metadata te laden en niet de media zelf.
  • U kunt nu Request.prototype.cache gebruiken om de cachemodus van een Request te bekijken en te bepalen of een verzoek een herlaadverzoek is.
  • Met behulp van de Focus Management API kunt u nu de focus op een element leggen zonder ernaartoe te scrollen met het preventScroll attribuut.

window.alert()

Oja, en nog eentje! Hoewel dit niet echt een "ontwikkelaarsfunctie" is, ben ik er wel blij mee. window.alert() brengt niet langer een achtergrondtabblad naar de voorgrond! In plaats daarvan wordt de waarschuwing weergegeven wanneer de gebruiker terugschakelt naar dat tabblad.

Nooit meer willekeurig van tabblad wisselen omdat iets een window.alert op mij afvuurde. Ik kijk naar je oude Google Agenda.

Zorg ervoor dat je je abonneert op ons YouTube-kanaal , zodat je een e-mailmelding ontvangt wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 65 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!