Nowości w Chrome 104

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage. Przyjrzyjmy się nowościom dla programistów w Chrome 104.

Określanie obszaru przycinania za pomocą przechwytywania regionu

getDisplayMedia() umożliwia utworzenie strumienia wideo na podstawie bieżącej karty. Czasem jednak nie chcesz mieć całej karty, a jedynie jej niewielki fragment. Do tej pory jedynym sposobem na to było ręczne przycięcie każdej klatki wideo.

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

Zrzut ekranu okna przeglądarki z aplikacją internetową z wyróżnionym głównym obszarem treści i elementem iframe z innych domen.
Główny obszar treści jest niebieski, a element iframe z innych domen – czerwony.

Aby go użyć, wybierz element do udostępnienia, a potem na jego podstawie utwórz nowy obiekt CropTarget. Aby rozpocząć udostępnianie ekranu, zadzwoń pod numer getDisplayMedia(). Spowoduje to wyświetlenie użytkownikowi prośby o zgodę na udostępnienie ekranu. Następnie zadzwoń pod numer track.cropTo() i przekaż utworzony wcześniej 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 na temat lepszego udostępniania kart dzięki funkcji regionalnego zdjęcia.

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

Zapytania o multimedia mają kluczowe znaczenie dla elastycznego projektowania stron, ponieważ umożliwiają definiowanie konkretnych stylów dla różnych rozmiarów widocznego obszaru. Ale jeśli nie będziesz ich używać codziennie, ich składnia może być nieco skomplikowana.

W Chrome 104 dodaliśmy obsługę zapytań o multimedia – poziom 4 – składnia i ocena, co umożliwia pisanie zapytań o multimedia przy użyciu zwykłych matematycznych operatorów porównania.

Zamiast np. wskazywać widoczny obszar między 400 a 600 pikseli:

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

Może ono brzmieć w ten sposób:

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

Zapytania o media nie tylko stają się bardziej szczegółowe, ale też nowa składnia może być bardziej dokładna. Zapytania min- i max- są uwzględniane, np. min-width: 400px testuje wyniki o szerokości 400 pikseli lub większej. Nowa składnia pozwoli Ci precyzyjniej to zrozumieć.

@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 on już obsługiwany w Firefoksie. Dostępna jest też wtyczka PostCSS, która przepisuje nową składnię na starą składnię, co zapewnia zgodność z przeglądarkami.

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

Rozpoczęcie nowego testowania origin elementów udostępnionych

Aplikacje na danej platformie zwykle płynnie przełączają się między różnymi widokami, pięknie prezentują się na tle innych i zapewniają użytkownikowi odpowiedni kontekst, a także sprawiają, że wrażenia użytkownika są przyjemniejsze. Z kolei w internecie pełna nawigacja jest trudna i czasem może oznaczać chwilowy pusty ekran. W przypadku aplikacji na jednej stronie może być lepiej, ale przejścia są trudne.

Udostępniane przenoszenie elementów rozpoczyna nowy okres próbny źródła w Chrome 104 i pozwala zapewnić płynne przejścia niezależnie od tego, czy mają one postać w różnych dokumentach (np. w aplikacji wielostronicowej) czy w obrębie dokumentu (np. w aplikacji na jednej stronie).

Oto ogólny przykład przenoszenia aplikacji składającej się z pojedynczej strony. W funkcji nawigacji pobierz nową treść strony i sprawdź, czy obsługiwane są przejścia. Jeśli nie, zaktualizuj stronę bez przejścia. Jeśli tak, utwórz obiekt transition() i wywołaj dla niego start(), aby poinformować 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));
}

{/1}Wspólne przejścia elementów korzystają z animacji CSS, dzięki czemu możesz np. przejść z efektu zanikania, na wsunięcie elementu lub w dowolny inny sposób.

Zajrzyj do filmu Jake'a Bringing Page Transitions to the Web (Bringing Page Transitions to the Web) lub zapoznaj się z objaśnieniem.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Gdy pliki cookie są ustawione z jawnym atrybutem Expires lub Max-Age, wartość nie zostanie teraz ograniczona do maksymalnie 400 dni.
  • Wprowadziliśmy ulepszenia w interfejsie API rozmieszczania okien na wiele urządzeń.
  • Właściwość CSS overflow-clip-margin określa, na jak daleko można wyrenderować treść elementu przed przycięciem.

Więcej informacji

To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 104.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 105, będę informować Cię o nowościach w Chrome.