Nowości w Chrome 69

Pete LePage

Od premiery Chrome minęło już 10 lat. Od tego czasu wiele się zmieniło, ale nasz cel, jakim jest stworzenie solidnych podstaw dla nowoczesnych aplikacji internetowych, pozostał ten sam.

W Chrome 69 dodaliśmy obsługę:

  • CSS Scroll Snap umożliwia tworzenie płynnych i efektownych efektów przewijania.
  • Wycięcia w ekranie pozwalają wykorzystać całą powierzchnię ekranu, w tym przestrzeń za wycięciem, czasami nazywanym wcięciem.
  • Web Locks API umożliwia asynchroniczne uzyskiwanie blokady, utrzymywanie jej podczas wykonywania pracy, a następnie zwalnianie.

A to nie wszystko.

Mam na imię Pete LePage. Sprawdźmy, co nowego w Chrome 69 czeka na deweloperów.

Chcesz poznać pełną listę zmian? Zapoznaj się z listą zmian w repozytorium kodu źródłowego Chromium.

CSS Scroll Snap

CSS Scroll Snap umożliwia tworzenie płynnych i efektownych efektów przewijania przez deklarowanie pozycji przyciągania przewijania, które informują przeglądarkę, gdzie ma się zatrzymać po każdej operacji przewijania. Jest to bardzo przydatne w przypadku karuzel obrazów lub sekcji podzielonych na strony, w których chcesz, aby użytkownik przewinął do określonego punktu.

W przypadku karuzeli obrazów dodam scroll-snap-type: x mandatory; do kontenera przewijania, a scroll-snap-align: center; do każdego obrazu. Następnie, gdy użytkownik przewija karuzelę, każdy obraz jest płynnie przewijany do idealnej pozycji.


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

Przyciąganie przewijania CSS działa dobrze, nawet gdy elementy docelowe przyciągania mają różne rozmiary lub są większe niż element przewijany. Więcej informacji i przykłady, które możesz wypróbować, znajdziesz w poście Well-Controlled Scrolling with CSS Scroll Snap (Dobrze kontrolowane przewijanie za pomocą funkcji przyciągania przewijania CSS).

Wycięcia w ekranie (tzw. notche)

telefon komórkowy z wycięciem w ekranie,
Przeglądarki dodają dodatkowy margines na urządzeniu mobilnym z wycięciem na wyświetlaczu, aby zapobiec zasłanianiu treści przez wycięcie.

Na rynku pojawia się coraz więcej komórek z wycięciem na wyświetlaczu, czasami nazywanym wcięciem. Aby temu zapobiec, przeglądarki dodają do strony niewielki dodatkowy margines, dzięki czemu treść nie jest zasłonięta przez wycięcie.

A jeśli chcesz skorzystać z tej przestrzeni?

Dzięki zmiennym środowiskowym CSS i tagowi meta viewport-fit możesz to zrobić. Jeśli na przykład chcesz poinformować przeglądarkę, że ma rozszerzyć obszar wycięcia na wyświetlaczu, ustaw wartość właściwości viewport-fit w tagu meta viewport na cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Następnie możesz użyć safe-area-inset-* zmiennych środowiskowych CSS, aby określić układ treści.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Na blogu WebKit znajdziesz świetny post na temat projektowania witryn pod kątem iPhone'a X. Więcej informacji znajdziesz też w tym wyjaśnieniu.

Web Locks API

Web Locks API umożliwia asynchroniczne uzyskanie blokady, utrzymanie jej podczas wykonywania pracy, a następnie zwolnienie. Gdy blokada jest aktywna, żaden inny skrypt w źródle nie może uzyskać tej samej blokady, co pomaga koordynować korzystanie z zasobów wspólnych.

Jeśli na przykład aplikacja internetowa działająca w kilku kartach chce mieć pewność, że tylko jedna karta synchronizuje się z siecią, kod synchronizacji spróbuje uzyskać blokadę o nazwie network_sync_lock.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

Pierwsza karta, która uzyska blokadę, zsynchronizuje dane z siecią. Jeśli inna karta spróbuje uzyskać tę samą blokadę, zostanie umieszczona w kolejce. Po zwolnieniu blokady następna w kolejce prośba otrzyma blokadę i zostanie wykonana.

MDN ma świetny wprowadzenie do interfejsu Web Locks, które zawiera bardziej szczegółowe wyjaśnienie i wiele przykładów. Możesz też zagłębić się w szczegóły i zapoznać się ze specyfikacją.

I wiele więcej!

To tylko kilka zmian w Chrome 69 dla deweloperów. Oczywiście jest ich znacznie więcej.

gradient stożkowy,

  • Zgodnie ze specyfikacją CSS4 możesz teraz tworzyć przejścia kolorów wokół obwodu koła za pomocą gradientów stożkowych. Lea Verou ma polyfill CSS conic-gradient(), którego możesz użyć. Na stronie znajdziesz też wiele ciekawych przykładów przesłanych przez społeczność.
  • W elementach jest nowa metoda toggleAttribute(), która przełącza istnienie atrybutu, podobnie jak classList.toggle().
  • Tablice JavaScript zyskują 2 nowe metody: flat() i flatMap(). Zwracają one nową tablicę ze wszystkimi elementami podtablicy.
  • OffscreenCanvas przenosi pracę z głównego wątku do instancji roboczej, co pomaga wyeliminować wąskie gardła wydajności.

Pisanki

Czy udało Ci się znaleźć wszystkie jajka wielkanocne w filmie?

Specjalne podziękowania dla wszystkich osób, które pomogły w przygotowaniu 28 odcinków serii Nowości w Chrome. Każda z tych osób jest niesamowita!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Chcesz zobaczyć, jak bardzo zmienił się program Nowości w Chrome od pierwszego odcinka? Obejrzyj ten zabawny 30-sekundowy film o naszym rozwoju, który przedstawia naszą historię od pierwszego filmu do dziś.

I oczywiście dziękujemy Ci za oglądanie i przesyłanie komentarzy oraz opinii. Czytam wszystkie i biorę sobie do serca Twoje sugestie. Te filmy są coraz lepsze dzięki Tobie.

Dziękujemy za obejrzenie.

Nowości w Chrome – wpadki

Przygotowaliśmy dla Ciebie zabawną kompilację wpadek. Po obejrzeniu tego filmu dowiedziałem się kilku rzeczy:

  • Gdy się zacinam, wydaję dziwne dźwięki.
  • Robię miny i pokazuję język.
  • Często się wiercę.

Subskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj nasz kanał dla deweloperów Chrome w YouTube. Będziesz otrzymywać powiadomienia e-mail o każdym nowym filmie.

Jestem Pete LePage i jak tylko Chrome 70 zostanie wydany, od razu powiem Ci, co nowego w Chrome.