Nowości w Chrome 64

Pete LePage

I wiele innych.

Mam na imię Pete LePage. Sprawdź, co nowego w Chrome 64 dla deweloperów.

Chcesz zobaczyć pełną listę zmian? Sprawdź listę zmian w repozytorium źródłowym Chromium.

ResizeObserver

Śledzenie zmian rozmiaru elementu może być uciążliwe. Najprawdopodobniej dodasz detektor do zdarzenia resize dokumentu, a potem wywołasz metodę getBoundingClientRect lub getComputedStyle. Obydwa rozwiązania mogą jednak powodować przerysowanie układu.

A co, jeśli rozmiar okna przeglądarki się nie zmienił, ale do dokumentu dodano nowy element? A może dodałeś(-aś) display: none do elementu? Oba te elementy mogą zmieniać rozmiar innych elementów na stronie.

ResizeObserver informuje o każdej zmianie rozmiaru elementu i podaje jego nową wysokość i szerokość, co zmniejsza ryzyko niestabilności układu.

Podobnie jak w przypadku innych obserwatorów, użycie tego narzędzia jest całkiem proste. Utworzenie obiektu ResizeObserver i przekazanie wywołania zwrotnego do konstruktora jest bardzo proste. Wywołanie zwrotne otrzyma tablicę o wartości ResizeOberverEntries – po 1 wpisie na obserwowany element, który zawiera nowe wymiary elementu.

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);

Więcej informacji i przykładów znajdziesz w artykule ResizeObserver: document.onresize dla Elementów.

Nie cierpię kart pod spodem. Znasz je, gdy strona otwiera wyskakujące okienko z przekierowaniem do jakiegoś miejsca i przechodzi do tej strony. Zazwyczaj jedna z nich to reklama lub coś, czego nie chcesz.

Od wersji 64 Chrome takie przejścia będą blokowane, a przeglądarka będzie wyświetlać użytkownikowi część natywnego interfejsu, aby umożliwić mu przejście na inną stronę, jeśli zechce.

import.meta

Podczas pisania modułów JavaScripta często potrzebny jest dostęp do metadanych dotyczących bieżącego modułu, które są specyficzne dla hosta. Chrome 64 obsługuje teraz właściwość import.meta w modułach i wyświetla adres URL modułu jako import.meta.url.

Jest to bardzo przydatne, gdy chcesz rozwiązać zasoby w powiązaniu z pliku modułu, a nie bieżącego dokumentu HTML.

I inne funkcje

To tylko kilka z wielu zmian w Chrome 64 dla deweloperów.

  • Chrome obsługuje teraz nazwane uchwyty i znaki ucieczki właściwości Unicode w wyrażeniach regularnych.
  • Domyślna wartość preload dla elementów <audio> i <video> to teraz metadata. Dzięki temu Chrome będzie działać tak samo jak inne przeglądarki i pomoże zmniejszyć wykorzystanie przepustowości i zasobów, wczytując tylko metadane, a nie same multimedia.
  • Za pomocą Request.prototype.cache możesz teraz wyświetlać tryb pamięci podręcznej Request i ustalać, czy żądanie to żądanie ponownego załadowania.
  • Dzięki interfejsowi Focus Management API możesz teraz ustawić element w centrum bez przewijania za pomocą atrybutu preventScroll.

window.alert()

Jeszcze jedno. Chociaż nie jest to „funkcja dla deweloperów”, cieszy mnie to. window.alert() nie powoduje już wyświetlenia karty w tle na pierwszym planie. Zamiast tego alert będzie wyświetlany, gdy użytkownik przełączy się na tę kartę.

Nie ma już przypadkowego przełączania kart, ponieważ coś wywołało u mnie window.alert. Widzę Twój stary Kalendarz Google.

Zasubskrybuj nasz kanał w YouTube, aby otrzymywać e-maile z powiadomieniami o publikowaniu nowych filmów.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 65 opowiem Ci, co nowego w tej wersji przeglądarki.