Testowanie origin dla składanych interfejsów API

Alexis Menard

Thomas Steiner

Chrome testuje 2 interfejsy API: Device Posture API i segmenty Viewport Interfejs Enumeration API dostępny w Chrome w ramach testowania origin. 125) Znane są jako składane interfejsy API, które powstały po to, dla deweloperów korzystających z urządzeń składanych. W tym poście omówimy te interfejsy API. zawiera informacje o tym, jak rozpocząć ich testowanie.

Istnieją głównie 2 różne formaty fizyczne: urządzenia z pojedynczym urządzeniem elastyczny ekran (bezproblemowy) oraz urządzenia z dwoma ekranami (z połączeniami, znane jako urządzenia Dual Screen).

Takie urządzenia wiążą się z wyzwaniami i szansami dla programistów. Oferuje na dodatkowe sposoby wyświetlania treści. Na przykład użytkownik może mieć urządzenie, które działa jak książka, a potem zmienia się w tablet. płaski ekran. Urządzenia z 2 ekranami mają fizyczne połączenie między nimi które mogą wymagać uwzględnienia.

Te nowe interfejsy API dają deweloperom sposoby na zapewnienie lepszej obsługi użytkowników dla tych urządzeń. Każdy interfejs API ujawnia potrzebne podstawowe elementy platformy internetowej w 2 elementach za pomocą CSS i JavaScriptu.

Interfejs Device Posture API

Urządzenia składane mają funkcje, które pozwalają zmienić_ stan urządzenia. fizyczny stan urządzenia. Można zmienić format, dla autorów treści, aby zapewnić użytkownikom inne wrażenia, a nowe interfejsy API by mieć pewność, że treści z internetu mogą reagować na różne stany zwijania.

Urządzenie może mieć 2 stany:

• folded: stan laptopa lub książki.

• continuous: płaski, tablet, a nawet zakrzywiony ekran.

CSS

Specyfikacja interfejsu Device Posture API definiuje nowy kod CSS media-feature – device-posture. Ta funkcja multimediów przyjmuje zestaw stałych stanów. Stany te składają się szeregu wstępnie zdefiniowanych wartości, z których każda obejmuje fizyczny stan urządzenia.

Wartości funkcji device-posture pasują do poprzedniego opisu możliwe stany:

• folded
• continuous

W przyszłości możemy dodać nowe stany, gdy pojawią się na rynku nowe urządzenia.

Przykłady:

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

JavaScript

Aby można było wysłać zapytanie o stan urządzenia, dostępny jest nowy obiekt DevicePosture.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

Aby reagować na zmiany stanu urządzenia, na przykład przez pełne otwarcie urządzenia więc przechodzisz z folded do continuous, subskrybuj change wydarzenia.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

Interfejs API segmentów widocznych obszarów

Segmenty widocznego obszaru to zmienne środowiskowe CSS, które definiują pozycję do wymiarów podzielonego logicznie obszaru widocznego obszaru. Segmenty widocznego obszaru tworzone, gdy widoczny obszar jest podzielony przez co najmniej 1 element sprzętowy (np. lub zawias między osobnymi wyświetlaczami), które pełnią funkcję separatora. Segmenty są obszary widocznego obszaru, które można traktować jako odrębne logicznie przez funkcję autor.

CSS

2 nowe funkcje medialne przedstawiają liczbę podziałów logicznych: zdefiniowane w specyfikacji zapytań o media CSS na poziomie 5: vertical-viewport-segments i horizontal-viewport-segments. Są to: liczbę segmentów, na które dzieli się widoczny obszar.

Dodaliśmy też nowe zmienne środowiskowe, które pozwalają odpytywać wymiary każdego dzielenia logicznego. Te zmienne to:

• env(viewport-segment-width x y)
• env(viewport-segment-height x y)
• env(viewport-segment-top x y)
• env(viewport-segment-left x y)
• env(viewport-segment-bottom x y)
• env(viewport-segment-right x y)

Każda zmienna ma 2 wymiary, które reprezentują położenie na osi x i y, w dwuwymiarowej siatce utworzonej przez funkcje sprzętowe, oddzielając segmenty.

Poniższy fragment kodu to uproszczony przykład podzielonego UX, w którym Na każdej stronie strony widocznej na ekranie są dwie sekcje z treścią (col1 i col2).

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

Poniższe zdjęcia pokazują, jak wygląda strona na urządzeniu fizycznym.

JavaScript

Aby poznać liczbę segmentów widocznego obszaru, sprawdź wpis segments w visualViewport

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

Każda pozycja w tablicy segments odpowiada każdemu segmentowi logicznemu widoczny obszar z opisem DOMArray opisującym współrzędne i rozmiar. segments jest zrzutem stanu danego stanu w momencie wykonania zapytania, co umożliwia otrzymywanie aktualnych informacji musisz nasłuchiwać zmian stanu lub zmiany rozmiaru zdarzeń i ponownie wysyłać zapytania segments.

Wypróbuj składane interfejsy API

Składane interfejsy API są dostępne w próbna origin od Chrome 125 do Chrome 128. Zobacz Pierwsze kroki z testami origin Podstawowe informacje na temat testowania origin.

Na potrzeby testów lokalnych składane interfejsy API można włączyć za pomocą narzędzia Experimental Web. flaga funkcji platformy na chrome://flags/#enable-experimental-web-platform-features Może być też włączone przez uruchomienie Chrome z wiersza poleceń --enable-experimental-web-platform-features

Prezentacje

Aby dowiedzieć się, jak to zrobić, obejrzyj prezentacje . Jeśli nie masz urządzenie fizyczne, na którym chcesz przeprowadzić test, możesz wybrać telefon Galaxy Z Fold 5 lub Asus Zenbook Fold emulował urządzenie w Narzędziach deweloperskich w Chrome i przełączał się między trybem Ciągły i Składany. Możesz też zobaczyć zawias, gdy mają zastosowanie.

Powiązane artykuły

• Interfejs Device Posture API
  • Pozycja w Mozilli
  • Pozycja WebKit
  • Wpis stanu Chrome
  • Specyfikacja W3C
• Viewport Segments API
  • Pozycja w Mozilli
  • Pozycja WebKit
  • Wpis stanu Chrome
  • Specyfikacja zapytań o media CSS W3C oraz Specyfikacja zmiennej środowiskowej CSS W3C