Tu się pomaga

Ułatwienie tworzenia aplikacji internetowych.

Gdy rozmawiamy z deweloperami, indywidualnie lub w ramach ankiet, takich jak State of CSS, słyszymy te same rzeczy. Deweloperzy mają trudności z tworzeniem stron internetowych i aplikacji, które dobrze działają w różnych przeglądarkach, oraz z ustaleniem, kiedy nowe funkcje są bezpieczne w użyciu.

Przerwa w flexboxie

Przykładem problematycznej usługi jest usługa gap, która umożliwia tworzenie przerw między elementami siatki lub flex oraz kolumnami w kontenerze multicol. Chociaż usługa column-gap była już od dawna dostępna w wielu kolumnach, to w układzie siatki pojawiła się dopiero jako grid-gap, wraz z usługami grid-column-gapgrid-row-gap.

Zaraz po wprowadzeniu układu siatki do przeglądarek nazwa tej właściwości została zmieniona na gap, podobnie jak nazwy row-gapcolumn-gap. Następnie określono, że ma ona działać również w układzie elastycznym. Zmiana nazwy oznacza, że nie mamy już kilku usług, które robią to samo.

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

W październiku 2018 r. w Firefoxie została udostępniona właściwość flex layout. W Chrome pojawiła się dopiero w lipcu 2020 r., a w Safari dopiero w kwietniu 2021 r. Oznacza to, że zanim mogliśmy bezpiecznie używać gap, minęły 2 lata i 6 miesięcy. W rzeczywistości większość deweloperów musiała czekać znacznie dłużej, ponieważ musiała obsługiwać starsze wersje przeglądarek niż najnowsza. Obsługa gap w elastycznym układzie jest trudniejsza, ponieważ nie możemy używać zapytań dotyczących funkcji do wykrywania obsługi przerw w elastycznym układzie. 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 pojawi się w jednej przeglądarce, użytkownicy zaczynają o niej mówić i udostępniać prezentacje. Często zaczyna się to na długo przed tym, zanim funkcja zostanie wdrożona w stabilnej wersji przeglądarki. Może to wprowadzać w błąd deweloperów lub przynajmniej być dla nich frustrujące. Wszędzie mówi się o nowych, świetnych funkcjach, a potem okazuje się, że nie można ich używać z powodu braku obsługi.

Dlaczego występują luki w obsługiwanych językach?

Nie jest to post, w którym krytykujemy jedną przeglądarkę za jej powolność. Jeśli przyjrzysz się funkcjom różnych platform, zauważysz, że w różnych przypadkach czołówkę zajmują różne przeglądarki.

Większość funkcji zostanie zaprototypowana w jednej przeglądarce. Na przykład specyfikacja układu siatki została po raz pierwszy stworzona przez firmę Microsoft i zaimplementowana w początkowej formie w przeglądarce Internet Explorer 10. Inżynier z Mozilla włożył wiele pracy w określenie sposobu działania subgridu, dlatego ta funkcja została najpierw wprowadzona do Firefoksa. Widzimy, że Safari wyprzedza konkurencję pod względem nowych funkcji związanych z kolorami.

Podczas tworzenia prototypów może brać udział jedna przeglądarka, ale przedstawiciele wszystkich przeglądarek (i innych organizacji) w ramach grupy roboczej CSS omawiają funkcje CSS. Bardzo ważne jest, aby funkcja mogła być implementowana we wszystkich przeglądarkach i nie była zaprojektowana w taki sposób, aby jej wdrożenie było niemożliwe w jednej z nich. Spowoduje to trwałą lukę w obsługiwanych funkcjach i niechęć do korzystania z tej funkcji.

W przypadku wdrażania funkcji należy jednak nadać jej priorytet wśród wszystkich innych funkcji w danej przeglądarce. Czasami też wstrzymujemy wprowadzanie zmian, ponieważ wymagają one innych działań, które muszą zostać wykonane, aby poprawić przeglądarkę. Doskonałym przykładem jest praca nad RenderingNG w Chromium. To otworzyło drogę do wdrożenia subgridu, ale długa przerwa między wersjami Firefoxa i Chromium wynika z konieczności ponownego zaimplementowania układu siatki w nowym silniku renderowania.

Problemy

Mamy tu 2 problemy. Pierwszym jest problem interoperacyjności, czyli fakt, że od momentu wprowadzenia funkcji do jednej przeglądarki do momentu, gdy staje się ona dostępna wszędzie, może minąć dużo czasu.

Drugi to problem z wiadomościami. Jak możemy wyraźnie wskazać luki w obsługiwaniu? Jak udostępniać nowe funkcje, nie zmuszając użytkowników do dokładnego sprawdzania każdego elementu, aby dowiedzieć się, jak dobrze jest obsługiwany?

Interoperacyjność

Firmy produkujące przeglądarki współpracują już ze sobą nad rozwiązaniem problemu interoperacyjności. W zeszłym roku Compat 2021 pozwolił na uzupełnienie obsługi niektórych funkcji, w tym właściwości przerwy w układzie elastycznym. W tym roku Interop 2022 skupia się na 15 funkcjach, z których niektóre są już w trakcie wdrażania.

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

Wiadomości

Drugi problem to coś, w czym chętnie Ci pomożemy, gdy będziemy omawiać funkcje na web.dev i developer.chrome.com. Chcemy, aby stan funkcji był naprawdę jasny, gdy czytasz nasze treści, oraz abyśmy mogli zapewnić praktyczne sposoby rozwiązywania problemów z pomocą.

Wprowadziliśmy już kilka podstawowych szkoleń, a wkrótce pojawią się kolejne. Te kursy pomogą Ci nauczyć się tworzenia aplikacji internetowych przy użyciu podstawowych technologii platformy internetowej. Wymeldowanie:

Staramy się, aby treści w tej witrynie dotyczyły tylko tych funkcji, których możesz bezpiecznie używać. Nie jesteśmy jeszcze na tym etapie, ale w najbliższych miesiącach zaczniesz dostrzegać pewne zmiany w tym zakresie.

Wspieramy też dokumentację otwartej sieci, ponieważ wspieramy projekt Open Web Docs. Dzięki temu mamy pierwszorzędną dokumentację na MDN oraz aktualne dane o zgodności z przeglądarkami. Następnie używamy tych danych na stronie web.dev, aby wyświetlać informacje o obsługiwanych funkcjach. Oto aktualna obsługa gap w układzie elastycznym.

Obsługa przeglądarek

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

Jeśli chcesz dowiedzieć się więcej o wizji Chrome dotyczącej internetu i o tym, nad czym eksperymentujemy w ramach wersji Origin i Developer, zajrzyj na naszą stronę developer.chrome.com. Znajdziesz tam treści, które są jeszcze eksperymentalne lub są obsługiwane tylko w Chrome, ale chętnie poznamy Twoją opinię na ich temat.

To naprawdę ekscytujący czas dla internetu. Mamy nadzieję, że uda nam się szybciej udostępnić Ci najważniejsze funkcje i wyjaśnić, jakie luki jeszcze występują, dzięki czemu tworzenie stron internetowych będzie przyjemniejsze i mniej frustrujące.

Zdjęcie autorstwa Cristofer Maximilian.