Zakończenie roku Compat 2021, mające na celu wyeliminowanie problemów ze zgodnością przeglądarek na 5 głównych obszarach: Flexbox, siatka CSS, pozycja: przyklejony, współczynnik proporcji i przekształcenia CSS.
Zbliża się koniec roku i przyszedł czas na ostateczną aktualizację Compat 2021. Chcemy w ten sposób wyeliminować problemy ze zgodnością przeglądarek w 5 głównych obszarach.
>90%
wynik we wszystkich przeglądarkach
Od ostatniej aktualizacji wprowadzamy ulepszenia we wszystkich przeglądarkach. Na początku roku wszystkie przeglądarki miały dużo niższe wyniki testów, ale teraz wszystkie przeglądarki przekroczyły 90%! Oznacza to, że platforma internetowa znacznie usprawniła interoperacyjność między 5 głównymi obszarami.
W procesie tworzenia wyszukiwarek wnoszą wkład nie tylko ich dostawcy, ale również inne osoby należące do społeczności internetowej. W tym projekcie chcemy w szczególności podziękować Igalii za zaangażowanie i nieustanną pracę nad poprawą wyników. Igalia przyczyniła się do poprawy wszystkich 5 głównych obszarów Compat 2021.
Na stronie wpt.fyi, w panelu wyników testów, znajduje się teraz filtrowany widok wyników testów, który pokazuje wszystkie testy zawarte w Compat 2021. Pokazuje też widoki dla przeglądarek Chrome, Firefox i Safari, które porównają wyniki z ostatnią aktualizacją z lipca.
Przyjrzyjmy się ulepszeniom w każdym z tych obszarów.
CSS Flexbox
Funkcja flex-basis: content będzie teraz dostępna we wszystkich przeglądarkach, a implementacje będą obsługiwane w Chromium i w WebKit. (Wartość content była już obsługiwana przez Gecko).
W Chromium problem z rozmiarem Flexbox został rozwiązany, ponieważ można go było dopasować do specyfikacji i działania gekonu. W Gecko rozwiązaliśmy kilka problemów z Compat 2021, w tym problem z procentową wysokością elementów elastycznych. W WebKit dodaliśmy obsługę większej liczby wartości właściwości wyrównywania (left, right, self-start, self-end, start, end), a w Compat 2021 wprowadziliśmy wiele ulepszeń w pozycjonowaniu bezwzględnym, a także ulepszyliśmy wyniki testu Flexbox w Compat 2021.
Siatka CSS
Korzystanie z siatki CSS w internecie stale się zwiększa, co można zobaczyć w almanaku internetowym z 2021 r. i w danych o użyciu Chrome.
Wprowadzenie GridNG w Chrome i Edge 93 rozwiązało wiele istniejących od dawna problemów z siatką, zamykając imponujące 38 problemów w narzędziu do śledzenia błędów Chromium. Razem z kilkoma mniejszymi poprawkami wynik Compat w 2021 r. dotyczący siatki w Chromium wzrósł o 3–97%. Tą pracą kierował zespół Edge w Microsoft.
Naprawiliśmy w Gecko błąd bezwzględnego pozycjonowania, który wpływał na siatkę. Wprowadzono wiele poprawek w systemie WebKit, co prowadzi do zwiększenia skuteczności o 1% w przeglądarce Firefox i o 3% w porównaniu z testami przeglądarki Safari w siatce.
Usługa porównywania cen position: sticky
W ostatniej aktualizacji zauważyliśmy, że position: sticky był pierwszym obszarem, w którym jakakolwiek przeglądarka (w tym przypadku Chrome i Edge) uzyskała 100% pomyślnych testów. Po wprowadzeniu kilku poprawek w implementacji WebKit Safari również uzyskuje w tych testach 100% punktów. Większość z tych ulepszeń
wprowadziliśmy w Safari 15.
Właściwość CSS aspect-ratio
Obsługa definiowania współczynnika proporcji elementów (stosunku szerokości do wysokości) elementów w różnych przeglądarkach stale się poprawia – wyniki testu Compat 2021 sięgają odpowiednio 99%, 97% i 95% odpowiednio w Chrome/Edge, Firefox i Safari. Większość ulepszeń nie dotyczy samej właściwości aspect-ratio, ale sposobu, w jaki atrybuty width i height są zmapowane na domyślną wartość aspect-ratio elementów. Zostało to wdrożone w przypadku wielu elementów w komponencie WebKit i <canvas> w Chromium.
Przekształcenia CSS
Obsługa języka transform: perspective(none) jest teraz obsługiwana w Chromium, Gecko i WebKit. Ułatwia to wyświetlanie animacji z różnej perspektywy.
W Chromium właściwości transform-style: preserve-3d (która umożliwia elementom podrzędnym udział w tej samej scenie 3D) i perspective (która stosuje przekształcenie perspektywy do elementów podrzędnych) są teraz dopasowywane do specyfikacji przez ustawienie ich stosowania tylko do elementów podrzędnych.
Duży wzrost wyników przekształceń CSS w przypadku wszystkich przeglądarek wynika głównie z ulepszeń pakietu testowego, w którym naprawiono lub usunięto nieprawidłowe testy. Ułatwia to zrozumienie pozostałych problemów ze zgodnością i unikanie regresji w przyszłości.
Podsumowanie
Jesteśmy wdzięczni za pracę włożoną w zakończenie tego roku przez wprowadzenie wielu ulepszeń oraz ulepszenia infrastruktury testowej. O funkcję aspect-ratio od dawna prosili
programiści stron internetowych, a obecnie jest obsługiwana we wszystkich przeglądarkach. Coraz częściej korzystamy z technologii Flexbox, siatki i position: sticky. Dzięki licznym ulepszeniom wprowadzonym w 2021 roku te funkcje są teraz lepiej obsługiwane w różnych przeglądarkach.
Co dalej? Cieszymy się, że w kolejnej wersji tej aktualizacji będziemy nadal współpracować z innymi dostawcami przeglądarek i szerszą społecznością. Zaczęliśmy szukać i omawiać obszary, na których warto się skupić na 2022 rok. Wkrótce prześlemy powiadomienie.
Jeśli chcesz podzielić się z nami opinią lub zadać pytania, skontaktuj się z nami na Twitterze: @ChromiumDev.