Po raz pierwszy wszyscy ważni dostawcy przeglądarek i inne zainteresowane osoby wspólnie rozwiązali najczęstsze problemy ze zgodnością przeglądarek zidentyfikowane przez programistów internetowych. Interakcja 2022 ułatwi tworzenie aplikacji internetowych na 15 kluczowych obszarach. Z tego artykułu dowiesz się, jak do tego doszło, na czym polega projekt, jak będzie mierzony sukces i jak możesz śledzić postępy.
Wszystko zaczęło się w 2019 r.
W 2019 roku Mozilla, Google i inni przedsiębiorcy podjęli duże wysiłki w celu zrozumienia problemów, z jakimi borykają się deweloperzy. Materiały te polegały na ankietach MDN dla deweloperów i szczegółowym raporcie zgodności przeglądarek. Raporty te dostarczyły szczegółowych i przydatnych informacji, które pomogły nam sprostać najważniejszym wyzwaniom, jakie stoją przed deweloperami korzystającymi z platformy internetowej, oraz doprowadziło do wysiłku Compat 2021.
Z kolei kampania Compat 2021 stworzyła solidne podstawy dla zaawansowanych funkcji, takich jak siatka CSS (12% wykorzystania i stopniowy wzrost) i CSS flexbox (77% wykorzystania), w tym właściwość gap w flexbox, która eliminuje główny problem deweloperów przy wdrażaniu nowych metod układu.
Z przyjemnością osiągnęliśmy wynik powyżej 90% we wszystkich wdrożeniach pod koniec 2021 r.
Czym jest Interop 2022?
Interop 2022 to test porównawczy, uzgodniony przez przedstawicieli 3 głównych implementacji przeglądarek i opracowany w ramach procesu nominacji publicznej oraz weryfikacji z opiniami darczyńców Apple, Bocoup, Google, Igalia, Microsoft i Mozilla.
Test porównawczy skupia się na 15 obszarach, które deweloperzy uznają za szczególnie kłopotliwe, gdy ich brakuje lub gdy występują problemy ze zgodnością w różnych przeglądarkach. Wszyscy dostawcy przeglądarek zgodzili się skupić na tych obszarach, a każdy zaangażowany w ten proces z niecierpliwością czeka na rozpoczęcie pracy nad realizacją procesu tworzenia aplikacji internetowych.
15 obszarów, na których się skupiamy
W ramach Interop w 2022 r. skupiamy się na tych funkcjach. Obejmują one 10 nowych obszarów i 5 obszarów przeniesionych z komunikacji Compat z 2021 r. Nowe obszary, na których się skupiamy, to:
Kaskadowe warstwy
Warstwy kaskadowe zapewniają programistom stron internetowych większą kontrolę nad kaskadą. Umożliwiają grupowanie selektorów w warstwy, z których każda ma odrębną specyfikę. Oznacza to, że nie musisz dokładnie ustalać kolejności selektorów ani tworzyć bardzo szczegółowych selektorów, aby zastępować podstawowe reguły CSS.
Przestrzenie kolorów i funkcje CSS kolorów
Aby używać funkcji kolorów w systemie projektowania, obecnie trzeba polegać na wartościach HSL, Sass, PostCSS lub calc(). Wbudowane w kod CSS funkcje kolorów pozwalają na dynamiczne aktualizowanie kolorów, a nowe przestrzenie kolorów likwidują ograniczenia gamy sRGB i powodów związanych z HSL.
Na poziomie kolorów CSS 5 zdefiniowane są 2 funkcje, które umożliwiają bardziej dynamiczne ustalanie motywów na platformie internetowej:
color-mix(): pobiera 2 kolory i zwraca wynik ich wymieszania w określonej przestrzeni kolorów o określoną ilość.color-contrast(): umożliwia wybranie z listy kolorów o najwyższym kontraście do jednego z określonych kolorów.
Te funkcje obsługują rozszerzone przestrzenie kolorów (LAB, LCH i P3). Oprócz HSL i sRGB domyślnie korzystają z jednolitej przestrzeni kolorów LCH.
Nowe jednostki widocznego obszaru
Problemy z określaniem rozmiaru widocznego obszaru są widoczne zarówno w Raporcie zgodności z przeglądarkami MDN z 2020 r., jak i w nowej ankiecie State of CSS 2021. Wartości CSS i jednostki na poziomie 4 – dodaje nowe jednostki dla największych, najmniejszych i dynamicznych rozmiarów widocznego obszaru – lv*, sv* i dv*. Te jednostki ułatwiają tworzenie układów, które wypełniają widoczny widoczny obszar na urządzeniach mobilnych, uwzględniając pasek adresu.
Dodatkowo zespół różnych dostawców, który odpowiada za Interop 2022, będzie współpracować nad badaniem i poprawieniem interoperacyjności dotychczasowych funkcji pomiaru widocznego obszaru, w tym istniejącej jednostki vh.
Przewijanie
Raport z ankiety na temat przewijania w 2021 r. potwierdza, że trudno jest wdrożyć funkcje przewijania i zgodność z przewijaniem, a w wielu obszarach trzeba wprowadzić ulepszenia. Skupimy się na przyciąganiu przewijania, działaniu podczas przewijania i nadmiarowym przewijaniu, aby zapewnić większą spójność i płynność przewijania na różnych platformach.
Sprawdzamy też nowe propozycje funkcji przyciągania przewijaniem.
Podsiatka
Wartości subgrid grid-template-columns i grid-template-rows oznaczają, że element siatki, który ma zastosowanie display: grid, może dziedziczyć definicję ścieżki z części siatki nadrzędnej, nad którą jest umieszczony.
Na przykład w tych 3 komponentach nagłówek i stopka są wyrównane z sąsiednimi nagłówkami i stopkami karty, mimo że każda karta ma niezależną siatkę. Ten wzorzec działa, ponieważ każda karta jest elementem, który obejmuje 3 wiersze siatki nadrzędnej, a następnie korzysta z siatki podrzędnej do dziedziczenia tych wierszy na karcie.
Również uwzględnione
- Kontener CSS (właściwość
contain) - Element
<dialog> - Elementy sterujące formularza
- Typografia i kodowanie: w tym
font-variant-alternates,font-variant-position, jednostkaici kodowanie tekstu CJK - raport Web Compat, który koncentruje się na różnicach między przeglądarkami powodującymi problemy ze zgodnością witryny mające wpływ na użytkowników
W wymienionych poniżej obszarach udało się osiągnąć znaczny postęp w ramach projektu Compat 2021, ale można jeszcze coś poprawić. Uwzględniliśmy je w narzędziu Interop 2022, aby umożliwić rozwiązanie pozostałych problemów.
- Format obrazu
- Flexbox
- Siatka
- Pozycjonowanie przyklejone
- Transformacje
Postępowania wyjaśniające
Oprócz 15 głównych obszarów interoperacyjności z 2022 r. w ramach interakcji z nimi uwzględniono 3 działania związane z analizą zagrożeń. Są to obszary wymagające poprawy, ale obecny stan specyfikacji lub testów nie jest jeszcze wystarczająco dobry, aby można było ocenić postępy na podstawie wyników testów:
- Edytowanie,
contenteditableiexecCommand - Zdarzenia wskaźnika i myszy
- Pomiar widocznego obszaru
Dostawcy przeglądarek i inne zainteresowane osoby będą współpracować nad ulepszaniem testów i specyfikacji w tych obszarach, aby mogli zostać uwzględnieni w kolejnych iteracjach.
Pomiar skuteczności i śledzenie postępów
Do śledzenia postępów w 15 głównych obszarach będziemy używać dotychczasowego panelu testowania platformy internetowej. W przypadku każdego obszaru zidentyfikowano zestaw testów. Przeglądarki są następnie oceniane w ramach tych testów, otrzymując ocenę za każdy obszar i ocenę ogólną dla wszystkich 15 obszarów.
Aby śledzić postępy i postępy, zaglądaj do panelu Interrop 2022. W ciągu roku możesz śledzić postępy na tej platformie i zobaczyć, jak rozwija się Twoja platforma.
Co to oznacza dla deweloperów?
Celem tych wieloletnich wysiłków w zakresie interoperacyjności, takich jak Compat 2021, Interop 2022 i wiele innych, jest pełne zrozumienie i rozwiązanie problemów, z którymi deweloperzy doświadczają od wielu lat. Nie jest to wysiłek związany z jedną przeglądarką, lecz silną współpracą między wszystkimi głównymi dostawcami przeglądarek i znajomymi nad udoskonaleniem całej platformy internetowej.
Zasadniczo celem jest zwiększenie użyteczności i niezawodności platformy internetowej dla deweloperów, aby mogli oni poświęcić więcej czasu na tworzenie świetnych rozwiązań internetowych, a nie na obsługę niespójności w przeglądarkach.
Powiedz nam, co myślisz
Chętnie poznamy Twoją opinię na temat ulepszeń wprowadzonych w Compat 2021 lub dowolnych funkcji wchodzących w skład Interop 2022. Która z tych funkcji będzie najbardziej przydatna w Twojej pracy? Co naprawdę Cię interesuje? Zgłoś problemy do repozytorium GitHub lub daj nam znać na Twitterze.
Więcej informacji o interoperacyjności interoperacyjności 2022 znajdziesz w tych dokumentach: