Google współpracuje z innymi dostawcami przeglądarek i partnerami branżowymi, aby rozwiązać 5 najczęstszych problemów ze zgodnością przeglądarek dla programistów stron internetowych: CSS flexbox, CSS Grid, position: sticky, aspect-ratio i przekształcenia CSS.
Google współpracuje z innymi dostawcami przeglądarek i partnerami branżowymi, aby rozwiązać 5 najważniejszych problemów ze zgodnością przeglądarek dla programistów stron internetowych. Omawiane obszary to CSS Flexbox, CSS Grid, position: sticky, aspect-ratio i transformacje CSS. Przeczytaj artykuł Jak możesz pomóc i śledzić wskazówki, aby dowiedzieć się, jak się zaangażować.
Wprowadzenie
Zgodność stron w internecie zawsze stanowiło duże wyzwanie dla programistów. W ciągu ostatnich kilku lat Google i inni partnerzy, w tym Mozilla i Microsoft, postanowili dowiedzieć się więcej o najważniejszych problemach dla programistów stron internetowych, aby usprawnić naszą pracę i nadać im priorytety w celu poprawy sytuacji na rynku. Ten projekt jest powiązany z pracą Google Developer Satisfaction (DevSAT), a rozpoczęto na szerszą skalę dzięki opracowaniu w 2019 i 2020 roku ankiet MDN DNA (Developer Needs Assessment) oraz szczegółowych badań zamieszczonych w raporcie zgodności z przeglądarkami MDN z 2020 r. Przeprowadzono dodatkowe badania przy użyciu różnych kanałów, np. ankiety State of CSS i State of JS.
W 2021 roku chcemy wyeliminować problemy ze zgodnością przeglądarek w 5 głównych obszarach, aby deweloperzy mogli spokojnie korzystać z tych rozwiązań. Takie działanie nosi nazwę #Compat 2021.
Wybór treści, na których chcesz się skupić
Chociaż na całej platformie internetowej występują problemy ze zgodnością przeglądarek, skupiamy się na niewielkiej liczbie najbardziej problematycznych obszarów, które można znacznie poprawić, dlatego nie są one głównym problemem dla deweloperów.
Projekt dotyczący zgodności wykorzystuje wiele kryteriów wpływających na to, które obszary należy traktować priorytetowo. Oto niektóre z nich:
- Wykorzystanie funkcji. Na przykład flexbox jest używany w 75% wszystkich wyświetleń stron, a w archiwum HTTP znacznie rośnie rozpowszechnienie tego rozwiązania.
- liczbę błędów (w Chromium, Gecko i WebKit), a w Chromium – ile gwiazdek mają te błędy.
Wyniki ankiety:
- Ankiety MDN
- Raport dotyczący zgodności z przeglądarkami MDN
- Stan CSS: najbardziej znane i używane funkcje
Wyniki testu z web-platform-tests. Przykład: flexbox na wpt.fyi.
Czy mogę korzystać z najczęściej wyszukiwanych funkcji?
5 głównych obszarów, na które należy się skupić w 2021 roku
W 2020 roku zaczęliśmy pracować nad najważniejszymi obszarami opisanymi w artykule Poprawa zgodności przeglądarek Chromium w 2020 roku. W 2021 roku zaczniemy podejmować kolejne działania. Google i Microsoft pracują razem nad rozwiązaniem najważniejszych problemów w Chromium, a także nad Igalią. Igalia, która regularnie współpracuje z Chromium i WebKit oraz jest opiekunem oficjalnego portu WebKit dla urządzeń osadzonych, bardzo wspiera i angażuje się w działania w zakresie zgodności oraz pomaga w rozwiązywaniu i śledzeniu wykrytych problemów.
Oto obszary, które zobowiązano się naprawić w 2021 roku.
CSS Flexbox
Platforma CSS Flexbox jest powszechnie używana w internecie, ale nadal wiążą się z tym poważne wyzwania dla deweloperów. Na przykład w Chromium i w narzędziu WebKit wystąpiły problemy z elastycznymi kontenerami auto-height, które prowadziły do nieprawidłowych rozmiarów obrazów.
Fot.Alireza Mahmoudi
W poście na blogu Igalia „flexbox Cats” znajdziesz więcej przykładów, które szczegółowo opisują te problemy.
Dlaczego to priorytetowe
- Ankiety: główny problem w Raporcie zgodności przeglądarek MDN, najbardziej znanym i używanym w raporcie Stan CSS
- Testy: uzyskanie 85% danych we wszystkich przeglądarkach
- Wykorzystanie: 75% wyświetleń strony, znacznie rosnący w archiwum HTTP
Siatka CSS
Siatka CSS jest podstawowym elementem nowoczesnych układów internetowych, który zastępuje wiele starszych technik i obejść. Wraz ze wzrostem rozpowszechnienia tej technologii musimy mieć pewność, że różnice między przeglądarkami będą ugruntowane, tak aby różnice między przeglądarkami nigdy nie były powodem do ich unikania. Brakuje też możliwości animowania układów siatki obsługiwanych w Gecko, ale nie w Chromium i WebKit. O ile ta funkcja jest obsługiwana, można uzyskać takie efekty:
Dlaczego to priorytetowe
- Ankiety: druga część raportu zgodności przeglądarek MDN, dobrze znana, ale rzadziej używana w raporcie Stan CSS
- Testy: uzyskanie 75% poprawnych odpowiedzi we wszystkich przeglądarkach
- Wykorzystanie: 8% i stabilny wzrost, niewielki wzrost w archiwum HTTP
Pozycja CSS: przyklejona
Przyklejone pozycjonowanie umożliwia treści przyleganie do krawędzi widocznego obszaru i jest często stosowane w przypadku nagłówków, które są zawsze widoczne u góry widocznego obszaru. Funkcja ta jest obsługiwana we wszystkich przeglądarkach, ale w niektórych przypadkach często nie działa zgodnie z oczekiwaniami. Na przykład Chromium nie obsługuje przyklejonych nagłówków tabel i chociaż teraz obsługuje je flagą, wyniki są niespójne w różnych przeglądarkach:
Obejrzyj prezentację nagłówków tabel przyklejonych autorstwa Roba Flacka.
Dlaczego to priorytetowe
- Ankiety: bardzo znane lub używane w raporcie Stan CSS, które zostało dwukrotnie poruszone w Raporcie zgodności z przeglądarkami MDN
- Testy: 66% zaliczonych we wszystkich przeglądarkach
- Wykorzystanie: 8%
Właściwość współczynnika proporcji CSS
Nowa właściwość CSS aspect-ratio ułatwia utrzymanie stałego stosunku szerokości do wysokości elementów, eliminując potrzebę stosowania znanego hakowania padding-top:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Ponieważ jest to dość powszechny przypadek użycia, powinien stać się powszechnie stosowany, dlatego chcemy zadbać o jego zastosowanie we wszystkich typowych scenariuszach i w różnych przeglądarkach.
Dlaczego to priorytetowe
- Ankiety: są już dobrze znane, ale jeszcze nie są powszechnie wykorzystywane w ramach stanu CSS
- Testy: zaliczenie 27% we wszystkich przeglądarkach
- Wykorzystanie: 3% i spodziewany wzrost
Przekształcenia CSS
Przekształcenia CSS są obsługiwane we wszystkich przeglądarkach od wielu lat i są powszechnie stosowane w internecie. W wielu przeglądarkach nie działają one jednak tak samo, zwłaszcza w przypadku animacji i przekształceń 3D. Na przykład efekt odwrócenia karty może być bardzo niespójny w różnych przeglądarkach:
Dlaczego to priorytetowe
- Ankiety: bardzo znane i używane w narzędziu Stan CSS
- Testy: uzyskanie 55% we wszystkich przeglądarkach
- Wykorzystanie: 80%
Jak możesz współtworzyć i śledzić artykuły
Obserwuj i udostępniaj informacje o nowościach, które publikujemy na @ChromiumDev lub na publicznej liście adresowej Compat 2021. Sprawdź, czy występują błędy, lub zgłoś je w razie problemów, które napotykasz. Jeśli czegoś brakuje, skontaktuj się z nami, korzystając z powyższych kanałów.
Postępy w postępach będą regularnie pojawiać się na web.dev. Postępy w poszczególnych obszarach działalności możesz też obserwować w panelu porównawczym 2021.
Mamy nadzieję, że wspólne wysiłki podejmowane przez dostawców przeglądarek na potrzeby poprawy niezawodności i interoperacyjności ułatwią tworzenie niesamowitych rzeczy w internecie.