Tu się pomaga

Ułatwiamy tworzenie aplikacji internetowych.

Rachel Andrew

Gdy rozmawiamy z deweloperami, czy to indywidualnie, czy w ramach ankiet takich jak State of CSS, wielokrotnie słyszymy te same rzeczy. Deweloperom trudno jest tworzyć witryny i aplikacje, które działają dobrze w różnych przeglądarkach, a także określać, kiedy można bezpiecznie używać nowych funkcji.

Odstęp w modelu Flexbox

Przykładem problematycznej właściwości jest gap, która umożliwia tworzenie odstępów między elementami siatki lub flex albo kolumnami w kontenerze multicol. Wielokolumnowość column-gap jest dostępna od dawna, ale właściwość ta pojawiła się po raz pierwszy w układzie siatki jako grid-gap wraz z grid-column-gap i grid-row-gap.

Tuż po wprowadzeniu układu siatki w przeglądarkach nazwa właściwości została zmieniona na gap, a także row-gap i column-gap. Następnie określono, że ma też działać w układzie elastycznym. Zmiana nazwy oznacza, że nie mamy wielu usług, które robią to samo.

.box {
  display: flex;
  gap: 1em;
}

Firefox wprowadził tę właściwość w przypadku układów elastycznych w październiku 2018 r. W Chrome pojawiła się dopiero w lipcu 2020 r., a w Safari w kwietniu 2021 r. Oznaczało to, że zanim mogliśmy bezpiecznie użyć gap, musieliśmy odczekać 2,5 roku. W rzeczywistości większość deweloperów musiała czekać znacznie dłużej, ponieważ musiała obsługiwać wersje przeglądarek starsze niż najnowsza. Obsługa jednostki gap w układzie elastycznym była bardziej problematyczna, ponieważ nie możemy używać zapytań o funkcje do wykrywania obsługi właściwości gap w układzie elastycznym. Właściwość gap jest obsługiwana w siatce, więc @supports (gap:1em) zwróci wartość true.

Dodatkowym problemem jest to, że gdy w jednej przeglądarce pojawi się nowa funkcja, użytkownicy zaczynają o niej rozmawiać i udostępniać wersje demonstracyjne. Często zaczyna się to na długo przed tym, zanim funkcja pojawi się w stabilnej wersji przeglądarki. Może to dezorientować deweloperów, a przynajmniej ich irytować. Wszędzie mówi się o nowych, wspaniałych funkcjach, a potem okazuje się, że nie można z nich korzystać z powodu braku obsługi.

Dlaczego w pomocy technicznej występują luki?

Nie jest to post, w którym zarzucamy jednej z przeglądarek, że działa wolno. Jeśli przyjrzysz się różnym funkcjom platformy, zauważysz, że w przypadku różnych funkcji wiodącą rolę odgrywają różne przeglądarki.

Większość funkcji będzie prototypowana w jednej przeglądarce. Na przykład specyfikacja układu siatki została po raz pierwszy utworzona przez firmę Microsoft i wdrożona w początkowej formie w przeglądarce Internet Explorer 10. Inżynier z Mozilli wykonał wiele pracy, aby ustalić, jak powinna działać podsiatka, dlatego ta funkcja pojawiła się najpierw w Firefoxie. Safari wprowadza kilka nowych, ciekawych funkcji związanych z kolorami.

Chociaż jedna przeglądarka może być liderem w zakresie prototypowania, przedstawiciele wszystkich przeglądarek (i innych organizacji) w grupie roboczej CSS omawiają funkcje CSS. Bardzo ważne jest, aby funkcja mogła być wdrożona we wszystkich przeglądarkach i nie była zaprojektowana w taki sposób, aby uniemożliwiać jej wdrożenie w jednej z nich. Spowodowałoby to trwałą lukę w obsłudze i brak wdrożenia tej funkcji.

W przypadku wdrażania funkcji należy jednak ustalić jej priorytet w porównaniu z innymi możliwymi funkcjami tej przeglądarki. Czasami prace są opóźnione z powodu innych zadań, które trzeba wykonać, aby ulepszyć przeglądarkę. Świetnym przykładem jest RenderingNG w Chromium. Umożliwiło to wdrożenie podsiatki, jednak długa przerwa między wprowadzeniem podsiatki w Firefoxie i Chromium wynika z konieczności ponownego wdrożenia układu siatki w nowym silniku renderowania.

Problemy

Mamy tu 2 problemy. Pierwszym jest problem z interoperacyjnością, czyli fakt, że od momentu wprowadzenia funkcji w jednej przeglądarce do momentu, w którym jest ona dostępna wszędzie, może minąć dużo czasu.

Drugi problem dotyczy komunikacji. Jak możemy wyraźnie wskazać, gdzie brakuje pomocy? Jak udostępniamy nowe funkcje, nie zmuszając wszystkich do dokładnego sprawdzania każdej z nich, aby dowiedzieć się, jak dobrze jest obsługiwana?

Interoperacyjność

Przeglądarki już współpracują ze sobą, aby rozwiązać problem z interoperacyjnością. W zeszłym roku Compat 2021 pomogło zmniejszyć różnice w obsłudze wielu funkcji, w tym właściwości gap w układzie elastycznym. W tym roku w ramach inicjatywy Interop 2022 skupiamy się na 15 funkcjach. W przypadku niektórych z nich już poczyniliśmy postępy.

Postępy możesz śledzić w panelu Interop 2022.

Wiadomości

Drugi problem dotyczy tego, w czym chcę Ci pomóc, gdy będziemy rozmawiać o funkcjach na web.dev i developer.chrome.com. Chcę, aby stan funkcji był bardzo jasny, gdy czytasz nasze treści, i abyśmy mogli podać praktyczne sposoby rozwiązywania problemów z obsługą.

Uruchomiliśmy kilka podstawowych szkoleń, a wkrótce pojawią się kolejne. Te kursy pomogą Ci nauczyć się tworzyć aplikacje na nowoczesne strony internetowe przy użyciu podstawowych technologii platformy internetowej. Wymeldowanie:

Staramy się, aby treści w tej witrynie dotyczyły tylko tych rzeczy, z których możesz bezpiecznie korzystać. Nie osiągnęliśmy jeszcze tego celu, ale w najbliższych miesiącach powinna nastąpić zmiana w kierunku praktycznego wykorzystania tej technologii.

Współtworzymy też dokumentację otwartej sieci, wspierając projekt Open Web Docs. Dzięki temu będziemy mieć najwyższej jakości dokumentację na MDN oraz aktualne dane o zgodności z przeglądarkami. Następnie wykorzystujemy te dane na web.dev, aby pokazywać obsługę funkcji. Oto obecna obsługa gap w układzie elastycznym.

Browser Support

Jeśli chcesz dowiedzieć się więcej o wizji Chrome dotyczącej internetu i o eksperymentach, które prowadzimy w ramach testów Origin i testów dla programistów, znajdziesz te informacje w naszej siostrzanej witrynie developer.chrome.com. Zawarte tam treści mogą mieć charakter eksperymentalny lub być obecnie obsługiwane tylko w Chrome. Zachęcamy Cię jednak do zapoznania się z nimi i przesłania opinii.

To naprawdę ekscytujący czas dla internetu. Mamy nadzieję, że pomożemy Ci szybciej wprowadzać kluczowe funkcje i wyjaśniać, jakie są luki, dzięki czemu tworzenie stron internetowych będzie przyjemniejsze i mniej frustrujące.

Zdjęcie: Cristofer Maximilian.