Ta strona została przetłumaczona przez Cloud Translation API.

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.

Rachel Andrew

Wersje stabilne przeglądarki

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

Poszczególne przekształcenia

Chrome 104 zawiera poszczególne właściwości przekształceń CSS. Są to właściwości scale, rotate i translate, 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

Źródło

Składnia zapytań dotyczących nowych mediów

Chrome 104 zawiera też składnię zakresu zapytań o multimedia. Ta funkcja jest już dostępna w przeglądarce Firefox i ułatwia obsługę zapytań o multimedia. 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

Ź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ń kontenerowych. 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

Ź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, aby zastosować style do dowolnego elementu podrzędnego 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 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 oraz elementy pokrewne na podstawie warunków. Więcej informacji znajdziesz w artykule :has() – selektor rodziny.

Obsługa przeglądarek

Ź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 usuwać luki w zabezpieczeniach związane 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 spoza niego. Na przykład identyfikator <dialog> został otwarty za pomocą interfejsu API showModal().

Obsługa przeglądarek

Źródło

Metody findLast() i findLastIndex()

W przeglądarce Firefox w wersji 104 dodano obsługę flagi metod Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() i TypedArray.prototype.findLastIndex(). Służą one do znajdowania wartości i indeksu (respectiveSlate) ostatniego elementu, który jest zgodny z podanym parametrem testowym lub TypedSlate.

Obsługa przeglądarek

Ź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 świetna okazja, by przetestować nowe funkcje lub usunięcia, które mogą mieć wpływ na Twoją witrynę jeszcze przed udostępnieniem ich wszystkim użytkownikom.

Ze względu na to, że daty wydania przypadają na koniec miesiąca, w sierpniu jedyną nową wersją beta była Firefox 105, która obecnie zawiera niewiele szczegółów.

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

Cześć cyklu Nowości w internecie