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.
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, by 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 główne problemy. dla programistów.
Projekt zgodności korzysta z wielu kryteriów określających, które obszary są traktowane priorytetowo, a niektóre –
- Wykorzystanie funkcji. Na przykład flexbox jest używany 75% wszystkich wyświetleń stron, a protokół HTTP jest coraz bardziej popularny Archiwizuj.
- Liczba błędów (w Chromium, Gekon WebKit), a w przypadku Chromium – ile gwiazdek to które mają robaki.
Wyniki ankiety:
- Ankiety DNA MDN
- Raport zgodności przeglądarki MDN
- Stan usługi porównywania cen najpopularniejsze i używane funkcje
Wyniki testu web-platform-tests. Na przykład flexbox włączone wpt.fyi.
Czy mogę korzystać z najczęściej wyszukiwanych funkcji.
5 głównych obszarów, na których warto 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.](https://web.dev/static/blog/compat2021/image/stretched-photo-a-chessb-bb1e04823881.png?authuser=7&hl=pl)
![Szachownica.](https://web.dev/static/blog/compat2021/image/chessboard-85fa028fd9056.png?authuser=7&hl=pl)
Zdjęcie: Alireza Mahmoudiego.
Fleksbox Igalia szczegółowo omawiamy te problemy i przedstawiamy wiele przykładów.
Dlaczego ma to priorytet
- Ankiety: Główny problem w Raport zgodności przeglądarki MDN, najbardziej znana i używana w stanie Usługa porównywania cen
- Testy: 85% zdania we wszystkich przeglądarkach
- Wykorzystanie: 75% wyświetleń stron, rosnąca liczba wyświetleń HTTP Archiwizuj
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:
Dlaczego ma to priorytet
- Ankiety: drugie miejsce w Raport zgodności przeglądarki MDN, dobrze znana, ale rzadziej używana w Stanach Usługa porównywania cen
- Testy: 75% z pomyślnym wynikiem we wszystkich przeglądarkach
- Wykorzystanie: 8% i rosnąca na stałym poziomie, niewielki wzrost wartości HTTP Archiwizuj
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:
![](https://web.dev/static/blog/compat2021/image/DtNtuWCZUNwi7GGSBPvA.png?authuser=7&hl=pl)
![](https://web.dev/static/blog/compat2021/image/hJwLpLeJNfG6kVBUK9Yn.png?authuser=7&hl=pl)
![](https://web.dev/static/blog/compat2021/image/od1YyD2BoBqfrnkzynUK.png?authuser=7&hl=pl)
Sprawdź przyklejone nagłówki tabeli wersję demonstracyjnąRoba Flacka.
Dlaczego ma to priorytet
- Ankiety: dobrze znana/używana w stanie CSS i zostało wiele razy w Raport zgodności przeglądarki MDN
- Testy: Spełnianie 66% we wszystkich przeglądarkach
- Wykorzystanie: 8%
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
:
.container { width: 100%; padding-top: 56.25%; }
.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
- Ankiety: znane, ale jeszcze nie powszechnie używane w Stanach Zjednoczonych Usługa porównywania cen
- Testy: 27% zdania we wszystkich przeglądarkach
- Wykorzystanie: 3% i prawdopodobnie wzrośnie
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:
Dlaczego ma to priorytet
- Ankiety: bardzo dobrze znane i używane w Stanach Usługa porównywania cen
- Testy: wszystkie zaliczono 55% przeglądarki
- Wykorzystanie: 80%
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](https://web.dev/static/blog/compat2021/image/compat-2021-dashboard-99a25fe0b80b.png?authuser=7&hl=pl)
Mamy nadzieję, że to wspólny wysiłek dostawców przeglądarek zwiększył niezawodność interoperacyjność pomoże Ci tworzyć niesamowite rzeczy w internecie.