Porównanie z 2021 r.: wyeliminowanie 5 najważniejszych problemów ze zgodnością w internecie

Google współpracuje z innymi dostawcami przeglądarek i partnerami branżowymi, aby rozwiązać 5 najważniejszych problemów związanych ze zgodnością z przeglądarkami, z którymi mogą się spotykać deweloperzy stron internetowych: CSS flexbox, CSS Grid, position: sticky, aspect-ratio i transformacje CSS.

Philip Jägenstedt
Robert Nyman

Google współpracuje z innymi dostawcami przeglądarek i partnerami branżowymi, aby naprawić błąd 5 najważniejszych problemów ze zgodnością przeglądarek. Obszary, na których się skupiamy to CSS Flexbox, CSS Grid, position: sticky, aspect-ratio i CSS przekształcenia. Przeczytaj, jak możesz współtworzyć i śledzić treści, aby dowiedz się, jak się zaangażować.

Tło

Zgodność w internecie zawsze była dużym wyzwaniem dla programistów. W Google i inni partnerzy, w tym Mozilla i Microsoft chce dowiedzieć się więcej o najważniejszych problemach z internetem programistów, aby nakierować naszą pracę i określać priorytety w celu poprawy sytuacji. Ten projekt jest połączony z deweloperem w Google Satysfakcja (DevSAT) działa, zaczęło się na większą skalę od utworzenia Ankiety dotyczące analizy potrzeb deweloperów w MDN w latach 2019–2020, a także szczegółowe badania Raport na temat zgodności przeglądarki MDN z 2020 r. Przeprowadzono dodatkowe badania w różnych kanałach, takich jak State of the CSS i State of JS ankiet.

Celem w 2021 r. jest wyeliminowanie problemów ze zgodnością przeglądarek w 5 głównych obszarach aby programiści mogli spokojnie oprzeć się na nich jako niezawodnych podstawach. Ten można nazywać #Compat 2021.

Wybór, na czym należy się skupić

Problemy ze zgodnością przeglądarek występują w praktycznie całej sieci dlatego chcemy skupić się na niewielkiej grupie problemów najbardziej obszary, które można znacznie poprawić, aby usunąć je jako najpoważniejsze problemy. dla programistów.

Projekt zgodności korzysta z wielu kryteriów określających, które obszary są traktowane priorytetowo, a niektóre –

5 głównych obszarów, na których należy się skupić w 2021 r.

W 2020 roku Chromium rozpoczął prace nad najważniejszymi obszarami opisanymi w artykule Ulepszanie zgodności Chromium z przeglądarkami w 2020 roku. W 2021 r. rozpoczynamy wysiłki zmierzające do dalszych działań. Google i Microsoft współpracuje z Igalia nad rozwiązaniem najważniejszych problemów w Chromium. Igalia, która regularnie publikuje treści. do Chromium i WebKit oraz obsługi oficjalnego portu WebKit dla urządzeń wbudowanych, bardzo je wspierają i zaangażowali się w działania na rzecz zgodności. pomaga w ich rozwiązywaniu i śledzeniu.

Oto obszary, które zdecydują się poprawić w 2021 roku.

Flexbox CSS

flexbox CSS, to powszechnie używane w internecie i nadal mierzą się z dużymi wyzwaniami dla programistów. Przykład: Chromium i WebKit wystąpiły problemy z kontenerami elastycznymi auto-height, które prowadziły do obrazów o nieprawidłowym rozmiarze.

Rozciągnięte zdjęcie szachownicy.
Obraz ma niewłaściwy rozmiar z powodu błędów.
.
.
Szachownica.
Obraz o prawidłowym rozmiarze.
Zdjęcie: Alireza Mahmoudiego.

Fleksbox Igalia szczegółowo omawiamy te problemy i przedstawiamy wiele przykładów.

Dlaczego ma to priorytet

Siatka CSS

Siatka CSS to podstawowy element składowy nowoczesnych układów stron internetowych, zastępując wiele starszych technik i sposobów ich obejścia. W miarę wzrostu popularności musi być on solidny, różnice między przeglądarkami nigdy nie są powodem, by ich uniknąć. Jeden obszar, brak jest możliwości animowania układów siatki, obsługiwana w Gecko, ale nie Chromium lub WebKit Jeśli ta funkcja jest obsługiwana, możliwe są takie efekty:

Animowana demonstracja szachów, Chen Hui Jing

Dlaczego ma to priorytet

.

Pozycja CSS: przyklejona

Pozycjonowanie przyklejone pozwala przyklejać treść do krawędzi widocznego obszaru i jest często używana w przypadku nagłówków, które są zawsze widoczne u góry widocznego obszaru. Obsługiwane we wszystkich przeglądarkach, zdarza się, że nie działa ono zgodnie z oczekiwaniami. Przykład: przyklejone nagłówki tabel nie są obsługiwane w Chromium i chociaż obecnie obsługiwany za flagą, wyniki są niespójne w różnych przeglądarkach:

Chromium z „TablesNG”
Gekon
WebKit

Sprawdź przyklejone nagłówki tabeli wersję demonstracyjnąRoba Flacka.

Dlaczego ma to priorytet

Właściwość współczynnika proporcji CSS

Nowy aspect-ratio Właściwość CSS ułatwia zachowanie stałego proporcji szerokości do wysokości eliminuje potrzebę stosowania dobrze znanej marki padding-top:

Korzystanie z dopełnienia u góry
.container {
  width: 100%;
  padding-top: 56.25%;
}
Korzystanie ze współczynnika proporcji
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Jest to bardzo powszechny przypadek użycia, który powinien być powszechnie stosowany. który będzie działać prawidłowo we wszystkich typowych przypadkach i przeglądarkach.

Dlaczego ma to priorytet

Przekształcenia CSS

Przekształcenia CSS były obsługiwane we wszystkich przeglądarkach od wielu lat i są powszechnie stosowane sieci. Jednak nadal jest wiele obszarów, w których nie działają one tak samo w różnych przeglądarkach, zwłaszcza w przypadku animacji i przekształceń 3D. Na przykład karta Efekt odwrócenia może być bardzo niespójny w różnych przeglądarkach:

Efekt odwrócenia karty w Chromium (po lewej), Gecko (na środku) i WebKit (po prawej). Prezentacja Davida Barona z buga komentarz.

Dlaczego ma to priorytet

Jak możesz pomóc i śledzić treści

Obserwuj i udostępniaj wszystko, co publikujemy @ChromiumDev lub publiczna lista adresowa, Compat 2021. sprawdź, czy występują błędy; zgłoś je w razie napotkanych problemów. Jeśli czegoś brakuje, skontaktuj się z nami za pomocą kanałów.

Na stronie web.dev będą regularnie publikowane informacje o postępach, w których możesz śledzić postępy w poszczególnych obszarach działalności w raporcie Compat 2021 Panel.

Panel Compat 2021
Panel Compat 2021 (zrzut ekranu zrobiony 16 listopada 2021 r.).

Mamy nadzieję, że to wspólny wysiłek dostawców przeglądarek zwiększył niezawodność interoperacyjność pomoże Ci tworzyć niesamowite rzeczy w internecie.