Nieuw in Chrome 64

Pete LePage

  • Ondersteuning voor ResizeObservers : hiermee krijgt u een melding wanneer de inhoudsrechthoek van een element van formaat is gewijzigd.
  • Modules hebben nu toegang tot hostspecifieke metagegevens met import.meta .
  • De pop-up blocker wordt sterk.
  • window.alert() verandert de focus niet meer.

En er is nog veel meer !

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

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

ResizeObserver

Het bijhouden van wijzigingen in de grootte van een element kan lastig zijn. Waarschijnlijk koppel je een listener aan de resize -gebeurtenis van het document en roep je vervolgens getBoundingClientRect of getComputedStyle aan. Maar beide kunnen de lay-out verstoren.

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

ResizeObserver informeert u wanneer de grootte van een element verandert en geeft de nieuwe hoogte en breedte van het element door. Zo wordt het risico op een verstoorde lay-out verkleind.

Net als andere Observers is het gebruik ervan vrij eenvoudig: maak een ResizeObserver -object aan en geef een callback door aan de constructor. De callback krijgt een array van ResizeOberverEntries – één item per geobserveerd element – ​​die de nieuwe afmetingen 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 : Dit is vergelijkbaar met document.onresize voor Elementen voor meer details en voorbeelden uit de praktijk.

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 van die pop-ups een advertentie of iets wat je niet wilde.

Vanaf Chrome 64 worden deze navigatietypen geblokkeerd en toont Chrome een standaard 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 hebben 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 oplossen ten opzichte van het modulebestand in plaats van het huidige HTML-document.

En nog veel meer!

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

  • Chrome ondersteunt nu benoemde vastleggingen en Unicode-eigenschapsescapes in reguliere expressies.
  • De standaard preload voor <audio> en <video> -elementen is nu metadata . Dit brengt Chrome in lijn met andere browsers en helpt het bandbreedte- en resourcegebruik 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 aanvraag een herlaadaanvraag is.
  • Met behulp van de Focus Management API kunt u nu de focus op een element leggen zonder ernaartoe te scrollen, met het kenmerk preventScroll .

window.alert()

Oh, en nog eentje! Hoewel dit niet echt een "ontwikkelaarsfunctie" is, word ik er blij van. window.alert() brengt een tabblad op de achtergrond niet langer naar de voorgrond! In plaats daarvan wordt de melding weergegeven wanneer de gebruiker terugschakelt naar dat tabblad.

Geen willekeurig wisselen van tabblad meer omdat er een window.alert bij mij afging. Ik kijk naar je oude Google Agenda.

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

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