Tu się pomaga

Ułatwiamy tworzenie aplikacji internetowych.

Rachel Andrew

Gdy rozmawiamy z programistami, 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, i trudno im określić, kiedy nowe, ciekawe funkcje są bezpieczne w użyciu.

Odstęp we flexboksie

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. Chociaż właściwość column-gap jest już od dawna dostępna w układzie wielokolumnowym, po raz pierwszy pojawiła się w układzie siatki jako grid-gap, razem z grid-column-gap i grid-row-gap.

Zaraz po wprowadzeniu układu siatki w przeglądarkach zmieniono nazwę właściwości na gap, a także row-gap i column-gap. Następnie określono, że ma działać również w układzie elastycznym. Dzięki zmianie nazwy nie mamy wielu właściwości, które robią to samo.

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

Firefox wprowadził tę właściwość dla 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 minęły 2 lata i 6 miesięcy, zanim mogliśmy bezpiecznie używać gap. W rzeczywistości dla większości deweloperów czas oczekiwania był znacznie dłuższy, ponieważ musieli oni obsługiwać wersje przeglądarek starsze niż najnowsza. Obsługa właściwości gap w układzie flex była jeszcze bardziej problematyczna, ponieważ nie mogliśmy używać zapytań o funkcje do wykrywania obsługi odstępów w układzie flex. Właściwość gap jest obsługiwana w siatce, więc @supports (gap:1em) zwróci wartość „true”.

Dodatkowym problemem jest to, że gdy nowa funkcja pojawia się w jednej przeglądarce, ludzie zaczynają o niej rozmawiać i udostępniać wersje demonstracyjne. Często zaczyna się to na długo przed tym, jak funkcja pojawi się w stabilnej wersji przeglądarki. Może to być dla deweloperów mylące lub co najmniej frustrujące. Wszędzie mówi się o nowych, atrakcyjnych funkcjach, ale potem okazuje się, że nie można z nich korzystać, ponieważ nie są obsługiwane.

Dlaczego występują luki w obsłudze?

Nie jest to post, który wskazuje jedną przeglądarkę jako powolną. Jeśli przyjrzysz się różnym funkcjom platformy, zauważysz, że różne przeglądarki przodują w różnych funkcjach.

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 dowiedzieć się, jak powinna zachowywać się podsiatka, dlatego ta funkcja pojawiła się najpierw w Firefoksie. Safari jest liderem, jeśli chodzi o nowe, ciekawe funkcje kolorów.

Chociaż jedna przeglądarka może być liderem w prototypowaniu, przedstawiciele wszystkich przeglądarek (i innych organizacji) w grupie roboczej CSS omawiają funkcje CSS. Bardzo ważne jest, aby funkcję można było wdrożyć we wszystkich przeglądarkach i aby nie była ona zaprojektowana w sposób uniemożliwiający jej wdrożenie w jednej z nich. Spowodowałoby to trwałą lukę w obsłudze i brak możliwości korzystania z tej funkcji.

Jednak wdrożenie funkcji musi zostać potraktowane priorytetowo wraz ze wszystkimi innymi możliwymi funkcjami tej przeglądarki. Czasami jednak musimy najpierw wykonać inne zadania, aby ulepszyć przeglądarkę. Świetnym przykładem jest projekt RenderingNG w Chromium. Umożliwiło to wdrożenie podsiatki. Jednak długa przerwa między wprowadzeniem podsiatki w Firefoksie i Chromium wynika z tego, że układ siatki musiał zostać najpierw ponownie zaimplementowany w nowym silniku renderowania.

Problemy

Mamy tu 2 problemy. Pierwszy to problem z interoperacyjnością, czyli fakt, że od momentu, gdy funkcja pojawi się w jednej przeglądarce, do momentu, gdy będzie dostępna wszędzie, może minąć dużo czasu.

Drugi problem dotyczy komunikacji. Jak możemy jasno wskazać, gdzie brakuje wsparcia? Jak możemy udostępniać nowe funkcje bez konieczności dokładnego sprawdzania przez wszystkich, jak dobrze są one obsługiwane?

Interoperacyjność

Przeglądarki już współpracują nad rozwiązaniem problemu z interoperacyjnością. W zeszłym roku Compat 2021 pomógł wypełnić lukę w obsłudze wielu funkcji, w tym właściwości gap w układzie flex. W tym roku w ramach projektu Interop 2022 skupiamy się na 15 funkcjach, a niektóre z nich już zostały ulepszone.

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

Wiadomości

Drugi problem to coś, w czym chętnie pomogę, gdy będziemy rozmawiać o funkcjach na web.dev i developer.chrome.com. Chcę, aby stan funkcji był naprawdę jasny, gdy czytasz nasze treści, i abyśmy mogli zapewnić praktyczne sposoby rozwiązywania problemów z obsługą.

Uruchomiliśmy kilka kursów podstawowych, a wkrótce pojawią się kolejne. Dzięki tym kursom dowiesz się, jak tworzyć nowoczesne strony internetowe przy użyciu podstawowych technologii platformy internetowej. Wymeldowanie:

Pracujemy nad tym, aby treści w tej witrynie skupiały się na tym, z czego możesz bezpiecznie korzystać. Nie jesteśmy jeszcze na tym etapie, ale w najbliższych miesiącach powinny zacząć pojawiać się bardziej praktyczne rozwiązania.

Wspieramy też projekt Open Web Docs, aby przyczynić się do rozwoju dokumentacji otwartej sieci. Dzięki temu mamy doskonałą dokumentację w MDN oraz aktualne dane o zgodności z przeglądarkami. Następnie używamy tych danych na web.dev, aby pokazać obsługę funkcji. Oto aktualna obsługa gap w układzie elastycznym.

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

Jeśli chcesz dowiedzieć się więcej o wizji Chrome dotyczącej internetu oraz o tym, co testujemy w ramach wersji próbnych Origin i Developer, znajdziesz coraz więcej treści na ten temat na naszej siostrzanej stronie – developer.chrome.com. Treści te mogą mieć charakter eksperymentalny lub być obecnie obsługiwane tylko w Chrome, ale zachęcamy do zapoznania się z nimi i przesłania opinii.

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