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ą funkcji przechwytywania regionu

getDisplayMedia() umożliwia tworzenie strumienia wideo z bieżącej karty. Czasami jednak nie potrzebujesz całego karty, tylko jej 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 obszar głównej 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, który chcesz udostępnić, 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 funkcję track.cropTo() i przekaż utworzony wcześniej obiekt cropTarget.

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 multimedia dzięki składni i ocenie na poziomie 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.

Chrome 104 obsługuje zapytania o multimedia – poziom 4 – składnia i ocena, co umożliwia tworzenie zapytań o multimedia przy użyciu zwykłych operatorów porównań matematycznych.

Zamiast tego, aby wskazać widoczny obszar 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. */
}

Nowa składnia pozwala nie tylko skrócić zapytania dotyczące multimediów, ale też zwiększyć ich dokładność. 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. Nowa składnia pozwala na bardziej jednoznaczne określenie tego, 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 na konkretne platformy zwykle mają płynne przejścia między różnymi widokami, wyglądają pięknie, utrzymują kontekst użytkownika i sprzyjają płynniejszemu działaniu. 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.

To tylko wierzchołek góry lodowej, więc obejrzyj film Jake’a Przejścia między stronami w internecie lub przeczytaj artykuł.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • 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 API dotyczącego umieszczania okna na wielu ekranach.
  • 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

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

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