Nowości w Chrome 64

A to wiele innych!

Nazywam się Pete LePage. Przyjrzyjmy się nowościom dla deweloperów w Chrome 64.

Chcesz poznać pełną listę zmian? Sprawdź listę zmian repozytorium źródłowego Chromium.

ResizeObserver

Śledzenie, kiedy zmienia się rozmiar elementu, może być kłopotliwe. Najprawdopodobniej do zdarzenia resize dołączysz odbiornik, a potem wywołasz metodę getBoundingClientRect lub getComputedStyle. Jednak oba te elementy mogą przytłaczać układ.

A co, jeśli okno przeglądarki się nie zmieni, ale do dokumentu zostanie dodany nowy element? Czy możesz dodać display: none do elementu? Mogą one zmieniać rozmiar innych elementów na stronie.

ResizeObserver powiadamia Cię o każdej zmianie rozmiaru elementu oraz podaje nową wysokość i szerokość elementu, co zmniejsza ryzyko odrzucenia układu.

Podobnie jak w przypadku innych obserwatorów, użycie tej funkcji jest proste – wystarczy utworzyć obiekt ResizeObserver i przekazać do niego wywołanie zwrotne. Wywołanie zwrotne otrzyma tablicę ResizeOberverEntries, czyli 1 wpis na zaobserwowany element, który będzie 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 praktyczne przykłady znajdziesz w artykule ResizeObserver: Jest to jak document.onresize dla elementów.

Nienawidzę tabulatorów. Pewnie już wiesz, że chodzi o otwarcie wyskakującego okienka z miejsca docelowego i poruszanie się po stronie. Zazwyczaj jedna z nich to reklama lub coś, czego nie chcesz.

Od wersji Chrome 64 tego typu opcje nawigacyjne będą blokowane, a Chrome będzie wyświetlać użytkownikowi natywny interfejs, który pozwoli mu skorzystać z przekierowania, jeśli zechce.

import.meta

Pisząc moduły JavaScript, często chcesz mieć dostęp do związanych z hostem metadanych bieżącego modułu. 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ązywać problemy dotyczące zasobów względem pliku modułu, a nie bieżącego dokumentu HTML.

…i wiele innych.

To tylko kilka z wielu zmian, jakie pojawią się w Chrome 64 dla deweloperów, oczywiście czeka na nich jeszcze wiele innych.

  • Chrome obsługuje teraz z nazwami zapisy i zmiany znaczenia 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 współpracuje z innymi przeglądarkami oraz zmniejsza przepustowość i wykorzystanie zasobów, ponieważ wczytuje się tylko metadane, a nie multimedia.
  • Teraz możesz użyć Request.prototype.cache, aby wyświetlić tryb pamięci podręcznej Request i sprawdzić, czy żądanie dotyczy ponownego załadowania.
  • Za pomocą interfejsu Focus Management API możesz teraz zaznaczyć element bez przewijania za pomocą atrybutu preventScroll.

window.alert()

I jeszcze jedno! To nie jest „funkcja dla programistów”, ale jestem szczęśliwa. window.alert() nie wyświetla już karty w tle na pierwszym planie. Zamiast tego alert zostanie wyświetlony, gdy użytkownik wróci do tej karty.

Koniec losowego przełączania kart, ponieważ coś uruchomiło na mnie window.alert. Patrzę na stary Kalendarz Google.

Zasubskrybuj nasz kanał w YouTube, a za każdym razem, gdy udostępnimy nowy film, otrzymasz e-maila z powiadomieniem.

Jestem Pete LePage i jak tylko pojawi się Chrome 65, dam Ci znać, co nowego w Chrome.