Nowości na platformie internetowej w sierpniu

Poznaj kilka ciekawych funkcji, które w sierpniu 2022 r. trafiły do stabilnych i beta wersji przeglądarek internetowych.

W sierpniu stałymi wersjami stały się Firefox 104, Chrome 104Chrome 105.

Chrome 104 zawiera osobne właściwości dla przekształceń CSS. Są to właściwości scale, rotatetranslate, których możesz używać do indywidualnego definiowania tych części przekształcenia.

Dzięki temu Chrome dołączy do przeglądarek Firefox i Safari, które już obsługują te usługi.

Obsługa przeglądarek

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1.

Źródło

Składnia zapytań dotyczących multimediów

Chrome 104 zawiera też składnię zakresu zapytania o multimedia. Ta funkcja została już wdrożona przez Firefoxa i ułatwia porządkowanie zapytań dotyczących multimediów. Na przykład zapytanie o multimedia:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Można je zapisać za pomocą operatora porównywania:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Obsługa przeglądarek

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

Źródło

Zapytania dotyczące kontenerów

Chrome 105 to ekscytująca wersja, która wprowadza na platformę internetową długo oczekiwaną funkcję zapytań kontenera. Zapytania o multimedia umożliwiają wysyłanie zapytań na podstawie rozmiaru widocznego obszaru, a zapytania o kontenery umożliwiają wysyłanie zapytań na podstawie rozmiaru kontenera.

Obsługa przeglądarek

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Źródło

Aby korzystać z zapytań dotyczących kontenerów, włącz zawieranie za pomocą właściwości container-type.

.card-container {
  container-type: inline-size;
}

Ustawienie container-type na inline-size wysyła zapytanie o rozmiar elementu nadrzędnego w kierunku inline. W przypadku języków łacińskich, takich jak angielski, będzie to szerokość karty, ponieważ tekst jest wyświetlany od lewej do prawej.

Teraz możemy użyć tego kontenera do zastosowania stylów do dowolnego z jego elementów potomnych za pomocą @container:

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Więcej informacji o zapytaniach dotyczących kontenerów znajdziesz w poście @container i :has(): 2 nowe potężne interfejsy API do obsługi interakcji z użytkownikiem w Chromium 105.

Pseudoklasa nadrzędna :has().

W powyższym poście wspominany jest też użytkownik :has(). Ta nowa pseudoklasa CSS :has() umożliwia kierowanie na element nadrzędny i elementy równe na podstawie warunków. Więcej informacji znajdziesz w artykule :has() – selektor rodziny.

Obsługa przeglądarek

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Źródło

Sanitizer API

W Chrome 105 jest też dostępny interfejs Sanitizer API. Ten interfejs API wdraża funkcję uszlachetniania w ramach platformy, aby pomóc w usuwaniu luk w zabezpieczeniach związanych z skryptami między witrynami.

W Chrome 105 dostępna jest też pseudoklasa CSS :modal. Dopasowuje element, który jest w stanie, w którym wyklucza wszystkie interakcje z elementami zewnętrznymi. Na przykład <dialog> otwarty za pomocą interfejsu API showModal().

Obsługa przeglądarek

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6.

Źródło

metody findLast() i findLastIndex();

Firefox 104 dodaje obsługę flagi dla metod Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast()TypedArray.prototype.findLastIndex(). Są one używane do znajdowania wartości i indeksu (odpowiednio) ostatniego elementu w tablicy lub TypedArray, który pasuje do podanej funkcji testowej.

Obsługa przeglądarek

  • Chrome: 97.
  • Edge: 97.
  • Firefox: 104.
  • Safari: 15.4.

Źródło

Wersje beta przeglądarek

Wersje beta przeglądarki umożliwiają przeglądanie funkcji, które pojawią się w następnej wersji stabilnej. To świetny czas na przetestowanie nowych funkcji lub usunięcia, które mogą wpłynąć na Twoją witrynę, zanim zostaną udostępnione publicznie.

Ze względu na to, że daty wydania przypadają na koniec miesiąca, w sierpniu udostępniliśmy tylko nową wersję beta Firefoxa 105, która nie zawiera obecnie zbyt wielu szczegółów.

Wersja beta Safari 16, o której wspominaliśmy w czerwcu, jest nadal dostępna.

Fragment cyklu Nowości w internecie