Tu się pomaga

Ułatwianie tworzenia witryn internetowych

Renata

W rozmowach z deweloperami i w ankietach takich jak stan usług porównywania cen słyszymy wiele razy to samo. Programistom trudno jest tworzyć strony internetowe i aplikacje działające dobrze w przeglądarkach i nie wiedzieć, kiedy można bezpiecznie używać nowych, ciekawych funkcji.

Luka Flexbox

Przykładem problematycznej usługi jest właściwość gap, która umożliwia dodawanie odstępów między elementami siatki lub flex albo kolumnami w kontenerze wielokolorowej. Chociaż od długiego czasu mamy atrybut column-gap w postaci wielu kolumn, najpierw pojawiła się ona w układzie siatki jako grid-gap, podobnie jak grid-column-gap i grid-row-gap.

Krótko po pojawieniu się układu siatki w przeglądarkach usługa została zmieniona na gap oraz nazwy row-gap i column-gap. Następnie wybrano, aby działała też w układzie elastycznym. Zmiana nazwy oznacza, że nie mamy więcej niż jednej usługi o tym samym działaniu.

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

W październiku 2018 roku przeglądarka Firefox wprowadziła obsługę układów elastycznych. Przeglądarka pojawiła się w Chrome dopiero w lipcu 2020 roku, a w kwietniu 2021 roku pojawiła się w Safari. Oznacza to, że do bezpiecznego korzystania z usługi gap upłynęło 2 lata i 6 miesięcy. W rzeczywistości dla większości deweloperów czas oczekiwania był znacznie dłuższy ze względu na konieczność obsługi starszych wersji przeglądarek. Obsługa gap w układzie elastycznym jest bardziej problematyczna, ponieważ nie możemy używać zapytań o funkcje do wykrywania luk w obsłudze w układzie elastycznym. 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 pojawia się w jednej przeglądarce, użytkownicy zaczynają o niej mówić i udostępniać jej wersje demonstracyjne. Często rozpoczyna się on na długo przed wprowadzeniem funkcji w jakiejkolwiek stabilnej przeglądarce. To może być mylące dla deweloperów, a przynajmniej frustrujące. Wiele razy mówi się o nowych, świetnych funkcjach, a później okazuje się, że z powodu braku wsparcia jest to niemożliwe.

Dlaczego liczba wsparcia jest ograniczona?

To nie jest post, który wskazuje na jedną z przeglądarek z powodu powolnej pracy. Analizując funkcje różnych platform, można zauważyć, że różne przeglądarki zajmują czołowe miejsca w zakresie różnych funkcji.

Większość funkcji zostanie wdrożona w jednej przeglądarce. Na przykład specyfikacja układu siatki została najpierw utworzona przez firmę Microsoft i zaimplementowana w postaci początkowej w przeglądarce Internet Explorer 10. Inżynier z Mozilli przygotował wiele pracy, by zrozumieć, jak powinna działać siatka pomocnicza. Dlatego ta funkcja została najpierw udostępniona w przeglądarce Firefox. Widzimy, że Safari jest liderem w dziedzinie nowych, ekscytujących funkcji kolorów.

Choć jedna przeglądarka może stać się liderem w tworzeniu prototypu, przedstawiciele wszystkich przeglądarek (i innych organizacji) w grupie roboczej CSS omawiają funkcje CSS. Bardzo ważne jest, aby daną funkcję można było zaimplementować we wszystkich przeglądarkach oraz aby nie była ona zaprojektowana w sposób uniemożliwiający jej wdrożenie w jednej przeglądarce. Doprowadziło to do trwałego braku pomocy technicznej i braku wdrożenia tej funkcji.

Implementację funkcji należy jednak potraktować priorytetowo obok wszystkich innych funkcji dostępnych w danej przeglądarce. Zdarzają się też sytuacje, w których trzeba zająć się innymi rzeczami, które mają na celu ulepszenie przeglądarki. Świetnym przykładem jest działanie RenderingNG w Chromium. Przetarła ona drogę dla implementacji podrzędnej siatki. Jednak duża różnica między podrzędnymi siatkami dostawy w przeglądarce Firefox i Chromium wynika z konieczności wcześniejszego wdrożenia układu siatki w nowym mechanizmie renderowania.

Problemy

Mamy tu dwa problemy. Pierwszy to problem interoperacyjności, czyli fakt, że od momentu udostępnienia funkcji w jednej przeglądarce do udostępnienia jej wszędzie, może minąć dużo czasu.

Po drugie, problem dotyczy przesyłania wiadomości. Jak możemy podkreślić braki w systemie wsparcia? Jak udostępniamy nowe funkcje, nie zmuszając wszystkich do dokładnego zapoznania się z każdym elementem w celu określenia, jak dobrze jest on obsługiwany?

Interoperacyjność

Przeglądarki pracują już razem nad rozwiązaniem problemu ze interoperacyjnością. W zeszłym roku kampania Compat 2021 pomogła wypełnić lukę w obsłudze szeregu funkcji, w tym właściwości „Luka” w układzie elastycznym. W tym roku w ramach inicjatywy Interop 2022 skupiamy się na 15 funkcjach, z których wiele się już zmieniło.

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

Wiadomości

Chętnie Ci pomogę, gdy rozmawiamy o funkcjach na web.dev i developer.chrome.com. Zależy nam, aby informacje o stanie funkcji były jasno opisane, gdy czytasz nasze treści, i aby zapewnić nam praktyczne sposoby rozwiązywania problemów z pomocą.

Uruchomiliśmy kilka kursów podstawowych, a kolejne pojawią się w przyszłości. Dzięki tym kursom dowiesz się, jak tworzyć zoptymalizowane pod kątem nowoczesnego internetu przy użyciu podstawowych technologii platform internetowych. Wymeldowanie:

Staramy się, aby nasze treści na tej stronie skupiały się na usługach, z których można bezpiecznie korzystać. Jeszcze nie wszystko gotowe, ale w nadchodzących miesiącach możesz zauważyć pewną zmianę w stosunku do kwestii praktycznych.

Uczestniczymy też w tworzeniu otwartej dokumentacji internetowej, korzystając z naszego wsparcia projektu Open Web Dokumenty. Dzięki temu dysponujemy najwyższej jakości dokumentacją w sieci MDN oraz aktualnymi danymi o zgodności przeglądarek. Następnie wykorzystujemy te dane na web.dev, aby pokazać obsługę funkcji. Oto aktualna obsługa gap w układzie elastycznym.

Obsługa przeglądarek

  • 84
  • 84
  • 63
  • 14.1

Jeśli chcesz dowiedzieć się więcej o wizji Chrome dla internetu, a także o rzeczach, nad którymi eksperymentujemy w ramach testów Origin i deweloperów, coraz częściej znajdziesz te materiały na naszej innej stronie – developer.chrome.com. Znajdujące się tam treści mogą być eksperymentalne lub obsługiwane tylko w Chrome, ale zachęcam do zapoznania się z nimi i przekazania opinii na ich temat.

Internet jest obecnie świetniejszy. Mamy nadzieję, że uda nam się pomóc w szybszym udostępnianiu kluczowych funkcji i jasno informować o obecnych brakach, dzięki czemu tworzenie stron internetowych staje się przyjemniejsze i mniej frustrujące.

Fot. Cristofer Maximilian.