Nowości w Chrome 69

Pete LePage

Od premiery Chrome minęło 10 lat. Od tego czasu wiele się zmieniło, ale nasz cel, czyli stworzenie solidnej podstawy dla nowoczesnych aplikacji internetowych, pozostał niezmienny.

W Chrome 69 dodaliśmy obsługę:

• CSS Scroll Snap umożliwia tworzenie płynnych i wydajnych przewijanych treści.
• Wycięcia w ekranie umożliwiają korzystanie z całej powierzchni ekranu, w tym miejsca za wycięciem, które czasami nazywa się wcięciem.
• Interfejs Web Locks API umożliwia asynchroniczne pozyskiwanie blokady, utrzymywanie jej podczas wykonywania pracy, a następnie zwalnianie.

A to nie wszystko – to tylko część.

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

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

CSS Scroll Snap

CSS Scroll Snap umożliwia tworzenie płynnych i wygodnych doświadczeń związanych z przewijaniem przez deklarowanie pozycji przyciągania, które informują przeglądarkę, gdzie ma się zatrzymać po każdej operacji przewijania. Jest to bardzo przydatne w przypadku karuzeli obrazów lub stronowanych sekcji, w których chcesz, aby użytkownik przewinął do określonego miejsca.

W przypadku karuzeli obrazów dodaję scroll-snap-type: x mandatory; do kontenera przewijania i scroll-snap-align: center; do każdego obrazu. Gdy użytkownik przewija karuzel, każdy obraz będzie się płynnie przesuwał, aby zajmować odpowiednią pozycję.

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

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

CSS Scroll Snapping działa dobrze nawet wtedy, gdy docelowe punkty zaczepienia mają różne rozmiary lub są większe niż suwak. Aby uzyskać więcej informacji i zobaczyć przykłady, zapoznaj się z artykułem Dobrze kontrolowane przewijanie za pomocą CSS Scroll Snap.

wycięcia w ekranie (tzw. notch);

Wzrasta liczba urządzeń mobilnych, które mają wycięcie w ekranie. Aby temu zaradzić, przeglądarki dodają do strony trochę dodatkowego marginesu, aby treści nie były zasłonięte przez wycięcie.

Ale co, jeśli chcesz korzystać z tej przestrzeni?

Teraz możesz to zrobić za pomocą zmiennych środowiskowych CSS i tagu meta viewport-fit. Aby na przykład poinformować przeglądarkę, że ma wyświetlić obszar wycięcia, w tagu meta viewport ustaw wartość właściwości viewport-fit na cover.

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

Następnie możesz użyć safe-area-inset-* zmiennych środowiskowych CSS do ustawienia układu 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 na iPhone'a X. Więcej informacji znajdziesz w tym objaśnieniu.

Web Locks API

Interfejs Web Locks API umożliwia asynchroniczne pozyskiwanie blokady, utrzymywanie jej podczas wykonywania pracy, a następnie zwalnianie. Podczas blokowania dostępu żaden inny skrypt w pochodzeniu nie może uzyskać tej samej blokady, co pomaga koordynować korzystanie ze wspólnych zasobów.

Jeśli np. aplikacja internetowa działająca na wielu kartach chce mieć pewność, że tylko jedna karta będzie synchronizowana 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. Gdy blokada zostanie zwolniona, następna prośba w kolejce uzyska dostęp do blokady i zostanie wykonana.

MDN udostępnia świetny wstęp do tematu blokad internetowych, który zawiera bardziej szczegółowe wyjaśnienia i liczne przykłady. Możesz też zapoznać się ze szczegółami.

I inne funkcje

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

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

Pisanki

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

• Komiks o Chrome
• Chromercise bands
• Ziemniaczana wyrzutnia
• Pete Monster
• Drewniany dinozaur z CDS 2017

Szczególne podziękowania dla wszystkich, którzy pomogli nam w zrealizowaniu 28 odcinków 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 wiele zmieniło się w New in Chrome od pierwszego odcinka? Obejrzyj ten zabawny 30-sekundowy film o rozwoju, który przedstawia naszą historię od pierwszego filmu do dziś.

I oczywiście dziękujemy Tobie za oglądanie, komentarze i opinie. Czytam wszystkie komentarze i uważnie przyglądam się Waszym sugestiom. Dzięki Wam te filmy są lepsze.

Dziękujemy za obejrzenie filmu.

Nowości w Chrome Bloopers

Przygotowaliśmy dla Ciebie zabawny film z błędami. Po obejrzeniu filmu dowiedziałem się kilku rzeczy:

• Gdy się potykam, wydaję dziwne dźwięki.
• Robię miny i wysuwam język.
• Węży, bardzo.

Subskrybuj

Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy opublikujemy nowy film.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 70 opowiem Ci o nowościach w tej przeglądarce.