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 pozwala tworzyć płynne i przewijane treści.
  • Wycięcia w ekranie umożliwiają wykorzystanie całego obszaru ekranu, łącznie z miejscem za wycięciem w ekranie, czasem nazywanym wycięciem.
  • Interfejs Web Locks API umożliwia asynchroniczne uruchamianie blokady, wstrzymywanie jej podczas wykonywania pracy i jej zwalnianie.

I wiele innych.

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

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

Przyciąganie przewijania CSS

Wyświetl demonstrację | Źródło

CSS Scroll Snap umożliwia tworzenie płynnych i wygodnych doświadczeń przewijania przez deklarowanie pozycji przewijania, które informują przeglądarkę, gdzie zatrzymać się 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ł do odpowiedniej pozycji.


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

telefon komórkowy z wycięciem w ekranie
Przeglądarki dodają dodatkowy margines na urządzeniu mobilnym z wycięciem w ekranie, aby treści nie były zasłonięte przez wycięcie.

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

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 na przykład aplikacja internetowa działająca na wielu kartach chce mieć pewność, że z siecią synchronizowana jest tylko jedna karta, kod synchronizacji będzie próbował 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.

gradient stożkowy

  • 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ępnia CSS conic-gradient() polyfill, 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 niespodzianki w filmie?

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ś.

Oczywiście dziękuję za uwagę oraz za opinie i komentarze. 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 gafami. 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 nasz kanał w YouTube dla deweloperów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 70, opowiem Ci, co nowego w tej wersji.