Tu się pomaga

Ułatwianie tworzenia treści pod kątem internetu

Rachel Andrew

Gdy rozmawiamy z deweloperami, indywidualnie lub w ramach ankiet, takich jak State of CSS, słyszymy te same rzeczy. Programistom ciężko jest tworzyć witryny i aplikacje działające dobrze w różnych przeglądarkach, więc ciężko jest określić, kiedy nowe, ciekawe funkcje będą bezpieczne do wykorzystania.

Luka Flexbox

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. Mimo że od dawna korzystamy z funkcji column-gap w trybie multicol, usługa najpierw pojawiła się w układzie siatki jako grid-gap oraz grid-column-gap i grid-row-gap.

Tuż po tym, jak układ siatki pojawił się w przeglądarkach, nazwa usługi została zmieniona na gap (wraz z atrybutami row-gap i column-gap). Następnie określono, że ma ona działać również w układzie elastycznym. Zmiana nazwy oznacza, że nie mamy wielu 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) zwraca wartość „prawda”.

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. To może być kłopotliwe dla programistów, a przynajmniej 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?

To nie jest post wskazujący na powolne działanie jednej przeglądarki. 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 wprowadzona w pierwszej formie w Internet Explorerze 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. Spowodowałoby to trwałą lukę w obsługiwanych funkcjach i ograniczyło stosowanie tej funkcji.

Jeśli jednak chodzi o wdrożenie jakiejś funkcji, musi ona być traktowana priorytetowo, podobnie jak pozostałe funkcje dostępne 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 przecierało szlak dla wdrożenia podsieci, jednak długa przerwa między podsiatką wysyłki w Firefoksie i Chromium wynika z konieczności ponownego wdrożenia układu siatki w nowym mechanizmie 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 jest ona dostępna wszędzie, może minąć dużo czasu.

Drugi problem dotyczy przesyłania wiadomości. 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żdej z nich, aby dowiedzieć się, jak dobrze są one obsługiwane?

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 odstępu w układzie elastycznym. W tym roku Interop 2022 skupia się na 15 funkcjach, a niektóre z nich 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 pomogę, omawiając funkcje dostępne na web.dev i developer.chrome.com. Zależy mi, aby stan funkcji był jak najbardziej zrozumiały, gdy czytasz nasze treści, i przedstawimy 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:

Pracujemy nad tym, aby treści na tej stronie dotyczyły tych, z których można bezpiecznie korzystać. 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, wspierając projekt Open Web Docs. Dzięki temu mamy pierwszorzędną dokumentację w MDN oraz aktualne dane o zgodności z przeglądarkami. Następnie wykorzystujemy te dane na web.dev, aby dać Ci pewność, że obsługujesz poszczególne funkcje. 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, czyli o tym, nad czym eksperymentujemy w wersjach próbnych origin i deweloperów, znajdziesz te treści na naszej siostrzanej stronie developer.chrome.com. Może ona być eksperymentalna lub obsługiwana tylko w Chrome, ale chętnie zapoznamy się z nią i przekażemy Ci swoją opinię.

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.