- Obsługa
ResizeObservers
powiadomi Cię o zmianie rozmiaru prostokąta treści w elemencie. - Moduły mogą teraz uzyskiwać dostęp do określonych metadanych za pomocą metody import.meta.
- Funkcja blokowania wyskakujących okienek działa coraz lepiej.
window.alert()
nie zmienia już zaznaczenia.
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.
Ulepszone blokowanie wyskakujących okienek
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 terazmetadata
. 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ęcznejRequest
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.