Nowości w Chrome 104

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Mam na imię Pete LePage. Przyjrzyjmy się bliżej nowościom w Chrome 104 dla deweloperów.

Określanie obszaru przycinania za pomocą przechwytywania regionu

getDisplayMedia() umożliwia tworzenie strumienia wideo z bieżącej karty. Czasami jednak nie potrzebujesz całego karty, tylko jego niewielkiej części. Do tej pory jedynym sposobem było ręczne przycinanie każdej klatki filmu.

Dzięki funkcji rejestrowania obszaru aplikacja internetowa może określić konkretny obszar ekranu, który chce udostępnić. Na przykład Prezentacje Google mogą umożliwić pozostanie w standardowym widoku edycji i udostępnienie bieżącego slajdu.

Zrzut ekranu przedstawiający okno przeglądarki z aplikacją internetową, w której wyróżniono główną część treści i element iframe z innej domeny.
Główny obszar treści jest niebieski, a element iframe z innej domeny jest czerwony.

Aby z niej skorzystać, wybierz element do udostępnienia, a potem utwórz nowy element CropTarget na jego podstawie. Następnie rozpocznij udostępnianie ekranu, dzwoniąc na numer getDisplayMedia(). W efekcie użytkownik otrzyma prośbę o udostępnienie ekranu. Następnie wywołaj track.cropTo() i prześlij cropTarget utworzony wcześniej.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Więcej informacji znajdziesz w artykule Udostępnianie kart za pomocą funkcji Region Capture.

Łatwiejsze zapytania o media dzięki składni i ocenie poziomu 4

Zapytania o multimedia są kluczowe dla projektów elastycznych, ponieważ umożliwiają definiowanie konkretnych stylów dla różnych rozmiarów widocznego obszaru. Jednak jeśli nie używasz ich codziennie, składnia może być nieco myląca.

W Chrome 104 dodaliśmy obsługę Zapytania o multimedia – poziom 4 – składnia i ocena, co umożliwia pisanie zapytań o multimedia za pomocą zwykłych operatorów porównania matematycznego.

Zamiast tego, aby wskazać widok w zakresie od 400 do 600 pikseli:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Może ona wyglądać tak:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Poza tym, że zapytania o multimedia są mniej szczegółowe, nowa składnia może też być bardziej precyzyjna. Zapytania min- i max- obejmują również te z wynikiem mieszczącym się w zakresie, np.:min-width: 400px testy o szerokości co najmniej 400 pikseli. Dzięki nowej składni możesz jasno określić, co masz na myśli.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Jest ona już obsługiwana w Firefoxie, a wtyczka PostCSS przepisuje nową składnię na starą, zapewniając zgodność z przeglądarką.

Więcej informacji znajdziesz w artykule Rachel Nowa składnia zapytań o zakres multimediów w Chrome 104.

Przejścia między elementami udostępnionymi rozpoczynają nowy okres próbny

Aplikacje przeznaczone na konkretne platformy zwykle płynnie przechodzą między różnymi widokami, wyglądają atrakcyjnie, zatrzymują użytkownika w kontekście i sprawiają, że korzystanie z aplikacji sprawia wrażenie bardziej wydajnej. W internecie pełna nawigacja może być ostra i czasami oznacza chwilowe wyświetlenie pustego ekranu. W przypadku aplikacji jednostronicowej może to być lepsze rozwiązanie, ale przejścia nadal są trudne.

Przejścia między elementami udostępnionymi, które w ramach nowej wersji próbnej origin w Chrome 104 umożliwiają płynne przejścia, niezależnie od tego, czy dotyczą one różnych dokumentów (np. w aplikacji wielostronicowej), czy też jednego dokumentu (np. w aplikacji jednostronicowej).

Oto przybliżony przykład działania przejść w aplikacji jednostronicowej. W funkcji nawigacji pobierz zawartość nowej strony, a potem sprawdź, czy przejścia są obsługiwane. Jeśli nie, zaktualizuj stronę bez przejścia. Jeśli tak, utwórz obiekt transition() i wywołaj metodę start(), aby powiadomić interfejs API o zakończeniu zmiany DOM.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

Przejścia elementów wspólnych korzystają z animacji CSS, więc możesz zmienić efekt łagodnego przejścia na przesunięcie lub inny.

Właśnie udało mi się odkryć wszystkie potrzebne elementy, więc obejrzyj film Jake'a Bringing Page Migrates to the Web lub zapoznaj się z objaśnieniem.

I inne funkcje

Oczywiście istnieje też znacznie więcej możliwości.

  • Gdy pliki cookie są ustawiane za pomocą jawnego atrybutu Expires lub Max-Age, ich wartość będzie teraz ograniczona do maksymalnie 400 dni.
  • Wprowadziliśmy ulepszenia interfejsu Window Placement API na wiele ekranów.
  • Właściwość CSS overflow-clip-margin określa, jak daleko może się rozciągać zawartość elementu, zanim zostanie przycięta.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby poznać inne zmiany w Chrome 104, kliknij linki poniżej.

Subskrybuj

Zasubskrybuj kanał Chrome Developers w YouTube, aby być na bieżąco z informacjami o nowym filmie. Dzięki temu będziesz otrzymywać e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się nowa wersja Chrome 105, opowiem Ci, co nowego w Chrome.