Nowości w Chrome 69

Pete LePage

Od premiery Chrome minęło 10 lat. Od tamtej pory wiele się zmieniło, ale nasz cel stworzenia solidnych podstaw dla nowoczesnych aplikacji internetowych jeszcze się nie zmienił.

W Chrome 69 dodaliśmy obsługę tych funkcji:

  • CSS Scroll Snap umożliwia płynne przewijanie treści.
  • Wycięcie w ekranie umożliwia wykorzystanie całego obszaru ekranu, w tym miejsca za wycięciem w ekranie (czasami nazywanym wycięciem).
  • Interfejs Web Locks API umożliwia asynchroniczne uzyskiwanie blokady, blokowanie jej podczas wykonywania pracy, a następnie jej zwolnienie.

A jest to wiele innych!

Nazywam się Pete LePage. Przyjrzyjmy się, co nowego dla deweloperów w Chrome 69.

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

Przyciąganie przewijanego arkusza CSS

Wyświetl wersję demonstracyjną | Źródło

Przyciąganie przewijania CSS umożliwia płynne przewijanie dzięki deklarowaniu pozycji przesunięcia, które informuje 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 użytkownik ma przewijać strony 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. Następnie podczas przewijania karuzeli każdy obraz płynnie przewija się do idealnej pozycji.


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

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

Przyciąganie przewijane CSS działa dobrze nawet wtedy, gdy miejsca docelowe mają różne rozmiary lub są większe niż przewijany. Więcej informacji oraz przykłady do wypróbowania znajdziesz w poście Well-Controlled Scrolling with CSS Scroll Snap.

Wyświetlaj wycięcia (tzw. wycięcia)

Telefon komórkowy z wycięciem w wyświetlaczu
Przeglądarki dodają dodatkowy margines na urządzeniach mobilnych z wycięciem w ekranie, aby treść nie była zasłonięta przez wycięcie.

Rosnąca liczba urządzeń mobilnych wprowadza do sprzedaży z wycięciem w ekranie (czasem nazywanym wycięciem). Aby rozwiązać ten problem, przeglądarki dodają do strony dodatkowy margines, aby treść nie była zasłonięta.

A jeśli zechcesz skorzystać z takiej przestrzeni?

Teraz jest to możliwe dzięki zmiennym środowiskowym CSS i metatagowi viewport-fit. Jeśli na przykład chcesz, aby przeglądarka rozwijała się do obszaru wycięcia w ekranie, ustaw właściwość viewport-fit w metatagu 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 do 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 ciekawy post na temat projektowania stron internetowych na iPhone'a X. Jeśli chcesz dowiedzieć się więcej, przeczytaj wyjaśnienie.

Interfejs API Web Locks

Interfejs Web Locks API umożliwia asynchroniczne uzyskiwanie blokady, blokowanie jej podczas wykonywania pracy, a następnie jej zwolnienie. Gdy blokada jest zablokowana, żaden inny skrypt w pierwotnym punkcie początkowym nie może uzyskać tej samej blokady, co pomaga koordynować wykorzystanie współdzielonych zasobów.

Jeśli na przykład aplikacja internetowa działająca na wielu kartach chce się upewnić, że z siecią jest synchronizowana tylko jedna karta, kod synchronizacji pró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, na której zostanie dodana blokada, spowoduje synchronizację danych z siecią. Jeśli inna karta spróbuje zastosować tę samą blokadę, zostanie dodana do kolejki. Po zdaniu blokady kolejne żądanie w kolejce zostanie objęte blokadą i zostanie wykonane.

W MDN znajdziesz świetne podsumowanie Web Locks, które zawiera bardziej szczegółowe wyjaśnienie i wiele przykładów. Możesz też dokładniej sprawdzić spec.

…i wiele innych.

To tylko niektóre ze zmian w Chrome 69 dla deweloperów, oczywiście jest ich znacznie więcej.

gradient stożkowy

  • Na podstawie specyfikacji CSS4 możesz teraz tworzyć przejścia kolorów na całym obwodzie koła, używając gradientów stożkowych. Lea Verou ma kod polyfill CSS conic-gradient(), którego możesz użyć, a strona zawiera wiele naprawdę ciekawych przykładów przesłanych przez społeczność.
  • Dostępna jest nowa metoda toggleAttribute() dotycząca elementów, która przełącza istnienie atrybutu, podobnie jak w przypadku classList.toggle().
  • Tablice JavaScript otrzymują 2 nowe metody: flat() i flatMap(). Zwracają nową tablicę ze wszystkimi elementami tablicy podrzędnej.
  • Natomiast OffscreenCanvas przenosi pracę z głównego wątku do instancji roboczej, co pomaga wyeliminować wąskie gardła wydajności.

Ukryte żarty

Czy udało Ci się znaleźć wszystkie żarty z filmu?

Szczególnie dziękujemy wszystkim osobom, które pomogły nam stworzyć 28 odcinków Nowego Chrome. Każda z tych osób jest wspaniała!

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 się dowiedzieć, jak daleko zaszły w Chrome od naszego pierwszego odcinka? Obejrzyj ten zabawny 30-sekundowy film o postępach, który prezentuje naszą historię od pierwszego filmu do dziś.

Oczywiście dziękujemy za oglądanie i przesyłanie komentarzy oraz opinii. Przeczytałam je wszystkie i traktuję Wasze sugestie. Dzięki Tobie te filmy stały się lepsze.

Dziękuję za uwagę.

Nowości we wpadkach Chrome

Przygotowaliśmy dla Ciebie zabawny klip z wpadkami. Po obejrzeniu materiału dowiedziałem się kilku rzeczy:

  • Gdy potykam się o słowa, wydajem dziwne dźwięki.
  • Robię miny i pokazuję język.
  • Bardzo się ruszam.

Zasubskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał dla deweloperów Chrome w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 70, zajmę się tym, co nowego w Chrome.