Aktualizacja w połowie roku Compat 2021, której celem jest wyeliminowanie problemów ze zgodnością przeglądarek na 5 głównych obszarach: flexbox CSS, siatka CSS, pozycja: przyklejony, współczynnik proporcji i przekształcenia CSS.
Czas na półroczne podsumowanie Compat 2021, którego celem jest wyeliminowanie problemów ze zgodnością przeglądarek w 5 głównych obszarach. Więcej informacji na temat działania #compat2021 i decyzji dotyczących obszarów, na których się skupiamy, znajdziesz w marcu.
Udoskonalenia Chromium opisane w tym poście będą dostępne w Chrome, Edge i wszystkich przeglądarkach opartych na Chromium.
Jak mierzymy postępy
W panelu Compat 2021 znajdziesz testy na platformie internetowej, aby zobaczyć liczbę zaliczonych testów i wykresy zyskujące popularność w różnych przeglądarkach.
Sama liczba zaliczonych testów nie mówi wszystkiego o zgodności przeglądarek, jednak jest to jeden z sygnałów, na podstawie których sprawdzamy postępy naszych działań. Mniejsza liczba różnic między przeglądarkami w wynikach testu oznacza większą interoperacyjność funkcji internetowej w różnych przeglądarkach.
CSS Flexbox
Wszystkie 3 przeglądarki zaobserwowały ulepszenia dotyczące Flexbox.
W przeglądarce Safari 14.1 udostępniliśmy właściwość gap dotyczącą Flexbox. Właściwość gap to wygodny sposób na ustawianie odstępów między elementami. Ta właściwość jest często używana w układzie siatki, a obsługa układu Flexbox była jedną z funkcji, o które najczęściej prosiliśmy w Raporcie zgodności z przeglądarkami MDN. Dzięki tej aktualizacji właściwość gap w układach elastycznych jest dostępna we wszystkich popularnych przeglądarkach i rozwiązano najpoważniejszy problem ze zgodnością. Safari 14.1 zawiera też wiele poprawek dotyczących obrazów w flexbox, dzięki czemu nie trzeba używać starych obejścia.
W przeglądarce Firefox udało się rozwiązać renderowanie tabel jako elementów elastycznych, co sprawiło, że testy w przeglądarce Firefox zostały zakończone na 100% (obecnie 98,5%).
Chromium naprawił też tabele jako elementy elastyczne.
W Chromium 88 wprowadzono też przeredagowanie obrazów jako elementów elastycznych, co rozwiązało wiele wielokrotnych błędów. Niedawno Chromium dodał też obsługę nowych słów kluczowych w dopasowaniu: start, end, self-start, self-end, left i right. Te słowa kluczowe możesz wypróbować w Chrome Canary i Edge Canary.
Siatka CSS
Wykorzystanie siatki usług porównywania cen stopniowo rośnie – obecnie wynosi 9% wyświetleń stron. Wszystkie 3 główne wyszukiwarki implementują siatkę CSS i przeszły już ponad 89% powiązanych testów. Wypełnienie luki w zgodności jest ważne, ponieważ umożliwia stabilny rozwój tej funkcji.
Do tej pory w 2021 r. liczba testów w Safari wzrosła z 89% do 93%, a Chromium pracuje nad nową architekturą, która rozwiąże więcej problemów z siatką CSS (GridNG). Te działania są prowadzone przez zespół Microsoft i spowodowały niedawny wzrost liczby docelowych testów siatki z 94% do 97%. Niedługo więcej informacji na temat GridNG znajdziesz na blogu Edge.
Usługa porównywania cen position: sticky
W Chromium problem z position: sticky nagłówkami tabel został naprawiony po wprowadzeniu TablesNG – wieloletniego wysiłku mającego na celu zmianę architektury tabel.
Ta zmiana, wraz z kilkoma końcowymi
poprawkami, sprawiła, że kanały dla programistów Chrome i Edge 93 przeszły 100% docelowych testów.
Po position: sticky
firma TablesNG rozwiązała 72 błędy Chromium.
Właściwość CSS aspect-ratio
Właściwość aspect-ratio, która ułatwia ustawianie proporcji szerokości do wysokości, ma kluczowe znaczenie dla elastycznego projektowania witryn. Jest to też rozwiązanie, które zapobiega skumulowanym przesuwom układu.
Właściwość aspect-ratio jest teraz obsługiwana w stabilnych wersjach Chrome, Edge i Firefox oraz w Safari 15 w wersji beta. W miarę zwiększania się obsługi różnych przeglądarek rośnie użycie.
Chociaż żadna przeglądarka nie uzyskała 100% pozytywnych testów, luka w zgodności aspect-ratio jest najmniejszą spośród 5 obszarów, na których skupia się Compat 2021. Ponad 90% testów sprawdza się we wszystkich najpopularniejszych przeglądarkach. W przyszłości będziemy monitorować postępy, korzystając z pakietu testowego, aby uczynić z niej solidną funkcję.
Dowiedz się więcej o wykorzystaniu usługi aspect-ratio na stronie web.dev i o zaletach tej usługi.
Przekształcenia CSS
Wyniki docelowych testów przekształceń CSS powoli i stopniowo zwiększają się dzięki poprawie błędów i ulepszeniom samych testów.
Zespół Chromium pracuje też nad poprawą interoperacyjności między transform-style:
preserve-3d i transform :perspective(). Mamy nadzieję, że w kolejnej wiadomości damy znać o postępach.
Poprawa ogólnego wyniku
Od ogłoszenia w marcu wyniki wszystkich 3 przeglądarek poprawiły się w rankingu Compat 2021:
- Wersja deweloperska Chrome i Edge dla Chrome zmieniła się z 86 na 92.
- Liczba użytkowników w przeglądarce Firefox, która zmieniła się z 83 na 86, to
- Liczba filmów w Safari to 64 na 82.
W szczególności dzięki dużym nakładom pracy ze strony użytkowników korzystających z WebKit użytkownicy Safari rozwinęli lukę w zakresie zgodności o 18 punktów. W szczególności zespół Igalia przyczynił się do rozwoju właściwości aspect-ratio oraz wielu ulepszeń w technologii Flexbox i Grid, takich jak gap dla Flexbox i różnych poprawek błędów.
Śledź wyniki Compat 2021
Aby śledzić postępy w konkursie Compat 2021, obserwuj panel, zasubskrybuj naszą listę adresową lub skontaktuj się z nami na adres usat @chromiumdev. Jeśli napotkasz jakieś problemy, zgłoś błąd dotyczący przeglądarki, której on dotyczy.