Nowości na platformie internetowej w czerwcu

Poznaj ciekawe funkcje, które w czerwcu 2022 r. trafiły do stabilnych i beta wersji przeglądarek internetowych.

Rachel Andrew

stabilne wersje przeglądarek,

W czerwcu stały się one stabilnymi wersjami: Chrome 103 i Firefox 102.

Przekształcanie strumieni i czytelnych strumieni bajtów

Firefox 102 obsługuje strumień transformacji. Umożliwia to przesyłanie danych z ReadableStream do WritableStream i wykonywanie transformacji na elementach. Cieszymy się, że ta funkcja jest dostępna we wszystkich 3 silnikach. To dobry moment, aby dowiedzieć się więcej o strumieniach.

Obsługa przeglądarek

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Źródło

Czytelne strumienie bajtów są teraz obsługiwane w Firefox 102, co umożliwia czytnik BYOB (bring your own buffer) z interfejsem ReadableStreamBYOBReader. Można go używać do przesyłania strumieniowego danych dostarczonych przez dewelopera.

Obsługa przeglądarek

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: nieobsługiwane.

Źródło

Dostęp do czcionek zainstalowanych lokalnie

Chrome 103 zawiera interfejs Local Fonts Access API, który umożliwia dostęp do czcionek zainstalowanych lokalnie przez użytkownika. Po żądaniu dostępu do czcionek zainstalowanych na urządzeniu wywołaj funkcję window.queryLocalFonts(), aby uzyskać tablicę zainstalowanych czcionek.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Funkcja multimediów update

Firefox 102 zawiera funkcję multimedialną update. Służy do sprawdzenia, czy urządzenie wyjściowe może zmodyfikować wygląd treści po ich wyrenderowaniu.

Obsługa przeglądarek

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Źródło

Nowy kod stanu HTTP – wczesne wskazówki dotyczące 103

Chrome 103 wprowadza nowy kod stanu HTTP 103 Wczesne wskazówki. Jeśli serwer lub sieć CDN wie, że do załadowania strony potrzebny jest określony zestaw zasobów podrzędnych, może zalecić przeglądarce wstępne nawiązanie połączenia z źródłami lub nawet wstępne załadowanie zasobów, gdy pojawi się strona, która ich wymaga. Aby korzystać z tej funkcji, musisz zaktualizować serwer lub sieć CDN. Więcej informacji o wczesnych podpowiedziach

Wersje beta przeglądarek

Wersje beta przeglądarki umożliwiają przeglądanie funkcji, które pojawią się w kolejnych wersjach stabilnych. To świetny czas na przetestowanie nowych funkcji lub usunięcia, które mogą wpłynąć na Twoją witrynę, zanim zostaną wprowadzone na całym świecie.

W kwietniu pojawiły się nowe wersje beta: Chrome 104, Firefox 103 i Safari 16.

Nowa składnia zapytań dotyczących zakresu multimediów

Chrome 104 zawiera nową składnię zapytań medialnych z zakresem z poziomu 4 specyfikacji zapytań medialnych. Na przykład zapytanie o multimedia, które wcześniej wyglądało tak:

@media (min-width: 400px) { … }

Teraz można je zapisać w takiej postaci:

@media (width >= 400px) { … }

Obsługa przeglądarek

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Źródło

Region Capture API

Chrome 104 na komputery zawiera też interfejs Region Capture API. Dzięki temu możesz przyciąć i usunąć treści z nagranego filmu przed udostępnieniem.

Safari 16 wprowadza kilka kluczowych funkcji

Safari 16 zapowiada się na kolejną ekscytującą wersję od zespołu Safari. Ta wersja zawiera wiele funkcji, które były dostępne w ramach Interop 2022. Cieszymy się, że udało nam się wprowadzić tak wiele zmian w połowie roku. Poniżej wyróżniam kilka moich ulubionych funkcji, ale więcej informacji znajdziesz w notatkach do wersji.

Podobnie jak wielu innych deweloperów, bardzo się cieszę, że zapytania o rozmiar są obsługiwane w przypadku zapytań w kontenerze. Ta funkcja jest obecnie dostępna w Chrome za pomocą flagi.

Safari 16 obsługuje też wartość subgrid w przypadku atrybutów grid-template-columns i grid-template-rows. Ta funkcja jest już dostępna w Firefoksie i jest w trakcie tworzenia w Chrome. Umożliwia dziedziczenie rozmiaru ścieżki siatki przez zagnieżdżoną siatkę.

Obsługa przeglądarek

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Źródło

W przypadku układu siatki dostępna jest też możliwość animowania ścieżek siatki.

Obsługa przeglądarek

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Metoda showPicker(), która umożliwia kanoniczny sposób wyświetlania selektora przeglądarki dla dat, czasu, kolorów i plików. Więcej informacji znajdziesz w artykule Wyświetlanie selektora przeglądarki w przypadku daty, czasu, koloru i plików.

Obsługa przeglądarek

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

Źródło

Rozwiązaliśmy też problemy z ułatwieniami dostępu w przypadku display: contents, dzięki czemu można bezpiecznie korzystać z tej przydatnej funkcji bez ryzyka usunięcia elementów z drzewa ułatwień dostępu.

Te funkcje beta wkrótce trafią do stabilnych wersji przeglądarek.

Fragment cyklu Nowości w internecie