Interoperacyjność 2023: ciągłe ulepszanie internetu z myślą o deweloperach

W 2023 r. wszyscy główni dostawcy przeglądarek i inne zainteresowane osoby wspólnie pracują nad rozwiązaniem najczęstszych problemów ze zgodnością przeglądarek.

W 2023 roku wszyscy główni dostawcy przeglądarek i inne zainteresowane osoby ponownie zaczną współpracować, aby rozwiązać najczęstsze problemy ze zgodnością przeglądarek. Podjęliśmy działania na taką skalę, korzystając z narzędzia Interop 2022. Informacje o tym, co osiągnęliśmy razem, można sprawdzić w tym poście na koniec roku. Wszystkie osoby biorące udział w ankiecie sądzi, że pomoże to usprawnić pracę deweloperom stron internetowych na całym świecie. W tym roku po raz pierwszy publicznie ogłosiliśmy proces składania ofert pakietowych i otrzymaliśmy wiele świetnych sugestii od platform, dużych firm, dostawców przeglądarek i deweloperów z całego świata.

Obszary, na których warto się skoncentrować w 2023 roku

Tym razem skupiliśmy się na co najmniej 26 obszarach, które zostały szczegółowo opisane w naszym dokumencie projektu. Zostały one w kolejności alfabetycznej:

Szczegółowe informacje na temat każdego z najważniejszych obszarów znajdziesz w sekcji Web Platform Tests (Testy platformy internetowej) opartej na Dokumentach internetowych MDN. Oto kilka przykładów, które naszym zdaniem mogą Cię zainteresować.

Zapytania kontenera

Zapytania dotyczące kontenerów to najczęstsze prośby deweloperów od wielu lat, a w 2022 r. wprowadziliśmy je w przeglądarkach Chrome i Safari. Przeglądarka Firefox oczekuje, że w przeglądarce Firefox w wersji 110 będą przesyłane zapytania dotyczące kontenerów, a testy w tym obszarze pomogą się upewnić, że zapytania dotyczące kontenerów działają poprawnie w różnych przeglądarkach i zgodnie ze specyfikacją.

:zawiera(...)

Deweloperzy od dawna prosili o wprowadzenie selektora nadrzędnego w CSS. Pseudoklasa :has() umożliwia wiele przypadków użycia selektorów nadrzędnych, a także wybieranie poprzedniego elementu równorzędnego w odniesieniu do elementu referencyjnego. Dzięki temu można na przykład nadać innemu stylowi styl postaci z podpisem niż ten, który nie ma napisów. Więcej informacji o przypadkach użycia has() znajdziesz w funkcji :has(), selektorze rodziny.

Właściwości niestandardowe

Niestandardowe właściwości CSS, nazywane też zmiennymi CSS, umożliwiają zdefiniowanie wartości raz w arkuszu stylów i wykorzystanie jej w wielu miejscach, ograniczając liczbę powtórzeń. Możesz na przykład raz zdefiniować wspólny kolor lub rozmiar czcionki w arkuszu stylów i stosować go do wszystkich komponentów. Podstawowa obsługa właściwości niestandardowych jest dostępna w przeglądarkach już od dawna. Interakcja w 2023 r. koncentruje się na @property. @property reprezentuje w arkuszu stylów rejestrację właściwości niestandardowej, co umożliwia sprawdzanie typu właściwości, ustawianie wartości domyślnych oraz określanie, czy właściwość powinna dziedziczyć wartości. Więcej informacji znajdziesz w artykule @property: przyznawanie supermoców zmiennym CSS.

Maskowanie CSS

Maskowanie CSS zapewnia metody stosowania efektów graficznych, np. widocznych w aplikacji graficznej, przy użyciu CSS. Obsługa różnych właściwości maskowania jest zmienna, przez co maskowanie jest trudniejsze w użyciu, niż powinno. Ten obszar pomoże deweloperom bezpiecznie korzystać z efektów kreacji w różnych przeglądarkach. Więcej informacji o stosowaniu efektów do obrazów znajdziesz w tym artykule o maskowaniu obrazów.

OffscreenCanvas

Elementy <canvas> i interfejs API Canvas umożliwiają wyświetlanie grafiki na ekranie za pomocą skryptów. Może to jednak spowodować problemy z wydajnością, ponieważ praca będzie wykonywane w tym samym wątku co interakcja użytkownika. OffscreenCanvas oferuje programistom obiekt canvas, który nie jest połączony z DOM i interfejsem Canvas API. Programiści mogą też uruchamiać zadania renderowania w Web Worker, niezależnie od wątku głównego. Dowiedz się więcej o korzyściach z wydajności aplikacji OffscreenCanvas.

Zdarzenia wskaźnika i myszy

Zdarzenia wskaźnika są wywoływane podczas interakcji ze stroną za pomocą myszy, pióra, rysika lub ekranu dotykowego. Zdarzenia związane z użyciem myszy są wywoływane przy użyciu myszy, ale z powodów historycznych także w przypadku dotyku. Ten obszar dotyczy interakcji wskaźnika i myszy ze stronami, w tym sposobu interakcji z obszarami testowania trafienia i przewijania. W 2023 r. nie będziemy skupiać się na dotyku i rysiku, ponieważ w tym zakresie nie ma Testów platformy internetowej.

WebCodecs

Interfejs WebCodecs API zapewnia programistom metody uzyskiwania dostępu do poszczególnych klatek filmu i fragmentów dźwięku. Daje dostęp do kodeków, które są już dostępne w przeglądarce, oraz różnych interfejsów do interakcji z nimi. Z artykułu Przetwarzanie filmów za pomocą WebCodecs dowiesz się, jak za pomocą interfejsu API dekodować i renderować poszczególne klatki w obszarze roboczym.

Komponenty sieciowe

Komponenty internetowe to ogólny termin określający wiele technologii używanych do tworzenia komponentów wielokrotnego użytku, takich jak elementy niestandardowe i model Shadow DOM. Interoperacyjność 2023 będzie koncentrować się na poprawie interoperacyjności tych podstawowych technologii.

Panel

Śledź postępy w ciągu roku w panelu Interop 2023, gdzie możesz sprawdzać aktualne wyniki i stan realizacji tych zadań we wszystkich głównych wyszukiwarkach.

Ogólne wyniki interakcji: 62, analizy zagrożeń: 0, wyniki na przeglądarkę – 86 w przeglądarce Chrome i Edge – 74, a w przeglądarce Safari 86.
The Interop 2023 Dashboard (zrzut ekranu z 31 stycznia 2023 r.).

Wyniki z obszaru głównego są obliczane na podstawie współczynników zdawalności. Jeśli chcesz przekazać nam swoją opinię lub pomóc w ulepszeniu WPT, zgłoś problem z prośbą o zaktualizowanie zestawu testów używanych do punktacji.

Lista wszystkich obszarów aktywności, wraz z wynikami dotyczącymi przeglądarek i ogólnym wynikiem interoperacyjności
Wszystkie aktywne obszary i ich ogólny wynik interoperacyjności.

Więcej informacji o Interoperacyjności Google 2023